[CCUBE-1617][MAHI]Use styled componnet for divider and remove mobileo…

…nlyborder
LifeSG · Nov 18, 2024 · ff3c656 · ff3c656
1 parent 4f37189
commit ff3c656
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 18 deletions.
diff --git a/src/footer/footer.style.tsx b/src/footer/footer.style.tsx
@@ -2,6 +2,7 @@ import styled from "styled-components";
 import { Colour, MediaQuery } from "../theme";
 import { Typography } from "../typography";
 import { Layout } from "../layout";
+import { Divider } from "../divider";
 
 // =============================================================================
 // GENERIC
@@ -19,6 +20,10 @@ export const StyledFooterLink = styled(Typography.LinkSM)`
 // TOP SECTION
 // =============================================================================
 
+export const FullWidthDivider = styled(Divider)`
+    width: 100%;
+`;
+
 export const TopSection = styled(Layout.Content)`
     padding: 4rem 0;
 
@@ -107,16 +112,6 @@ export const AddonSection = styled.div`
 // BOTTOM SECTION
 // =============================================================================
 
-export const MobileOnlyBorder = styled.div`
-    display: none;
-
-    ${MediaQuery.MaxWidth.lg} {
-        display: block;
-        height: 1px;
-        background: ${Colour["bg-strong"]};
-    }
-`;
-
 export const BottomSection = styled(Layout.Content)`
     padding: 1.375rem 0;
 

diff --git a/src/footer/footer.tsx b/src/footer/footer.tsx
@@ -9,15 +9,14 @@ import {
     BottomSectionContent,
     CopyrightSection,
     DisclaimerTextLink,
+    FullWidthDivider,
     LinkSection,
     LogoSection,
-    MobileOnlyBorder,
     StyledFooterLink,
     TopSection,
 } from "./footer.style";
 import { FooterLinkProps, FooterProps } from "./types";
 import { useTheme } from "styled-components";
-import { Divider } from "../divider";
 
 export const Footer = <T,>({
     children,
@@ -134,11 +133,7 @@ export const Footer = <T,>({
                     <TopSection type="grid" stretch={isStretch}>
                         {component}
                     </TopSection>
-                    <Divider
-                        style={{
-                            width: "100%",
-                        }}
-                    />
+                    <FullWidthDivider />
                 </>
             );
         }
@@ -148,7 +143,6 @@ export const Footer = <T,>({
     return (
         <BaseFooter {...otherProps}>
             {renderTopSection()}
-            <MobileOnlyBorder />
             <BottomSection type="grid" stretch={isStretch}>
                 <BottomSectionContent key="disclaimer">
                     {renderDisclaimerLinks()}