diff --git a/src/components/layout/GenericPage.tsx b/src/components/layout/GenericPage.tsx index f0bc0c4..3878dfb 100644 --- a/src/components/layout/GenericPage.tsx +++ b/src/components/layout/GenericPage.tsx @@ -1,15 +1,14 @@ import React from 'react'; -import { Container, Header, Content, Divider } from 'rsuite'; -import styled from 'styled-components'; -import '../../styles/GenericPage.global.css'; +import { Divider } from 'rsuite'; +import { PageContainer, PageHeader, PageContent } from './styled'; const GenericPage = ({ header, children, hideDivider }: any) => { return ( - -
{header}
+ + {header} {!hideDivider && } - {children} -
+ {children} + ); }; diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx index 89a08c6..741828b 100644 --- a/src/components/layout/Sidebar.tsx +++ b/src/components/layout/Sidebar.tsx @@ -1,7 +1,6 @@ import React from 'react'; -import classNames from 'classnames'; -import { Sidebar as Sb, Sidenav, Nav, Icon } from 'rsuite'; -import '../../styles/Sidebar.global.css'; +import { Sidenav, Nav, Icon } from 'rsuite'; +import { FixedSidebar } from './styled'; const Sidebar = ({ expand, @@ -9,22 +8,15 @@ const Sidebar = ({ active, handleSidebarSelect, }: any) => { - const sidebarClasses = classNames({ - sidebar__main: true, - sidebar__main_expanded: expand === true, - }); - return ( - + @@ -92,7 +84,7 @@ const Sidebar = ({ - + ); }; diff --git a/src/components/layout/styled.tsx b/src/components/layout/styled.tsx index 8bbaf5b..39b59ce 100644 --- a/src/components/layout/styled.tsx +++ b/src/components/layout/styled.tsx @@ -1,6 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { Container, Footer } from 'rsuite'; +import { Container, Content, Footer, Header, Sidebar } from 'rsuite'; // Layout.tsx export const RootContainer = styled(Container)` @@ -87,3 +87,25 @@ export const WindowControlButton = styled.div<{ background: rgba(255, 255, 255, 0.2); } `; + +// GenericPage.tsx +export const PageContainer = styled(Container)` + height: 100%; +`; + +export const PageHeader = styled(Header)` + padding: 20px 20px 0px 20px; +`; + +export const PageContent = styled(Content)` + position: relative; + padding: 10px; +`; + +// Sidebar.tsx +export const FixedSidebar = styled(Sidebar)` + position: fixed; + top: 33px; + z-index: 1; + height: 100%; +`; diff --git a/src/styles/GenericPage.global.css b/src/styles/GenericPage.global.css deleted file mode 100644 index 8891d1a..0000000 --- a/src/styles/GenericPage.global.css +++ /dev/null @@ -1,8 +0,0 @@ -.page__header { - padding: 20px 20px 0px 20px; -} - -.page__content { - position: relative; - padding: 10px; -} diff --git a/src/styles/Sidebar.global.css b/src/styles/Sidebar.global.css deleted file mode 100644 index bcbdfa7..0000000 --- a/src/styles/Sidebar.global.css +++ /dev/null @@ -1,24 +0,0 @@ -.container__sidebar { - position: fixed; - top: 33px; /* Account for custom titlebar */ - z-index: 1; -} - -.sidebar__main { - height: 100vh; - border-right: 1px solid #3c3f43; -} - -.sidebar__expander { - position: absolute; - top: 50px; - z-index: 1; -} - -.sidebar__expander_true { - left: 180px; -} - -.sidebar__expander_false { - left: 43px; -}