From 2db55c3d261ddee52019bbd06dc5f6545db39c16 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 2 Jun 2020 16:09:59 +0200
Subject: form for making a new graph. add username field to db

---
 frontend/common/app.css             | 37 ++++++++++++++++------
 frontend/common/form.component.js   |  8 +++++
 frontend/common/form.css            | 61 ++++++++++++++++++++++++-------------
 frontend/common/header.component.js | 14 ++++-----
 frontend/common/index.js            |  1 +
 5 files changed, 83 insertions(+), 38 deletions(-)

(limited to 'frontend/common')

diff --git a/frontend/common/app.css b/frontend/common/app.css
index a235507..41aa54e 100644
--- a/frontend/common/app.css
+++ b/frontend/common/app.css
@@ -2,15 +2,17 @@
 html, body {
   margin: 0;
   padding: 0;
-  min-width: 100%;
-  min-height: 100%;
+  width: 100%;
+  height: 100%;
 }
 body {
-  background: #fff;
-  color: #000;
+  background: #000;
+  color: #ddd;
   overflow-y: scroll;
   font-family: 'Roboto', sans-serif;
   font-size: 0.875rem;
+  height: 100%;
+  width: 100%;
 }
 .gray {
   color: #888;
@@ -18,6 +20,21 @@ body {
 
 /* layout */
 
+.container {
+  height: 100%;
+  width: 100%;
+}
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+.app .body {
+  display: flex;
+  flex-grow: 1;
+}
+
 .row {
   display: flex;
   flex-direction: row;
@@ -30,9 +47,7 @@ body {
 .row > div:last-child {
   margin-right: 0;
 }
-.body section > div:last-child {
-  flex-grow: 1;
-}
+
 
 .row.menubar {
   justify-content: flex-end;
@@ -59,7 +74,7 @@ header {
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  background: #11f;
+  background: rgba(64,64,64,0.5);
   color: white;
 }
 header b {
@@ -151,8 +166,12 @@ p {
 
 /* links */
 
+b {
+  color: #fff;
+}
 a {
-  color: #11f;
+  text-decoration: underline;
+  color: #8df;
 }
 
 /* menu button */
diff --git a/frontend/common/form.component.js b/frontend/common/form.component.js
index fb8acbe..36369b5 100644
--- a/frontend/common/form.component.js
+++ b/frontend/common/form.component.js
@@ -10,10 +10,18 @@ export const TextInput = props => (
       onChange={props.onChange}
       name={props.name}
       value={props.data[props.name]}
+      autoComplete={props.autoComplete}
     />
   </label>
 )
 
+export const LabelDescription = props => (
+  <label className={'text description'}>
+    <span>{props.title}</span>
+    <span>{props.children}</span>
+  </label>
+)
+
 export const NumberInput = props => (
   <label className={props.error ? 'error' : 'text'}>
     <span>{props.title}</span>
diff --git a/frontend/common/form.css b/frontend/common/form.css
index f3ba85d..5b8f1e3 100644
--- a/frontend/common/form.css
+++ b/frontend/common/form.css
@@ -49,13 +49,24 @@ form .error input[type=password] {
   border-color: #f11;
 }
 
+/* form field descriptions */
+
+form label.description {
+  cursor: normal;
+  font-size: small;
+  color: #ddd;
+}
+
 /* text input */
 
 input[type=text],
 input[type=number],
 input[type=password] {
   padding: 0.5rem;
-  border: 1px solid #888;
+  border: 1px solid #ddd;
+  color: #fff;
+  background: #111;
+  font-family: 'Roboto', sans-serif;
   font-size: 0.875rem;
   width: 20rem;
   border-radius: 0.125rem;
@@ -64,19 +75,24 @@ input[type=password] {
 input[type=text]:focus,
 input[type=number]:focus,
 input[type=password]:focus {
-  border: 1px solid #000;
+  border: 1px solid #8ff;
+  background: #000;
 }
 
 textarea {
   width: 35rem;
   height: 20rem;
   padding: 0.5rem;
-  border: 1px solid #888;
+  border: 1px solid #ddd;
+  font-family: 'Roboto', sans-serif;
+  background: #111;
+  color: #fff;
   font-size: 0.875rem;
   border-radius: 0.125rem;
 }
 textarea:focus {
-  border: 1px solid #000;
+  border: 1px solid #8ff;
+  background: #000;
 }
 
 /* checkbox */
@@ -114,7 +130,7 @@ input[type="checkbox"]:after {
   left: 0;
   width: 0.75rem;
   height: 0.75rem;
-  border: 0.0625rem solid #888;
+  border: 0.0625rem solid #ddd;
   content: "";
   background-color: #fff;
   background-repeat: no-repeat;
@@ -141,7 +157,7 @@ input[type="checkbox"]:checked:after {
   min-width: auto;
   background: #fff;
   border-radius: 0.125rem;
-  border: 1px solid #888;
+  border: 1px solid #ddd;
   padding: 0.5rem;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -165,14 +181,14 @@ input[type="checkbox"]:checked:after {
   height: 0; 
   border-left: 0.375rem solid transparent;
   border-right: 0.375rem solid transparent;
-  border-top: 0.375rem solid #888;
+  border-top: 0.375rem solid #ddd;
 }
 .select.focus {
-  border-color: #11f;
+  border-color: #fff;
   background: #f4f4ff;
 }
 .select.focus:after {
-  border-top-color: #11f;
+  border-top-color: #fff;
 }
 .select:hover {
   background-color: #f4f4ff;
@@ -192,21 +208,22 @@ input[type="checkbox"]:checked:after {
 
 button {
   position: relative;
-  background: #fff;
+  background: #333;
   border-radius: 0.125rem;
-  border: 1px solid #888;
+  color: #ddd;
+  border: 1px solid;
   padding: 0.5rem;
   overflow: hidden;
   text-overflow: ellipsis;
   font-family: 'Roboto', sans-serif;
   font-size: 0.875rem;
   cursor: pointer;
-  text-transform: uppercase;
+  /*text-transform: uppercase;*/
   transition: all 0.1s;
 }
 button:hover {
-  background-color: #f0f0ff;
-  border-color: #1111ff;
+  background-color: #000;
+  border-color: #fff;
 }
 button.process {
   padding-left: 1.5rem;
@@ -227,9 +244,9 @@ button.process:focus:after {
   border-left-color: #11f;
 }
 button:focus {
-  background: #f4f4ff;
-  border-color: #11f;
-  color: #11f;
+  background: #000;
+  border-color: #fff;
+  color: #fff;
   outline: 0;
 }
 button:disabled {
@@ -245,13 +262,15 @@ button:disabled:after {
   margin-right: 0.75rem;
 }
 button.submit {
-  color: #1111ff;
-  border-color: #1111ff;
+  border-color: #d8f;
+  color: #fff;
+  background: #111;
 }
+button.submit:focus,
 button.submit:hover {
+  border-color: #fff;
   color: #fff;
-  background: #1111ff;
-  border-color: #1111ff;
+  background: #222;
 }
 
 /* file upload, should always be inside a container */
diff --git a/frontend/common/header.component.js b/frontend/common/header.component.js
index a4777dc..5cb15b5 100644
--- a/frontend/common/header.component.js
+++ b/frontend/common/header.component.js
@@ -1,6 +1,6 @@
-import React from 'react';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
+import React from 'react'
+// import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { session } from '../session'
 
@@ -11,8 +11,6 @@ function Header(props) {
         <Link to="/" className="logo"><b>swimmer</b></Link>
       </div>
       <div>
-        <Link to="/collection/">Collections</Link>
-        <Link to="/dashboard/">Dashboard</Link>
         <span className='username' onClick={() => changeUsername()}>
           {' → '}{props.username}
         </span>
@@ -34,9 +32,9 @@ const mapStateToProps = (state) => ({
   auth: state.auth,
   username: session.get('username'),
   isAuthenticated: state.auth.isAuthenticated,
-});
+})
 
 const mapDispatchToProps = (dispatch) => ({
-});
+})
 
-export default connect(mapStateToProps, mapDispatchToProps)(Header);
+export default connect(mapStateToProps, mapDispatchToProps)(Header) 
diff --git a/frontend/common/index.js b/frontend/common/index.js
index 9e81c99..9a11eba 100644
--- a/frontend/common/index.js
+++ b/frontend/common/index.js
@@ -5,6 +5,7 @@ export {
 export {
   Select, Checkbox, FileInput, FileInputField,
   TextInput, NumberInput, TextArea, SubmitButton,
+  LabelDescription,
 } from './form.component'
 export {
   Loader, Swatch, Dot, Columns, Statistic, Detections, Progress
-- 
cgit v1.2.3-70-g09d2