[cw|#63] finish user dashboard page styling

asmr-hex · Dec 26, 2018 · e71118a · e71118a
1 parent 2c1afad
commit e71118a
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 18 deletions.
diff --git a/client/src/components/dashboard/index.css b/client/src/components/dashboard/index.css
@@ -58,6 +58,7 @@
     justify-content: space-between;
     align-items: center;
     border: 4px solid #ffa9d8;
+    box-shadow: 4px 4px #e396d3;
 }
 
 .profile-poets-list-header-container {
@@ -72,9 +73,9 @@
     transform: rotate(180deg);
     white-space: nowrap;
     font-weight: 400;
-    color: #ffb2e4;
+    color: #f1ff9d;
     font-size: 3em;
-    text-shadow: 4px 4px #affbff;
+    text-shadow: 4px 4px #ff75b3;
     padding: 1em 0.3em 1em 0.3em;
 }
 
@@ -87,6 +88,12 @@
     padding: 1em 0.5em 1em 0.5em;
 }
 
+.profile-poets-empty-message {
+    color: #e0cefe;
+    text-shadow: 4px 4px #bdf2ff;
+    font-size: 5em;
+}
+
 .profile-poet-summary-container {
     display: flex;
     flex-direction: row;
@@ -107,6 +114,7 @@
     flex-direction: column;
     align-items: flex-start;
     flex-grow: 1;
+    word-break: break-word;
 }
 
 
@@ -138,7 +146,6 @@
     flex-direction: column;
     justify-content: center;
     padding: 0.7em;
-    width: 5%;
     color: #999;
     cursor: pointer;
 }
@@ -175,6 +182,7 @@
     align-items: center;
     border: 4px solid #b2f6ff;
     margin-top: 6em;
+    box-shadow: 5px 5px #b3e0ff;
 }
 
 .create-poet-form-header-container {
@@ -191,7 +199,7 @@
     font-weight: 400;
     color: #ffb2e4;
     font-size: 3em;
-    text-shadow: 4px 4px #affbff;
+    text-shadow: 4px 4px #84e6eb;
     padding: 1em 0.3em 1em 0.3em;
 }
 

diff --git a/client/src/components/dashboard/poet.js b/client/src/components/dashboard/poet.js
@@ -73,6 +73,14 @@ class poetMgmt extends Component {
       retirePoet,
       user,
     } = this.props
+
+    const poets = map(
+      this.props.poets,
+      (poet, idx) => (
+        <PoetSummary poet={poet} retirePoet={retirePoet}key={idx}/>
+      ),
+      [],
+    )
 
     return (
       <div className='profile-poets-container'>
@@ -84,13 +92,14 @@ class poetMgmt extends Component {
           </div>
           <div className='profile-poets-list'>
             {
-              map(
-                this.props.poets,
-                (poet, idx) => (
-                  <PoetSummary poet={poet} retirePoet={retirePoet}key={idx}/>
-                ),
-                [],
-              )
+              poets.length === 0 ?
+              <div className='profile-poets-empty-message'>
+                  {String.raw`
+⚀ ⚁ ⚂ ⚃ ⚄ ⚅
+ no  poets
+`}
+              </div>
+                : poets
             }
           </div>
         </div>
@@ -135,15 +144,30 @@ export class PoetSummary extends Component {
   }
 }
 
-const renderTextField = multiline => ({input, label, meta: {touched, error}, ...custom}) => (
+const renderTextField = ({input, label, meta: {touched, error}, ...custom}) => (
+  <TextField
+    hintText={label}
+    floatingLabelText={label}
+    hintStyle={{color: '#f28cce', fontSize: '1.5em'}}
+    inputStyle={{color: '#f28cce', fontSize: '1.5em'}}
+    underlineStyle={{borderColor: '#19ecff'}}
+    underlineFocusStyle={{borderColor: '#f28cce'}}
+    errorText={touched && error}
+    {...input}
+    {...custom}
+    />
+)
+
+const renderMultiLineTextField = ({input, label, meta: {touched, error}, ...custom}) => (
   <TextField
     hintText={label}
     floatingLabelText={label}
     hintStyle={{color: '#f28cce', fontSize: '1.5em'}}
     inputStyle={{color: '#f28cce', fontSize: '1.5em'}}
+    textareaStyle={{color: '#f28cce'}}
     underlineStyle={{borderColor: '#19ecff'}}
     underlineFocusStyle={{borderColor: '#f28cce'}}
-    multiLine={multiline}
+    multiLine={true}
     errorText={touched && error}
     {...input}
     {...custom}
@@ -163,8 +187,9 @@ const renderSelectField = ({
     {...input}
     onChange={(event, index, value) => input.onChange(value)}
     children={children}
-    hintStyle={{color: '#f28cce', fontSize: '1.5em'}}
+    labelStyle={{color: '#f28cce', fontSize: '1.5em'}}
     inputStyle={{color: '#f28cce', fontSize: '1.5em'}}
+    listStyle={{color: '#f28cce', fontSize: '1.5em'}}
     underlineStyle={{borderColor: '#19ecff'}}
     underlineFocusStyle={{borderColor: '#f28cce'}}
     style={{
@@ -194,15 +219,15 @@ export class createPoetForm extends Component {
     return (
       <div className='create-poet-form-container'>
         <div className='create-poet-form-header-container'>
-          <div className='create-poet-form-header'>upload a poet</div>
+          <div className='create-poet-form-header'>upload poet</div>
         </div>
         <div className='create-poet-form-and-error'>
           <form className='create-poet-form' onSubmit={handleSubmit}>
           <div>
-            <Field name='name' component={renderTextField(false)} type='text' spellcheck='false' placeholder='name'/>
+            <Field name='name' component={renderTextField} type='text' spellcheck='false' placeholder='name'/>
           </div>
           <div styles={{marginTop: '1.5em'}}>
-            <Field name='description' component={renderTextField(true)} type='text' placeholder='description'/>
+            <Field name='description' component={renderMultiLineTextField} type='text' placeholder='description'/>
           </div>
           <div className='create-poet-form-language-select'>
             <Field name='language' component={renderSelectField} label='language'>
@@ -224,7 +249,7 @@ export class createPoetForm extends Component {
           <div className='profile-poet-button'>
         <Field className='profile-poet-file-button' name='parameters' id='parameters' component={FileInput(this.onChangeFileName('parametersFileText').bind(this))}/>
             <label htmlFor="parameters">{this.state.parametersFileText}</label>
-            <span style={{padding: '0.6em', marginLeft: '0.8em', fontStyle: 'italic'}}>optional</span>
+        <span style={{color: '#fa26bb', padding: '0.6em', marginLeft: '0.8em', fontStyle: 'italic'}}>optional</span>
           </div>
           <button className='profile-poet-submit-button' type='submit'>create poet</button>
         </form>