migrated to styled Components

web/src/App.jsx

@@ -2,13 +2,15 @@ import {
   BrowserRouter as Router,
   Switch,
   Route,
-  Link
 } from "react-router-dom";
+import { ThemeProvider } from "styled-components";
 import {CreateUserWidget, RecentActivityWidget, SystemStatusWidget} from './components'
 import {AccountManager, AdminUI, Logger} from './views'
+import theme from './theme';
 function App() {
   return (
     <Router>
+      <ThemeProvider theme={theme}>
       <AdminUI>
         <Switch>
           <Route path="/" exact>
@@ -21,6 +23,7 @@ function App() {
           </Route>
         </Switch>
       </AdminUI>
+      </ThemeProvider>
     </Router>
   );
 }

web/src/components/Card.jsx

@@ -1,20 +1,19 @@
 import React from 'react'
 import styled from 'styled-components'
-import { theme } from '../theme';
 const CardDiv = styled.div`
 flex-grow: 1;
-color: ${theme.color6};
+color: ${props=>props.theme.colours.color6};
-background: ${theme.color1};
+background: ${props=>props.theme.colours.color1};
 border-radius: 1em;
 padding: 1em;
 margin: 1em;
 h4 {
-    margin: 0;
+  margin: 0;
-  }
+}
 `;
 export default function Card({children}) {
     return (
-        <CardDiv theme={theme}>
+        <CardDiv>
             {children}
         </CardDiv>
     )

web/src/components/Card.sass

@@ -1,74 +0,0 @@
-.main
-    &__card
-        flex-grow: 1
-        color: $color6
-        background: $color1
-        border-radius: 1em
-        padding: 1em
-        margin: 1em
-        h4
-            margin: 0
-        &__input
-            padding: 1em .2em .1em 0.2em
-            display: inline-block
-            flex-grow: 1
-            with: auto
-            z-index: 1
-            border: none
-            background: none
-            outline: none
-            font-size: 1em
-            &__box
-                font-size: 1.1em
-                overflow: hidden
-                position: relative
-                margin: 0.2em 0
-                display: flex
-                flex-direction: row
-                align-items: stretch
-                background: $color6
-                border-bottom: .3em solid $color5
-                &:hover
-                    border-bottom: .3em solid $color3
-                    outline: auto
-                >button
-                    position: relative
-                    background: $color2
-                    color: $color6
-                    border: none
-                    font-size: 0.8em
-                    font-weight: bold
-                    padding: 0 .5em
-                    transition: ease all 300ms
-                    z-index: 1
-                    &::before
-                        position: absolute
-                        display: block
-                        content: ''
-                        clip-path: polygon(0% 0%, 100% 100%, 0% 100%)
-                        transform: translateX(-90%) rotate(45deg)
-                        height: 1em
-                        width: 1em
-                        background: $color2
-                        transition: ease all 300ms
-                    &:hover
-                        background: $color3
-                        &::before
-                            background: $color3
-                            transform: translateX(-90%) rotate(45deg) scale(1.2)
-
-            &__label
-                padding: 0
-                color: $color2
-                z-index: 0
-                position: absolute
-                left: 0.2em
-                padding-bottom: 0.2em
-                bottom: 0
-                transition: all ease-in-out 350ms
-            &:focus + &__label, &:not(:placeholder-shown) + &__label
-                color: $color5
-                font-size: 0.7em
-                transform: translateY(0)
-                bottom: 50%
-                font-weight: bold

web/src/components/CreateUserWidget.jsx

@@ -1,20 +1,20 @@
 import React, { Component } from 'react'
 import TextInput from './TextInput'
+import Card from './Card'
 export class CreateUserWidget extends Component {
     render() {
         return (
-            <div className="main__card">
+            <Card>
                 <h4>Add User</h4>
                 <hr />
                 <p>Add new user</p>
-                <div className="main__card__input__box"><input id="main__card__input__box__0" placeholder=" " type="text" className="main__card__input"></input><label for="main__card__input__box__0" className="main__card__input__label">First Name</label></div>
+                <TextInput id="first_name" label="First Name" />
-                <div className="main__card__input__box"><input id="main__card__input__box__1" placeholder=" " type="text" className="main__card__input"></input><label for="main__card__input__box__1" className="main__card__input__label">Last Name</label></div>
+                <TextInput id="last_name" label="Last Name" />
-                <div className="main__card__input__box"><input id="main__card__input__box__2" placeholder=" " type="text" className="main__card__input"></input><label for="main__card__input__box__2" className="main__card__input__label">PIN</label></div>
+                <TextInput id="pin" label="PIN" />
-                <div className="main__card__input__box"><input id="main__card__input__box__3" placeholder=" " type="text" className="main__card__input"></input><label for="main__card__input__box__3" className="main__card__input__label">RFID</label><button>Scan</button></div>
+                <TextInput id="rfid" disabled label="RFID" button="Scan" value="Scanning RFID" onClick={(e)=>{console.log("Button Pressed",e)}}/>
-                <TextInput/>
+                <TextInput id="Expire_Date" label="Expire Date" type="date" />
-                <div className="main__card__input__box"><input id="main__card__input__box__4" placeholder=" " type="date" className="main__card__input"></input><label for="main__card__input__box__4" className="main__card__input__label">Expire Date</label></div>
                 <button>Add</button>
-            </div>
+                </Card>
         )
     }
 }

web/src/components/RecentActivityWidget.jsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react'
-
+import Card from './Card'
 export class RecentActivityWidget extends Component {
     render() {
         return (
-            <div className="main__card">
+            <Card>
             <h4>Recent Activity</h4>
             <hr />
             <table>
@@ -22,7 +22,7 @@ export class RecentActivityWidget extends Component {
                     </tr>
                 </tbody>
             </table>
-        </div>
+        </Card>
         )
     }
 }

web/src/components/SearchBox.jsx

@@ -0,0 +1,66 @@
+import React, { Component } from 'react'
+import styled, {withTheme,} from 'styled-components'
+export class SearchBox extends Component {
+
+
+    render() {
+        const SearchWrapper = styled.div`
+            margin: .5em;
+            border-radius: .5rem;
+            display: inline-flex;
+            white-space: nowrap;
+            margin-left: auto;
+            transition: ease-in-out all 500ms;
+            flex-grow: 0;
+            max-width: 20em;
+            &:hover {
+                box-shadow: 0 0 1em ${this.props.theme.colours.color3};
+                flex-grow: 1;
+                input {
+                    flex-grow: 1;
+                }
+            }
+            input{
+                height: 2rem;
+                transition: ease all 500ms;
+                border-radius: .5rem 0 0 .5rem;
+                display: inline-flex;
+                background: ${this.props.theme.colours.color3};
+                border: none;
+                outline: none;
+                color: ${this.props.theme.colours.color6};
+                flex-grow: 0;
+                margin-left: auto;
+                width: 100%;
+                box-shadow: 0 0 .2em ${this.props.theme.colours.color5};
+                padding: .5em;
+                &:hover, &:not(:placeholder-shown){
+                    transition: ease all 500ms;
+                    flex-grow: 1;
+                }
+                + button{
+                    height: 2rem;
+                    border: none;
+                    color: ${this.props.theme.colours.color6};
+                    border-radius: 0 .5rem .5rem 0;
+                    display: inline-flex;
+                    align-items: center;
+                    background: ${this.props.theme.colours.color2};
+                    font-size: 1em;
+                    border: .1rem inset ${this.props.theme.colours.color3};
+                    border-style: solid;
+                    padding: .5em;
+                    &:hover{
+                        background: ${this.props.theme.colours.color6};
+                        color: ${this.props.theme.colours.color3};
+                    }
+                }
+            }
+            `;
+        return (
+            <SearchWrapper id="header__search"><input id={this.props.id} type="text" placeholder="..."></input><button>Search</button></SearchWrapper>
+        )
+    }
+}
+
+export default withTheme(SearchBox)

web/src/components/TextInput.jsx

@@ -1,36 +1,111 @@
 import React, { Component } from 'react'
 import styled from 'styled-components'
-import { theme } from '../theme'
+import { withTheme } from 'styled-components';
-const InputWrapper = styled.div`
-font-size: 1.1em;
-overflow: hidden;
-position: relative;
-margin: 0.2em 0;
-display: -webkit-box;
-display: -ms-flexbox;
-display: flex;
--webkit-box-orient: horizontal;
--webkit-box-direction: normal;
-    -ms-flex-direction: row;
-        flex-direction: row;
--webkit-box-align: stretch;
-    -ms-flex-align: stretch;
-        align-items: stretch;
-background: #ddd9ebbf;
-border-bottom: 0.3em solid #490428c6;
-`;
-
 export class TextInput extends Component {
+
     render() {
+        const InputWrapper = styled.div`
+        font-size: 1.1em;
+        overflow: hidden;
+        position: relative;
+        margin: 0.2em 0;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: row;
+                flex-direction: row;
+        -webkit-box-align: stretch;
+            -ms-flex-align: stretch;
+                align-items: stretch;
+        background: ${this.props.disabled===undefined ? this.props.theme.colours.color6 : this.props.theme.colours.color7};
+        border-bottom: 0.3em solid ${this.props.disabled===undefined ? this.props.theme.colours.color5 : this.props.theme.colours.color8};
+        :hover {
+            ${this.props.disabled===undefined ? "outline: auto;\nborder-bottom: 0.3em solid" + this.props.theme.colours.color3 + ";" : null};
+            button:hover{
+                ${this.props.btndisabled===undefined ?"background: "+ this.props.theme.colours.color3:""};
+                &::before{
+                ${this.props.btndisabled===undefined ?"background: "+ this.props.theme.colours.color3:""};
+                -webkit-transform: translateX(-90%) rotate(45deg) scale(1.2);
+                        transform: translateX(-90%) rotate(45deg) scale(1.2);
+                }
+            }
+        }
+        input{
+            padding: 1em .2em .1em 0.2em;
+            display: inline-block;
+            -webkit-box-flex: 1;
+                -ms-flex-positive: 1;
+                    flex-grow: 1;
+                    z-index: 1;
+            border: none;
+            background: none;
+            outline: none;
+            font-size: 1em;
+            ${this.props.disabled!==undefined ? "user-select: none;" : null};
+            &:focus + label, &:not(:placeholder-shown) + label {
+                color: ${this.props.theme.colours.color5};
+                font-size: 0.7em;
+                -webkit-transform: translateY(0);
+                        transform: translateY(0);
+                bottom: 50%;
+                font-weight: bold;
+            }
+            :disabled{
+                color: ${this.props.theme.colours.color1};
+                &:focus + label, &:not(:placeholder-shown) + label{
+                    
+                }
+            }
+        }
+        label{
+            padding: 0;
+            color: ${this.props.theme.colours.color2};
+            z-index: 0;
+            position: absolute;
+            left: 0.2em;
+            padding-bottom: 0.2em;
+            bottom: 0;
+            -webkit-transition: all ease-in-out 350ms;
+            transition: all ease-in-out 350ms;
+        }
+        button{
+            position: relative;
+            background: ${this.props.theme.colours.color2};
+            color: ${this.props.theme.colours.color6};
+            border: none;
+            font-size: 0.8em;
+            font-weight: bold;
+            padding: 0 .5em;
+            -webkit-transition: ease all 300ms;
+            transition: ease all 300ms;
+            z-index: 1;
+            ::before {
+                position: absolute;
+                display: block;
+                content: '';
+                -webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+                        clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+                -webkit-transform: translateX(-90%) rotate(45deg);
+                        transform: translateX(-90%) rotate(45deg);
+                height: 1em;
+                width: 1em;
+                background: ${this.props.theme.colours.color2};
+                -webkit-transition: ease all 300ms;
+                transition: ease all 300ms;
+            }
+        }
+        `;
         return (
             <InputWrapper>
-                <input id="main__card__input__box__3" placeholder=" " type="text" className="main__card__input"></input>
+                <input id={this.props.id} placeholder="" type={this.props.type ? this.props.type : "text"} value={this.props.value} disabled={this.props.disabled} />
-                <label for="main__card__input__box__3" className="main__card__input__label">RFID</label>
+                {this.props.label != null ? <label htmlFor={this.props.id}>{this.props.label}</label> : ""}
-                <button>Scan</button>
+                {this.props.button != null ? <button onClick={this.props.onClick}>{this.props.button}</button> : ""}
             </InputWrapper>
 
         )
     }
 }
 
-export default TextInput
+export default withTheme(TextInput)

web/src/components/index.js

@@ -1,4 +1,5 @@
 import CreateUserWidget from "./CreateUserWidget";
 import RecentActivityWidget from "./RecentActivityWidget";
 import SystemStatusWidget from "./SystemStatusWidget";
-export { CreateUserWidget, RecentActivityWidget, SystemStatusWidget }
+import SearchBox from "./SearchBox";
+export { CreateUserWidget, RecentActivityWidget, SystemStatusWidget, SearchBox }

web/src/index.js

@@ -2,10 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+      <App />
   </React.StrictMode>,
   document.getElementById('root')
 );

web/src/theme/index.js

@@ -1,10 +1,29 @@
-const theme = {
+const colours1 = {
-color1: "#1F1E2E",
+    color1: "#1F1E2E",
-color2: "#27283A",
+    color2: "#27283A",
-color3: "#438AF4",
+    color3: "#438AF4",
-color4: "rgba(2,0,36,0.7455182756696428)",
+    color4: "rgba(2,0,36,0.7455182756696428)",
-color5: "#490428c6",
+    color5: "#490428c6",
-color6: "#ddd9ebbf",
+    color6: "#ddd9ebbf",
+    color7: "#858192bf",
+    color8: "#3a192ae0",
+    color9: "#110d13",
+    color10: "#fff",
 }
-
+const colours2 = {
-export {theme}
+    color1: "#1e2e2e",
+    color2: "#273a37",
+    color3: "#43f48d",
+    color4: "#012400be",
+    color5: "#254904c6",
+    color6: "#daebd9bf",
+    color7: "#839281bf",
+    color8: "#193a1be0",
+    color9: "#110d13",
+    color10: "#fff",
+}
+const theme = {
+    colours: colours1
+}
+export { theme, colours1 as colours }
+export default theme

web/src/views/AdminUI.css

@@ -1,444 +0,0 @@
-* {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-
-html, body {
-  margin: 0;
-}
-
-#root {
-  min-height: 100vh;
-  display: -ms-grid;
-  display: grid;
-  -ms-grid-columns: auto 1fr auto;
-      grid-template-columns: auto 1fr auto;
-  -ms-grid-rows: auto 1fr 2em;
-      grid-template-rows: auto 1fr 2em;
-      grid-template-areas: "header header header" " menu main ." "footer footer footer";
-  background: #27283A;
-  overflow: auto;
-}
-
-#header {
-  position: relative;
-  -ms-grid-row: 1;
-  -ms-grid-column: 1;
-  -ms-grid-column-span: 3;
-  grid-area: header;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  min-height: auto;
-  padding: .5em;
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  background: #1F1E2E;
-  color: #ddd9ebbf;
-}
-
-#header h1 {
-  -ms-flex-wrap: nowrap;
-      flex-wrap: nowrap;
-  white-space: nowrap;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  font-size: 1.5em;
-}
-
-#header::after {
-  -ms-grid-column-align: start;
-      justify-self: start;
-  position: absolute;
-  display: block;
-  content: '';
-  left: 0;
-  right: 0;
-  top: 100%;
-  background: #438AF4;
-  height: .1em;
-}
-
-#header__search {
-  margin: .5em;
-  border-radius: .5rem;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  white-space: nowrap;
-  margin-left: auto;
-  -webkit-transition: ease-in-out all 500ms;
-  transition: ease-in-out all 500ms;
-  -webkit-box-flex: 0;
-      -ms-flex-positive: 0;
-          flex-grow: 0;
-  max-width: 20em;
-}
-
-#header__search:hover {
-  -webkit-box-shadow: 0 0 1em #438AF4;
-          box-shadow: 0 0 1em #438AF4;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-}
-
-#header__search:hover__input {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-}
-
-#header__search__input {
-  height: 2rem;
-  -webkit-transition: ease all 500ms;
-  transition: ease all 500ms;
-  border-radius: .5rem 0 0 .5rem;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  background: #438AF4;
-  border: none;
-  outline: none;
-  color: #ddd9ebbf;
-  -webkit-box-flex: 0;
-      -ms-flex-positive: 0;
-          flex-grow: 0;
-  margin-left: auto;
-  width: 100%;
-  -webkit-box-shadow: 0 0 0.2em #490428c6;
-          box-shadow: 0 0 0.2em #490428c6;
-  padding: .5em;
-}
-
-#header__search__input:hover, #header__search__input:not(:placeholder-shown) {
-  -webkit-transition: ease all 500ms;
-  transition: ease all 500ms;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-}
-
-#header__search__input + button {
-  height: 2rem;
-  border: none;
-  color: #ddd9ebbf;
-  border-radius: 0 .5rem .5rem 0;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  background: #27283A;
-  font-size: 1em;
-  border: 0.1rem inset #438AF4;
-  border-style: solid;
-  padding: .5em;
-}
-
-#header__search__input + button:hover {
-  background: #ddd9ebbf;
-  color: #438AF4;
-}
-
-#header__menu {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -ms-flex-wrap: nowrap;
-      flex-wrap: nowrap;
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
-}
-
-#header__menu ul {
-  list-style: none;
-  padding: 0;
-}
-
-#header__menu ul li {
-  display: inline;
-}
-
-#header__menu ul li a {
-  text-decoration: none;
-  color: #ddd9ebbf;
-  padding: .5em;
-  white-space: nowrap;
-}
-
-#header__menu ul li a:hover {
-  color: #438AF4;
-}
-
-#menu {
-  -ms-grid-row: 2;
-  -ms-grid-column: 1;
-  grid-area: menu;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  min-height: 100;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  background: #1F1E2E;
-  padding: .5em 0;
-  overflow: visible;
-}
-
-#menu h3 {
-  margin: 0;
-  color: #ddd9ebbf;
-  -webkit-text-decoration: bold;
-          text-decoration: bold;
-}
-
-#menu ul {
-  list-style: none;
-  padding-left: 0;
-  margin: .4em 0;
-}
-
-#menu ul a {
-  position: relative;
-  display: block;
-  text-decoration: none;
-  margin-left: .4em;
-  color: #ddd9ebbf;
-  padding: .3em .5em;
-  font-size: 1.05em;
-  -webkit-transition: ease all 500ms;
-  transition: ease all 500ms;
-}
-
-#menu ul a::after {
-  -webkit-transition: ease all 500ms;
-  transition: ease all 500ms;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 100%;
-  width: 0em;
-  content: '';
-  background: #ddd9ebbf;
-}
-
-#menu ul a:hover {
-  background: #438AF4;
-}
-
-#menu ul a:hover::after {
-  width: 0.4em;
-}
-
-#menu ul a.menu__active {
-  color: #438AF4;
-}
-
-#menu ul a.menu__active::after {
-  width: 0.4em;
-  background: #27283A;
-}
-
-#menu ul a.menu__active:hover {
-  color: #fff;
-}
-
-#menu ul a.menu__active:hover::after {
-  width: 0.4em;
-  background: #ddd9ebbf;
-}
-
-#main {
-  position: relative;
-  -ms-grid-row: 2;
-  -ms-grid-column: 2;
-  grid-area: main;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-line-pack: start;
-      align-content: flex-start;
-  -webkit-box-align: start;
-      -ms-flex-align: start;
-          align-items: flex-start;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  padding: 1em;
-  border-top-left-radius: 1em;
-}
-
-.main__card {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  color: #ddd9ebbf;
-  background: #1F1E2E;
-  border-radius: 1em;
-  padding: 1em;
-  margin: 1em;
-}
-
-.main__card h4 {
-  margin: 0;
-}
-
-.main__card__input {
-  padding: 1em .2em .1em 0.2em;
-  display: inline-block;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  with: auto;
-  z-index: 1;
-  border: none;
-  background: none;
-  outline: none;
-  font-size: 1em;
-}
-
-.main__card__input__box {
-  font-size: 1.1em;
-  overflow: hidden;
-  position: relative;
-  margin: 0.2em 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  background: #ddd9ebbf;
-  border-bottom: 0.3em solid #490428c6;
-}
-
-.main__card__input__box:hover {
-  border-bottom: 0.3em solid #438AF4;
-  outline: auto;
-}
-
-.main__card__input__box > button {
-  position: relative;
-  background: #27283A;
-  color: #ddd9ebbf;
-  border: none;
-  font-size: 0.8em;
-  font-weight: bold;
-  padding: 0 .5em;
-  -webkit-transition: ease all 300ms;
-  transition: ease all 300ms;
-  z-index: 1;
-}
-
-.main__card__input__box > button::before {
-  position: absolute;
-  display: block;
-  content: '';
-  -webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
-          clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
-  -webkit-transform: translateX(-90%) rotate(45deg);
-          transform: translateX(-90%) rotate(45deg);
-  height: 1em;
-  width: 1em;
-  background: #27283A;
-  -webkit-transition: ease all 300ms;
-  transition: ease all 300ms;
-}
-
-.main__card__input__box > button:hover {
-  background: #438AF4;
-}
-
-.main__card__input__box > button:hover::before {
-  background: #438AF4;
-  -webkit-transform: translateX(-90%) rotate(45deg) scale(1.2);
-          transform: translateX(-90%) rotate(45deg) scale(1.2);
-}
-
-.main__card__input__label {
-  padding: 0;
-  color: #27283A;
-  z-index: 0;
-  position: absolute;
-  left: 0.2em;
-  padding-bottom: 0.2em;
-  bottom: 0;
-  -webkit-transition: all ease-in-out 350ms;
-  transition: all ease-in-out 350ms;
-}
-
-.main__card__input:focus + .main__card__input__label, .main__card__input:not(:placeholder-shown) + .main__card__input__label {
-  color: #490428c6;
-  font-size: 0.7em;
-  -webkit-transform: translateY(0);
-          transform: translateY(0);
-  bottom: 50%;
-  font-weight: bold;
-}
-
-#footer {
-  position: relative;
-  -ms-grid-row: 3;
-  -ms-grid-column: 1;
-  -ms-grid-column-span: 3;
-  grid-area: footer;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  color: #ffffff67;
-  text-transform: uppercase;
-}
-
-#footer::after {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 2em;
-  widht: 100vw;
-  opacity: 0.5;
-  background: #000;
-  background: -webkit-gradient(linear, left top, right top, from(#27283A), color-stop(#110d13), color-stop(50%, #490428c6), color-stop(65%, rgba(2, 0, 36, 0.745518)), to(#1F1E2E));
-  background: linear-gradient(90deg, #27283A 0%, #110d13, #490428c6 50%, rgba(2, 0, 36, 0.745518) 65%, #1F1E2E 100%);
-  content: '';
-}
-
-#footer::before {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 100%;
-  height: .2em;
-  opacity: 0.5;
-  content: '';
-  background: -webkit-gradient(linear, left top, left bottom, from(#27283A), to(#438AF4));
-  background: linear-gradient(#27283A, #438AF4);
-}
-/*# sourceMappingURL=AdminUI.css.map */

web/src/views/AdminUI.jsx

@@ -1,24 +1,228 @@
 import React, { Component } from 'react'
-import "./AdminUI.sass"
+//import "./AdminUI.sass"
-import {Link, NavLink} from 'react-router-dom'
+import { Link, NavLink } from 'react-router-dom'
+import styled, { createGlobalStyle, withTheme } from 'styled-components';
+import {SearchBox}  from '../components';
+
 
 export class AdminUI extends Component {
     render() {
-        const children = this.props.children;
+        const GlobalStyle = createGlobalStyle`
+            *{
+                box-sizing: border-box;
+            }
+            html, body{
+                margin: 0;
+            }
+            #root{
+                min-height: 100vh;
+                display: grid;
+                grid-template-columns: auto 1fr auto;
+                grid-template-rows: auto 1fr 2em;
+                grid-template-areas: "header header header" " menu main ." "footer footer footer";
+                //background: $color2
+                overflow: auto;
+            }
+            `;
+        const Header = styled.header`
+            position: relative;
+            -ms-grid-row: 1;
+            -ms-grid-column: 1;
+            -ms-grid-column-span: 3;
+            grid-area: header;
+            display: -webkit-inline-box;
+            display: -ms-inline-flexbox;
+            display: inline-flex;
+            -ms-flex-wrap: wrap;
+                flex-wrap: wrap;
+            -webkit-box-orient: horizontal;
+            -webkit-box-direction: normal;
+                -ms-flex-direction: row;
+                    flex-direction: row;
+            min-height: auto;
+            padding: .5em;
+            -webkit-box-pack: end;
+                -ms-flex-pack: end;
+                    justify-content: flex-end;
+            -webkit-box-align: center;
+                -ms-flex-align: center;
+                    align-items: center;
+            background: ${this.props.theme.colours.color1};
+            color: ${this.props.theme.colours.color7};
+            h1 {
+            -ms-flex-wrap: nowrap;
+            flex-wrap: nowrap;
+            white-space: nowrap;
+            display: -webkit-inline-box;
+            display: -ms-inline-flexbox;
+            display: inline-flex;
+            font-size: 1.5em;
+            }
+
+            &::after {
+            -ms-grid-column-align: start;
+            justify-self: start;
+            position: absolute;
+            display: block;
+            content: '';
+            left: 0;
+            right: 0;
+            top: 100%;
+            background: ${this.props.theme.colours.color3};
+            height: .2em;
+            z-index: 1;
+            }
+            nav{
+                display: inline-flex;
+                flex-wrap: nowrap;
+                flex-shrink: 1;
+                ul{
+                    list-style: none;
+                    padding: 0;
+                    li{
+                        display: inline;
+                        a{
+                            text-decoration: none;
+                            color: ${this.props.theme.colours.color6};
+                            padding: .5em;
+                            white-space: nowrap;
+                            &:hover{
+                                color: ${this.props.theme.colours.color3};
+                            }
+                        }
+                    }
+                }
+            }
+        `;
+        const Menu = styled.menu`
+            -ms-grid-row: 2;
+            -ms-grid-column: 1;
+            grid-area: menu;
+            margin: 0;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            min-height: 100;
+            -webkit-box-orient: vertical;
+            -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+            flex-direction: column;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            align-items: center;
+            background: ${this.props.theme.colours.color1};
+            padding: .5em 0;
+            overflow: visible;
+            h3{
+                margin: 0;
+                color: #ddd9ebbf;
+                -webkit-text-decoration: bold;
+                text-decoration: bold;
+            }
+            ul{
+                list-style: none;
+                padding-left: 0;
+                margin: .4em 0;
+                a{
+                    position: relative;
+                    display: block;
+                    text-decoration: none;
+                    margin-left: .4em;
+                    color: ${this.props.theme.colours.color6};
+                    padding: .3em .5em;
+                    font-size: 1.05em;
+                    -webkit-transition: ease all 500ms;
+                    transition: ease all 500ms;
+                    &::after{
+                        -webkit-transition: ease all 500ms;
+                        transition: ease all 500ms;
+                        position: absolute;
+                        top: 0;
+                        bottom: 0;
+                        right: 100%;
+                        width: 0em;
+                        content: '';
+                        background: ${this.props.theme.colours.color6};
+                    }
+                    &:hover{
+                        background: ${this.props.theme.colours.color3};
+                        &::after{
+                            width: 0.4em;
+                        }
+                    }
+                    &.menu__active{
+                        color: ${this.props.theme.colours.color3};
+                        &::after{
+                            width: 0.4em;
+                            background: ${this.props.theme.colours.color2};
+                        }
+                        &:hover {
+                            color: ${this.props.theme.colours.color10};
+                            &::after {
+                            width: 0.4em;
+                            background: ${this.props.theme.colours.color6};
+                            }
+                        }
+                    }
+                }
+            }
+  `;
+        const Footer = styled.footer`
+            position: relative;
+            grid-area: footer;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: ${this.props.theme.colours.color10};
+            text-shadow:  0 0 .3em ${this.props.theme.colours.color2};
+            text-transform: uppercase;
+            background: ${this.props.theme.colours.color2};
+            &::after {
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                height: 2em;
+                opacity: 0.5;
+                background: linear-gradient(-10deg, ${this.props.theme.colours.color2} 0%, ${this.props.theme.colours.color9}, ${this.props.theme.colours.color6} 50%, ${this.props.theme.colours.color4} 65%, ${this.props.theme.colours.color1} 100%);
+                content: '';
+            }
+            &::before {
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 100%;
+                height: .2em;
+                opacity: 0.5;
+                content: '';
+                background: linear-gradient(${this.props.theme.colours.color2}, ${this.props.theme.colours.color3});
+            }
+        `;
+        const Main = styled.div`
+            position: relative;
+            grid-area: main;
+            display: flex;
+            align-content: flex-start;
+            align-items: flex-start;
+            flex-wrap: wrap;
+            padding: 1em;
+            background: ${this.props.theme.colours.color2};
+        `;
         return (
             <>
-                <div id="header">
+                <GlobalStyle />
+                <Header>
                     <h1>Doorlock Systems</h1>
-                    <div id="header__search"><input id="header__search__input" type="text" placeholder="..."></input><button>Search</button></div>
+                    <SearchBox />
-                    <div id="header__menu">
+                    <nav>
                         <ul>
                             <li><Link to="/user_cp">User Settings</Link></li>
                             <li><Link to="/logout">Logout</Link></li>
                         </ul>
-                    </div>
+                    </nav>
-                </div>
+                </Header>
-                <div id="menu">
+                <Menu>
-                    <h3>Menu</h3>
+                    <h3>Menu{props => this.props.theme}</h3>
                     <ul>
                         <li><NavLink activeClassName="menu__active" exact to="/">Status</NavLink></li>
                         <li><NavLink activeClassName="menu__active" to="/accounts">Account</NavLink></li>
@@ -26,14 +230,14 @@ export class AdminUI extends Component {
                         <li><NavLink activeClassName="menu__active" to="/backup">Backup</NavLink></li>
                         <li><NavLink activeClassName="menu__active" to="/admin">Admin</NavLink></li>
                     </ul>
-                </div>
+                </Menu>
-                <div id="main">
+                <Main>
-                    {children}
+                    {this.props.children}
-                </div>
+                </Main>
-                <div id="footer">Footer</div>
+                <Footer>Footer</Footer>
             </>
         )
     }
 }
 
-export default AdminUI
+export default withTheme(AdminUI)

web/src/views/AdminUI.sass

@@ -1,275 +0,0 @@
-$color1: #1F1E2E
-$color2: #27283A
-$color3: #438AF4
-$color4: rgba(2,0,36,0.7455182756696428)
-$color5: #490428c6
-$color6: #ddd9ebbf
-*
-    box-sizing: border-box
-html, body
-    margin: 0
-#root
-    min-height: 100vh
-    display: grid
-    grid-template-columns: auto 1fr auto
-    grid-template-rows: auto 1fr 2em
-    grid-template-areas: "header header header" " menu main ." "footer footer footer"
-    background: $color2
-    overflow: auto
-
-#header
-    position: relative
-    grid-area: header
-    display: inline-flex
-    flex-wrap: wrap
-    flex-direction: row
-    min-height: auto
-    padding: .5em
-    justify-content: flex-end
-    align-items: center
-    background: $color1
-    color: $color6
-
-    h1
-        flex-wrap: nowrap
-        white-space: nowrap
-        display: inline-flex
-        font-size: 1.5em
-    &::after
-        justify-self: start
-        position: absolute
-        display: block
-        content: ''
-        left: 0
-        right: 0
-        top: 100%
-        background: $color3
-        height: .1em
-
-    &__search
-
-        margin: .5em
-        border-radius: .5rem
-        display: inline-flex
-        white-space: nowrap
-        margin-left: auto
-        transition: ease-in-out all 500ms
-        flex-grow: 0
-        max-width: 20em 
-        &:hover 
-            box-shadow: 0 0 1em $color3
-            flex-grow: 1
-            &__input
-                flex-grow: 1
-        &__input
-            height: 2rem
-            transition: ease all 500ms
-            border-radius: .5rem 0 0 .5rem
-            display: inline-flex
-            background: $color3
-            border: none
-            outline: none
-            color: $color6
-            flex-grow: 0
-            margin-left: auto
-            width: 100%
-            box-shadow: 0 0 .2em $color5
-            padding: .5em
-            &:hover, &:not(:placeholder-shown)
-                transition: ease all 500ms
-                flex-grow: 1
-            + button
-                height: 2rem
-                border: none
-                color: $color6
-                border-radius: 0 .5rem .5rem 0
-                display: inline-flex
-                align-items: center
-                background: $color2
-                font-size: 1em
-                border: .1rem inset $color3
-                border-style: solid
-                padding: .5em
-                &:hover
-                    background: $color6
-                    color: $color3
-    &__menu
-        display: inline-flex
-        flex-wrap: nowrap
-        flex-shrink: 1
-        ul
-            list-style: none
-            padding: 0
-            li
-                display: inline
-                a
-                    text-decoration: none
-                    color: $color6
-                    padding: .5em
-                    white-space: nowrap
-                    &:hover
-                        color: $color3
-#menu
-    grid-area: menu
-    display: flex
-    min-height: 100
-    flex-direction: column
-    align-items: center
-    background: $color1
-    padding: .5em 0
-    overflow: visible
-    h3
-        margin: 0
-        color: $color6
-        text-decoration: bold
-    ul
-        list-style: none
-        padding-left: 0
-        margin: .4em 0
-        a
-            position: relative
-            display: block
-            text-decoration: none
-            margin-left: .4em
-            color: $color6
-            //margin: .5em 0
-            padding: .3em .5em
-            font-size: 1.05em
-            transition: ease all 500ms
-            &::after
-                transition: ease all 500ms
-                position: absolute
-                top: 0
-                bottom: 0
-                right: 100%
-                width: 0em
-                content: ''
-                background: $color6
-            &:hover
-                background: $color3
-                &::after
-                    width: 0.4em
-            &.menu__active
-                color: $color3
-                &::after
-                    width: 0.4em
-                    background: $color2
-                &:hover
-                    color: #fff
-
-                    &::after
-                        width: 0.4em
-                        background: $color6
-
-#main
-    position: relative
-    grid-area: main
-    display: flex
-    align-content: flex-start
-    align-items: flex-start
-    flex-wrap: wrap
-    padding: 1em
-    border-top-left-radius: 1em
-.main
-    &__card
-        flex-grow: 1
-        color: $color6
-        background: $color1
-        border-radius: 1em
-        padding: 1em
-        margin: 1em
-        h4
-            margin: 0
-        &__input
-            padding: 1em .2em .1em 0.2em
-            display: inline-block
-            flex-grow: 1
-            with: auto
-            z-index: 1
-            border: none
-            background: none
-            outline: none
-            font-size: 1em
-            &__box
-                font-size: 1.1em
-                overflow: hidden
-                position: relative
-                margin: 0.2em 0
-                display: flex
-                flex-direction: row
-                align-items: stretch
-                background: $color6
-                border-bottom: .3em solid $color5
-                &:hover
-                    border-bottom: .3em solid $color3
-                    outline: auto
-                >button
-                    position: relative
-                    background: $color2
-                    color: $color6
-                    border: none
-                    font-size: 0.8em
-                    font-weight: bold
-                    padding: 0 .5em
-                    transition: ease all 300ms
-                    z-index: 1
-                    &::before
-                        position: absolute
-                        display: block
-                        content: ''
-                        clip-path: polygon(0% 0%, 100% 100%, 0% 100%)
-                        transform: translateX(-90%) rotate(45deg)
-                        height: 1em
-                        width: 1em
-                        background: $color2
-                        transition: ease all 300ms
-                    &:hover
-                        background: $color3
-                        &::before
-                            background: $color3
-                            transform: translateX(-90%) rotate(45deg) scale(1.2)
-
-            &__label
-                padding: 0
-                color: $color2
-                z-index: 0
-                position: absolute
-                left: 0.2em
-                padding-bottom: 0.2em
-                bottom: 0
-                transition: all ease-in-out 350ms
-            &:focus + &__label, &:not(:placeholder-shown) + &__label
-                color: $color5
-                font-size: 0.7em
-                transform: translateY(0)
-                bottom: 50%
-                font-weight: bold
-#footer
-    position: relative
-    grid-area: footer
-    display: flex
-    justify-content: center
-    align-items: center
-    color: #ffffff67
-    text-transform: uppercase
-    &::after
-        position: absolute
-
-        left: 0
-        right: 0
-        bottom: 0
-        height: 2em
-        widht: 100vw
-        opacity: 0.5
-        background: #000
-        background: linear-gradient(90deg, $color2 0%, $color3% 25%, $color5 50%, $color4 65%, $color1 100%)
-        content: ''
-    &::before
-        position: absolute
-        left: 0
-        right: 0
-        bottom: 100%
-        height: .2em
-        opacity: 0.5
-        content: ''
-        background: linear-gradient($color2,$color3)