Merge pull request #11 from hodesza/UI

UI - Dark Mode Implementation

Author: mjiang108

.d.ts

@@ -1 +1 @@
-declare module '*.png'
+declare module '*.png'

__tests__/app/components/Settings.test.tsx

@@ -0,0 +1,77 @@
+import React, {useContext} from 'react';
+import { createMount, createShallow } from '@material-ui/core/test-utils';
+
+import DashboardContextProvider, { DashboardContext } from '../../../app/context/DashboardContext';
+import Settings from '../../../app/components/Settings';
+const { ipcRenderer } = require('electron');
+jest.mock('electron', () => ({ ipcRenderer: { sendSync: jest.fn() } }));
+
+describe('<Settings />', () => {
+  let wrapper: any;
+  let mount: any;
+  let shallow: any;
+
+  beforeEach(() => {
+    mount = createMount();
+    shallow = createShallow();
+  });
+
+  afterEach(() => {
+    mount.cleanUp();
+  });
+
+  it("should render ", () => {
+    const wrapper = mount(
+    <DashboardContextProvider>
+      <Settings />
+    </DashboardContextProvider>
+  );
+   expect(wrapper.exists).toBeTruthy;
+  });
+
+  it("should have a button with text value of Light", () => {
+    const wrapper = mount(
+    <DashboardContextProvider>
+      <Settings />
+    </DashboardContextProvider>
+  );
+    const button = wrapper.find('#lightMode');
+    // button.simulate('click');
+   expect(button.text()).toEqual('Light')
+  });
+
+  it("should emit the changeApp event when click light mode", () => {
+    const wrapper = mount(
+    <DashboardContextProvider>
+      <Settings />
+    </DashboardContextProvider>
+  );
+    const button = wrapper.find('#lightMode');
+    button.simulate('click');
+  expect(ipcRenderer.sendSync).toHaveBeenCalledWith('changeMode', 'light mode');
+  });
+
+  it("should emit the changeApp event when click dark mode", () => {
+    const wrapper = mount(
+    <DashboardContextProvider>
+      <Settings />
+    </DashboardContextProvider>
+  );
+    const button = wrapper.find('#darkMode');
+    button.simulate('click');
+  expect(ipcRenderer.sendSync).toHaveBeenCalledWith('changeMode', 'dark mode');
+  });
+
+  it("should have a button with text value of Dark", () => {
+    const wrapper = mount(
+    <DashboardContextProvider>
+      <Settings />
+    </DashboardContextProvider>
+  );
+    const button = wrapper.find('#darkMode');
+    // button.simulate('click');
+   expect(button.text()).toEqual('Dark')
+  });
+
+
+});

__tests__/app/context/DashboardContext.test.tsx

