From 2f4d8f785d72a35b5cbff5b3585aeda7fe27730f Mon Sep 17 00:00:00 2001
From: Marcel Menk <marcel.menk@forepath.io>
Date: Fri, 8 Aug 2025 18:02:41 +0200
Subject: [PATCH] feat: calmer appearance

---
 src/layouts/admin.blade.php    |  2 +-
 src/layouts/customer.blade.php |  2 +-
 src/layouts/public.blade.php   |  2 +-
 src/scss/_base.scss            |  4 ++--
 src/scss/_frame.scss           |  4 ++--
 src/scss/_variables.scss       |  9 ++++++++-
 src/scss/app.scss              | 36 ++++++++++++++++++++++------------
 7 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/layouts/admin.blade.php b/src/layouts/admin.blade.php
index 9c999e2..6b392e7 100644
--- a/src/layouts/admin.blade.php
+++ b/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>
diff --git a/src/layouts/customer.blade.php b/src/layouts/customer.blade.php
index d808b5f..b6e03e0 100644
--- a/src/layouts/customer.blade.php
+++ b/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>
diff --git a/src/layouts/public.blade.php b/src/layouts/public.blade.php
index 4f55c32..16b1d25 100644
--- a/src/layouts/public.blade.php
+++ b/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>
diff --git a/src/scss/_base.scss b/src/scss/_base.scss
index 3cd9153..12d34ad 100644
--- a/src/scss/_base.scss
+++ b/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);
     }
 }
diff --git a/src/scss/_frame.scss b/src/scss/_frame.scss
index b914215..77aa474 100644
--- a/src/scss/_frame.scss
+++ b/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;
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index fe82d6e..a01ca9b 100644
--- a/src/scss/_variables.scss
+++ b/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;
\ No newline at end of file
diff --git a/src/scss/app.scss b/src/scss/app.scss
index 05f0cc5..6728dfc 100644
--- a/src/scss/app.scss
+++ b/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 {