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 (
-
-
+
+
{!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 (
-
+
);
};
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;
-}