Merge pull request #258 from codefordenver/style-upload-page

Style upload page
codefordenver · Dec 3, 2019 · cf9e0a3 · cf9e0a3
2 parents 65d07f2 + adfea8d
commit cf9e0a3
Show file tree

Hide file tree

Showing 10 changed files with 2,142 additions and 53 deletions.
diff --git a/Frontend/src/App.css b/Frontend/src/App.css
@@ -2,6 +2,8 @@
 :root {
   --light-blue: #00aeef;
   --dark-blue: #1f4393;
+  --other-dark-blue: #577ca2;
+  --misc-gray: #f6f6f6;
   --cream: #f0e3c4;
   --yellow: #ffd401;
   --white-text: #ffffff;
@@ -25,7 +27,6 @@ html {
 body {
   height: 100%;
   background-image: url('images/idealabBackground.svg');
-  background-repeat: no-repeat;
   background-size: cover;
 }
 
@@ -39,6 +40,10 @@ body {
   grid-template-columns: 1fr 8fr;
 }
 
+.grid-container:nth-child(2) {
+  margin: 0 50px;
+}
+
 .grid-item-nav {
   border-right: solid;
   background-color: white;

diff --git a/Frontend/src/App.js b/Frontend/src/App.js
@@ -86,7 +86,7 @@ function App() {
 
             <PrivateRoute path="/account" component={AdminContainer} />
             <PrivateRoute path="/create" component={CreateAccountManager} />
-            <PrivateRoute path="/" component={LoginManager} />
+            <PrivateRoute path="/" component={QueueContainer} />
           </Switch>
         </HashRouter>
       </AuthContext.Provider>

diff --git a/Frontend/src/components/AdminSettings/AdminContainer.jsx b/Frontend/src/components/AdminSettings/AdminContainer.jsx
@@ -11,12 +11,11 @@ const AdminContainer = () => {
   let currentView =
     adminView === 'settings' ? <AdminSettings /> : <UserProfilesContainer />;
   return (
-
     <AuthContext.Consumer>
       {context => {
         return context.role === 'ADMIN' ? (
           <div className="adminContainer">
-            <img src={ideaLABlogo} alt="ideaLABLogo" className="ideaLabLogo"/>
+            <img src={ideaLABlogo} alt="ideaLABLogo" className="ideaLabLogo" />
             <MenuBar
               selectedTab={adminView}
               tabOptions={MenuTabs.ManageAccountTabs}

diff --git a/Frontend/src/components/AdminSettings/AdminSettings.css b/Frontend/src/components/AdminSettings/AdminSettings.css
@@ -115,7 +115,7 @@ input::placeholder {
   margin-top: 25px;
 }
 
-.statusMenu {
+.adminContainer .statusMenu {
   margin-top: 20px;
   margin-left: 40px;
-}
+}
diff --git a/Frontend/src/components/Queue/QueueContainer.css b/Frontend/src/components/Queue/QueueContainer.css
@@ -1,3 +1,7 @@
+.queueContainer {
+  margin: 0px 50px;
+}
+
 .queueBanner {
   list-style-type: none;
   text-align: left;

diff --git a/Frontend/src/components/Queue/components/Queue.jsx b/Frontend/src/components/Queue/components/Queue.jsx
@@ -15,7 +15,7 @@ const Queue = props => {
     />
   ));
   return (
-    <div>
+    <div className="queueContainer">
       <div className="queueFilterInfo">
         <MenuBar
           selectedTab={props.statusView}

diff --git a/Frontend/src/components/Upload/UploadContainer.css b/Frontend/src/components/Upload/UploadContainer.css
@@ -1,40 +1,81 @@
 .uploadContainer {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 2fr 1fr;
   justify-content: center;
 }
 
-.uploadContainer div {
+.uploadContainer img {
+  width: 50%;
+  margin: auto;
+  margin-top: 2rem;
+
+}
+
+.uploadContainer .input-container div {
   display: flex;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .uploadContainer .upload {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
   border-style: dashed;
   border-width: 2px;
   border-color: var(--light-blue);
   height: 7.5em;
+  background-color: var(--misc-gray);
+}
+.uploadContainer .upload:hover {
+  cursor: pointer;
+  background-color: #e4e4e4;
+}
+.uploadContainer .upload p {
+  color: var(--other-dark-blue);
 }
 
 .uploadContainer > form {
   grid-column-start: 2;
   display: flex;
   flex-direction: column;
 }
-.uploadContainer input {
-  background-color: var(--dark-blue);
-  color: var(--white-text);
+
+.uploadContainer textarea {
+  display: block;
+  border-radius: 10px;
+  outline: none;
+  border-style: solid;
+  font-size: 1.5rem;
+  padding: 0.25rem;
+}
+
+.uploadContainer input,
+.uploadContainer textarea {
+  border: 2px solid black;
   padding: 0.5rem;
   margin-top: 1rem;
   margin-bottom: 1rem;
+  margin-left: 0;
+  margin-right: 0;
 }
 
-.uploadContainer input::placeholder {
-  color: var(--white-text);
+.uploadContainer input::placeholder,
+.uploadContainer textarea::placeholder {
   text-align: left;
   margin-left: 0.5em;
 }
 .uploadContainer button.shapedButton {
-  background-color: #1f9385;
+  background-color: var(--other-dark-blue);
   color: var(--white-text);
+  width: 50%;
+  margin: 1rem;
+  align-self: center;
+}
+
+.uploadContainer .input-container {
+  display: flex;
+  flex-direction: row;
 }
diff --git a/Frontend/src/components/Upload/UploadContainer.jsx b/Frontend/src/components/Upload/UploadContainer.jsx
@@ -5,6 +5,7 @@ import { createBrowserHistory } from 'history';
 import Upload from './components/Upload';
 import BasicInput from '../BasicInput';
 import './UploadContainer.css';
+import ideaLABlogo from '../globalStyles/img/ideaLabLogo.png';
 
 const history = createBrowserHistory();
 function UploadContainer() {
@@ -73,6 +74,7 @@ function UploadContainer() {
           RequestService.newPrintJob(formData, onSuccess, onFailure);
         }}
       >
+        <img src={ideaLABlogo} alt={'ideaLab logo'}></img>
         <div className={'success'}>{success}</div>
         <Upload
           className={'upload'}
@@ -81,44 +83,46 @@ function UploadContainer() {
           callback={files => setFile(files[0])}
         ></Upload>
         <p>{errors.file ? errors.file : null}</p>
-        <BasicInput
-          className={'upload'}
-          value={customerFirstName}
-          placeHolder={'First Name'}
-          changeHandler={setCustomerFirstName}
-          error={errors.customerFirstName}
-        />
-        <BasicInput
-          className={'upload'}
-          value={customerLastName}
-          placeHolder={'Last Name'}
-          changeHandler={setCustomerLastName}
-          error={errors.customerLastName}
-        />
-        <BasicInput
-          className={'upload'}
-          value={email}
-          placeHolder={'Email'}
-          changeHandler={setEmail}
-          error={errors.email}
-        />
-        <BasicInput
-          className={'upload'}
-          value={color}
-          placeHolder={'Color'}
-          changeHandler={setColor}
-          error={errors.color}
-        />
-        <BasicInput
-          className={'upload'}
-          value={comments}
-          placeHolder={'Comments'}
-          changeHandler={setComments}
-          error={errors.comments}
-        />
-        <div>
-          <div className={'error'}>{errors.form ? errors.form : null}</div>
+        <div className={'input-container'}>
+          <div>
+            <BasicInput
+              className={'upload'}
+              value={customerFirstName}
+              placeHolder={'First Name'}
+              changeHandler={setCustomerFirstName}
+              error={errors.customerFirstName}
+            />
+            <BasicInput
+              className={'upload'}
+              value={customerLastName}
+              placeHolder={'Last Name'}
+              changeHandler={setCustomerLastName}
+              error={errors.customerLastName}
+            />
+            <BasicInput
+              className={'upload'}
+              value={email}
+              placeHolder={'Email'}
+              changeHandler={setEmail}
+              error={errors.email}
+            />
+            <div>
+              <textarea
+                onChange={e => setComments(e.target.value)}
+                name="comments"
+                rows="3"
+                value={comments}
+                placeholder={'Comments'}
+              />
+              <span>{errors.comments ? errors.comments : null}</span>
+            </div>
+          </div>
         </div>
+        {errors.form ? (
+          <div>
+            <div className={'error'}>{errors.form ? errors.form : null}</div>
+          </div>
+        ) : null}
         <button className={'shapedButton'} type="submit">
           SUMBIT
         </button>

diff --git a/Frontend/src/components/Upload/components/Upload.jsx b/Frontend/src/components/Upload/components/Upload.jsx
@@ -13,7 +13,7 @@ function Upload(props) {
     <div className={'upload'} {...getRootProps()}>
       <input {...getInputProps()} />
       {isDragActive ? <p>upload or drag STL files</p> : <p>upload STL files</p>}
-      {props.filename}
+      {props.filename ? <p>Filename: {props.filename}</p> : null}
     </div>
   );
 }