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;