refactor(ui): minor tweaks

sfxcode · Aug 4, 2024 · dc1351b · dc1351b
1 parent 7f09b5a
commit dc1351b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 36 deletions.
diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss
@@ -36,7 +36,7 @@ html {
 }
 
 .card {
-  padding: 1.5rem;
+  padding: 1rem;
   color: var(--p-text-color);
   margin-bottom: 1rem;
   border-radius: $borderRadius;

diff --git a/app/layouts/default.vue b/app/layouts/default.vue
@@ -8,7 +8,7 @@ const isOnMobile = useState<boolean>('isOnMobile')
     <AppSidebar />
     <div id="workspace" :class="[{ collapsed }, { mobile: isOnMobile }]">
       <AppTopbar />
-      <div class="m-4">
+      <div class="m-1 mt-4">
         <slot />
       </div>
     </div>

diff --git a/app/pages/prime/messages.vue b/app/pages/prime/messages.vue
@@ -12,44 +12,42 @@ function doSomeDeleteAction(idToDelete: number) {
 
 <template>
   <div class="card">
-    <div class="card">
-      <h2>PrimeVue Toast Demo</h2>
+    <h2>PrimeVue Toast Demo</h2>
 
-      <div class="flex flex-row gap-4">
-        <div>
-          <Button label="Success" class="p-button-success" @click="showSuccessMessage('Success Message', 'Message Content')" />
-        </div>
-        <div>
-          <Button label="Info" class="p-button-info" @click="showInfoMessage('Info Message', 'Message Content')" />
-        </div>
-        <div>
-          <Button label="Warn" class="p-button-warning" @click="showWarnMessage('Warn Message', 'Message Content')" />
-        </div>
-        <div>
-          <Button label="Error" class="p-button-danger" @click="showErrorMessage('Error Message', 'Message Content')" />
-        </div>
-        <Toast />
+    <div class="flex flex-row gap-4">
+      <div>
+        <Button label="Success" class="p-button-success" @click="showSuccessMessage('Success Message', 'Message Content')" />
       </div>
-      <h2>Confirmation</h2>
-      <div class="flex flex-row gap-4">
-        <Button label="Trigger action with confirmation" class="p-button-info" @click="confirmAction(doSomeAction)" />
-        <Button label="Trigger delete action with confirmation" class="p-button-danger" @click="confirmDelete(1, doSomeDeleteAction)" />
+      <div>
+        <Button label="Info" class="p-button-info" @click="showInfoMessage('Info Message', 'Message Content')" />
       </div>
-      <h2>Messages</h2>
-      <div class="flex flex-row gap-4">
-        <Message severity="success">
-          Success Message Content
-        </Message>
-        <Message severity="info">
-          Info Message Content
-        </Message>
-        <Message severity="warn">
-          Warning Message Content
-        </Message>
-        <Message severity="error">
-          Error Message Content
-        </Message>
+      <div>
+        <Button label="Warn" class="p-button-warning" @click="showWarnMessage('Warn Message', 'Message Content')" />
       </div>
+      <div>
+        <Button label="Error" class="p-button-danger" @click="showErrorMessage('Error Message', 'Message Content')" />
+      </div>
+      <Toast />
+    </div>
+    <h2>Confirmation</h2>
+    <div class="flex flex-row gap-4">
+      <Button label="Trigger action with confirmation" class="p-button-info" @click="confirmAction(doSomeAction)" />
+      <Button label="Trigger delete action with confirmation" class="p-button-danger" @click="confirmDelete(1, doSomeDeleteAction)" />
+    </div>
+    <h2>Messages</h2>
+    <div class="flex flex-row gap-4 flex-wrap">
+      <Message severity="success">
+        Success Message Content
+      </Message>
+      <Message severity="info">
+        Info Message Content
+      </Message>
+      <Message severity="warn">
+        Warning Message Content
+      </Message>
+      <Message severity="error">
+        Error Message Content
+      </Message>
     </div>
   </div>
 </template>