migrated to styled Components

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};
-background: ${theme.color1};
+color: ${props=>props.theme.colours.color6};
+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>
-                <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>
-                <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>
-                <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/>
-                <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>
+                <TextInput id="first_name" label="First Name" />
+                <TextInput id="last_name" label="Last Name" />
+                <TextInput id="pin" label="PIN" />
+                <TextInput id="rfid" disabled label="RFID" button="Scan" value="Scanning RFID" onClick={(e)=>{console.log("Button Pressed",e)}}/>
+                <TextInput id="Expire_Date" label="Expire Date" type="date" />
                 <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'
-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;
-`;
-
+import { withTheme } from 'styled-components';
 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>
-                <label for="main__card__input__box__3" className="main__card__input__label">RFID</label>
-                <button>Scan</button>
+                <input id={this.props.id} placeholder="" type={this.props.type ? this.props.type : "text"} value={this.props.value} disabled={this.props.disabled} />
+                {this.props.label != null ? <label htmlFor={this.props.id}>{this.props.label}</label> : ""}
+                {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 }