Added dark mode, styling changes, card database logo identifier

Author: lu0713

app/assets/mongo-icon-color.png

@@ -46,12 +46,11 @@ const Applications: React.FC = React.memo((props) => {
   };
 
   const useStyles = makeStyles(theme => ({
-    // card: myPostgres, myMongo, ToddDB buttons
+    // cards: myPostgres, myMongo, ToddDB
     paper: {
       height: 280,
       width: 280,
       textAlign: 'center',
-      color: '#3788fc',
       whiteSpace: 'nowrap',
       backgroundColor: '#ffffff',
       borderRadius: 3,
@@ -60,8 +59,11 @@ const Applications: React.FC = React.memo((props) => {
       '&:hover, &.Mui-focusVisible': {
         backgroundColor: `#3788fc`,
       },
+      '&:active': {
+        backgroundColor: `#3788fc`,
+      },
     },
-    hover: {
+    iconbutton: {
       position: 'relative',
       bottom: 20,
       right: 47,
@@ -70,10 +72,10 @@ const Applications: React.FC = React.memo((props) => {
       backgroundColor: 'transparent',
     },
     fontStyles: {
-      fontSize: '16px',
+      color: '#444d56',
+      fontSize: '22px',
       [theme.breakpoints.up('lg')]: {
-        fontSize: '18px',
-        // MAIN PAGE SQUARE BUTTON FONTS
+        fontSize: '22px',
         fontFamily: 'Roboto',
         fontWeight: 100,
       },
@@ -82,6 +84,8 @@ const Applications: React.FC = React.memo((props) => {
 
   const classes = useStyles();
 
+  console.log('Applications.tsx: applications', applications)
+  
   return (
     <>
       {applications.map((app: string[], i: number | any | string | undefined) => (
@@ -97,7 +101,7 @@ const Applications: React.FC = React.memo((props) => {
                 avatar={
                   <IconButton
                     ref={element => (delRef.current[i] = element)}
-                    className={classes.hover}
+                    className={classes.iconbutton}
                     aria-label="Delete"
                     onClick={event => confirmDelete(event, app[0], i)}
                   >

app/assets/mongo-icon-green-light.png

@@ -23,12 +23,14 @@ import SearchIcon from '@material-ui/icons/Search';
 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';
 
 // STYLESHEETS
+// import '../stylesheets/Occupied.scss';
 import '../stylesheets/Occupied.scss';
 
 // DASHBOARD CONTEXT
@@ -75,54 +77,55 @@ const Occupied = React.memo(() => {
   };
 
   const useStyles = makeStyles<Theme, StyleProps>(theme => ({
-    // "+" Card Only
+    // ALL CARDS
     paper: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignContent: 'center',
+      alignItems: 'center',
+      position: 'relative',
+      overflow: 'visible',
       height: 280,
       width: 280,
       textAlign: 'center',
-      color: '#3788fc',
+      color: '#888888',
       whiteSpace: 'nowrap',
       backgroundColor: '#ffffff',
       borderRadius: 3,
       border: '0',
       boxShadow: '0 6px 6px 0 rgba(153, 153, 153, 0.14), 0 6px 6px -2px rgba(153, 153, 153, 0.2), 0 6px 8px 0 rgba(153, 153, 153, 0.12)',
       '&:hover, &.Mui-focusVisible': {
         backgroundColor: `#3788fc`,
-        color: '#fff',
-        fontWeight: 300,
+        color: '#ffffff',
+        fontWeight: 600,
       },
     },
     iconbutton: {
       boxShadow: 'none',
       color: 'none',
-      '&:hover, &.Mui-focusVisible': {
-        backgroundColor: `#3788fc`,
-        color: '#fff',
-      }
+      visibility: 'hidden',
     },
     btnStyle: {
       position: 'absolute',
       top: -10,
-      left: -10,
+      left: -72,
       margin: '0',
       color: '#eeeeee',
       borderRadius: '0',
       backgroundColor: 'none',
-      '&:hover' : {
-        backgroundColor: 'none'
-      }
+      visibility: 'visible',
     },
     icon: {
       width: '75px',
       height: '75px',
       boxShadow: 'none',
     },
-    // EACH CARD CONTENT
+    // ALL CARDS: CONTENT
     fontStyles: {
-      fontSize: '16px',
+      fontSize: '18px',
       fontFamily: 'Roboto',
-      fontWeight: 100,
-      color: '#444d56'
+      fontWeight: 300,
+      color: '#444d56',
     }
   }));
 
@@ -146,9 +149,20 @@ const Occupied = React.memo(() => {
                 <SearchIcon className="icon" id="searchIcon" />
               </button>
             </form>
-            <DashboardIcon className="sideIcon" id="dashboardIcon" />
-            <NotificationsIcon className="sideIcon" id="notificationsIcon" />
-            <PersonIcon className="sideIcon" id="personIcon" />
+            <div className="dashboardIconArea">
+              <span className="dashboardTooltip">You have {applications.length} active databases</span>
+              <DashboardIcon className="navIcon" id="dashboardIcon" />
+            </div>
+            
+            <div className="notificationsIconArea">
+              <span className="notificationsTooltip">You have no new alerts</span>
+              < NotificationsIcon className="navIcon" id="notificationsIcon" />
+            </div>
+
+            <div className="personIconArea">
+              <span className="personTooltip">You are not logged in</span>
+              <PersonIcon className="navIcon" id="personIcon" />
+            </div>
           </section>
         </header>
 
@@ -166,21 +180,41 @@ const Occupied = React.memo(() => {
                 variant="outlined"
                 onClick={event => handleClick(event, app[0], i)}
               >
-                <CardHeader
-                  avatar={
-                    <IconButton
-                      ref={element => (delRef.current[i] = element)}
-                      className={classes.iconbutton}
-                      aria-label="Delete"
-                      onClick={event => confirmDelete(event, app[0], i)}
-                    >
-                      <HighlightOffIcon className={classes.btnStyle} id="deleteIcon" />
-                    </IconButton>
-                  }
-                ></CardHeader>
+
+                  <div className="databaseIconContainer">
+                    <div className="databaseIconHeader">
+                      <img className="databaseIcon" src="../assets/mongo-icon-white.png" alt="MongoDB"></img>
+                    </div>
+                  </div>
+                  
+                  <CardHeader
+                    avatar={
+                      <IconButton
+                        id="iconButton"
+                        ref={element => (delRef.current[i] = element)}
+                        className={classes.iconbutton}
+                        aria-label="Delete"
+                        onClick={event => confirmDelete(event, app[0], i)}
+                      >
+                        <HighlightOffIcon 
+                        className={classes.btnStyle} 
+                        id="deleteIcon" 
+                        ref={element => (delRef.current[i] = element)} 
+                        />
+                      </IconButton>
+                    }
+                  >
+                  </CardHeader>
                 <CardContent>
+                  <p id="databaseName">Database Name:</p>
                   <Typography className={classes.fontStyles}>{app[0]}</Typography>
                 </CardContent>
+                <hr className="cardLine"/>
+
+                <div className="cardFooter">
+                  <UpdateIcon className="cardFooterIcon"/>
+                  <em><p id="cardFooterText">Just updated</p></em>
+                </div>
               </Card>
             </div>
           ))}