Merge pull request #8 from oslabs-beta/displays

Displays

src/components/css/metric.css

@@ -24,6 +24,7 @@
   display: flex;
   align-self: center;
 }
+
 .usage-box {
   background-color: rgba(19, 221, 29, 1);
   width: 15px;

src/components/css/running.css

@@ -1,32 +1,38 @@
 .chart {
   margin-top: 10px;
 }
+
 .chart-info {
   width: 200px;
   height: 110px;
   margin-top: 10px;
   margin-left: 15px;
 }
+
 .chart-label {
   display: flex;
   justify-content: space-evenly;
   flex-direction: row;
 }
+
 .chart-label-container {
   display: flex;
   justify-content: space-between;
   align-content: center;
 }
+
 .chart-label-text {
   font-size: 11px;
   font-weight: bold;
 }
+
 .cpuBox {
   width: 15px;
   height: 15px;
   margin-right: 2px;
   background-color: rgba(44, 130, 201, 1);
 }
+
 .memoryBox {
   width: 15px;
   height: 15px;

src/components/css/styles.css

@@ -1,7 +1,7 @@
-@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
 * {
-  font-family: 'Lexend', sans-serif;
+  font-family: "Lexend", sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
@@ -244,10 +244,6 @@ h4 {
   width: 100%;
 }
 
-.tab ul li:hover {
-  /* border-left: #e1e4e6 5px solid; */
-}
-
 .tab ul li a:hover {
   font-weight: 900;
   color: #ecfffe;
@@ -293,13 +289,11 @@ h4 {
   font-weight: bold;
   flex-direction: column;
   padding: 10px;
-  /* border-radius: 10px 10px 0 0; */
   justify-content: center;
   align-items: flex-start;
   background: #3c3d3da9;
   color: white;
   text-align: center;
-  /* border-radius: 10px 10px 0 0; */
   margin-bottom: 10px;
 }
 
@@ -326,7 +320,6 @@ h4 {
   font-size: 16px;
   color: white;
   text-align: start;
-  /* border-radius: 10px 10px 0 0; */
   margin-bottom: 10px;
   padding: 10px;
 }
@@ -498,11 +491,6 @@ h4 {
   border-radius: 10px 10px 0 0;
 }
 
-/* 
-#drag-file {
-  background-color: white;
-} */
-
 .modal-container {
   position: fixed;
   top: 0;
@@ -783,7 +771,7 @@ h4 {
   margin-left: 1rem;
 }
 
-/* Login Screen Form Added 10/21/22 */
+/* Login Screen Form */
 .loginForm {
   margin: 8px;
   width: fit-content;

src/components/display/AccountDisplay.tsx

@@ -2,13 +2,13 @@
  * @module AccountDisplay
  * @description Account Display for Settings tab, this will host any forms to update account details such as email, passwords, etc.
  */
-import React from 'react';
-import { useSelector } from 'react-redux';
+import React from "react";
+import { useSelector } from "react-redux";
 
 // Material UI Imports
-import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
-import SendIcon from '@mui/icons-material/Send';
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import SendIcon from "@mui/icons-material/Send";
 
 import {
   handlePasswordChange,
@@ -18,22 +18,22 @@ import {
   handleEmailUpdate,
   handlePhoneUpdate,
   checkPhone,
-} from '../helper/settingsHelper';
-import { RootState } from '../../renderer/store';
+} from "../helper/settingsHelper";
+import { RootState } from "../../renderer/store";
 
 const input = document.getElementById(
-  'update-phone-input',
+  "update-phone-input"
 ) as HTMLTextAreaElement | null;
 
 const AccountDisplay = () => {
   const session = useSelector((state: RootState) => state.session);
 
   return (
     <div>
-      <div className='metric-section-title'>
+      <div className="metric-section-title">
         <h3>Account Information</h3>
       </div>
-      <div className='settings-container'>
+      <div className="settings-container">
         <p>View your account information.</p>
         <br />
         <strong>Email</strong>
@@ -46,110 +46,110 @@ const AccountDisplay = () => {
         <p>{session.phone}</p>
         <br />
       </div>
-      <div className='metric-section-title'>
+      <div className="metric-section-title">
         <h3>Update Your Account</h3>
       </div>
-      <div className='settings-container'>
+      <div className="settings-container">
         <p>1. Update your email address</p>
         <br />
-        <form className='settingsForm' autoComplete='off'>
+        <form className="settingsForm" autoComplete="off">
           <TextField
-            id='update-email-input'
-            label='Email'
+            id="update-email-input"
+            label="Email"
             helperText={session.email}
-            variant='outlined'
-            size='small'
+            variant="outlined"
+            size="small"
           />
           <Button
             sx={{
               ml: 1,
               width: 100,
             }}
-            size='medium'
-            variant='contained'
+            size="medium"
+            variant="contained"
             onClick={() => handleEmailUpdate()}
           >
             Update
           </Button>
           <br />
-          <span id='update-email-alert'></span>
+          <span id="update-email-alert"></span>
         </form>
         <p>2. Update your phone number</p>
         <br />
-        <form className='settings' autoComplete='off'>
+        <form className="settings" autoComplete="off">
           <TextField
-            id='update-phone-input'
-            label='Phone Number'
+            id="update-phone-input"
+            label="Phone Number"
             helperText={session.phone}
             onChange={() => checkPhone(input?.value)}
-            variant='outlined'
-            size='small'
+            variant="outlined"
+            size="small"
           />
           <Button
             sx={{
               ml: 1,
               width: 100,
             }}
-            size='medium'
-            variant='contained'
+            size="medium"
+            variant="contained"
             onClick={() => handlePhoneUpdate()}
           >
             Update
           </Button>
           <br />
-          <span id='update-phone-alert'></span>
+          <span id="update-phone-alert"></span>
         </form>
         <p>3. Use the form below to update your password:</p>
         <br />
-        <form className='settingsForm' autoComplete='off'>
+        <form className="settingsForm" autoComplete="off">
           <p>Current Password</p>
           <br />
           <TextField
             required
-            id='current-password-input'
-            label='Current Password'
-            variant='outlined'
-            type='password'
+            id="current-password-input"
+            label="Current Password"
+            variant="outlined"
+            type="password"
             onChange={() => checkCurrentPassword()}
-            size='small'
+            size="small"
           />
-          <span id='current-password-alert'></span>
+          <span id="current-password-alert"></span>
           <br />
           <p>New Password</p>
           <br />
           <TextField
             required
-            id='new-password-input'
-            label='New Password'
-            variant='outlined'
-            type='password'
+            id="new-password-input"
+            label="New Password"
+            variant="outlined"
+            type="password"
             onChange={() => checkPasswordLength()}
-            size='small'
+            size="small"
           />
-          <span id='new-password-alert'></span>
+          <span id="new-password-alert"></span>
           <br />
           <p>Confirm New Password</p>
           <br />
           <TextField
             required
-            id='new-password-confirmation-input'
-            label='Confirm New Password'
-            variant='outlined'
-            type='password'
+            id="new-password-confirmation-input"
+            label="Confirm New Password"
+            variant="outlined"
+            type="password"
             onChange={() => confirmPassword()}
-            size='small'
+            size="small"
           />
-          <span id='confirm-new-password-alert'></span>
+          <span id="confirm-new-password-alert"></span>
           <br />
           <br />
           <Button
             sx={{
               ml: 1,
               width: 100,
             }}
-            size='medium'
-            color='primary'
-            variant='contained'
+            size="medium"
+            color="primary"
+            variant="contained"
             onClick={() => handlePasswordChange()}
             endIcon={<SendIcon />}
           >