diff --git a/apps/react-world/src/components/home/HomePageContainer.tsx b/apps/react-world/src/components/home/HomePageContainer.tsx index 708ae22d..b67bef1a 100644 --- a/apps/react-world/src/components/home/HomePageContainer.tsx +++ b/apps/react-world/src/components/home/HomePageContainer.tsx @@ -1,9 +1,26 @@ -interface HomePageContainerProps { - children: React.ReactNode; -} +import { PropsWithChildren } from 'react'; +import styled from '@emotion/styled'; -const HomePageContainer: React.FC = ({ children }) => { - return
{children}
; +type ContainerProps = PropsWithChildren; + +export const HomePageContainer = ({ children }: ContainerProps) => { + return {children}; }; +const Container = styled.div` + &.home-page .feed-toggle { + margin-bottom: -1px; + } + + &.home-page .sidebar { + padding: 5px 10px 10px 10px; + background: #f3f3f3; + border-radius: 4px; + } + + &.home-page .sidebar p { + margin-bottom: 0.2rem; + } +`; + export default HomePageContainer; diff --git a/apps/react-world/styles/main.css b/apps/react-world/styles/main.css index 2502f162..09618e0a 100644 --- a/apps/react-world/styles/main.css +++ b/apps/react-world/styles/main.css @@ -5204,16 +5204,6 @@ footer { .btn .counter { font-size: 0.8rem !important; } -.home-page .feed-toggle { - margin-bottom: -1px; } - -.home-page .sidebar { - padding: 5px 10px 10px 10px; - background: #f3f3f3; - border-radius: 4px; } - .home-page .sidebar p { - margin-bottom: 0.2rem; } - .article-page .banner { padding: 2rem 0 2rem 0; } .article-page .banner h1 {