replace external Google Fonts with local @fontsource Nunito

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

package-lock.json

@@ -10,6 +10,7 @@
                 "jquery": "^3.7.1"
             },
             "devDependencies": {
+                "@fontsource/nunito": "^5.2.7",
                 "@popperjs/core": "^2.11.6",
                 "autoprefixer": "^10.4.20",
                 "axios": "^1.7.4",
@@ -446,6 +447,16 @@
                 "node": ">=18"
             }
         },
+        "node_modules/@fontsource/nunito": {
+            "version": "5.2.7",
+            "resolved": "https://registry.npmjs.org/@fontsource/nunito/-/nunito-5.2.7.tgz",
+            "integrity": "sha512-pmtBq0H9ex9nk+RtJYEJOD9pag393iHETnl/PVKleF4i06cd0ttngK5ZCTgYb5eOqR3Xdlrjtev8m7bmgYprew==",
+            "dev": true,
+            "license": "OFL-1.1",
+            "funding": {
+                "url": "https://github.com/sponsors/ayuhito"
+            }
+        },
         "node_modules/@isaacs/cliui": {
             "version": "8.0.2",
             "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",

package.json

@@ -6,6 +6,7 @@
         "dev": "vite"
     },
     "devDependencies": {
+        "@fontsource/nunito": "^5.2.7",
         "@popperjs/core": "^2.11.6",
         "autoprefixer": "^10.4.20",
         "axios": "^1.7.4",

resources/sass/app.scss

@@ -1,5 +1,13 @@
-// Fonts
-//@import url('https://fonts.bunny.net/css?family=Nunito');
+// Fonts - local Nunito via @fontsource
+@import "@fontsource/nunito/400.css";
+@import "@fontsource/nunito/400-italic.css";
+@import "@fontsource/nunito/600.css";
+@import "@fontsource/nunito/700.css";
+@import "@fontsource/nunito/800.css";
+
+body {
+  font-family: 'Nunito', sans-serif;
+}
 
 // Variables
 @import 'variables';
@@ -118,6 +126,33 @@ td p {
   background-color: #f2f7ff;
 }
 
+.page-header-row {
+  align-items: center;
+}
+
+.page-header-title h3 {
+  margin-bottom: 0;
+}
+
+.page-header-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.page-action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+}
+
+.page-action-btn__icon {
+  line-height: 1;
+}
+
 .table-interactive tbody tr.is-selected > td {
   background-color: #dbe7ff;
 }
@@ -479,6 +514,72 @@ td p {
 }
 
 @media (max-width: 767.98px) {
+  .page-header-row {
+    row-gap: 0.5rem;
+  }
+
+  .page-header-title {
+    order: 1;
+  }
+
+  .page-header-year {
+    order: 2;
+    width: auto;
+  }
+
+  .page-header-actions {
+    order: 3;
+    width: auto;
+    margin-left: auto;
+    justify-content: flex-end;
+    gap: 0.35rem;
+  }
+
+  .page-header-year .dropdown > .btn,
+  .page-header-year .dropdown > button {
+    font-size: 1.5rem !important;
+  }
+
+  .page-action-btn {
+    min-width: 2.2rem;
+    min-height: 2.2rem;
+    padding-left: 0.55rem !important;
+    padding-right: 0.55rem !important;
+  }
+
+  .page-action-btn__label {
+    display: none;
+  }
+
+  .navbar {
+    min-height: 3rem;
+  }
+
+  .navbar .container-fluid {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+
+  .navbar-brand {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+
+  .navbar-toggler {
+    padding: 0.2rem 0.45rem;
+    font-size: 0.95rem;
+  }
+
+  .navbar .nav-link {
+    padding-top: 0.35rem;
+    padding-bottom: 0.35rem;
+  }
+
+  .notification-bell-link {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+
   .alerts {
     position: fixed;
     left: 0;
@@ -509,7 +610,18 @@ td p {
   }
 
   .table {
-    font-size: 0.875rem;
+    font-size: 0.72rem;
+  }
+
+  .table th,
+  .table td {
+    padding: 0.35rem 0.45rem;
+  }
+
+  .js-main-table-scroll thead th,
+  .js-subtable-scroll thead th {
+    font-size: 0.68rem;
+    padding: 0.3rem 0.35rem;
   }
 
   .vertical,
@@ -578,6 +690,133 @@ td p {
   cursor: pointer;
 }
 
+.mobile-date-picker-open {
+  overflow: hidden;
+}
+
+.mobile-date-picker {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  background: rgba(15, 23, 42, 0.42);
+  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
+}
+
+.mobile-date-picker[hidden] {
+  display: none !important;
+}
+
+.mobile-date-picker__dialog {
+  background: #fff;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.mobile-date-picker__header,
+.mobile-date-picker__month-nav,
+.mobile-date-picker__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 1rem 1rem 0;
+}
+
+.mobile-date-picker__title {
+  font-size: 1rem;
+  font-weight: 600;
+  text-align: center;
+  flex: 1;
+}
+
+.mobile-date-picker__close,
+.mobile-date-picker__today,
+.mobile-date-picker__nav {
+  text-decoration: none;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.mobile-date-picker__month-nav {
+  padding-top: 0.5rem;
+}
+
+.mobile-date-picker__month-label {
+  font-size: 1.05rem;
+  font-weight: 700;
+  text-align: center;
+  flex: 1;
+}
+
+.mobile-date-picker__weekdays,
+.mobile-date-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 0.35rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.mobile-date-picker__weekdays {
+  padding-top: 1rem;
+  padding-bottom: 0.5rem;
+}
+
+.mobile-date-picker__weekday {
+  text-align: center;
+  font-size: 0.75rem;
+  color: #6c757d;
+  text-transform: uppercase;
+}
+
+.mobile-date-picker__grid {
+  padding-bottom: 1rem;
+  flex: 1;
+  align-content: start;
+}
+
+.mobile-date-picker__day {
+  border: 1px solid transparent;
+  background: #fff;
+  border-radius: 0.75rem;
+  min-height: 2.75rem;
+  font-weight: 500;
+  color: #212529;
+}
+
+.mobile-date-picker__day.is-outside {
+  color: #adb5bd;
+}
+
+.mobile-date-picker__day.is-today {
+  border-color: #0d6efd;
+}
+
+.mobile-date-picker__day.is-selected {
+  background: #0d6efd;
+  color: #fff;
+}
+
+.mobile-date-picker__footer {
+  padding-top: 0;
+  padding-bottom: max(1rem, env(safe-area-inset-bottom));
+}
+
+.mobile-date-picker__footer .btn {
+  flex: 1;
+}
+
+.mobile-date-input {
+  cursor: pointer;
+  background-image: none !important;
+}
+
+.mobile-date-input--empty {
+  color: #6c757d;
+}
+
 .notification-unread {
   background: #fce7ea;
   cursor: pointer;

resources/views/layouts/app.blade.php

@@ -9,10 +9,6 @@
 
     <title>{{ config('app.name', 'Laravel') }}</title>
 
-    <!-- Fonts -->
-    <link rel="dns-prefetch" href="//fonts.bunny.net">
-    <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
-
     <!-- favicon -->
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">