refactor: combine responsive styles under the same function

carlsberg · Oct 2, 2023 · 75c517f · 75c517f
1 parent a7c2c58
commit 75c517f
Showing 1 changed file with 18 additions and 18 deletions.
diff --git a/malty/atoms/Link/Link.styled.ts b/malty/atoms/Link/Link.styled.ts
@@ -13,25 +13,25 @@ export const StyledAnchor = styled.a<{
       letter-spacing: ${theme.typography.desktop.text[$linkStyle]['letter-spacing'].value};
       line-height: ${theme.typography.desktop.text[$linkStyle]['line-height'].value};
       font-weight: ${theme.typography.desktop.text[$linkStyle]['font-weight'].value};
+
+      @media screen and (max-width: ${theme.layout.small['device-max-width']?.value}) {
+        ${css`
+          font-size: ${theme.typography.tablet.text[$linkStyle]['font-size'].value};
+          letter-spacing: ${theme.typography.tablet.text[$linkStyle]['letter-spacing'].value};
+          line-height: ${theme.typography.tablet.text[$linkStyle]['line-height'].value};
+          font-weight: ${theme.typography.tablet.text[$linkStyle]['font-weight'].value};
+        `}
+      }
+
+      @media screen and (max-width: ${theme.layout.xsmall['device-max-width']?.value}) {
+        ${css`
+          font-size: ${theme.typography.mobile.text[$linkStyle]['font-size'].value};
+          letter-spacing: ${theme.typography.mobile.text[$linkStyle]['letter-spacing'].value};
+          line-height: ${theme.typography.mobile.text[$linkStyle]['line-height'].value};
+          font-weight: ${theme.typography.mobile.text[$linkStyle]['font-weight'].value};
+        `}
+      }
     `}
-  ${({ $linkStyle, theme }) => css`
-    @media screen and (max-width: ${theme.layout.small['device-max-width']?.value}) {
-      ${css`
-        font-size: ${theme.typography.tablet.text[$linkStyle]['font-size'].value};
-        letter-spacing: ${theme.typography.tablet.text[$linkStyle]['letter-spacing'].value};
-        line-height: ${theme.typography.tablet.text[$linkStyle]['line-height'].value};
-        font-weight: ${theme.typography.tablet.text[$linkStyle]['font-weight'].value};
-      `}
-    }
-    @media screen and (max-width: ${theme.layout.xsmall['device-max-width']?.value}) {
-      ${css`
-        font-size: ${theme.typography.mobile.text[$linkStyle]['font-size'].value};
-        letter-spacing: ${theme.typography.mobile.text[$linkStyle]['letter-spacing'].value};
-        line-height: ${theme.typography.mobile.text[$linkStyle]['line-height'].value};
-        font-weight: ${theme.typography.mobile.text[$linkStyle]['font-weight'].value};
-      `}
-    }
-  `}
 
   text-decoration: underline;
   color: ${({ $color, theme }) =>