Use Inter font as default

Author: GuidoBR

frontend/src/common/components/Modal/ConfirmationModal.scss

@@ -11,7 +11,7 @@
   }
 
   &__title {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family-base);
     font-size: 22px;
     font-weight: 600;
     color: #313e4c;
@@ -20,7 +20,7 @@
   }
 
   &__message {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family-base);
     font-size: 16px;
     font-weight: 400;
     color: #313e4c;
@@ -42,7 +42,7 @@
     font-size: 20px;
     font-weight: 600;
     text-transform: none;
-    
+
     &--cancel {
       --background: #ffffff;
       --background-hover: rgba(67, 95, 240, 0.04);
@@ -53,7 +53,7 @@
       --border-style: solid;
       --box-shadow: none;
     }
-    
+
     &--confirm {
       --background: #ffffff; /* White background for Yes button */
       --background-hover: rgba(175, 27, 63, 0.04);
@@ -81,4 +81,4 @@
     border-radius: 2px;
     margin-top: 12px;
   }
-}
+}

frontend/src/pages/Home/HomePage.scss

@@ -252,7 +252,7 @@
 
 // Add a more specific selector to override Ionic's default styles
 ion-card.home-page__ai-card ion-card-content h3.home-page__ai-card-title {
-  font-family: 'Inter', serif;
+  font-family: var(--font-family-base);
   color: white;
   font-size: 1.25rem;
   font-weight: 700;
@@ -263,7 +263,7 @@ ion-card.home-page__ai-card ion-card-content h3.home-page__ai-card-title {
 }
 
 ion-card.home-page__ai-card ion-card-content span.home-page__ai-card-button-inline {
-  font-family: 'Merriweather', serif;
+  font-family: var(--font-family-secondary);
   font-size: 0.875rem;
   color: #ffbe5b;
   font-weight: 500;

frontend/src/pages/Reports/ReportDetailPage.scss

@@ -22,7 +22,7 @@
   }
 
   &__title {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family-base);
     font-size: 22px;
     font-weight: 600;
     margin: 0;
@@ -54,7 +54,7 @@
   }
 
   &__category {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family-base);
     font-size: 12px;
     font-weight: 600;
     color: #435ff0;
@@ -81,7 +81,7 @@
   }
 
   &__subtitle {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family-base);
     font-size: 18px;
     font-weight: 600;
     margin: 4px 0 16px;
@@ -220,15 +220,15 @@
   }
 
   &__section-empty-title {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family-base);
     font-size: 18px;
     font-weight: 600;
     color: #313e4c;
     margin: 0 0 16px;
   }
 
   &__section-empty-description {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family-base);
     font-size: 14px;
     font-weight: 400;
     color: #313e4c;
@@ -488,15 +488,15 @@
   }
 
   &__results-cell {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family-base);
     font-size: 12px;
     font-weight: 600;
     color: #5c6d80;
 
     &--test {
       flex: 1;
       text-align: left;
-      font-family: 'Inter', sans-serif;
+      font-family: var(--font-family-base);
       font-size: 13px;
       color: #313e4c;
       font-weight: 400;
@@ -505,7 +505,7 @@
     &--value {
       width: 100px;
       text-align: right;
-      font-family: 'Inter', sans-serif;
+      font-family: var(--font-family-base);
       font-size: 13px;
       color: #313e4c;
       font-weight: 600;
@@ -515,7 +515,7 @@
     &--ref {
       width: 80px;
       text-align: right;
-      font-family: 'Inter', sans-serif;
+      font-family: var(--font-family-base);
       font-size: 12px;
       color: #5c6d80;
       font-weight: 400;
@@ -531,7 +531,7 @@
     border-bottom: 1px solid #ebeef8;
 
     span {
-      font-family: 'Inter', sans-serif;
+      font-family: var(--font-family-base);
       font-weight: 600;
       font-size: 13px;
       color: #313e4c;
@@ -553,14 +553,14 @@
   }
 
   &__primary-sample-label {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family-base);
     font-size: 13px;
     color: #667091;
     font-weight: 400;
   }
 
   &__primary-sample-value {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family-base);
     font-size: 13px;
     font-weight: 600;
     color: #313e4c;
@@ -584,7 +584,7 @@
       &--test {
         flex: 1;
         text-align: left;
-        font-family: 'Inter', sans-serif;
+        font-family: var(--font-family-base);
         font-size: 13px;
         color: #313e4c;
         font-weight: 400;
@@ -596,7 +596,7 @@
         align-items: center;
         width: 100px;
         text-align: right;
-        font-family: 'Inter', sans-serif;
+        font-family: var(--font-family-base);
         font-size: 13px;
         color: #313e4c;
         font-weight: 600;
@@ -606,7 +606,7 @@
       &--ref {
         width: 80px;
         text-align: right;
-        font-family: 'Inter', sans-serif;
+        font-family: var(--font-family-base);
         font-size: 12px;
         color: #5c6d80;
         font-weight: 400;
@@ -623,7 +623,7 @@
   }
 
   &__comments-title {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family-base);
     font-size: 18px;
     font-weight: 600;
     color: #313e4c;
@@ -632,7 +632,7 @@
   }
 
   &__comments-text {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family-base);
     font-size: 16px;
     color: #313e4c;
     line-height: 24px;
@@ -649,7 +649,7 @@
   }
 
   &__uploaded-file-title {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family-base);
     font-size: 13px;
     font-weight: 600;
     color: #313e4c;
@@ -681,7 +681,7 @@
   }
 
   &__file-name {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family-base);
     font-size: 12px;
     font-weight: 500;
     color: #313e4c;
