diff --git a/web/src/App.jsx b/web/src/App.jsx index 5600399..4f03718 100644 --- a/web/src/App.jsx +++ b/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 ( + @@ -21,6 +23,7 @@ function App() { + ); } diff --git a/web/src/components/Card.jsx b/web/src/components/Card.jsx index 28f2ff2..59aae88 100644 --- a/web/src/components/Card.jsx +++ b/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 ( - + {children} ) diff --git a/web/src/components/Card.sass b/web/src/components/Card.sass deleted file mode 100644 index dbd4b02..0000000 --- a/web/src/components/Card.sass +++ /dev/null @@ -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 \ No newline at end of file diff --git a/web/src/components/CreateUserWidget.jsx b/web/src/components/CreateUserWidget.jsx index f487392..e204e5b 100644 --- a/web/src/components/CreateUserWidget.jsx +++ b/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 ( -
+

Add User

Add new user

-
-
-
-
- -
+ + + + {console.log("Button Pressed",e)}}/> + -
+ ) } } diff --git a/web/src/components/RecentActivityWidget.jsx b/web/src/components/RecentActivityWidget.jsx index 961e904..1beb9a1 100644 --- a/web/src/components/RecentActivityWidget.jsx +++ b/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 ( -
+

Recent Activity

@@ -22,7 +22,7 @@ export class RecentActivityWidget extends Component {
-
+ ) } } diff --git a/web/src/components/SearchBox.jsx b/web/src/components/SearchBox.jsx new file mode 100644 index 0000000..725f549 --- /dev/null +++ b/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 ( + + ) + } +} + +export default withTheme(SearchBox) diff --git a/web/src/components/TextInput.jsx b/web/src/components/TextInput.jsx index 59d24fa..9718f22 100644 --- a/web/src/components/TextInput.jsx +++ b/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 ( - - - + + {this.props.label != null ? : ""} + {this.props.button != null ? : ""} ) } } -export default TextInput +export default withTheme(TextInput) diff --git a/web/src/components/index.js b/web/src/components/index.js index 4567f9b..6a9d2fe 100644 --- a/web/src/components/index.js +++ b/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 } \ No newline at end of file +import SearchBox from "./SearchBox"; +export { CreateUserWidget, RecentActivityWidget, SystemStatusWidget, SearchBox } \ No newline at end of file diff --git a/web/src/index.js b/web/src/index.js index 4e84828..6f40616 100644 --- a/web/src/index.js +++ b/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( - + , document.getElementById('root') ); diff --git a/web/src/theme/index.js b/web/src/theme/index.js index 94da21c..71db4f9 100644 --- a/web/src/theme/index.js +++ b/web/src/theme/index.js @@ -1,10 +1,29 @@ -const theme = { -color1: "#1F1E2E", -color2: "#27283A", -color3: "#438AF4", -color4: "rgba(2,0,36,0.7455182756696428)", -color5: "#490428c6", -color6: "#ddd9ebbf", +const colours1 = { + color1: "#1F1E2E", + color2: "#27283A", + color3: "#438AF4", + color4: "rgba(2,0,36,0.7455182756696428)", + color5: "#490428c6", + color6: "#ddd9ebbf", + color7: "#858192bf", + color8: "#3a192ae0", + color9: "#110d13", + color10: "#fff", } - -export {theme} \ No newline at end of file +const colours2 = { + 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 \ No newline at end of file diff --git a/web/src/views/AdminUI.css b/web/src/views/AdminUI.css deleted file mode 100644 index 7f3db50..0000000 --- a/web/src/views/AdminUI.css +++ /dev/null @@ -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 */ \ No newline at end of file diff --git a/web/src/views/AdminUI.css.map b/web/src/views/AdminUI.css.map deleted file mode 100644 index f06d183..0000000 --- a/web/src/views/AdminUI.css.map +++ /dev/null @@ -1,9 +0,0 @@ -{ - "version": 3, - "mappings": "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", - "sources": [ - "AdminUI.sass" - ], - "names": [], - "file": "AdminUI.css" -} \ No newline at end of file diff --git a/web/src/views/AdminUI.jsx b/web/src/views/AdminUI.jsx index 72a3bf1..67057dc 100644 --- a/web/src/views/AdminUI.jsx +++ b/web/src/views/AdminUI.jsx @@ -1,24 +1,228 @@ import React, { Component } from 'react' -import "./AdminUI.sass" -import {Link, NavLink} from 'react-router-dom' +//import "./AdminUI.sass" +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 ( <> - - -
- {children} -
- + +
+ {this.props.children} +
+ ) } } -export default AdminUI +export default withTheme(AdminUI) diff --git a/web/src/views/AdminUI.sass b/web/src/views/AdminUI.sass deleted file mode 100644 index adbc495..0000000 --- a/web/src/views/AdminUI.sass +++ /dev/null @@ -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)