second level UI updates

Author: sarhiri

app/components/Occupied/Occupied.tsx

@@ -22,7 +22,7 @@ import ServicesModal from '../../modals/ServicesModal/ServicesModal';
 
 // STYLESHEETS
 import './styles.scss';
-
+import lightAndDark from '../Styling';
 // // CONTEXT
 import { DashboardContext } from '../../context/DashboardContext';
 import { ApplicationContext } from '../../context/ApplicationContext';
@@ -38,7 +38,7 @@ import { useStylesLight, useStylesDark } from './helpers/muiHelper'
 //v10: Memoized function, without any props. Should theoretically be called only once.
 const Occupied = React.memo(() => {
   const { setServicesData, app, example } = useContext(ApplicationContext);
-  const { user, applications, getApplications, mode } = useContext(DashboardContext);
+  const { user, applications, getApplications, mode, } = useContext(DashboardContext);
   const [ modal,setModal ] = useState({isOpen:false,type:''})
   const { appIndex } = useContext(ApplicationContext);
   const [searchTerm, setSearchTerm] = useState<string>('');
@@ -51,6 +51,7 @@ const Occupied = React.memo(() => {
   }, [user]);
 
   const classes = mode === 'light' ? useStylesLight({}) : useStylesDark({});
+  const currentStyle = mode === 'light' ? lightAndDark.lightModal : lightAndDark.darkModal;
 
   return (
     <div 
@@ -75,10 +76,13 @@ const Occupied = React.memo(() => {
       >
         {!example &&
         <div 
+        
           className="card" 
           id="card-add"
+          
         >
           <Button 
+            style={currentStyle}
             className={classes.paper} 
             onClick={() => setModal({isOpen:true,type:'envModal'})}
           >

app/components/Occupied/helpers/muiHelper.ts

@@ -16,15 +16,15 @@ export const useStylesDark = makeStyles(theme => ({
     height: 280,
     width: 280,
     textAlign: 'center',
-    color: '#888888',
+    color: '#fafdf9',
     whiteSpace: 'nowrap',
-    backgroundColor: 'lightgray',
+    backgroundColor: '#262837',
     borderRadius: 3,
     border: '0',
     boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)',
     '&:hover, &.Mui-focusVisible': {
       backgroundColor: 'rgba(255, 255, 255, 0.2)',
-      color: '#ffffff',
+      color: '#fafdf9',
       fontWeight: 600,
     },
   },
@@ -54,7 +54,7 @@ export const useStylesDark = makeStyles(theme => ({
     fontSize: '18px',
     fontFamily: 'Roboto',
     fontWeight: 300,
-    color: '#444d56',
+    color: '#fafdf9',
   },
 }));
 
@@ -70,9 +70,9 @@ export const useStylesLight = makeStyles(theme => ({
     height: 280,
     width: 280,
     textAlign: 'center',
-    color: '#888888',
+    color: '#E3E3F0',
     whiteSpace: 'nowrap',
-    backgroundColor: 'white',
+    backgroundColor: '#F7F8F8',
     borderRadius: 3,
     border: '0',
     boxShadow:

app/components/Styling.tsx

@@ -32,7 +32,16 @@ const lightAndDark = {
     borderColor: 'transparent',
   },
   lightModeData: {
-    backgroundColor: '#E7E7F2',
+    backgroundColor: '#F7F8F8',
+    color: '#24272A',
+  },
+  darkModal: {
+    backgroundColor: '#262837',
+    color: '#fafdf9',
+    borderColor: 'transparent',
+  },
+  lightModal: {
+    backgroundColor: '#F7F8F8',
     color: '#24272A',
   },
 };

app/modals/EnvModal/EnvModal.tsx

@@ -3,14 +3,19 @@ import { Button, Typography } from '@mui/material';
 import './EnvModal.scss';
 import { CloudQueue, Computer } from '@mui/icons-material';
 import { TModalSetter } from '../../components/Occupied/types/Occupied';
+import lightAndDark from '../../components/Styling';
+import { useContext } from 'react';
+import { DashboardContext } from '../../context/DashboardContext';
 
 const EnvModal: React.FC<TModalSetter> = React.memo(
   ({ setModal}) => {
-
+    const { mode } = useContext(DashboardContext);
+    const currentStyle = mode === 'light' ? lightAndDark.lightModeData : lightAndDark.darkModeData;
+  
     return (
-      <div className="add-container">
+      <div className="add-container" style={currentStyle}>
 
-        <div className="card" id="card-env">
+        <div className="card" id="card-env" >
           <Button
             className="env-button"
             onClick={() => setModal({isOpen:true,type:'awsModal'})}

app/modals/ServicesModal/ServicesModal.tsx

@@ -7,6 +7,8 @@ import React, { useContext, useEffect, useState } from 'react';
 import { DashboardContext } from '../../context/DashboardContext'
 import { ApplicationContext } from '../../context/ApplicationContext';
 import './ServicesModal.scss';
+import lightAndDark from '../../components/Styling';
+
 
 import ServicesLink from './ServicesLink';
 
@@ -20,6 +22,8 @@ interface ServicesModalProps {
 // v10: Seems to never have been updated for cloud-based info...
 // servicesModal is re-rendered depending on i and application passed in...
 const ServicesModal: React.FC<ServicesModalProps> = React.memo(({ i, app }) => {
+  const { mode } = useContext(DashboardContext);
+    const currentStyle = mode === 'light' ? lightAndDark.lightModeData : lightAndDark.darkModeData;
   //console.log('Hi, inside ServicesModal. Memoize function invoked in ServicesModal.');
   //console.log('ServicesModal current props (index, app): ', i, ' ', app);
 
@@ -44,7 +48,7 @@ const ServicesModal: React.FC<ServicesModalProps> = React.memo(({ i, app }) => {
 
 
   return (
-    <div className="servicesContainer">
+    <div className="servicesContainer" style={currentStyle}>
       {!servicesData.length ? (
         <div className="loadingMessageModal">
           <h2 id="loadingMessage">Loading...</h2>
@@ -56,6 +60,7 @@ const ServicesModal: React.FC<ServicesModalProps> = React.memo(({ i, app }) => {
             <p>Select a server to monitor</p>
           </div>
           <ServicesLink 
+            
             app={app} 
             servicesData={servicesData} 
             services={services}