diff --git a/src/app/[community]/dashboard/layout.tsx b/src/app/[community]/dashboard/layout.tsx
index 645ad1cb6..c3019000b 100644
--- a/src/app/[community]/dashboard/layout.tsx
+++ b/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 (
-
+
-
+
{children}
-
+
-
+
)
}
diff --git a/src/app/[community]/dashboard/page.tsx b/src/app/[community]/dashboard/page.tsx
index 6706b08d6..8199afaa1 100644
--- a/src/app/[community]/dashboard/page.tsx
+++ b/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
}
diff --git a/src/app/[community]/dashboard/styles/index.ts b/src/app/[community]/dashboard/styles/index.ts
index 86fcbea8c..6ce5291ef 100644
--- a/src/app/[community]/dashboard/styles/index.ts
+++ b/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(({ $testid }) => ({
- 'data-test-id': $testid,
-}))`
+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(({ $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%;
+ `};
+`
diff --git a/src/containers/thread/DashboardThread/styles/index.ts b/src/containers/thread/DashboardThread/styles/index.ts
deleted file mode 100755
index 362e640f5..000000000
--- a/src/containers/thread/DashboardThread/styles/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import styled from 'styled-components'
-
-import type { TTestable, TMetric } from '@/spec'
-import css from '@/css'
-
-type TWrapper = {
- metric: TMetric
-} & TTestable
-export const Wrapper = styled.div.attrs(({ $testid }) => ({
- 'data-test-id': $testid,
-}))`
- ${css.row()};
- width: 100%;
- ${({ metric }) => css.fitPageWidth(metric)};
- border: 1px solid tomato;
-`
-export const MainWrapper = styled.div`
- flex-grow: 1;
- min-height: 500px;
- border: 1px solid green;
-
- 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%;
- `};
-`
diff --git a/src/containers/thread/DashboardThread/styles/layout/index.ts b/src/containers/thread/DashboardThread/styles/layout/index.ts
index 6a3204858..34eda84f7 100644
--- a/src/containers/thread/DashboardThread/styles/layout/index.ts
+++ b/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;
diff --git a/src/containers/thread/DashboardThread/styles/overview/index.ts b/src/containers/thread/DashboardThread/styles/overview/index.ts
index 998ca5772..196095b3f 100644
--- a/src/containers/thread/DashboardThread/styles/overview/index.ts
+++ b/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;