add view code button and update visualize button styles

stevenluongo · Feb 3, 2022 · 74ce294 · 74ce294
1 parent 0de28c2
commit 74ce294
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 16 deletions.
diff --git a/components/board.js b/components/board.js
@@ -236,15 +236,9 @@ const VisualizeButton = styled(LoadingButton)({
   color: '#cfc4ff',
   backgroundColor: '#3f22c0',
   '&:hover': {
-    backgroundColor: '#341ba1',
-    borderColor: '#0062cc',
-    boxShadow: 'none',
+    backgroundColor: 'transparent',
   },
   '&:disabled': {
-    boxShadow: 'none',
-    backgroundColor: '#331e91',
-    borderColor: '#005cbf',
-    color: '#6048ca'
   },
 })
 

diff --git a/components/topnav.js b/components/topnav.js
@@ -7,7 +7,10 @@ import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
 import { useGlobalContext } from '../context/global-context';
 import LoadingButton from '@mui/lab/LoadingButton';
 import RestartAltIcon from '@mui/icons-material/RestartAlt';
-
+import Button from '@mui/material/Button';
+import DeleteIcon from '@mui/icons-material/Delete';
+import SendIcon from '@mui/icons-material/Send';
+import CodeIcon from '@mui/icons-material/Code';
 export default function TopNav() {
     const [algorithm, setAlgorithm] = useState(10);
     const {isResetting, resetBoard, isAnimating} = useGlobalContext();
@@ -35,9 +38,14 @@ export default function TopNav() {
           loadingPosition="end"
           variant="contained"
           disabled={isAnimating}
-      >
-        {isResetting ? 'resetting ...' : 'Reset'}
-      </VisualizeButton>
+        >
+          {isResetting ? 'resetting ...' : 'Reset'}
+        </VisualizeButton>
+        <div className='app_topbar_end'>
+        <Button target="_blank" href="https://github.com/binolt/pathfinder" className='a_t_e_button' variant="contained" endIcon={<CodeIcon />}>
+          View Code
+        </Button>
+        </div>
         </div>
     );
 }

diff --git a/styles/_app.scss b/styles/_app.scss
@@ -17,6 +17,7 @@
         width: calc(100% - 4px);
         background-color: #1d1d1d;
         border-bottom-left-radius: 5px;
+        position: relative;
 
     }
     .app_content {
@@ -190,4 +191,21 @@
     svg {
         color: #cfcfcf !important;
     }
+}
+
+.app_topbar_end {
+    position: absolute;
+    right: 1rem;
+    .a_t_e_button {
+        height: 24 !important;
+        padding-top: 8px !important;
+        padding-bottom: 8px !important;
+        margin-left: 1rem !important;
+        background-color: #292929;
+        text-transform: inherit !important;
+        font-family: "Inter" !important;
+        svg {
+            color: #cfcfcf !important;
+        }
+    }
 }
diff --git a/styles/_board.scss b/styles/_board.scss
@@ -25,17 +25,50 @@
     height: 50px !important;
     border-radius: 3px !important;
     font-weight: 600 !important;
-    color: #fff !important;
     cursor: pointer !important;
     transition: transform 0.35s ease, background-color 0.5s ease !important;
     text-transform: inherit !important;
     font-family: "Inter" !important;
-    color: #cfc4ff !important;
-    svg {
-      color: #cfc4ff!important;
+    padding: 1em !important;
+    outline: none !important;
+    color: #e1cef1 !important;
+    font-weight: 900 !important;
+    font-style: 1.2em !important;
+    z-index: 1 !important;
+    cursor: pointer !important;
+    background: none !important;
+    text-shadow: 3px 3px 10px rgba(0,0,0,.45) !important;
+    &:before, &:after {
+      position: absolute !important;
+      top: 50% !important;
+      left: 50% !important;
+      border-radius: 10em !important;
+      transform: translateX(-50%) translateY(-50%) !important;
+      width: 105% !important;
+      height: 105% !important;
+      content: '' !important;
+      z-index: -2 !important;
+      background-size: 400% 400% !important;
+      background: linear-gradient(60deg, #8c4eef, #382bf3) !important; 
+    }
+    &:before {
+      border-radius: 10em !important;
+
+      filter: blur(7px) !important;
+      transition: all .25s ease !important;
+      animation: pulse 10s infinite ease !important;
+    }
+    &:after {
+      filter: blur(0.3px) !important;
     }
     &:hover {
-      transform: translateY(-0.1rem) !important;
+      &:before {
+        width: 115% !important;
+        height: 115% !important;
+      }
+    }
+    svg {
+      color: #e1cef1 !important;
     }
   }