From 781a43079fae36a5f82522a1a54edc6e8891d8cc Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 10 Jan 2025 10:03:02 +0300
Subject: [PATCH] Update messages and add line-height

---
 src/app/pages/uikit/messagesdemo.ts | 12 ++++++------
 src/app/pages/uikit/miscdemo.ts     | 20 ++++++++++----------
 src/assets/layout/_core.scss        |  1 +
 src/styles.scss                     |  5 +----
 src/tailwind.css                    |  3 +++
 5 files changed, 21 insertions(+), 20 deletions(-)
 create mode 100644 src/tailwind.css

diff --git a/src/app/pages/uikit/messagesdemo.ts b/src/app/pages/uikit/messagesdemo.ts
index 43cbe62..e5405ca 100644
--- a/src/app/pages/uikit/messagesdemo.ts
+++ b/src/app/pages/uikit/messagesdemo.ts
@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { MessageService, ToastMessageOptions } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
 import { InputTextModule } from 'primeng/inputtext';
-import { ToastModule } from 'primeng/toast';
 import { MessageModule } from 'primeng/message';
-import { FormsModule } from '@angular/forms';
+import { ToastModule } from 'primeng/toast';
 
 @Component({
     selector: 'app-messages-demo',
@@ -25,13 +25,13 @@ import { FormsModule } from '@angular/forms';
                     </div>
 
                     <div class="font-semibold text-xl mt-4 mb-4">Inline</div>
-                    <div class="flex flex-wrap mb-4 gap-2">
+                    <div class="flex flex-col mb-4 gap-1">
                         <input pInputText [(ngModel)]="username" placeholder="Username" aria-label="username" class="ng-dirty ng-invalid" />
-                        <p-message severity="error">Username is required</p-message>
+                        <p-message severity="error" variant="simple" size="small">Username is required</p-message>
                     </div>
-                    <div class="flex flex-wrap gap-2">
+                    <div class="flex flex-col flex-wrap gap-1">
                         <input pInputText [(ngModel)]="email" placeholder="Email" aria-label="email" class="ng-dirty ng-invalid" />
-                        <p-message severity="error" icon="pi pi-times-circle" />
+                        <p-message severity="error" variant="simple" size="small">Email is required</p-message>
                     </div>
                 </div>
             </div>
diff --git a/src/app/pages/uikit/miscdemo.ts b/src/app/pages/uikit/miscdemo.ts
index 8057ad6..eaa384a 100644
--- a/src/app/pages/uikit/miscdemo.ts
+++ b/src/app/pages/uikit/miscdemo.ts
@@ -1,16 +1,16 @@
-import { Component } from '@angular/core';
-import { ProgressBarModule } from 'primeng/progressbar';
-import { AvatarGroupModule } from 'primeng/avatargroup';
 import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { AvatarModule } from 'primeng/avatar';
+import { AvatarGroupModule } from 'primeng/avatargroup';
+import { BadgeModule } from 'primeng/badge';
+import { ButtonModule } from 'primeng/button';
+import { ChipModule } from 'primeng/chip';
+import { OverlayBadgeModule } from 'primeng/overlaybadge';
+import { ProgressBarModule } from 'primeng/progressbar';
+import { ScrollPanelModule } from 'primeng/scrollpanel';
 import { ScrollTopModule } from 'primeng/scrolltop';
 import { SkeletonModule } from 'primeng/skeleton';
-import { BadgeModule } from 'primeng/badge';
-import { AvatarModule } from 'primeng/avatar';
-import { ScrollPanelModule } from 'primeng/scrollpanel';
 import { TagModule } from 'primeng/tag';
-import { ChipModule } from 'primeng/chip';
-import { ButtonModule } from 'primeng/button';
-import { OverlayBadgeModule } from 'primeng/overlaybadge';
 
 @Component({
     selector: 'app-misc-demo',
@@ -136,7 +136,7 @@ import { OverlayBadgeModule } from 'primeng/overlaybadge';
                         <p-tag icon="pi pi-user" value="Primary"></p-tag>
                         <p-tag icon="pi pi-check" severity="success" value="Success"></p-tag>
                         <p-tag icon="pi pi-info-circle" severity="info" value="Info"></p-tag>
-                        <p-tag con="pi pi-exclamation-triangle" severity="warn" value="Warning"></p-tag>
+                        <p-tag icon="pi pi-exclamation-triangle" severity="warn" value="Warning"></p-tag>
                         <p-tag icon="pi pi-times" severity="danger" value="Danger"></p-tag>
                     </div>
                 </div>
diff --git a/src/assets/layout/_core.scss b/src/assets/layout/_core.scss
index 6ea2b16..8dee918 100644
--- a/src/assets/layout/_core.scss
+++ b/src/assets/layout/_core.scss
@@ -12,6 +12,7 @@ body {
     min-height: 100%;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    line-height: 1.2;
 }
 
 a {
diff --git a/src/styles.scss b/src/styles.scss
index dbd16ad..933b45c 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,8 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
+@use './tailwind.css';
 @use './assets/layout/layout.scss';
 @use 'primeicons/primeicons.css';
 @use './assets/demo/demo.scss';
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/src/tailwind.css b/src/tailwind.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/src/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;