feat: dashboard mobile design

src/components/Dashboard/OperatorGrid/OperatorGrid.tsx

@@ -87,7 +87,7 @@ const StyledOperatorGrid = styled.section`
   margin-top: 116px;
 
   @media (max-width: ${breakpoints.md}px) {
-    margin-top: 40px;
+    margin-top: 70px;
   }
 `
 
@@ -142,6 +142,12 @@ const Stats = styled.div`
   justify-content: space-between;
   margin-bottom: 16px;
   gap: 2px;
+
+  @media (max-width: ${breakpoints.sm}px) {
+    display: grid;
+
+    grid-template-columns: repeat(2, 1fr);
+  }
 `
 
 const Stat = styled.div`
@@ -167,6 +173,11 @@ const Grid = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
   gap: 16px;
+
+  @media (max-width: ${breakpoints.sm}px) {
+    // 2 columns
+    grid-template-columns: repeat(2, 1fr);
+  }
 `
 
 const OperatorCard = styled.div`

src/components/Dashboard/OperatorPanel/OperatorPanel.tsx

@@ -1,4 +1,5 @@
 import { Collapse } from '@/components/common/Collapse'
+import { breakpoints } from '@/configs/ui.configs'
 import { truncateString } from '@/utils/general.utils'
 import styled from '@emotion/styled'
 import React from 'react'
@@ -33,9 +34,10 @@ const OperatorPanel: React.FC<OperatorPanelProps> = () => {
           alt="Operator"
         />
         <OperatorInfo>
-          <OperatorType>Quantum Recursive Memetic </OperatorType>
+          <OperatorType>Quantum Recursive Memetic</OperatorType>
         </OperatorInfo>
       </Profile>
+
       <InfoRow>
         <Label>Archetype</Label>
         <Value>Memetic</Value>
@@ -93,15 +95,29 @@ const OperatorPanel: React.FC<OperatorPanelProps> = () => {
 }
 
 const StyledPanel = styled.section`
-  font-weight: 400;
   font-size: 14px;
   line-height: 20px;
 `
 
+const Profile = styled.div`
+  background-color: var(--grey-900);
+  padding: 8px;
+  margin-bottom: 2px;
+
+  @media (max-width: ${breakpoints.sm}px) {
+    display: flex;
+    gap: 16px;
+  }
+`
+
 const OperatorImage = styled.img`
   width: 100%;
   aspect-ratio: 1;
   object-fit: cover;
+
+  @media (max-width: ${breakpoints.sm}px) {
+    width: 90px;
+  }
 `
 
 const OperatorInfo = styled.div`
@@ -109,21 +125,27 @@ const OperatorInfo = styled.div`
   justify-content: center;
   padding: 16px 8px;
   margin-bottom: 2px;
+
+  @media (max-width: ${breakpoints.sm}px) {
+    width: 100%;
+    padding: 0;
+    margin-bottom: 0;
+    align-items: center;
+  }
 `
 
-const OperatorType = styled.span``
+const OperatorType = styled.span`
+  @media (max-width: ${breakpoints.sm}px) {
+    text-align: center;
+  }
+`
 
 const InfoRow = styled.div`
   display: flex;
   justify-content: space-between;
   padding: 16px 8px;
-  background-color: var(--grey-900);
-`
-
-const Profile = styled.div`
-  background-color: var(--grey-900);
-  padding: 8px;
   margin-bottom: 2px;
+  background-color: var(--grey-900);
 `
 
 const ProfileInfo = styled.div`
@@ -135,6 +157,10 @@ const ProfileInfo = styled.div`
 const CallSignContainer = styled.div`
   margin-top: 24px;
   margin-bottom: 2px;
+
+  @media (max-width: ${breakpoints.sm}px) {
+    margin-top: 2px;
+  }
 `
 
 const Label = styled.span`
@@ -144,6 +170,10 @@ const Label = styled.span`
 const Value = styled.span`
   text-align: right;
   width: 155px;
+
+  @media (max-width: ${breakpoints.sm}px) {
+    width: auto;
+  }
 `
 
 const BadgesSection = styled.div`

src/components/Dashboard/ProgressBar/ProgressBar.tsx

@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
 import { numberWithCommas } from '@/utils/general.utils'
 import styled from '@emotion/styled'
 import React from 'react'
@@ -15,7 +16,7 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
     <Container>
       <ProgressHeader>
         <EpochLabel>epoch 1</EpochLabel>
-        <NextEpoch>epoch 2</NextEpoch>
+        <EpochLabel>epoch 2</EpochLabel>
       </ProgressHeader>
       <ProgressRow>
         <ProgressTrack>
@@ -79,11 +80,6 @@ const ProgressRow = styled.div`
 const ProgressHeader = styled.div`
   display: flex;
   justify-content: space-between;
-
-  @media (max-width: 768px) {
-    flex-direction: column;
-    gap: 8px;
-  }
 `
 
 const EpochLabel = styled.span`
@@ -92,16 +88,15 @@ const EpochLabel = styled.span`
   padding: 0 8px;
   line-height: 20px;
   font-size: 14px;
-  width: 72px;
-  text-align: center;
-`
-
-const NextEpoch = styled.span`
   width: 76px;
