Start JS and CSS Changes for Upload Dashboard

Add consistent buttons, color schemes, and sizing. Need to make the elements scale properly ad rearrange the js element order.

src/components/Dashboard.css

@@ -100,14 +100,23 @@ body {
   min-height: 100vh;
 }
 
+.upload-panel {
+  background-color: #dadada;
+  border-radius: 2vw;
+  padding: 2vw 3vw;
+  width: 60vw;
+  height: 25vw;
+}
+
 .panel {
-  background-color: rgb(240, 240, 240);
+  background-color: white;
   border-radius: 1vw;
   border-style: solid;
   border-color:#6fccdc;
-  padding: 1vw 2vw;
-  width: 100vw;
-  max-width: 960px;
+  border-width: .2vw;
+  padding: 1vw;
+  width: 80vw;
+  min-width: 40vw;
   display: flex;
   flex-direction: column;
   text-align: center;
@@ -118,8 +127,7 @@ body {
   text-align: left;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   font-weight: 700;
-  font-size: xx-large;
-  padding-bottom: 5vw;
+  font-size: 2em;
 }
 
 td {
@@ -139,21 +147,20 @@ th {
 }
 
 .button {
-  background-color: #e7e7e7;
+  background-color: white;
   border-radius: 8px;
   padding: 0.5em 1.2em;;
   text-align: center;
   text-decoration: none;
-  display: inline-block;
-  margin: 2vw 0vw;
+  display: flex;
+  margin: 3vw 0vw;
   cursor: pointer;
   float: right;
   border-style: solid;
-  border-width: 1px;
+  border-width: .2vw;
+  border-color: #f04c51;
   font-size: 1em;
   font-weight: bold;
-  color: black;
-  border: none;
 }
 
 .btn-left {

src/components/Dashboard.js

@@ -143,24 +143,26 @@ const renderBody = () => {
   return (
       <div>
         <ToastContainer />
-        <div>
-          <button className="btn" onClick={()=>{history.push("/profile");}}>Edit Profile</button>
-        </div> 
-        <h1 className="title">Uploads</h1>
-        <div className="panel">
-          <table id='items'>
-            <thead>
-              <tr>{renderHeader()}</tr>
-            </thead>
-            <tbody>
-              {renderBody()}
-            </tbody>
-          </table>
-        </div> 
-        <div>
-          {au === "admin" ? <button className="btn-left" onClick={()=>{history.push({pathname: "/review", accstate: "admin"});}}>Review Submissions</button> : null}
-          <button className="btn" onClick={()=>{history.push({pathname: "/editor", state: ""});}}>Upload New Item</button>
-        </div> 
+        <div className="upload-panel">
+          <div>
+            <button className="button" onClick={()=>{history.push("/profile");}}>Edit Profile</button>
+          </div> 
+          <h1 className="title">Uploads</h1>
+          <div className="panel">
+            <table id='items'>
+              <thead>
+                <tr>{renderHeader()}</tr>
+              </thead>
+              <tbody>
+                {renderBody()}
+              </tbody>
+            </table>
+          </div> 
+          <div>
+            {au === "admin" ? <button className="btn-left" onClick={()=>{history.push({pathname: "/review", accstate: "admin"});}}>Review Submissions</button> : null}
+            <button className="button" onClick={()=>{history.push({pathname: "/editor", state: ""});}}>Upload New Item</button>
+          </div> 
+        </div>
       </div>
   );
 }