Merge pull request #29 from oslabs-beta/styling

Styling

Author: mdtagg

app/components/About/PastContributors.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useStylingContext } from './StylingContext';
 
 const contributors = [
-  'Snow', 'Taylor', 'Tim', 'Roberto', 'Nachiket', 'Tiffany', 'Bruno', 'Danny', 'Vince',
+  'Haoyu', 'Eisha', 'Edwin', 'Tyler', 'Snow', 'Taylor', 'Tim', 'Roberto', 'Nachiket', 'Tiffany', 'Bruno', 'Danny', 'Vince',
   'Matt', 'Derek', 'Kit', 'Grace', 'Jen', 'Patty', 'Stella', 'Michael', 'Ronelle', 'Todd',
   'Greg', 'Brianna', 'Brian', 'Alon', 'Alan', 'Ousman', 'Ben', 'Chris', 'Jenae', 'Tim',
   'Kirk', 'Jess', 'William', 'Alexander', 'Elisa', 'Josh', 'Troy', 'Gahl', 'Brisa', 'Kelsi', 

app/components/About/TeamMembers.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useStylingContext } from './StylingContext';
 
-const names = ['Haoyu', 'Eisha', 'Edwin', 'Tyler'];
+const names = ['Mike', 'Stephen', 'Ted', 'Sofia'];
 
 const TeamMembers: React.FC = () => {
   const currentMode = useStylingContext();

app/components/About/styles.scss

@@ -3,11 +3,11 @@
 .about {
   min-width: 421px;
   max-width: 600px;
-  margin: auto 20px;
+  margin: auto;
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 90%;
+  width: 100%;
   height: 100%;
 }
 
@@ -33,7 +33,7 @@
   font-size: 20px;
   color: $background;
   text-align: left;
-  font-weight: 200;
+  font-weight: 300;
 }
 
 .blurb {

app/components/Contact/Contact.tsx

@@ -17,7 +17,7 @@ const Contact: React.FC = React.memo(() => {
             <h1>Contact Us</h1>
             <br />
             <p>Please feel free to provide any feedback, concerns, or comments.</p>
-            <p>You can find issues the team is currently working on
+            <p>You can find issues the team is currently working on  <span></span>
               <a id="issueLink" href="https://github.com/open-source-labs/Chronos/issues" target="_blank" rel="noreferrer">
                 here
               </a>.

app/components/Contact/ContactForm.tsx

@@ -26,7 +26,7 @@ const ContactForm = ({ currentMode }) => {
 };
 
 const FormInput: React.FC<FormInputProps> = ({ label, name, placeholder, type = "text", isTextarea = false, accept }) => (
-  <label htmlFor={name}>
+  <label htmlFor={name} style={{ fontWeight: 300 }}>
     {label}:
     {isTextarea ? (
       <textarea id={name} name={name} placeholder={placeholder} />

app/components/Contact/styles.scss

@@ -16,6 +16,7 @@
   justify-content: center;
   align-items: center;
   color: $background;
+  
 }
 .contact-border {
   display: flex;
@@ -102,12 +103,12 @@
 
 #myfile {
   font-size: 16px;
-  color: $background;
+  color: $header;
 }
 
 #contact-submit {
   border: none;
-  color: $background;
+  color: $header;
 
   &:hover {
     border: none;
@@ -147,9 +148,9 @@ input[type='file'] {
   margin-top: 20px;
   margin-left: -4px;
   padding: 10px;
-  border: 1px dotted $background;
+  border: 1px dotted $header;
   outline: none;
-  color: $background;
+  color: $header;
   background-color: transparent;
   border-radius: 8px;
   &:hover {
@@ -165,3 +166,7 @@ input[type='file'] {
     color: blue !important;
   }
 }
+
+.contact-blurb p{
+  font-weight: 300;
+}

app/components/Occupied/helpers/muiHelper.ts

@@ -1,9 +1,8 @@
 
 import { makeStyles } from '@mui/styles';
-// import { BaseCSSProperties } from '@mui/system';
 
  // Conditional Rendering of UI Modals for Light and Dark Mode
-// Theme, StyleProps
+//  StyleProps
 
 export const useStylesDark = makeStyles(theme => ({
   // ALL CARDS

app/components/Styling.tsx

@@ -1,30 +1,30 @@
 const lightAndDark = {
   lightModeMain: {
-    backgroundColor: '#eeeeee',
+    backgroundColor: '#f3f3f7',
     flex: '1',
     minHeight: '100vh',
     FlexDirection: 'column',
   },
   lightModeHeader: {
-    backgroundColor: '#eeeeee',
-    color: '#444d56',
+    backgroundColor: '#f3f3f7',
+    color: '#181818',
   },
   darkModeHeader: {
-    backgroundColor: '#181818',
+    backgroundColor: '#161b22',
     color: 'white',
   },
   darkModeMain: {
-    backgroundColor: '#181818',
+    backgroundColor: '#161b22',
     backgroundSize: 'contain',
     flex: '1',
     minHeight: '100vh',
     FlexDirection: 'column',
   },
   lightModeText: {
-    color: '#36454F',
+    color: '#181818',
   },
   darkModeText: {
-    color: 'gainsboro',
+    color: '#fcfefb',
   },
 };
 

app/modals/EnvModal/EnvModal.scss

@@ -5,32 +5,32 @@
 }
 
 .env-button {
-  background-color: transparent;
+  background-color: rgb(201, 198, 198);
   border: 0;
   outline: none;
   white-space: nowrap;
   margin: 10px;
   // padding: 0px;
-  color: $gblue !important;
+  color: white;
   box-shadow: $boxshadow;
   padding: 2rem;
   &:hover {
-    background-color: $lightpurple;
+    background-color: $gblue;
   }
 }
 
 .env-button2 {
-  background-color: transparent;
+  background-color: rgb(201, 198, 198);
   border: 0;
   outline: none;
   white-space: nowrap;
   margin: 10px;
   // padding: 0px;
-  color: $gblue !important;
+  color: white;
   box-shadow: $boxshadow;
   padding: 2rem;
   &:hover {
-    background-color: $lightpurple;
+    background-color: $gblue;
   }
 }
 
@@ -41,3 +41,4 @@ p {
 #card-env {
   margin: 40px 20px;
 }
+

app/modals/EnvModal/EnvModal.tsx

@@ -11,26 +11,27 @@ const EnvModal: React.FC<TModalSetter> = React.memo(
       <div className="add-container">
 
         <div className="card" id="card-env">
-          <button
+          <Button
             className="env-button"
             onClick={() => setModal({isOpen:true,type:'awsModal'})}
+            
           >
             <Typography>
               <CloudQueue fontSize="large" />
             </Typography>
-            <Typography>Cloud-Based</Typography>
-          </button>
+            <Typography>&emsp;Cloud-Based</Typography>
+          </Button>
 
 
-          <button
+          <Button
             className="env-button2"
             onClick={() => setModal({isOpen:true,type:'addModal'})}
           >
             <Typography>
               <Computer fontSize="large" />
             </Typography>
-            <Typography>Local Hosted</Typography>
-          </button>
+            <Typography>&emsp;Local Hosted</Typography>
+          </Button>
         </div>
       </div>
     );