-  background-color: rgb(var(--lsd-surface-secondary));
-  color: rgb(var(--lsd-text-secondary));
   text-align: center;
-  padding: 0 8px;
+
+  @media (max-width: ${breakpoints.sm}px) {
+    width: 68px;
+    padding: 2px 7px;
+    font-size: 12px;
+    line-height: 16px;
+  }
 `
 
 const ProgressTrack = styled.div`
@@ -129,15 +124,9 @@ const ClaimPeriodWrapper = styled.div`
   flex-direction: column;
 `
 
-const ClaimPeriod = styled.span<{ position: number }>`
+const ClaimPeriod = styled(EpochLabel)<{ position: number }>`
-  background-color: rgb(var(--lsd-surface-secondary));
-  color: rgb(var(--lsd-text-secondary));
-  padding: 0 8px;
   position: relative;
-  line-height: 20px;
-  font-size: 14px;
   width: ${(props) => props.position}px;
-  text-align: center;
   top: -16px;
 `
 
@@ -179,6 +168,14 @@ const Stat = styled.span``
 const ProgressFooter = styled.div`
   display: flex;
   gap: 16px;
+
+  @media (max-width: ${breakpoints.sm}px) {
+    overflow-x: auto;
+
+    // hide scroll bar
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
 `
 
 const TimeRemaining = styled.div`
@@ -197,6 +194,7 @@ const Label = styled.div`
   font-size: 12px;
   padding: 8px 16px;
   line-height: 16px;
+  white-space: nowrap;
 `
 
 const Value = styled.div<{ color: string; backgroundColor: string }>`
@@ -206,6 +204,7 @@ const Value = styled.div<{ color: string; backgroundColor: string }>`
   padding: 8px 16px;
   line-height: 16px;
   letter-spacing: 0.12px;
+  white-space: nowrap;
 `
 
 const PointsRow = styled.div`

src/components/Footer/Footer.tsx

@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import React from 'react'
 
@@ -70,7 +71,7 @@ const Container = styled.footer`
     text-decoration: underline;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: ${breakpoints.sm}px) {
     flex-direction: column-reverse;
     max-width: 100%;
     margin-top: 200px;
@@ -79,9 +80,13 @@ const Container = styled.footer`
 
     .footer-nav {
       position: relative;
+      width: 100%;
       left: unset;
       bottom: unset;
       transform: unset;
+      gap: unset;
+      display: flex;
+      justify-content: space-between;
     }
   }
 `

src/components/StyledComponents/StyledComponents.tsx

@@ -17,6 +17,6 @@ export const Container = styled.div`
   position: relative;
 
   @media (max-width: ${breakpoints.md}px) {
-    padding: 0 20px;
+    padding: 0 15px;
   }
 `

src/containers/Dashboard/DashboardContainer.tsx

@@ -61,10 +61,15 @@ const DashboardContainer: React.FC<DashboardPageProps> = ({
     <Container {...props}>
       <Wrapper>
         <LeftColumn>
+          <MobileProgressBar>
+            <ProgressBar progress={30} claimPosition={76} />
+          </MobileProgressBar>
           <OperatorPanel />
         </LeftColumn>
         <RightColumn>
-          <ProgressBar progress={30} claimPosition={76} />
+          <DesktopProgressBar>
+            <ProgressBar progress={30} claimPosition={76} />
+          </DesktopProgressBar>
           <OperatorGrid data={random20Operators} isLoading={isLoading} />
         </RightColumn>
       </Wrapper>
@@ -74,11 +79,7 @@ const DashboardContainer: React.FC<DashboardPageProps> = ({
 
 export default DashboardContainer
 
-const Container = styled.div`
+const Container = styled.div``
-  @media (max-width: ${breakpoints.lg}px) {
-    margin-inline: 10px;
-  }
-`
 
 const Wrapper = styled.div`
   display: grid;
@@ -88,16 +89,17 @@ const Wrapper = styled.div`
   margin-top: 80px;
   width: 100%;
 
-  @media (max-width: ${breakpoints.md}px) {
+  @media (max-width: ${breakpoints.sm}px) {
-    grid-template-columns: 1fr;
+    display: flex;
-    margin-top: 40px;
+    flex-direction: column;
+    margin-top: 70px;
   }
 `
 
 const LeftColumn = styled.section`
   grid-column: 1 / 6;
 
-  @media (max-width: ${breakpoints.md}px) {
+  @media (max-width: ${breakpoints.sm}px) {
     grid-column: 1 / 2;
   }
 `
@@ -105,7 +107,24 @@ const LeftColumn = styled.section`
 const RightColumn = styled.section`
   grid-column: 8 / 23;
 
-  @media (max-width: ${breakpoints.md}px) {
+  @media (max-width: ${breakpoints.sm}px) {
     grid-column: 1 / 2;
   }
 `
+
+const DesktopProgressBar = styled.div`
+  display: none;
+
+  @media (min-width: ${breakpoints.sm}px) {
+    display: block;
+  }
+`
+
+const MobileProgressBar = styled.div`
+  display: block;
+  margin-bottom: 70px;
+
+  @media (min-width: ${breakpoints.sm}px) {
+    display: none;
+  }
+`