From 3999728fe3ec28f994b0028d1a99e1b3dcee9286 Mon Sep 17 00:00:00 2001 From: arthurevain Date: Tue, 15 Apr 2025 17:53:34 +0200 Subject: [PATCH] Convert all px to rem on css files --- src/Components/Breadcrumbs/index.css | 6 +- src/Components/Fallback/index.css | 8 +- src/Components/Inputs/Image/index.css | 4 +- src/Components/Inputs/Select/index.css | 4 +- src/Components/Layouts/HomeLayout/index.css | 4 +- src/Components/ProgressBars/index.css | 4 +- src/Components/Sidebar/index.css | 16 ++-- src/Components/ThemeSwitch/index.css | 4 +- src/Components/WalletProvider/index.css | 4 +- src/Pages/Account/index.css | 4 +- src/Pages/Auth/index.css | 26 +++---- .../Maintenance/CreateMaintenance/index.css | 2 +- src/index.css | 76 +++++++++---------- 13 files changed, 81 insertions(+), 81 deletions(-) diff --git a/src/Components/Breadcrumbs/index.css b/src/Components/Breadcrumbs/index.css index abb3c0a28..a26564653 100644 --- a/src/Components/Breadcrumbs/index.css +++ b/src/Components/Breadcrumbs/index.css @@ -1,9 +1,9 @@ .MuiBreadcrumbs-root { - min-height: 34px; + min-height: 2.125rem; } .MuiBreadcrumbs-root svg { - width: 16px; - min-height: 16px; + width: 1.0rem; + min-height: 1.0rem; } .MuiBreadcrumbs-root .MuiBreadcrumbs-li a { font-size: var(--env-var-font-size-medium); diff --git a/src/Components/Fallback/index.css b/src/Components/Fallback/index.css index cad46300b..54aba27bf 100644 --- a/src/Components/Fallback/index.css +++ b/src/Components/Fallback/index.css @@ -1,7 +1,7 @@ [class*="fallback__"] { width: fit-content; margin: auto; - margin-top: 100px; + margin-top: 6.25rem; } [class*="fallback__"] h1.MuiTypography-root { font-size: var(--env-var-font-size-large); @@ -12,7 +12,7 @@ width: max-content; } [class*="fallback__"] button.MuiButtonBase-root { - min-height: 34px; + min-height: 2.125rem; } [class*="fallback__"] .check span.MuiTypography-root, [class*="fallback__"] button.MuiButtonBase-root { @@ -27,9 +27,9 @@ z-index: 0; width: 100%; - max-width: 800px; + max-width: 50.0rem; height: 100%; - max-height: 800px; + max-height: 50.0rem; background-position: center; background-size: cover; diff --git a/src/Components/Inputs/Image/index.css b/src/Components/Inputs/Image/index.css index 7492f8636..f994109ff 100644 --- a/src/Components/Inputs/Image/index.css +++ b/src/Components/Inputs/Image/index.css @@ -7,10 +7,10 @@ font-size: var(--env-var-font-size-medium); } .image-field-wrapper h2.MuiTypography-root { - margin-top: 10px; + margin-top: 0.625rem; } .image-field-wrapper + p.MuiTypography-root { - margin-top: 8px; + margin-top: 0.5rem; } .image-field-wrapper + p.MuiTypography-root, .image-field-wrapper p.MuiTypography-root { diff --git a/src/Components/Inputs/Select/index.css b/src/Components/Inputs/Select/index.css index b40cf8564..3368b601c 100644 --- a/src/Components/Inputs/Select/index.css +++ b/src/Components/Inputs/Select/index.css @@ -1,6 +1,6 @@ .select-wrapper .select-component > .MuiSelect-select { - padding: 0 10px; - min-height: 34px; + padding: 0 0.625rem; + min-height: 2.125rem; display: flex; align-items: center; line-height: 1; diff --git a/src/Components/Layouts/HomeLayout/index.css b/src/Components/Layouts/HomeLayout/index.css index 28ac340f8..f64a503a9 100644 --- a/src/Components/Layouts/HomeLayout/index.css +++ b/src/Components/Layouts/HomeLayout/index.css @@ -6,7 +6,7 @@ } /* TODO go for this approach for responsiveness. The aside needs to be taken care of */ -/* @media (max-width: 1000px) { +/* @media (max-width: 62.5rem) { .home-layout { flex-direction: column !important; } @@ -27,7 +27,7 @@ .home-content-wrapper { padding: var(--env-var-spacing-2); - max-width: 1400px; + max-width: 87.5rem; margin: 0 auto; flex: 1; } \ No newline at end of file diff --git a/src/Components/ProgressBars/index.css b/src/Components/ProgressBars/index.css index 9b4ab2c7d..486fe2a1d 100644 --- a/src/Components/ProgressBars/index.css +++ b/src/Components/ProgressBars/index.css @@ -3,8 +3,8 @@ font-size: var(--env-var-font-size-medium); } .progress-bar-container p.MuiTypography-root:has(span) { - font-size: 12px; + font-size: 0.75rem; } .progress-bar-container p.MuiTypography-root span { - padding-left: 2px; + padding-left: 0.125rem; } diff --git a/src/Components/Sidebar/index.css b/src/Components/Sidebar/index.css index ef921acca..6374d49af 100644 --- a/src/Components/Sidebar/index.css +++ b/src/Components/Sidebar/index.css @@ -1,7 +1,7 @@ /* TODO */ aside .MuiList-root svg { - width: 20px; - height: 20px; + width: 1.25rem; + height: 1.25rem; opacity: 0.9; } aside span.MuiTypography-root { @@ -16,7 +16,7 @@ aside .MuiListSubheader-root { font-weight: 500; line-height: 1.5; text-transform: uppercase; - margin-bottom: 2px; + margin-bottom: 0.125rem; opacity: 0.6; } aside p.MuiTypography-root { @@ -37,16 +37,16 @@ aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root { } aside .MuiCollapse-wrapperInner .MuiList-root svg, aside .MuiList-root .MuiListItemText-root + svg { - width: 18px; - height: 18px; + width: 1.125rem; + height: 1.125rem; } .sidebar-popup li.MuiButtonBase-root:has(.MuiBox-root) { padding-bottom: 0; } .sidebar-popup svg { - width: 16px; - height: 16px; + width: 1.0rem; + height: 1.0rem; opacity: 0.9; } @@ -56,7 +56,7 @@ aside { transition: max-width 650ms cubic-bezier(0.36, -0.01, 0, 0.77); } .home-layout aside.collapsed { - max-width: 64px; + max-width: 4.0rem; } aside.expanded .MuiTypography-root, diff --git a/src/Components/ThemeSwitch/index.css b/src/Components/ThemeSwitch/index.css index d5db1c1ca..c167fc036 100644 --- a/src/Components/ThemeSwitch/index.css +++ b/src/Components/ThemeSwitch/index.css @@ -3,7 +3,7 @@ } .theme-toggle .sun-and-moon > .sun-beams { - stroke-width: 2px; + stroke-width: 0.125rem; } .theme-dark .sun-and-moon > .sun { @@ -15,7 +15,7 @@ } .theme-dark .sun-and-moon > .moon > circle { - transform: translateX(-7px); + transform: translateX(-0.4375rem); } @supports (cx: 1) { diff --git a/src/Components/WalletProvider/index.css b/src/Components/WalletProvider/index.css index 15fb9d816..8bec81d65 100644 --- a/src/Components/WalletProvider/index.css +++ b/src/Components/WalletProvider/index.css @@ -31,7 +31,7 @@ } /* Responsive fixes */ -@media (max-width: 1200px) { +@media (max-width: 75.0rem) { .wallet-adapter-button { font-size: var(--env-var-font-size-medium) !important; padding: calc((var(--env-var-height-2) - var(--env-var-font-size-medium) * 1.2) / 2) @@ -40,7 +40,7 @@ } } -@media (max-width: 900px) { +@media (max-width: 56.25rem) { .wallet-adapter-modal-wrapper { flex-direction: column !important; } diff --git a/src/Pages/Account/index.css b/src/Pages/Account/index.css index 41e25fffa..a67dd5bca 100644 --- a/src/Pages/Account/index.css +++ b/src/Pages/Account/index.css @@ -11,10 +11,10 @@ } .account .MuiTabPanel-root { padding: 0; - margin-top: 50px; + margin-top: 3.125rem; } .account button:not(.MuiIconButton-root) { - min-height: 34px; + min-height: 2.125rem; } .account .field { flex: 1; diff --git a/src/Pages/Auth/index.css b/src/Pages/Auth/index.css index b0a76b748..7e192b2ee 100644 --- a/src/Pages/Auth/index.css +++ b/src/Pages/Auth/index.css @@ -17,12 +17,12 @@ } .auth p > span:not(.email-sent-to) { text-decoration: underline; - text-underline-offset: 2px; + text-underline-offset: 0.125rem; cursor: pointer; transition: all 200ms; } .auth p > span:not(.email-sent-to):hover { - text-underline-offset: 4px; + text-underline-offset: 0.25rem; } .auth p + span:hover { opacity: 1; @@ -34,11 +34,11 @@ } .auth button:not(.MuiIconButton-root), .auth .field .MuiInputBase-root:has(input) { - height: 38px; + height: 2.375rem; } .auth .field svg { - width: 24px; - height: 24px; + width: 1.5rem; + height: 1.5rem; } .auth .field h3.MuiTypography-root, .auth .field .input-error, @@ -64,9 +64,9 @@ z-index: -1; width: 100%; - max-width: 800px; + max-width: 50.0rem; height: 100%; - max-height: 800px; + max-height: 50.0rem; background-position: center; background-size: cover; @@ -78,10 +78,10 @@ } .auth .input-error { position: absolute; - top: calc(100% - 2px); + top: calc(100% - 0.125rem); } -@media (max-width: 800px) { +@media (max-width: 50.0rem) { .auth h1 { font-size: var(--env-var-font-size-large-plus); } @@ -93,7 +93,7 @@ } .auth button:not(.MuiIconButton-root), .auth .field .MuiInputBase-root:has(input) { - height: 36px; + height: 2.25rem; } .auth .check span.MuiTypography-root, .auth .field .input-error, @@ -107,14 +107,14 @@ margin: var(--env-var-spacing-1-plus) 0; } .auth .background-pattern-svg { - max-width: 750px; - max-height: 750px; + max-width: 46.875rem; + max-height: 46.875rem; } .forgot-password-page h1, .check-email-page h1, .password-confirmed-page h1, .set-new-password-page h1 { - font-size: 18px; + font-size: 1.125rem; } } diff --git a/src/Pages/Maintenance/CreateMaintenance/index.css b/src/Pages/Maintenance/CreateMaintenance/index.css index fc688124f..8efe923b0 100644 --- a/src/Pages/Maintenance/CreateMaintenance/index.css +++ b/src/Pages/Maintenance/CreateMaintenance/index.css @@ -1,3 +1,3 @@ .create-maintenance button { - height: 35px; + height: 2.1875rem; } diff --git a/src/index.css b/src/index.css index 173551ba6..4783400fb 100644 --- a/src/index.css +++ b/src/index.css @@ -15,45 +15,45 @@ html { -moz-osx-font-smoothing: grayscale; /* Generalized Stylings */ - --env-var-radius-1: 4px; - --env-var-radius-2: 8px; + --env-var-radius-1: 0.25rem; + --env-var-radius-2: 0.5rem; --env-var-width-1: 100vw; - --env-var-width-2: 360px; - --env-var-width-3: 250px; - --env-var-width-4: 100px; + --env-var-width-2: 22.5rem; + --env-var-width-3: 15.625rem; + --env-var-width-4: 6.25rem; --env-var-height-1: 100vh; - --env-var-height-2: 34px; - - --env-var-nav-bar-height: 70px; - --env-var-side-bar-width: 250px; - - --env-var-spacing-1: 12px; - --env-var-spacing-1-plus: 16px; - --env-var-spacing-1-minus: 10px; - --env-var-spacing-2: 24px; - --env-var-spacing-3: 32px; - --env-var-spacing-4: 40px; - --env-var-spacing-5: 65px; - - --env-var-font-size-small: 11px; - --env-var-font-size-small-plus: 12px; - --env-var-font-size-medium: 13px; - --env-var-font-size-medium-plus: 14px; - --env-var-font-size-large: 16px; - --env-var-font-size-large-plus: 22px; - --env-var-font-size-xlarge: 30px; - - --env-var-img-width-1: 20px; - --env-var-img-width-2: 16px; - --env-var-img-width-3: 12px; - - --env-var-default-1: 24px; - --env-var-default-2: 40px; - - --env-var-shadow-1: 0px 4px 24px -4px rgba(16, 24, 40, 0.08), - 0px 3px 3px -3px rgba(16, 24, 40, 0.03); + --env-var-height-2: 2.125rem; + + --env-var-nav-bar-height: 4.375rem; + --env-var-side-bar-width: 15.625rem; + + --env-var-spacing-1: 0.75rem; + --env-var-spacing-1-plus: 1.0rem; + --env-var-spacing-1-minus: 0.625rem; + --env-var-spacing-2: 1.5rem; + --env-var-spacing-3: 2.0rem; + --env-var-spacing-4: 2.5rem; + --env-var-spacing-5: 4.0625rem; + + --env-var-font-size-small: 0.6875rem; + --env-var-font-size-small-plus: 0.75rem; + --env-var-font-size-medium: 0.8125rem; + --env-var-font-size-medium-plus: 0.875rem; + --env-var-font-size-large: 1.0rem; + --env-var-font-size-large-plus: 1.375rem; + --env-var-font-size-xlarge: 1.875rem; + + --env-var-img-width-1: 1.25rem; + --env-var-img-width-2: 1.0rem; + --env-var-img-width-3: 0.75rem; + + --env-var-default-1: 1.5rem; + --env-var-default-2: 2.5rem; + + --env-var-shadow-1: 0.0rem 0.25rem 1.5rem -0.25rem rgba(16, 24, 40, 0.08), + 0.0rem 0.1875rem 0.1875rem -0.1875rem rgba(16, 24, 40, 0.03); } .MuiInputBase-root.Mui-disabled input { @@ -64,8 +64,8 @@ html { width: auto; } .Toastify__toast-body .alert { - min-width: 150px; - padding: 5px 10px; + min-width: 9.375rem; + padding: 0.3125rem 0.625rem; align-items: center; } .Toastify [class^="Toastify__toast"] { @@ -74,7 +74,7 @@ html { } .Toastify__toast { min-height: 0; - border-radius: 4px; + border-radius: 0.25rem; } .Toastify [class*="Toastify__toast-theme"] { background-color: transparent;