style: update footer style

src/components/Footer/Footer.BuPanel.tsx

@@ -1,7 +1,10 @@
 import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import { FooterLink } from '@/components/Footer/Footer.Link'
-import { FooterSectionContainer } from '@/components/Footer/Footer.Section'
+import {
+  FooterSection,
+  FooterSectionContainer,
+} from '@/components/Footer/Footer.Section'
 
 const SECOND_LINK_GROUP = [
   {
@@ -42,7 +45,23 @@ const THIRD_LINKS_GROUP = [
 export const FooterBuPanel = () => {
   return (
     <BusinessUnits>
-      <Wrapper>
+      <BUInfo>
+        <Typography
+          component="div"
+          genericFontFamily="sans-serif"
+          variant="body2"
+        >
+          Logos
+        </Typography>
+        <Typography
+          component="div"
+          genericFontFamily="sans-serif"
+          variant="body2"
+        >
+          Business Units:
+        </Typography>
+      </BUInfo>
+      <BUs>
         <SecondLinksContainer>
           {SECOND_LINK_GROUP.map(({ title, links }, idx) => (
             <LinkGroup key={'second-group' + idx}>
@@ -99,31 +118,44 @@ export const FooterBuPanel = () => {
             </LinkGroup>
           ))}
         </ThirdLinksContainer>
-      </Wrapper>
+      </BUs>
     </BusinessUnits>
   )
 }
 
-const Row = styled.div`
-  display: flex;
-  gap: 8px;
-`
+const BusinessUnits = styled.div`
+  margin-top: 50px;
+  padding-top: 16px;
+  border-top: 1px solid rgb(var(--lsd-border-primary));
 
-const Wrapper = styled.div`
   display: flex;
   align-items: baseline;
 
-  /* temporary breakpoint */
+  @media (max-width: 768px) {
+    flex-direction: column;
+    margin-top: 72px;
+  }
+`
+
+const BUInfo = styled(FooterSection)`
+  @media (max-width: 768px) {
+    margin-bottom: 76px;
+  }
+`
+
+const BUs = styled(FooterSection)`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+
   @media (max-width: 768px) {
     flex-direction: column;
   }
 `
 
-const SECTION_MARGIN = 50
-
-const BusinessUnits = styled(FooterSectionContainer)`
-  margin-top: ${SECTION_MARGIN}px;
-  padding: 16px 0 0 0;
+const Row = styled.div`
+  display: flex;
+  gap: 8px;
 `
 
 const SecondLinksContainer = styled.div`
@@ -132,7 +164,6 @@ const SecondLinksContainer = styled.div`
 
 const ThirdLinksContainer = styled.div`
   flex: 1;
-  margin-bottom: ${SECTION_MARGIN}px;
 
   @media (max-width: 768px) {
     margin-bottom: 80px;

src/components/Footer/Footer.OrgPanel.tsx

@@ -8,6 +8,7 @@ const FIRST_LINK_GRUOP = [
   { label: 'Terms & Conditions', href: 'https://logos.co/terms/' },
   { label: 'Work with us', href: 'https://jobs.status.im/' },
 ]
+
 export const FooterOrgPanel = () => {
   return (
     <Wrapper>
@@ -48,7 +49,6 @@ const Wrapper = styled.div`
   display: flex;
   align-items: baseline;
 
-  /* temporary breakpoint */
   @media (max-width: 768px) {
     flex-direction: column;
   }
@@ -56,7 +56,7 @@ const Wrapper = styled.div`
 
 const OrgInfo = styled(FooterSection)`
   @media (max-width: 768px) {
-    margin-bottom: 76px;
+    margin-bottom: 72px;
   }
 `
 

src/components/Footer/Footer.Section.tsx

@@ -1,4 +1,6 @@
+import { uiConfigs } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
+
 export const FooterSection = styled.div`
   display: flex;
   flex-direction: column;
@@ -9,11 +11,16 @@ export const FooterSection = styled.div`
     width: 100%;
   }
 `
+
 export const FooterSectionContainer = styled.div`
   display: flex;
   position: relative;
   flex-direction: column;
-  margin-top: 200px;
-  padding: 16px;
+  padding: 16px 0;
   border-top: 1px solid rgb(var(--lsd-border-primary));
+  margin: 200px auto;
+
+  @media (max-width: ${uiConfigs.maxContainerWidth + 32}px) {
+    margin-inline: 16px;
+  }
 `

src/components/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-import { Button, Typography } from '@acid-info/lsd-react'
+import { Button } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import { FooterOrgPanel } from '@/components/Footer/Footer.OrgPanel'
 import { FooterSectionContainer } from '@/components/Footer/Footer.Section'
@@ -27,5 +27,4 @@ const ScrollToTop = styled(Button)`
   width: fit-content;
   position: absolute;
   bottom: 16px;
-  left: 16px;
 `