@@ -692,7 +692,7 @@
     display: flex;
     align-items: center;
     gap: 4px;
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family-base);
     font-size: 12px;
     color: #5c6d80;
   }
@@ -743,7 +743,7 @@
     color: #313e4c;
     font-size: 14px;
     line-height: 20px;
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family-base);
     font-weight: 400;
   }
 }

frontend/src/pages/Reports/components/FilterPanel/FilterPanel.scss

@@ -1,5 +1,5 @@
 .filter-panel {
-  font-family: 'Inter', serif;
+  font-family: var(--font-family-base);
   padding: 1.5rem 1rem;
   display: flex;
   flex-direction: column;
@@ -63,7 +63,7 @@
   }
 
   &__apply-button {
-    font-family: 'Inter', serif;
+    font-family: var(--font-family-base);
     --background: #435FF0;
     --color: white;
     height: 48px;

frontend/src/theme/fonts.css

@@ -1,15 +1,20 @@
-/* 
- * Using local Merriweather fonts
+/*
+ * Using Inter as the primary font and Merriweather as a secondary font
  */
 
+/* Import Inter font from Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
 :root {
-  --font-family-base: 'Merriweather', serif;
+  --font-family-base: 'Inter', sans-serif;
+  --font-family-secondary: 'Merriweather', serif;
 }
 
 body {
   font-family: var(--font-family-base);
 }
 
+/* Merriweather font definitions */
 @font-face {
   font-family: 'Merriweather';
   src: url('../assets/fonts/Merriweather/Merriweather-Light.ttf');

frontend/src/theme/variables.css

@@ -9,17 +9,78 @@ http://ionicframework.com/docs/theming/ */
   --ls-breakpoint-lg: 992px;
   --ls-breakpoint-xl: 1200px;
 
-  --ion-color-primary: #0054e9;
-  --ion-color-primary-rgb: 0, 84, 233;
+  /* Primary colors */
+  --ion-color-primary: #435ff0;
+  --ion-color-primary-rgb: 67, 95, 240;
   --ion-color-primary-contrast: #ffffff;
   --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: #0049c7;
-  --ion-color-primary-tint: #1a64e0;
+  --ion-color-primary-shade: #3b54d3;
+  --ion-color-primary-tint: #566ff2;
 
-  --ion-color-danger: #ff9cb4;
-  --ion-color-danger-rgb: 233, 0, 0;
+  /* Secondary colors */
+  --ion-color-secondary: #314053;
+  --ion-color-secondary-rgb: 49, 64, 83;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #2b3849;
+  --ion-color-secondary-tint: #465364;
+
+  /* Tertiary colors */
+  --ion-color-tertiary: #fd7bf4;
+  --ion-color-tertiary-rgb: 253, 123, 244;
+  --ion-color-tertiary-contrast: #000000;
+  --ion-color-tertiary-contrast-rgb: 0, 0, 0;
+  --ion-color-tertiary-shade: #df6cd7;
+  --ion-color-tertiary-tint: #fd88f5;
+
+  /* Success colors */
+  --ion-color-success: #2dd36f;
+  --ion-color-success-rgb: 45, 211, 111;
+  --ion-color-success-contrast: #000000;
+  --ion-color-success-contrast-rgb: 0, 0, 0;
+  --ion-color-success-shade: #28ba62;
+  --ion-color-success-tint: #42d77d;
+
+  /* Warning colors */
+  --ion-color-warning: #ffc409;
+  --ion-color-warning-rgb: 255, 196, 9;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #e0ac08;
+  --ion-color-warning-tint: #ffca22;
+
+  /* Danger colors */
+  --ion-color-danger: #eb445a;
+  --ion-color-danger-rgb: 235, 68, 90;
   --ion-color-danger-contrast: #ffffff;
   --ion-color-danger-contrast-rgb: 255, 255, 255;
-  --ion-color-danger-shade: #c70000;
-  --ion-color-danger-tint: #e01a1a;
+  --ion-color-danger-shade: #cf3c4f;
+  --ion-color-danger-tint: #ed576b;
+
+  /* Dark colors */
+  --ion-color-dark: #222428;
+  --ion-color-dark-rgb: 34, 36, 40;
+  --ion-color-dark-contrast: #ffffff;
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
+  --ion-color-dark-shade: #1e2023;
+  --ion-color-dark-tint: #383a3e;
+
+  /* Medium colors */
+  --ion-color-medium: #92949c;
+  --ion-color-medium-rgb: 146, 148, 156;
+  --ion-color-medium-contrast: #000000;
+  --ion-color-medium-contrast-rgb: 0, 0, 0;
+  --ion-color-medium-shade: #808289;
+  --ion-color-medium-tint: #9d9fa6;
+
+  /* Light colors */
+  --ion-color-light: #f4f5f8;
+  --ion-color-light-rgb: 244, 245, 248;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d7d8da;
+  --ion-color-light-tint: #f5f6f9;
+
+  /* Font family variables */
+  --ion-font-family: var(--font-family-base);
 }