refactor(dashboard): layout wrapper style & init logic

src/app/[community]/dashboard/layout.tsx

@@ -7,28 +7,33 @@ import useMetric from '@/hooks/useMetric'
 
 import CommunityDigest from '@/widgets/CommunityDigest'
 
-import { Wrapper as WrapperRoot, InnerWrapper, ContentWrapper } from './styles'
+import { Wrapper, InnerWrapper, ContentWrapper, FrameWrapper, MainWrapper } from './styles'
+
+import { useStore } from '@/containers//thread/DashboardThread/store'
+import { useInit } from '@/containers//thread/DashboardThread/logic'
 
-import { Wrapper, MainWrapper } from '@/containers/thread/DashboardThread/styles'
 import SideMenu from '@/containers/thread/DashboardThread/SideMenu'
 
 const Layout = ({ children }) => {
   const { curTab, touched } = useDashboardSettings()
   const metric = useMetric()
 
+  const store = useStore()
+  useInit(store)
+
   return (
-    <WrapperRoot $testid="dashboard-thread-content">
+    <Wrapper>
       <CommunityDigest />
 
       <InnerWrapper metric={metric}>
         <ContentWrapper>
-          <Wrapper $testid="dashboard-thread" metric="COMMUNITY">
+          <FrameWrapper metric={metric}>
             <SideMenu curTab={curTab} touched={touched} />
             <MainWrapper>{children}</MainWrapper>
-          </Wrapper>
+          </FrameWrapper>
         </ContentWrapper>
       </InnerWrapper>
-    </WrapperRoot>
+    </Wrapper>
   )
 }
 

src/app/[community]/dashboard/page.tsx

@@ -5,13 +5,8 @@ import { observer } from 'mobx-react-lite'
 import useDashboardSettings from '@/hooks/useDashboardSettings'
 import Overview from '@/containers//thread/DashboardThread/Overview'
 
-import { useStore } from '@/containers//thread/DashboardThread/store'
-import { useInit } from '@/containers//thread/DashboardThread/logic'
-
 const DashboardOverviewPage = () => {
   const { overviewData } = useDashboardSettings()
-  const store = useStore()
-  useInit(store)
 
   return <Overview data={overviewData} />
 }

src/app/[community]/dashboard/styles/index.ts

@@ -1,15 +1,15 @@
 import styled from 'styled-components'
 
-import type { TMetric, TTestable } from '@/spec'
+import type { TMetric } from '@/spec'
 import css from '@/css'
 
-export const BaseWrapper = styled.div.attrs<TTestable>(({ $testid }) => ({
-  'data-test-id': $testid,
-}))<TTestable>`
+export const Wrapper = styled.div<{ metric?: TMetric }>`
+  ${css.column('justify-start', 'align-center')};
   min-height: 70vh;
   width: 100%;
 
-  ${css.media.tablet`
+  ${css.media.mobile`
+    padding-left: 0;
     width: 100%;
     margin: 0;
     padding: .6em;
@@ -18,14 +18,6 @@ export const BaseWrapper = styled.div.attrs<TTestable>(({ $testid }) => ({
   `};
 `
 
-export const Wrapper = styled(BaseWrapper)<{ metric?: TMetric }>`
-  ${css.column('justify-start', 'align-center')};
-
-  ${css.media.mobile`
-    padding-left: 0;
-  `};
-`
-
 export const InnerWrapper = styled.div<{ metric: TMetric }>`
   ${({ metric }) => css.fitContentWidth(metric)};
 
@@ -34,8 +26,28 @@ export const InnerWrapper = styled.div<{ metric: TMetric }>`
   padding-top: 0;
   ${css.column('align-center')};
 `
-
 export const ContentWrapper = styled.div`
   ${css.column()};
   width: 100%;
 `
+export const FrameWrapper = styled.div<{ metric: TMetric }>`
+  ${css.row()};
+  width: 100%;
+  ${({ metric }) => css.fitPageWidth(metric)};
+`
+export const MainWrapper = styled.div`
+  flex-grow: 1;
+  min-height: 500px;
+
+  background: transparent;
+  margin-top: 30px;
+  padding-left: 80px;
+  margin-left: 35px;
+
+  ${css.media.mobile`
+    margin-top: 20px;
+    padding-left: 0;
+    margin-left: 0;
+    width: 100%;
+  `};
+`

src/containers/thread/DashboardThread/styles/layout/index.ts

@@ -5,7 +5,6 @@ import css, { theme, rainbow } from '@/css'
 
 export const Wrapper = styled.div`
   ${css.column()};
-  padding-left: 75px;
 
   ${css.media.mobile`
     padding: 20px;

src/containers/thread/DashboardThread/styles/overview/index.ts

@@ -8,6 +8,7 @@ import { ALIGN_HEADER_OFFSET } from '../../constant'
 export const Wrapper = styled.div`
   ${css.column()};
   padding: ${() => `0 ${ALIGN_HEADER_OFFSET}`};
+  padding-left: 60px;
 `
 export const Section = styled.div`
   padding-bottom: 30px;