Merge pull request #27 from oslabs-beta/splash

MUI Splash

Author: mdtagg

app/components/Splash/Splash.tsx

@@ -5,7 +5,7 @@ const Splash: React.FC = React.memo(() => {
   const [visible, setVisible] = useState(true);
 
   useEffect(() => {
-    setTimeout(() => setVisible(false), 1000); // Adjust time as needed
+    setTimeout(() => setVisible(false), 2000); // Adjust time as needed
   }, []);
 
   return (

app/containers/DashboardContainer/DashboardContainer.tsx

@@ -19,7 +19,7 @@ const DashboardContainer = React.memo(() => {
    * After 4 seconds, set the DashBoard Container visibility to true
    */
   useEffect(() => {
-    setTimeout(() => setVisible(true), 4000);
+    setTimeout(() => setVisible(true), 2000);
   }, []);
 
   /**

app/containers/SidebarContainer/SidebarContainer.tsx

@@ -3,8 +3,10 @@ import { Link } from 'react-router-dom';
 
 import ListIcon from '@mui/icons-material/List';
 import InfoIcon from '@mui/icons-material/Info';
-import ContactSupportIcon from '@mui/icons-material/ContactSupport';
 import SettingsIcon from '@mui/icons-material/Settings';
+import CallIcon from '@mui/icons-material/Call';
+import LightbulbIcon from '@mui/icons-material/Lightbulb';
+import { Typography } from '@mui/material';
 
 import './styles.scss';
 import { ApplicationContext } from '../../context/ApplicationContext';
@@ -125,7 +127,7 @@ const SidebarContainer = React.memo(() => {
              About
           </Link>
           <Link className="sidebar-link" to="/contact" id="contact" onClick={handleClick}>
-            <ContactSupportIcon
+            <CallIcon
               style={{
                 WebkitBoxSizing: 'content-box',
                 boxShadow: 'none',
@@ -136,23 +138,31 @@ const SidebarContainer = React.memo(() => {
             &emsp;Contact
           </Link>
           <Link className="sidebar-link" to="/" id="dash" onClick={handleClick}>
+          <LightbulbIcon
+              style={{
+                WebkitBoxSizing: 'content-box',
+                boxShadow: 'none',
+                width: '35px',
+                height: '35px',
+              }}
+            />
             {!example ?
 
               <button 
                 className="example-button"
                 onClick={() => handleExample()}
               >
-                  EXAMPLE
+                  Example
               </button>
               :
               <button
                 className="example-button"
                 onClick={() => handleExitExample()}
               >
-                EXIT EXAMPLE
+                Exit Example
               </button>
-            
             }       
+            
           </Link>
         </div>
       </div>

app/containers/SidebarContainer/styles.scss

@@ -1,4 +1,6 @@
 @import '../../index.scss';
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
+
 
 .sidebar-container {
   color: $background;
@@ -11,7 +13,7 @@
 }
 
 .sidebar-container:hover .sidebar-link {
-  width: 150px;
+  width: 160px;
 }
 
 .sidebar-container:hover .sidebar {
@@ -204,7 +206,7 @@
   overflow: hidden;
   z-index: 1;
   margin: 30px 15px;
-  padding: 30px 5px;
+  padding: 30px;
   display: flex;
   align-items: center;
   justify-content: left;
@@ -230,14 +232,11 @@
   }
 }
 
-.example-button {
-  height: 100px;
-  width: 100px;
-  color: whitesmoke;
-  cursor: pointer;
-  font-weight: 600;
+.example-button{
+  font-size: 18px;
+  font-family: roboto;
+  font-weight: 100;
+  font-size: medium;
 }
 
-.example-button:hover {
-  color: blue;
-}
+

app/index.tsx

@@ -11,23 +11,13 @@ import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/material';
 import App from './App';
 import WindowBar from './components/WindowBar/WindowBar';
 
-// declare module '@mui/styles/defaultTheme' {
-//   // eslint-disable-next-line @typescript-eslint/no-empty-interface
-//   interface DefaultTheme extends Theme {}
-// }
-
 
 const theme = createTheme(adaptV4Theme({
   // v4 theme
   typography: {
     fontFamily: ['Roboto', 'sans-serif'].join(','),
   },
 }));
-// const theme = createTheme(adaptV4Theme({
-//   typography: {
-//     fontFamily: ['Roboto', 'sans-serif'].join(','),
-//   },
-// }));
 
 // React 17 Syntax below
 ReactDOM.render(

electron/models/UserModel.ts

@@ -1,5 +1,5 @@
 // Insert the MongoDB URI for your private User database in place of the example URI provided below.
-const MONGO_URI = 'mongodb+srv://msofiasarhiri:[email protected]/';
+const MONGO_URI = '';
 
 const mongoose = require('mongoose');