update sidebar/page styling

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 (
-    <Container id="page" className="container__page" style={{ height: '100%' }}>
-      <Header className="page__header">{header}</Header>
+    <PageContainer id="page-container">
+      <PageHeader id="page-header">{header}</PageHeader>
       {!hideDivider && <Divider />}
-      <Content className="page__content">{children}</Content>
-    </Container>
+      <PageContent id="page-content">{children}</PageContent>
+    </PageContainer>
   );
 };
 

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 (
-    <Sb
-      id="sidebar"
-      className="container__sidebar"
-      width={expand ? 193 : 56}
-      collapsible
-    >
+    <FixedSidebar id="sidebar" width={expand ? 193 : 56} collapsible>
       <Sidenav
-        className={sidebarClasses}
         expanded={expand}
         appearance="default"
+        style={{
+          height: 'calc(100% - 122px)',
+          borderRight: '1px solid #48545c',
+        }}
       >
         <Sidenav.Header />
         <Sidenav.Body>
@@ -92,7 +84,7 @@ const Sidebar = ({
           </Nav>
         </Sidenav.Body>
       </Sidenav>
-    </Sb>
+    </FixedSidebar>
   );
 };
 

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%;
+`;

src/styles/GenericPage.global.css

@@ -1,8 +0,0 @@
-.page__header {
-  padding: 20px 20px 0px 20px;
-}
-
-.page__content {
-  position: relative;
-  padding: 10px;
-}

src/styles/Sidebar.global.css

@@ -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;
-}