Fix admin UI

Author: nt0xa

web/admin/src/index.css

@@ -1,18 +1,17 @@
-@import '~antd/dist/antd.css';
-@import '~codemirror/lib/codemirror.css';
-@import '~codemirror/theme/idea.css';
+@import "~antd/dist/antd.css";
+@import "~codemirror/lib/codemirror.css";
+@import "~codemirror/theme/idea.css";
 
 :root {
   /* TEXT COLORS */
-  --heading-color:        color-mod(#000 alpha(85%));
-  --text-color:           color-mod(#000 alpha(65%));
+  --heading-color: color-mod(#000 alpha(85%));
+  --text-color: color-mod(#000 alpha(65%));
   --text-color-secondary: color-mod(#000 alpha(45%));
 
-  --heading-color-dark:        color-mod(#fff alpha(100%));
-  --text-color-dark:           color-mod(#fff alpha(85%));
+  --heading-color-dark: color-mod(#fff alpha(100%));
+  --text-color-dark: color-mod(#fff alpha(85%));
   --text-color-secondary-dark: color-mod(#fff alpha(65%));
 
-
   /* BACKGROUND COLORS */
   --dark-background: #001529;
   --light-background: #f8f8f8;
@@ -25,3 +24,10 @@
   /* FORM */
   --field-border-color: #d9d9d9;
 }
+
+html,
+body,
+#root {
+  width: 100%;
+  min-height: 100vh;
+}

web/admin/src/scenes/scenes/main/Main.js

@@ -79,11 +79,11 @@ class Main extends Component {
 
   renderAll() {
     return (
-      <Layout className={styles.layout}>
+      <Layout style={{ minHeight:"100vh" }}>
 
         {this.renderSidebar()}
 
-        <Layout className={styles.main}>
+        <Layout>
 
           <Layout.Header>
             {this.renderHeader()}

web/admin/src/scenes/scenes/main/Main.module.css

@@ -1,15 +1,10 @@
-.layout {
-}
-
 .content {
   padding: 24px;
-  height: 100%;
 }
 
 .body {
   padding: 10px;
   background-color: #fff;
-  height: 100%;
 }
 
 .spin {
@@ -18,7 +13,3 @@
   align-items: center;
   justify-content: center;
 }
-
-.main {
-  height: 100vh;
-}

web/admin/src/scenes/scenes/main/components/nav/Nav.js

@@ -6,16 +6,35 @@ import { withRouter } from "react-router";
 
 class Nav extends Component {
   static propTypes = {
-    menuItems: PropTypes.array,
     location: PropTypes.object,
   };
 
-  static defaultProps = {
-    menuItems: [],
-  };
 
   render() {
-    const { menuItems, location } = this.props;
+    const { location } = this.props;
+
+    const menuItems = [
+      {
+        title: 'Users',
+        path: '/users',
+        icon: 'team',
+      },
+      {
+        title: 'Challenges',
+        path: '/challenges',
+        icon: 'bulb',
+      },
+      {
+        title: 'Announcements',
+        path: '/announcements',
+        icon: 'notification',
+      },
+      {
+        title: 'Files',
+        path: '/files',
+        icon: 'file',
+      },
+    ]
 
     let selectedKeys = [];
     menuItems.forEach((m, i) => {
@@ -29,30 +48,14 @@ class Nav extends Component {
 
     return (
       <Menu selectedKeys={selectedKeys} theme="dark" style={{ height: "100%" }}>
-        <Menu.Item key={0}>
-          <Link to="/users">
-            <Icon type="team" />
-            <span>Users</span>
-          </Link>
-        </Menu.Item>
-        <Menu.Item key={1}>
-          <Link to="/challenges">
-            <Icon type="bulb" />
-            <span>Challenges</span>
-          </Link>
-        </Menu.Item>
-        <Menu.Item key={2}>
-          <Link to="/announcements">
-            <Icon type="notification" />
-            <span>Announcements</span>
-          </Link>
-        </Menu.Item>
-        <Menu.Item key={3}>
-          <Link to="/users">
-            <Icon type="file" />
-            <span>Files</span>
-          </Link>
-        </Menu.Item>
+        {menuItems.map((item, i) => (
+          <Menu.Item key={i}>
+            <Link to={item.path}>
+              <Icon type={item.icon} />
+              <span>{item.title}</span>
+            </Link>
+          </Menu.Item>
+        ))}
       </Menu>
     );
   }