Merge pull request #167 from ClearContracts/justin/clarity-branding

add clarity logo & github link in footer

src/components/layout/footer.tsx

@@ -0,0 +1,46 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import clarity from '@/img/Clarity.png';
+import { GitHub } from '@mui/icons-material';
+import { Box, Button } from '@mui/material';
+
+/**
+ * Footer with Clarity logo & link to repo
+ * @returns Footer
+ */
+export function Footer(): JSX.Element {
+  return (
+    <Box
+      sx={{
+        position: 'static',
+        bottom: 0,
+        left: 0,
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        p: 2,
+
+        height: '75px',
+      }}
+    >
+      <Link
+        href="https://www.clarity.community/"
+        style={{ textDecoration: 'none' }}
+        data-testid="clarity-link"
+        target="_blank"
+      >
+        <Image src={clarity} width="200" height="50" alt="Powered by Clarity" />
+      </Link>
+      <Button
+        href="https://github.com/ClearContracts/cardano-constitution-voting-app"
+        target="_blank"
+        data-testid="github-link"
+        color="primary"
+      >
+        <GitHub />
+      </Button>
+    </Box>
+  );
+}

src/components/layout/layout.tsx

@@ -2,6 +2,7 @@ import { useTheme } from '@mui/material';
 import Box from '@mui/material/Box';
 import { Toaster } from 'react-hot-toast';
 
+import { Footer } from '@/components/layout/footer';
 import { Navbar } from '@/components/layout/navbar';
 
 interface Props {
@@ -61,6 +62,7 @@ export function Layout(props: Props): JSX.Element {
       >
         {children}
       </Box>
+      <Footer />
     </>
   );
 }

src/components/layout/navbar.tsx

@@ -14,23 +14,24 @@ export function Navbar(): JSX.Element {
   return (
     <Box
       sx={{
-        position: 'absolute',
+        position: 'sticky',
         top: 0,
         left: 0,
         width: '100%',
         display: 'flex',
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
+        backgroundColor: 'rgb(8, 13, 23)',
         py: 2,
         px: {
           xs: 2,
           sm: 4,
           md: 10,
           lg: 16,
         },
-        backgroundColor: 'rgba(0, 0, 0, 0.1)',
         height: '75px',
+        zIndex: 100,
       }}
     >
       <Box display="flex" flexDirection="row" gap={4} alignItems="center">