Merge pull request #391 from lidofinance/fix/css_variables

Fix/css variables
lidofinance · Jul 10, 2024 · 8ca6ef9 · 8ca6ef9
2 parents dc827eb + 65b16e9
commit 8ca6ef9
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 56 deletions.
diff --git a/features/ipfs/rpc-availability-check-result-box/styles.tsx b/features/ipfs/rpc-availability-check-result-box/styles.tsx
@@ -5,8 +5,7 @@ import {
   Text as TextOriginal,
   themeDefault,
 } from '@lidofinance/lido-ui';
-
-import { NAV_MOBILE_MEDIA } from 'styles/constants';
+import { devicesHeaderMedia } from 'styles/global';
 
 type TextProps = Omit<ComponentProps<typeof TextOriginal>, 'color'> & {
   color?: keyof typeof themeDefault.colors;
@@ -38,7 +37,7 @@ export const Wrap = styled.div`
     border-radius: 2px 0 0 0;
     background: var(--lido-color-accent);
 
-    ${NAV_MOBILE_MEDIA} {
+    @media ${devicesHeaderMedia.mobile} {
       display: none;
     }
   }

diff --git a/shared/components/layout/footer/styles.tsx b/shared/components/layout/footer/styles.tsx
@@ -2,17 +2,9 @@ import styled from 'styled-components';
 import { Container, Link } from '@lidofinance/lido-ui';
 
 import { LogoLido } from 'shared/components/logos/logos';
-import {
-  FOOTER_DESKTOP_PADDING_X,
-  FOOTER_DESKTOP_PADDING_Y,
-  FOOTER_MAX_WIDTH,
-  FOOTER_MOBILE_MARGIN_BOTTOM,
-  FOOTER_MOBILE_PADDING_X,
-  FOOTER_MOBILE_PADDING_Y,
-  NAV_MOBILE_MEDIA,
-} from 'styles/constants';
 
 import { ReactComponent as ExternalLinkIcon } from 'assets/icons/external-link-icon.svg';
+import { devicesHeaderMedia } from 'styles/global';
 
 export const FooterStyle = styled(Container)`
   position: relative;
@@ -23,12 +15,12 @@ export const FooterStyle = styled(Container)`
   flex-wrap: wrap;
 
   width: 100%;
-  max-width: ${FOOTER_MAX_WIDTH}px;
-  padding: ${FOOTER_DESKTOP_PADDING_Y}px ${FOOTER_DESKTOP_PADDING_X}px;
+  max-width: var(--footer-max-width);
+  padding: var(--footer-desktop-padding-y) var(--footer-desktop-padding-x);
 
-  ${NAV_MOBILE_MEDIA} {
-    margin-bottom: ${FOOTER_MOBILE_MARGIN_BOTTOM}px;
-    padding: ${FOOTER_MOBILE_PADDING_X}px ${FOOTER_MOBILE_PADDING_Y}px;
+  @media ${devicesHeaderMedia.mobile} {
+    margin-bottom: var(--footer-mobile-margin-bottom);
+    padding: var(--footer-mobile-padding-x) var(--footer-mobile-padding-y);
     justify-content: center;
   }
 `;
@@ -83,13 +75,13 @@ export const LogoLidoStyle = styled(LogoLido)`
 export const FooterDivider = styled.div`
   position: absolute;
   top: 0;
-  left: ${FOOTER_DESKTOP_PADDING_X}px;
-  width: calc(100% - ${FOOTER_DESKTOP_PADDING_X * 2}px);
+  left: var(--footer-desktop-padding-x);
+  width: calc(100% - var(--footer-desktop-padding-x) * 2);
   height: 1px;
   background: var(--lido-color-popupMenuItemBgActiveHover);
   opacity: 0.12;
 
-  ${NAV_MOBILE_MEDIA} {
+  @media ${devicesHeaderMedia.mobile} {
     display: none;
   }
 `;

diff --git a/shared/components/layout/header/components/navigation/styles.tsx b/shared/components/layout/header/components/navigation/styles.tsx
@@ -1,13 +1,8 @@
 import styled, { css } from 'styled-components';
-
-import {
-  NAV_MOBILE_MEDIA,
-  NAV_MOBILE_HEIGHT,
-  NAV_DESKTOP_GUTTER_X,
-} from 'styles/constants';
+import { devicesHeaderMedia } from 'styles/global';
 
 export const desktopCss = css`
-  margin: 0 ${NAV_DESKTOP_GUTTER_X}px;
+  margin: 0 var(--nav-desktop-gutter-x);
   display: flex;
   gap: ${({ theme }) => theme.spaceMap.xxl}px;
 
@@ -30,7 +25,7 @@ const mobileCss = css`
   justify-content: space-around;
   align-items: center;
   border-top: 1px solid var(--lido-color-border);
-  height: calc(${NAV_MOBILE_HEIGHT}px + env(safe-area-inset-bottom));
+  height: calc(var(--nav-mobile-height) + env(safe-area-inset-bottom));
 
   svg {
     margin-right: 0;
@@ -41,7 +36,7 @@ const mobileCss = css`
 export const Nav = styled.div`
   ${desktopCss}
   // mobile kicks in on a bit higher width for nav
-  ${NAV_MOBILE_MEDIA} {
+  @media ${devicesHeaderMedia.mobile} {
     ${mobileCss}
   }
   z-index: 6;
@@ -75,7 +70,7 @@ export const NavLink = styled.span<{ active: boolean }>`
       active ? `var(--lido-color-primary)` : `var(--lido-color-secondary)`};
   }
 
