Styling updates part 1 (WIP)

package.json

@@ -7,7 +7,10 @@
     "@babel/core": "^7.4.4",
     "@babel/preset-env": "^7.4.4",
     "@babel/preset-react": "^7.0.0",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
     "@hot-loader/react-dom": "^16.8.6",
+    "@mui/material": "^5.12.1",
     "all": "^0.0.0",
     "axios": "^0.18.0",
     "babel-loader": "^8.0.5",

src/components/Home/DesignNotes/Form.js

@@ -3,39 +3,60 @@ import AnimateHeight from "react-animate-height";
 import { Formik, Field, Form as FormikForm, ErrorMessage } from 'formik';
 import { postDesignNote } from '../../../services/api';
 import config from "../../../config";
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Box from "@mui/material/Box";
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import "./style.css";
 
 export class DesignNotesForm extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      open: false
+      open: false,
+      textFields: {},
     };
     this.submitNote = this.submitNote.bind(this);
+    this.handleStatusChange = this.handleStatusChange.bind(this);
+    this.handleTextChange = this.handleTextChange.bind(this);
   }
 
   submitNote(values) {
-    const req = Object.assign({}, values, { "section": this.props.section });
+    const req = Object.assign({}, this.state.textFields, { "section": this.props.section });
     return postDesignNote(this.props.date, req);
   }
 
