Rework Styling and Fix Borders

Author: gregpalace

app/components/Applications.tsx

@@ -43,16 +43,19 @@ const Applications = () => {
     paper: {
       height: 340,
       textAlign: 'center',
-      color: 'white',
+      color: 'rgba(33, 34, 41, 1.2)',
+      fontWeight: 700,
       fontSize: '3rem',
       whiteSpace: 'nowrap',
-      backgroundColor: '#24262f',
-      border: '2px solid black',
-      boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
-      '&:hover, &.Mui-focusVisible': { background: 'rgba(33, 34, 41, 0.75)' },
+      backgroundColor: 'rgba(33, 34, 41, 0.2)',
+      border: '3px ridge #808080',
+      boxShadow: '0 10px 10px rgba(0,0,0,0.5)',
+      '&:hover, &.Mui-focusVisible': { color: 'white', background: 'rgba(33, 34, 41, 1.2)' },
     },
     hover: {
-      color: 'white',
+      position: 'relative',
+      bottom: 20,
+      right: 40,
       boxShadow: 'none',
       '&:hover, &.Mui-focusVisible': { color: 'red' },
     },
@@ -105,4 +108,6 @@ const Applications = () => {
 export default Applications;
 
 //name, desc, creation date
-// start lighter and becomes darker
+// three cards a row, same width
+// move trash can
+//change the font

app/components/Occupied.tsx

@@ -11,19 +11,20 @@ const Occupied: React.FC = () => {
 
   const useStyles = makeStyles(theme => ({
     paper: {
-      color: 'white',
+      color: 'rgba(33, 34, 41, 0.7)',
       height: 340,
       width: '100%',
-      backgroundColor: '#24262f',
-      boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+      backgroundColor: 'rgba(33, 34, 41, 0.2)',
+      border: '3px ridge #808080',
+      boxShadow: '0 10px 10px rgba(0,0,0,0.5)',
       '&:hover, &.Mui-focusVisible': {
-        backgroundColor: 'rgba(33, 34, 41, 0.75)',
+        backgroundColor: 'rgba(33, 34, 41, 1.2)',
         color: 'rgb(255, 243, 72)',
       },
     },
     grid: {
       margin: '0 auto',
-      maxWidth: '60vw',
+      maxWidth: '50vw',
       maxHeight: '75vh',
     },
     icon: {

app/stylesheets/Applications.css

@@ -1,6 +1,5 @@
 #card-hover {
   cursor: pointer;
-  position: relative;
   transition: all 1s;
   &:after,
   &:before {
@@ -13,16 +12,17 @@
   &:after {
     top: -1px;
     right: -1px;
-    border-top: 2px solid white;
-    border-right: 2px solid white;
+    border-top: 2px solid rgba(255, 243, 72, 0.7);
+    border-right: 2px solid rgba(255, 243, 72, 0.7);
   }
   &:before {
     bottom: -1px;
     left: -1px;
-    border-bottom: 2px solid white;
-    border-left: 2px solid white;
+    border-bottom: 2px solid rgba(255, 243, 72, 0.7);
+    border-left: 2px solid rgba(255, 243, 72, 0.7);
   }
   &:hover {
+    position: relative;
     border-top-right-radius: 0px;
     border-bottom-left-radius: 0px;
     &:before,