-  ${NAV_MOBILE_MEDIA} {
+  @media ${devicesHeaderMedia.mobile} {
     width: ${({ theme }) => theme.spaceMap.xl}px;
     flex-direction: column;
     text-transform: none;

diff --git a/shared/components/layout/header/styles.tsx b/shared/components/layout/header/styles.tsx
@@ -1,12 +1,11 @@
 import { Container } from '@lidofinance/lido-ui';
 import styled, { keyframes } from 'styled-components';
-
-import { DOT_SIZE, HEADER_PADDING_Y, NAV_MOBILE_MEDIA } from 'styles/constants';
+import { devicesHeaderMedia } from 'styles/global';
 
 export const HeaderStyle = styled((props) => <Container {...props} />)`
   position: relative;
-  padding-top: ${HEADER_PADDING_Y}px;
-  padding-bottom: ${HEADER_PADDING_Y}px;
+  padding-top: var(--header-padding-y);
+  padding-bottom: var(--header-padding-y);
   display: flex;
   align-items: center;
 `;
@@ -33,8 +32,8 @@ const glimmer = keyframes`
 `;
 
 export const DotStyle = styled.p`
-  height: ${DOT_SIZE}px;
-  width: ${DOT_SIZE}px;
+  height: var(--dot-size);
+  width: var(--dot-size);
   background-color: lightgreen;
   border-radius: 50%;
   animation: ${glimmer} 2s ease-in-out infinite;
@@ -49,7 +48,7 @@ export const IPFSInfoBoxOnlyDesktopWrapper = styled.div`
   width: 255px;
   z-index: 3;
 
-  ${NAV_MOBILE_MEDIA} {
+  @media ${devicesHeaderMedia.mobile} {
     display: none;
   }
 `;
diff --git a/shared/components/layout/styles.tsx b/shared/components/layout/styles.tsx
@@ -1,7 +1,6 @@
 import { H1 } from '@lidofinance/lido-ui';
 import styled from 'styled-components';
-
-import { NAV_MOBILE_MEDIA } from 'styles/constants';
+import { devicesHeaderMedia } from 'styles/global';
 
 export const LayoutTitleStyle = styled((props) => <H1 {...props} />)`
   font-weight: 800;
@@ -31,7 +30,7 @@ export const LayoutSubTitleStyle = styled.h4`
 export const IPFSInfoBoxOnlyMobileAndPortableWrapper = styled.div`
   display: none;
 
-  ${NAV_MOBILE_MEDIA} {
+  @media ${devicesHeaderMedia.mobile} {
     display: block;
     margin-top: -6px;
     margin-bottom: 40px;

diff --git a/styles/constants.ts b/styles/constants.ts
@@ -1,18 +1,2 @@
 export const NAV_MOBILE_HEIGHT = 60;
 export const NAV_MOBILE_MAX_WIDTH = 880;
-export const NAV_MOBILE_MEDIA = `@media screen and (max-width: ${NAV_MOBILE_MAX_WIDTH}px)`;
-
-export const NAV_DESKTOP_GUTTER_X = 46;
-
-export const HEADER_PADDING_Y = 18;
-
-export const DOT_SIZE = 6;
-
-export const FOOTER_MAX_WIDTH = 1424;
-
-export const FOOTER_DESKTOP_PADDING_X = 32;
-export const FOOTER_DESKTOP_PADDING_Y = 24;
-
-export const FOOTER_MOBILE_PADDING_X = 20;
-export const FOOTER_MOBILE_PADDING_Y = 18;
-export const FOOTER_MOBILE_MARGIN_BOTTOM = 60;
diff --git a/styles/global.ts b/styles/global.ts
@@ -1,6 +1,28 @@
 import { createGlobalStyle } from 'styled-components';
 
+import { NAV_MOBILE_HEIGHT, NAV_MOBILE_MAX_WIDTH } from './constants';
+
+export const devicesHeaderMedia = {
+  mobile: `screen and (max-width: ${NAV_MOBILE_MAX_WIDTH}px)`,
+};
+
 const GlobalStyle = createGlobalStyle`
+  :root {
+    --nav-mobile-height: ${NAV_MOBILE_HEIGHT}px;
+    --nav-mobile-max-width: ${NAV_MOBILE_MAX_WIDTH}px;
+    --nav-desktop-gutter-x: 46px;
+
+    --header-padding-y: 18px;
+    --dot-size: 6px;
+
+    --footer-max-width: 1424px;
+    --footer-desktop-padding-x: 32px;
+    --footer-desktop-padding-y: 24px;
+
+    --footer-mobile-padding-x: 20px;
+    --footer-mobile-padding-y: 18px;
+    --footer-mobile-margin-bottom: 60px;
+  }
   * {
     margin: 0;
     padding: 0;