feat: calmer appearance

src/layouts/admin.blade.php

@@ -32,7 +32,7 @@ class="px-3">
                 </div>
             </a>
             <div class="d-flex gap-3 flex-grow-1 justify-content-between">
-                <button class="navbar-toggler shadow-sm rounded collapsed" type="button" data-toggle="collapse"
+                <button class="navbar-toggler rounded collapsed" type="button" data-toggle="collapse"
                     data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false"
                     aria-label="Toggle navigation">
                     <i class="bi bi-list"></i>

src/layouts/customer.blade.php

@@ -32,7 +32,7 @@ class="px-3">
                 </div>
             </a>
             <div class="d-flex gap-3 flex-grow-1 justify-content-between">
-                <button class="navbar-toggler shadow-sm rounded collapsed" type="button" data-toggle="collapse"
+                <button class="navbar-toggler rounded collapsed" type="button" data-toggle="collapse"
                     data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false"
                     aria-label="Toggle navigation">
                     <i class="bi bi-list"></i>

src/layouts/public.blade.php

@@ -32,7 +32,7 @@ class="px-3">
                 </div>
             </a>
             <div class="d-flex gap-3 flex-grow-1 justify-content-between">
-                <button class="navbar-toggler shadow-sm rounded collapsed" type="button" data-toggle="collapse"
+                <button class="navbar-toggler rounded collapsed" type="button" data-toggle="collapse"
                     data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false"
                     aria-label="Toggle navigation">
                     <i class="bi bi-list"></i>

src/scss/_base.scss

@@ -1,6 +1,6 @@
 // Custom
 body {
-    font-family: "Space Grotesk", sans-serif;
+    font-family: "Inter", sans-serif;
     background-color: var(--gray);
 }
 
@@ -41,6 +41,6 @@ body {
 .card {
     .card-header,
     .card-footer {
-        background-color: var(--gray);
+        background-color: var(--white);
     }
 }

src/scss/_frame.scss

@@ -5,7 +5,7 @@
     position: relative;
 
     &::before {
-        background: url('/themes/aurora/images/pattern.svg'), linear-gradient(0deg, rgba(255 255 255 / 100%) 0%, rgba(255 255 255 / 0%) 100%);
+        background: linear-gradient(0deg, rgba(255 255 255 / 100%) 0%, rgba(255 255 255 / 0%) 100%);
         background-blend-mode: overlay;
         content: "";
         display: block;
@@ -82,7 +82,7 @@
     flex-wrap: wrap;
 
     &::before {
-        background: url('/themes/aurora/images/pattern.svg'), linear-gradient(0deg, rgba(255 255 255 / 100%) 0%, rgba(255 255 255 / 0%) 100%);
+        background: linear-gradient(0deg, rgba(255 255 255 / 100%) 0%, rgba(255 255 255 / 0%) 100%);
         background-blend-mode: overlay;
         content: "";
         display: block;

src/scss/_variables.scss

@@ -19,4 +19,11 @@ $teal: #4dc0b5;
 $cyan: #6cb2eb;
 
 // Border
-$border-radius: 0.25rem;
+$border-radius: 0.475rem;
+$badge-border-radius: 0.33rem;
+
+// Padding
+$btn-padding-y: 0.5rem;
+$btn-padding-x: 1rem;
+$input-padding-y: 0.75rem;
+$input-padding-x: 1rem;

src/scss/app.scss

@@ -1,5 +1,5 @@
 // Fonts
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 // Variables
 @import 'variables';
@@ -30,7 +30,7 @@ main {
 }
 
 .navbar-brand {
-    width: 250px;
+    width: calc(350px - 3.75rem);
     max-width: 100%;
 }
 
@@ -347,14 +347,14 @@ main {
                 &:not(.dropdown-indicator) {
                     align-items: center;
                     background-color: var(--gray);
-                    border-radius: 0.25rem;
+                    border-radius: $border-radius;
                     color: var(--primary);
                     display: flex;
                     font-size: 1rem;
-                    min-height: 2.25rem;
+                    min-height: 2.5rem;
                     justify-content: center;
                     transition-duration: .25s;
-                    min-width: 2.25rem;
+                    min-width: 2.5rem;
                 }
             }
 
@@ -588,17 +588,17 @@ input[type=radio] {
 }
 
 .modal-content {
-    border-radius: calc($border-radius * 2);
+    border-radius: $border-radius;
     box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
 
     .modal-header {
-        border-top-left-radius: calc($border-radius * 2);
-        border-top-right-radius: calc($border-radius * 2);
+        border-top-left-radius: $border-radius;
+        border-top-right-radius: $border-radius;
     }
 
     .modal-footer {
-        border-bottom-left-radius: calc($border-radius * 2);
-        border-bottom-right-radius: calc($border-radius * 2);
+        border-bottom-left-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
     }
 }
 
@@ -624,7 +624,7 @@ input[type=radio] {
 
 .card {
     border: none;
-    border-radius: calc($border-radius * 2);
+    border-radius: $border-radius;
     box-shadow: $box-shadow-sm;
     overflow: hidden;
 
@@ -680,6 +680,18 @@ input[type=radio] {
             }
         }
     }
+
+    .card-header {
+        i {
+            border-bottom-right-radius: $border-radius;
+        }
+    }
+
+    .card-footer {
+        i {
+            border-top-right-radius: $border-radius;
+        }
+    }
 }
 
 a {
@@ -736,7 +748,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 }
 
 ::-webkit-scrollbar {
-    width: 0.625rem;
+    width: 0.5rem;
 }
 
 ::-webkit-scrollbar-track {