Merge pull request #785 from ita-social-projects/#784fix-toastify-styles

fix Bug css
ita-social-projects · Sep 13, 2024 · 5a407a4 · 5a407a4
2 parents 396a48f + 1e869b6
commit 5a407a4
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 73 deletions.
diff --git a/FrontEnd/src/components/basicPage/customTheme.js b/FrontEnd/src/components/basicPage/customTheme.js
@@ -1,48 +1,48 @@
 const customTheme = {
     components: {
-        Carousel: {
-            colorBgContainer: 'var(--carousel-color)',
-            dotActiveWidth: 32,
-            dotWidth: 32,
-            dotHeight: 6,
-            lineHeight: 1,
-        },
-        Button: {
-            defaultColor: 'var(--main-button-color)',
-            colorPrimaryHover: 'var(--button-color-hover)',
-            fontWeight: 600,
-            contentFontSize: 16,
-            fontFamilyCode: 'var(--font-main)',
-        },
-        Radio: {
-            colorPrimary: 'var(--radio-color)',
-            borderRadius: 2,
-            colorBorder: 'var(--radio-color-border)',
-            buttonColor: 'var(--radio-button-color)',
-            fontFamily: 'var(--font-main)',
-            fontSize: 'var(-radio-font-size)',
-            algorithm: true,
-        },
-        Pagination: {
-            colorPrimary: 'var(--pagination-color)',
-            colorPrimaryHover: 'var(--pagination-color-hover)',
-        },
-        Select: {
-            colorPrimary: 'var(--select-primary-color)',
-            borderRadiusSM: 'var(--select-border-radius)',
-            optionPadding: 'var(--select-option-padding)',
-            optionFontSize: 'var(--select-option-font-size)',
-            optionLineHeight: 'var(--select-option-line-height)',
-            optionSelectedBg: 'var(--select-option-selected-bg)',
-            optionSelectedColor: 'var(--select-option-selected-color)',
-            multipleItemBorderColor: 'var(--select-multiple-color)',
-            multipleItemBg: 'var(--select-multiple-bg)',
-        },
-        Checkbox: {
-            colorPrimary: 'var(--checkbox-primary-color)',
-            colorPrimaryHover: 'var(--checkbox-primary-hover-color)',
-        }
+      Carousel: {
+        colorBgContainer: '#40af85',
+        dotActiveWidth: 32,
+        dotWidth: 32,
+        dotHeight: 6,
+        lineHeight: 1,
+      },
+      Button: {
+        defaultColor: '#1F9A7C',
+        colorPrimaryHover: '#0b6c61',
+        fontWeight: 600,
+        contentFontSize: 16,
+        fontFamilyCode: 'Inter',
+      },
+      Radio: {
+        colorPrimary: '#1f9a7c',
+        borderRadius: 2,
+        colorBorder: '#DEE1E8',
+        buttonColor: '#25292C',
+        fontFamily: 'Inter',
+        fontSize: 16,
+        algorithm: true, // Enable algorithm
+      },
+      Pagination: {
+        colorPrimary: '#1F9A7C',
+        colorPrimaryHover: '#0b6c61',
+      },
+      Select: {
+        colorPrimary: '#1f9a7c',
+        borderRadiusSM: '2px',
+        optionPadding: '5px 12px',
+        optionFontSize: 14,
+        optionLineHeight: '22px',
+        optionSelectedBg: '#EFFFF6',
+        optionSelectedColor: '#25292C',
+        multipleItemBorderColor: '#D9D9D9',
+        multipleItemBg: '#F8F8F8',
+      },
+      Checkbox: {
+        colorPrimary: '#1f9a7c',
+        colorPrimaryHover: '#1f9a7c',
+      }
     },
-};
+  };
 
 export default customTheme;
diff --git a/FrontEnd/src/components/basicPage/customToastStyles.css b/FrontEnd/src/components/basicPage/customToastStyles.css
@@ -10,15 +10,15 @@
 }
 
 .Toastify__toast-theme--colored.Toastify__toast--error {
-    border: 1px solid var(--toastify-color-error);
+    border: 1px solid var(--toastify-custom-error);
 }
 
 .Toastify__toast-theme--colored.Toastify__toast--success {
-    border: 1px solid var(--toastify-color-success);
+    border: 1px solid var(--toastify-custom-success)
 }
 
 .Toastify__close-button {
-    color: var(--toastify-close-button);
+    color: var(--toastify-custom-close-button);
 }
 
 .Toastify__toast-body {

diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css
@@ -57,13 +57,17 @@
   --font-logo: 'Geologica', sans-serif;
 
   --toastify-color-error: #FFF1F0;
-  --toastify-color-success: #1F9A7C;
+  --toastify-color-success: #F1FFF7;
   --toastify-font-family: var(--font-main);
   --toastify-close-button: rgba(0, 0, 0, 0.85);
   --toastify-toast-width: 395px;
   --toastify-toast-min-height: 22px;
   --toastify-text-color-success: rgba(0, 0, 0, 0.85);
   --toastify-text-color-error: rgba(0, 0, 0, 0.85);
+  --toastify-custom-error: #FFCCC7;
+  --toastify-custom-success: #1F9A7C;
+  --toastify-custom-close-button: rgba(0, 0, 0, 0.85);
+
   /* Header */
 
   /* Footer */
@@ -103,30 +107,5 @@
   --main-white: #FFF;
   --main-black-90: #292e32;
   --primary-green-80: #1f9a7c;
-
-  /* customTheme */
-  --carousel-color: #40af85;
-
-  --radio-color: #1f9a7c;
-  --radio-color-border: #DEE1E8;
-  --radio-button-color: #25292C;
-  --radio-font-size: 16;
-
-  --pagination-color: #1F9A7C;
-  --pagination-color-hover: #0b6c61;
-
-  /* Select */
-  --select-primary-color: #1f9a7c;
-  --select-border-radius: 2px;
-  --select-option-padding: 5px 12px;
-  --select-option-font-size: 14px;
-  --select-option-line-height: 22px;
-  --select-option-selected-bg: #effff6;
-  --select-option-selected-color: #25292c;
-  --select-multiple-color: #D9D9D9;
-  --select-multiple-bg: #F8F8F8;
-
-  /* Checkbox */
-  --checkbox-primary-color: #1f9a7c;
-  --checkbox-primary-hover-color: #1f9a7c;
+  --character-title-85: rgba(0, 0, 0, 0.85);
 }