FIXED graphs container bug, minor formatting changes

Author: lu0713

app/components/Applications.tsx

@@ -87,7 +87,7 @@ const Applications = () => {
       [theme.breakpoints.up('lg')]: {
         fontSize: '18px',
         // MAIN PAGE SQUARE BUTTON FONTS
-        fontFamily: 'Inter'
+        fontFamily: 'Open Sans'
       },
     },
   }));

app/components/Contact.tsx

@@ -7,23 +7,16 @@ const Contact: React.FC = () => {
       <div className="contact-border">
         <div className="contact-container">
           <div className="contact-blurb">
-            <h1>Contact Us!</h1>
+            <h1>Contact Us</h1>
             <br />
-            <p>The Chronos Team is always looking for any feedback or suggestions for Chronos.</p>
+            <p>Please feel free to provide any feedback, concerns, or comments.</p>
             <p>
               You can find issues the team is currently working on&nbsp;
-              <a href="https://github.com/open-source-labs/Chronos/issues" target="_blank">
+              <a id="issueLink" href="https://github.com/open-source-labs/Chronos/issues" target="_blank">
                 here
               </a>
               .
             </p>
-            <p>
-              If you would like your voice heard, fill out the form and we will get back to you
-              ASAP!
-            </p>
-          </div>
-          <div className="chronos-contact-container">
-            <img src={'../assets/chronos-v4.png'} alt="Chronos logo" />
           </div>
         </div>
         <div className="email-container">
@@ -40,9 +33,12 @@ const Contact: React.FC = () => {
             <label htmlFor="subject">Subject: &nbsp;</label>
             <input type="text" id="subject" name="subject" placeholder="Subject" />
             <br />
-            <label htmlFor="message">Message: </label>
-            <br />
-            <textarea id="message" name="message" placeholder="Write something.."></textarea>
+            <label htmlFor="message">Message: 
+              <span>
+                <textarea id="message" name="message" placeholder="Write something.."></textarea>
+              </span>
+            </label>
+            
             <br />
             <label htmlFor="myfile">Select a file: </label>
             <input type="file" id="myfile" name="myfile" accept="image/*"></input>

app/components/Copyright.tsx

@@ -8,8 +8,9 @@ export interface CopyrightProps {}
 const Copyright = () => {
   const useStyles = makeStyles(theme => ({
     copyright: {
-      fontFamily: 'Inter',
+      fontFamily: 'Open Sans',
       position: 'fixed',
+      color: "#ffffff"
     }
   }))
   const classes = useStyles();

app/components/Occupied.tsx

@@ -69,7 +69,6 @@ const Occupied: React.FC = () => {
   };
 
   const useStyles = makeStyles<Theme, StyleProps>(theme => ({
-    // card: "+" button only
     paper: {
       height: 280,
       width: 280,
@@ -81,7 +80,7 @@ const Occupied: React.FC = () => {
       border: '0',
       boxShadow: '0 6px 6px 0 rgba(153, 153, 153, 0.14), 0 6px 6px -2px rgba(153, 153, 153, 0.2), 0 6px 8px 0 rgba(153, 153, 153, 0.12)',
       '&:hover, &.Mui-focusVisible': {
-        backgroundColor: `#ccd8e1`,
+        backgroundColor: `#b5d3e9`,
         color: '#ffffff',
       },
     },
@@ -130,7 +129,7 @@ const Occupied: React.FC = () => {
           <section className="header" id="rightHeader">
             <form className="form">
               <label className="inputContainer">
-                <input className="form" id="textInput" value={`Search`} type="text" name="search" />
+                <input className="form" id="textInput" value="Search..." type="text" name="search" />
                 <hr />
               </label>
               <button className="form" id="submitBtn" type="submit">

app/components/Settings.tsx

@@ -7,8 +7,7 @@ import React from 'react';
 const Settings: React.FC = () => {
   return (
     <div className="home">
-      <h1>Currently under construction, coming soon!</h1>
-      <p>Contact the Chronos Team for anything you'd like to see!</p>
+      <p>Contact the Chronos Team for anything you'd like to see</p>
     </div>
   );
 };

app/index.html

@@ -8,8 +8,10 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Inter:wght@100&family=Lexend+Peta&display=swap" />
     <script src="https://cdn.plot.ly/plotly-latest.min.js" charset="utf-8"></script>
+    <base href="/" />
   </head>
   <body>
     <div id="app"></div>
+    <!-- <script type="text/x-typescript" src="index.tsx"></script> -->
   </body>
 </html>

app/index.tsx

@@ -7,7 +7,7 @@ import { createMuiTheme, ThemeProvider } from '@material-ui/core';
 const theme = createMuiTheme({
   typography: {
     // Graph font when you shrink window
-    fontFamily: ['Inter', 'sans-serif'].join(','),
+    fontFamily: ['Open Sans', 'sans-serif'].join(','),
   },
 });
 

app/stylesheets/About.scss

@@ -3,34 +3,37 @@
 .para {
   color: $background;
   text-align: left;
-  font-size: 18px;
-}
-
-h3 {
-  font-size: 20px;
-  color: $background;
-  font-weight: 700;
+  
+  p {
+    font-size: 18px;
+  }
+  
+  h3 {
+    font-size: 32px;
+  }
 }
 
 .doya {
   display: flex;
   flex-direction: row;
-  // justify-content: left;
   align-items: flex-start;
   align-self: flex-start;
   align-content: flex-start;
   vertical-align: top;
 }
 
 .blurb {
-  margin: 500px;
+  margin-left: 300px;
+  margin-right: 200px;
   display: flex;
   flex-direction: column;
   justify-content: left;
 }
 
 #sproutSpan {
   display: inline-block;
+  margin-top: 0px;
+  margin-bottom: 0px;
   margin-left: 15px;
   margin-right: 10px;
   height: $sproutSize;

app/stylesheets/AddModal.scss

@@ -12,9 +12,12 @@
     background-color: $grey;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
+    color: $darkgrey;
 
     h2 {
       @include modalHeader();
+      font-size: 24px;
+      color: $darkgrey;
     }
   }
 
@@ -23,6 +26,9 @@
     @include centerWithFlex($direction: column);
     padding: 20px 30px;
     width: 100%;
+    font-size: 12px;
+    font-family: 'Open Sans';
+    color: $darkgrey;
 
     p,
     span {
@@ -31,7 +37,7 @@
 
     span {
       font-weight: 300;
-      font-size: 80%;
+      font-size: 90%;
     }
 
     p {
@@ -58,16 +64,19 @@
       select,
       input,
       textarea {
-        font-size: 100%;
+        font-family: 'Open Sans';
+        font-size: 14px;
         padding: 5px;
         border: thin solid $grey;
         flex: 1;
         border-radius: 3px;
+        color: $darkgrey;
       }
 
       // Select field
       select {
         cursor: pointer;
+        font-family: 'Open Sans';
         height: 30px;
         margin: 0;
         appearance: none;
@@ -81,6 +90,7 @@
       // Text input
       input {
         height: 30px;
+        color: $darkgrey;
       }
 
       // Textarea
@@ -98,22 +108,23 @@
 
     /* Submit button */
     button {
+      font-family: 'Open Sans';
+      font-size: 16px;
+      font-weight: 800;
       height: 40px;
-      font-size: 115%;
       width: 50%;
       color: #fff;
-      background-color: $navy;
+      background-color: $header;
       transition: 0.1s;
       margin: 20px 0;
       font-weight: 400;
       letter-spacing: 2px;
-      border: thin solid $navy;
+      border: none;
       padding: 4px;
       text-transform: uppercase;
 
       &:hover {
-        color: $navy;
-        background-color: lighten($navy, 65%);
+        background-color: $lightblue;
       }
     }
   }

app/stylesheets/Contact.scss

@@ -1,85 +1,79 @@
 @import './constants.scss';
 
 .contact {
-  background-color: #f4f4f4;
   height: 100%;
-  display: flex;
-  justify-content: flex-start;
+  vertical-align: top;
+  justify-content: center;
+  color: $darkgrey;
 }
 .contact-border {
-  width: 120vh;
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+  width: 60vw;
   margin: 10vh 20vh;
-  background-color: rgb(245, 237, 237);
+  background-color: $background;
   border-radius: 10px;
-  border: 1px solid black;
-  z-index: 0;
-  display: flex;
-  flex-direction: row;
-  padding-top: 50px;
-  padding-left: 40px;
+  border: none;
+  box-shadow: $boxshadow2;
+  padding: 30px;
 }
 .contact-container {
   padding: 20px;
   margin-right: 0;
-  height: 70vh;
   justify-content: left;
-  width: 45%;
-  min-width: 30vh;
-  line-height: 3vh;
+  min-width: 50%;
 }
 .contact-blurb {
-  padding-left: 2vh;
-  font-size: 20px;
+  min-width: 50%;
+  font-size: 14px;
 }
 .email-container {
   flex-direction: row;
-  margin: 0 0;
-  margin-left: 20vh;
-  width: 50vh;
-  min-width: 20vh;
-  line-height: 5vh;
-  font-size: 20px;
+  padding: 20px;
+  margin: 0;
+  min-width: 50%;
+  font-size: 14px;
 }
 .email-container textarea {
-  font-size: 15px;
-  width: 30vh;
-  height: 20vh;
+  font-size: 12px;
 }
 .email-container input {
-  font-size: 15px;
-}
-.chronos-contact-container {
-  height: 20vh;
-  width: 40vh;
-}
-.chronos-contact-container img {
-  margin-top: 5vh;
-  height: 20vh;
-  width: 40vh;
+  font-size: 12px;
 }
+
 .email-container input[type='text'] {
-  width: 20vh;
+  width: 300px;
 }
 .email-container #email {
-  width: 23.5vh;
+  width: 300px;
 }
 .email-container #subject {
-  width: 22.5vh;
+  width: 300px;
 }
 
 #myfile {
-  font-size: 17px;
+  font-size: 12px;
 }
 
 #contact-submit {
-  font-size: 16px;
+  font-size: 14px;
   width: 9vh;
-}
-
-#contact-submit:hover {
-  font-size: 13px;
-  background-color: cyan;
-  padding: 3px 7px;
+  border: none;
+  outline: none;
+  color: $background;
+  background-color: $header;
   border-radius: 4px;
-  border-color: #313639;
+  padding: 5px;
+  &:hover {
+    background-color: $lightblue;
+  }
 }
+
+#issueLink {
+  color: $header;
+  text-decoration: none;
+  &:hover {
+    color: $lightblue;
+  }
+}