+  handleStatusChange(event) {
+    let oldFields = this.state.textFields;
+    oldFields['artStatus'] = event.target.value
+    this.setState({ textFields: oldFields });
+  }
+
+  handleTextChange(event) {
+    const tag = event.target.id
+    let oldFields = this.state.textFields;
+    oldFields[tag] = event.target.value;
+    this.setState({ textFields: oldFields });
+  }
+
   render() {
     return (
       <div>
         <div onClick={() => this.setState({ open: !this.state.open })}>
           <p><u>{this.state.open ? "Close Form" : "Open Form"}</u></p>
         </div>
         <AnimateHeight height={this.state.open ? "auto" : 0}>
-          <div style={{
-            border: "1px solid black",
-            padding: "1.5em 1em"
-          }}>
+          <div>
             <Formik
               initialValues={this.props.properties.reduce((acc, curr, index) => {
                 acc[curr] = "";
                 return acc;
               }, {})}
               onSubmit={(values, actions) => {
-                this.submitNote(values).then(({ data, status}) => {
+                this.submitNote(values).then(({ data, status }) => {
                   if (status < 400) {
                     if (window) {
                       window.location.reload();
@@ -44,41 +65,60 @@ export class DesignNotesForm extends React.Component {
                 })
               }}
               render={({ errors, status, touched, isSubmitting }) => (
-                <FormikForm>
+                <FormikForm className="design-notes-form" style={{ paddingLeft: 100, paddingRight: 100 }}>
                   {this.props.properties.map((f) => {
                     if (f === "artStatus") {
                       return (
                         <div key={f}>
-                          <label htmlFor={f}>{f}:{' '}</label>
-                          <Field
-                            component="select"
-                            name={f}
-                          >
-                            <option value="Art In">Art In</option>
-                            <option value="Photo edited, no Camayak">Photo edited, no Camayak</option>
-                            <option value="Waiting for courtesies">Waiting for courtesies</option>
-                          </Field>
+                          <Box sx={{ minWidth: 240, mt: 3 }}>
+                            <FormControl fullWidth>
+                              <InputLabel id="demo-simple-select-standard-label" htmlFor={f}>Art Status</InputLabel>
+                              <Select
+                                labelId="demo-simple-select-standard-label"
+                                id="demo-simple-select-standard"
+                                label="Art Status"
+                                value={this.state.artStatus}
+                                onChange={this.handleStatusChange}
+                                inputProps={{
+                                  name: "artStatus",
+                                  id: "artStatus",
+                                }}
+                              >
+                                <MenuItem value={'Art In'}>Art In</MenuItem>
+                                <MenuItem value={'Photo edited, no Camayak'}>Photo edited, no Camayak</MenuItem>
+                                <MenuItem value={'Waiting for courtesies'}>Waiting for courtesies</MenuItem>
+                              </Select>
+                            </FormControl>
+                          </Box>
                           <ErrorMessage name={f} component="div" />
                         </div>
                       )
                     } else {
                       return (
-                        <div key={f}>
-                          <label htmlFor={f}>{f}:{' '}</label>
-                          <Field
+                        <div key={f} htmlFor={f}>
+                          <TextField
+                            className="home-text-field"
+                            variant="standard"
+                            label={f}
                             type="text"
                             name={f}
+                            onChange={this.handleTextChange}
                             placeholder={config.designNotes.placeholders[f] || null}
+                            multiline
+                            fullWidth
+                            id={f}
                           />
                           <ErrorMessage name={f} component="div" />
                         </div>
                       )
                     }
                   })}
                   {status && status.msg && <div>{status.msg}</div>}
-                  <button className="primary" type="submit" disabled={isSubmitting}>
-                    <span className="semibold">+</span> Create
-                  </button>
+                  <Button className="create-button" variant="contained" color="primary" type="submit" disabled={isSubmitting} sx={{
+                    mt: 2, fontWeight: 'bold', color: 'white', backgroundColor: 'black',
+                  }}>
+                    Create
+                  </Button>
                 </FormikForm>
               )}
             />

src/components/Home/DesignNotes/style.css

@@ -0,0 +1,18 @@
+#home-text-field {
+    margin: 0;
+    padding: 0;
+}
+
+form div {
+    margin: 0 0 0.35rem 0;
+}
+
+#demo-simple-select-standard {
+    margin: 0;
+}
+
+.design-notes-form {
+    padding: 2rem 3rem;
+    background-color: rgb(245, 245, 245);
+    border-radius: 1rem;
+}

src/components/Home/InstagramStories/Form.js

@@ -3,18 +3,30 @@ import AnimateHeight from "react-animate-height";
 import { Formik, Field, Form as FormikForm, ErrorMessage } from 'formik';
 import { postStory } from '../../../services/api';
 import config from "../../../config";
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import "./style.css";
 
 export class StoryForm extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       open: false,
+      textFields: {},
     };
     this.submitStory = this.submitStory.bind(this);
+    this.handleTextChange = this.handleTextChange.bind(this);
   }
 
-  submitStory(values) {
-    return postStory(this.props.date, values);
+  handleTextChange(event) {
+    const tag = event.target.id
+    let oldFields = this.state.textFields;
+    oldFields[tag] = event.target.value;
+    this.setState({ textFields: oldFields });
+  }
+
+  submitStory() {
+    return postStory(this.props.date, this.state.textFields);
   }
 
   render() {
@@ -24,17 +36,14 @@ export class StoryForm extends React.Component {
           <p><u>{this.state.open ? "Close Form" : "Open Form"}</u></p>
         </div>
         <AnimateHeight height={this.state.open ? "auto" : 0}>
-          <div style={{
-            border: "1px solid black",
-            padding: "1.5em 1em"
-          }}>
+          <div>
             <Formik
               initialValues={this.props.properties.reduce((acc, curr, index) => {
                 acc[curr] = "";
                 return acc;
               }, {})}
-              onSubmit={(values, actions) => {
-                this.submitStory(values).then(({ data, status }) => {
+              onSubmit={() => {
+                this.submitStory().then(({ data, status }) => {
                   if (status < 400) {
                     if (window) {
                       window.location.reload();
@@ -43,21 +52,32 @@ export class StoryForm extends React.Component {
                 })
               }}
               render={({ errors, status, touched, isSubmitting }) => (
-                <FormikForm>
-                  {this.props.properties.map(f => (
-                    <div key={f}>
-                      <label htmlFor={f}>{f}:{' '}</label>
-                      <Field
-                        type="text"
-                        name={f}
-                      />
-                      <ErrorMessage name={f} component="div" />
-                    </div>
-                  ))}
+                <FormikForm className='instagram-stories-form' style={{ paddingLeft: 100, paddingRight: 100 }}>
+                  {this.props.properties.map((f) => {
+                    return (
+                      <div key={f} htmlFor={f}>
+                        <TextField
+                          className="home-text-field"
+                          variant="standard"
+                          label={f}
+                          type="text"
+                          name={f}
+                          onChange={this.handleTextChange}
+                          placeholder={null}
+                          multiline
+                          fullWidth
+                          id={f}
+                        />
+                        <ErrorMessage name={f} component="div" />
+                      </div>
+                    )
+                  })}
                   {status && status.msg && <div>{status.msg}</div>}
-                  <button className="primary" type="submit" disabled={isSubmitting}>
-                    <span className="semibold">+</span> Create
-                  </button>
+                  <Button className="create-button" variant="contained" color="primary" type="submit" disabled={isSubmitting} sx={{
+                    mt: 2, fontWeight: 'bold', color: 'white', backgroundColor: 'black',
+                  }}>
+                    Create
+                  </Button>
                 </FormikForm>
               )}
             />

src/components/Home/InstagramStories/style.css

@@ -0,0 +1,18 @@
+#home-text-field {
+    margin: 0;
+    padding: 0;
+}
+
+form div {
+    margin: 0 0 0.35rem 0;
+}
+
+#demo-simple-select-standard {
+    margin: 0;
+}
+
+.instagram-stories-form {
+    padding: 2rem 3rem;
+    background-color: rgb(245, 245, 245);
+    border-radius: 1rem;
+}

src/components/Home/Modulars/Form.js

@@ -2,18 +2,30 @@ import React from 'react';
 import AnimateHeight from "react-animate-height";
 import { Formik, Field, Form as FormikForm, ErrorMessage } from 'formik';
 import { postModular } from '../../../services/api';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import "./style.css";
 
 export class ModularForm extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       open: false,
+      textFields: {},
     };
     this.submitModular = this.submitModular.bind(this);
+    this.handleTextChange = this.handleTextChange.bind(this);
   }
 
-  submitModular(values) {
-    return postModular(this.props.category, this.props.date, values);
+  handleTextChange(event) {
+    const tag = event.target.id
+    let oldFields = this.state.textFields;
+    oldFields[tag] = event.target.value;
+    this.setState({ textFields: oldFields });
+  }
+
+  submitModular() {
+    return postModular(this.props.category, this.props.date, this.state.textFields);
   }
 
   render() {
@@ -23,17 +35,14 @@ export class ModularForm extends React.Component {
           <p><u>{this.state.open ? "Close Form" : "Open Form"}</u></p>
         </div>
         <AnimateHeight height={this.state.open ? "auto" : 0}>
-          <div style={{
-            border: "1px solid black",
-            padding: "1.5em 1em"
-          }}>
+          <div>
             <Formik
               initialValues={this.props.fields.reduce((acc, curr, index) => {
                 acc[curr] = "";
                 return acc;
               }, {})}
-              onSubmit={(values, { setSubmitting }) => {
-                this.submitModular(values).then(({ data, status }) => {
+              onSubmit={({ setSubmitting }) => {
+                this.submitModular().then(({ data, status }) => {
                   if (status < 400) {
                     if (window) {
                       window.location.reload();
@@ -42,22 +51,32 @@ export class ModularForm extends React.Component {
                 })
               }}
               render={({ errors, status, touched, isSubmitting }) => (
-                <FormikForm>
-                    {this.props.fields.map(f => (
-                      <div key={f}>
-                        <label htmlFor={f}>{f}:{' '}</label>
-                        <Field 
-                          type="text" 
-                          component="textarea"
+                <FormikForm className='opinion-modulars-form' style={{ paddingLeft: 100, paddingRight: 100 }}>
+                  {this.props.fields.map((f) => {
+                    return (
+                      <div key={f} htmlFor={f}>
+                        <TextField
+                          className="home-text-field"
+                          variant="standard"
+                          label={f}
+                          type="text"
                           name={f}
-                          />
+                          onChange={this.handleTextChange}
+                          placeholder={null}
+                          multiline
+                          fullWidth
+                          id={f}
+                        />
                         <ErrorMessage name={f} component="div" />
                       </div>
-                    ))}
+                    )
+                  })}
                   {status && status.msg && <div>{status.msg}</div>}
-                  <button className="primary" type="submit" disabled={isSubmitting}>
-                    <span className="semibold">+</span> Create
-                  </button>
+                  <Button className="create-button" variant="contained" color="primary" type="submit" disabled={isSubmitting} sx={{
+                    mt: 2, fontWeight: 'bold', color: 'white', backgroundColor: 'black',
+                  }}>
+                    Create
+                  </Button>
                 </FormikForm>
               )}
             />