@@ -23,7 +23,7 @@ describe('<DashboardContext />', () => {
     };
     // Mock component that has access to Dashboard Context
     const TestComponent = () => {
-      const { applications, getApplications, addApp, deleteApp } = useContext(DashboardContext);
+      const { applications, getApplications, addApp, deleteApp, mode, changeMode } = useContext(DashboardContext);
 
       return (
         <>
@@ -37,6 +37,9 @@ describe('<DashboardContext />', () => {
           <button id="getApplications" onClick={() => getApplications()}>
             Test getApplications
           </button>
+          <button id="changeMode" onClick={() => changeMode('light mode')}>
+            Test changeMode
+          </button>
         </>
       );
     };
@@ -74,4 +77,10 @@ describe('<DashboardContext />', () => {
     button.simulate('click');
     expect(ipcRenderer.sendSync).toHaveBeenCalledWith('getApps');
   });
+
+  it("should emit the 'changeMode' event when invoking changeMode", () => {
+    const button = wrapper.find('#changeMode');
+    button.simulate('click');
+    expect(ipcRenderer.sendSync).toHaveBeenCalledWith('changeMode', 'light mode');
+  });
 });

app/components/Header.tsx

@@ -2,8 +2,9 @@ import React, { useContext } from 'react';
 import { useHistory, Link } from 'react-router-dom';
 import ListIcon from '@material-ui/icons/List';
 import { ApplicationContext } from '../context/ApplicationContext';
+import { DashboardContext } from '../context/DashboardContext';
 import '../stylesheets/Header.scss';
-
+import {lightAndDark} from '../components/Styling';
 export interface HeaderProps {
   app: string[];
   service: string;
@@ -15,9 +16,11 @@ const Header: React.FC<HeaderProps> = React.memo(function Header({ app, service,
   const history = useHistory();
 
   const { servicesData } = useContext(ApplicationContext);
+  const { mode } = useContext(DashboardContext);
 
+  let currentMode = (mode === 'light mode')? lightAndDark.lightModeHeader : lightAndDark.darkModeHeader;
   return (
-    <div className="microservice-header">
+    <div className="microservice-header" style={currentMode}>
       <h1 className="microserviceTitle">{app}</h1>
       <select name="microservice" value={service} onChange={e => history.replace(e.target.value)}>
         {servicesData.map(({ _id, microservice }: any) => (

app/components/Occupied.tsx

@@ -24,7 +24,6 @@ import DashboardIcon from '@material-ui/icons/Dashboard';
 import NotificationsIcon from '@material-ui/icons/Notifications';
 import PersonIcon from '@material-ui/icons/Person';
 import UpdateIcon from '@material-ui/icons/Update';
-
 // MODALS
 import AddModal from '../modals/AddModal';
 import ServicesModal from '../modals/ServicesModal';
@@ -33,6 +32,7 @@ import ServicesModal from '../modals/ServicesModal';
 // import '../stylesheets/Occupied.scss';
 import '../stylesheets/Occupied.scss';
 
+
 // DASHBOARD CONTEXT
 import { DashboardContext } from '../context/DashboardContext';
 
@@ -46,20 +46,21 @@ type ClickEvent = React.MouseEvent<HTMLElement>;
 
 const Occupied = React.memo(() => {
   const { setServicesData } = useContext(ApplicationContext);
-  const { applications, getApplications, deleteApp } = useContext(DashboardContext);
+  const { applications, getApplications, deleteApp, mode, getMode } = useContext(DashboardContext);
   const [open, setOpen] = useState<boolean>(false);
   const [addOpen, setAddOpen] = useState<boolean>(false);
   const [index, setIndex] = useState<number>(0);
   const [app, setApp] = useState<string>('');
   const [searchTerm, setSearchTerm] = useState<string>('Search...');
   // Dynamic refs
   const delRef = useRef<any>([]);
-
+  //check context from dashboard
   useEffect(() => {
     setServicesData([]);
-    getApplications();
+    getApplications(); 
   }, []);
-
+  console.log(mode);
+  
   // Ask user for deletetion confirmation
   const confirmDelete = (event: ClickEvent, app: string, i: number) => {
     const message = `The application '${app}' will be permanently deleted. Continue?`;
@@ -75,8 +76,61 @@ const Occupied = React.memo(() => {
       setOpen(true);
     }
   };
-
-  const useStyles = makeStyles<Theme, StyleProps>(theme => ({
+  //Conditional Rendering of UI Modals for Light and Dark Mode
+  const useStylesDark = makeStyles<Theme, StyleProps>(theme => ({
+    // ALL CARDS
+    paper: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignContent: 'center',
+      alignItems: 'center',
+      position: 'relative',
+      overflow: 'visible',
+      height: 280,
+      width: 280,
+      textAlign: 'center',
+      color: '#ffffff', // dark mode
+      whiteSpace: 'nowrap',
+      backgroundColor: 'transparent', // dark mode
+      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)', // dark mode
+      '&:hover, &.Mui-focusVisible': {
+        backgroundColor: 'rgba(255, 255, 255, 0.2)', // dark mode
+        color: '#ffffff',
+        fontWeight: 600,
+      },
+    },
+    iconbutton: {
+      boxShadow: 'none',
+      color: 'none',
+      visibility: 'hidden',
+    },
+    btnStyle: {
+      position: 'absolute',
+      top: -10,
+      left: -72,
+      margin: '0',
+      color: '#eeeeee',
+      borderRadius: '0',
+      backgroundColor: 'none',
+      visibility: 'visible',
+    },
+    icon: {
+      width: '75px',
+      height: '75px',
+      boxShadow: 'none',
+    },
+    // ALL CARDS: CONTENT
+    fontStyles: {
+      fontSize: '18px',
+      fontFamily: 'Roboto',
+      fontWeight: 300,
+      // color: '#444d56',
+      color: '#ffffff', // dark mode
+    }
+  }));
+  const useStylesLight = makeStyles<Theme, StyleProps>(theme => ({
     // ALL CARDS
     paper: {
       display: 'flex',
@@ -130,7 +184,7 @@ const Occupied = React.memo(() => {
     }
   }));
 
-  const classes = useStyles({} as StyleProps);
+  let classes = (mode === 'light mode')? useStylesLight({} as StyleProps) : useStylesDark({} as StyleProps) ;
 
   return (
     <div className="entireArea">

app/components/Settings.tsx

@@ -1,17 +1,30 @@
-import React from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import '../stylesheets/Settings.scss';
+
+// DASHBOARD CONTEXT
+import { DashboardContext } from '../context/DashboardContext';
+
 // Need to add flag to turn off the splash at start
 // Need to add flag to turn off getting started page
 // Need to add flag to turn on/off live data (ideally persist on restart)
 // Need to add dark mode
+
+//Typescript
+type ClickEvent = React.MouseEvent<HTMLElement>;
+
 const Settings: React.SFC = React.memo((props) => {
+  //use context from Dash board regarding currentMode
+  let { changeMode } = useContext(DashboardContext);
+  const handleClick = (mode: string) => {
+    changeMode(mode);
+  }
   return (
     <div className="settings">
-      <button className="mode" id="lightMode">
+      <button className="mode" id="lightMode" onClick={() => handleClick("light mode")}>
         Light
       </button>
 
-      <button className="mode" id="darkMode">
+      <button className="mode" id="darkMode" onClick={() => handleClick("dark mode")}>
         Dark
       </button>
     </div>

app/components/Styling.tsx

@@ -0,0 +1,28 @@
+export const lightAndDark = {
+  lightModeMain : {
+    backgroundColor: "#eeeeee",
+    flex: "1",
+    minHeight: "100vh",
+    flexDirection: "column" as "column",
+    paddingLeft: "140px",
+  }, 
+  lightModeHeader : {
+    backgroundColor: "#eeeeee",
+    color: "#444d56",
+  },
+  darkModeHeader : {
+    // backgroundColor: "#transparent",
+    backgroundColor: "#181818",
+    color: "white",
+  },
+  darkModeMain : {
+    // backgroundImage: "url('../assets/mountain_longer.png')",
+    // backgroundColor: "#transparent",
+    backgroundColor: "#181818",
+    backgroundSize: 'contain',
+    flex: "1",
+    minHeight: "100vh",
+    flexDirection: "column" as "column",
+    paddingLeft: "140px",
+  }
+};

app/containers/DashboardContainer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect, useContext} from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import MainContainer from './MainContainer';
 import SidebarContainer from './SidebarContainer';
@@ -8,8 +8,10 @@ import ApplicationContextProvider from '../context/ApplicationContext';
 import DashboardContextProvider from '../context/DashboardContext';
 import DockerContextProvider from '../context/DockerContext';
 import '../stylesheets/Dashboard.scss';
+import { DashboardContext } from '../context/DashboardContext';
+const DashboardContainer = React.memo(() => {
 
-const DashboardContainer = React.memo(() => (
+return(
   <Router>
     <div className="dash">
       <ApplicationContextProvider>
@@ -26,6 +28,6 @@ const DashboardContainer = React.memo(() => (
       </ApplicationContextProvider>
     </div>
   </Router>
-));
+)});
 
 export default DashboardContainer;

app/containers/MainContainer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useContext ,useEffect} from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 // import GraphsContainer from './Archived';
@@ -8,17 +8,20 @@ import Contact from '../components/Contact';
 import Settings from '../components/Settings';
 import Copyright from '../components/Copyright';
 import Occupied from '../components/Occupied';
+import {lightAndDark} from '../components/Styling';
 // import Occupied from '../components/Occupied_darkmode';
 import GraphsContainer from './GraphsContainer';
 import '../stylesheets/MainContainer.scss';
 // import '../stylesheets/MainContainer_darkmode.scss';
 
 import ApplicationContextProvider from '../context/ApplicationContext';
+import { DashboardContext } from '../context/DashboardContext';
 
 const MainContainer = React.memo(() => {
-  
+  const { mode, getMode } = useContext(DashboardContext);
+   let currentMode = (mode === 'light mode')? lightAndDark.lightModeMain : lightAndDark.darkModeMain;
   return (
-  <div className="main-container">
+  <div className="main-container" style ={currentMode}>
     <div className="main-routes">
       <Switch>
         <Route exact path="/" component={Home} />

app/containers/SidebarContainer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import { Link } from 'react-router-dom';
 
 import HomeSharpIcon from '@material-ui/icons/HomeSharp';
@@ -9,6 +9,8 @@ import SettingsIcon from '@material-ui/icons/Settings';
 import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 import '../stylesheets/SidebarContainer.scss';
 
+// import { DashboardContext } from '../context/DashboardContext';
+
 const iconStyles = {
   WebkitBoxSizing: 'border-box',
   boxShadow: 'none',
@@ -19,6 +21,7 @@ const iconStyles = {
 }
 
 const SidebarContainer = React.memo(function SidebarContainer(props): JSX.Element {
+
   return (
   <div className="sidebar-container" id="mySidebar">
     <div className="sidebar">