On-Chain Voting for MIP - Granola UI update (#25)

MinaFoundation · Nov 27, 2024 · 64b0905 · 64b0905
1 parent e5bb658
commit 64b0905
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 30 deletions.
diff --git a/web/app/favicon.ico b/web/app/favicon.ico
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 
 import { Metadata } from 'next';
-import { Inter } from 'next/font/google';
+import { IBM_Plex_Mono, IBM_Plex_Sans } from 'next/font/google';
 
 import { siteConfig } from 'common/config';
 import { cn } from 'common/utils';
@@ -13,7 +13,7 @@ import { Providers } from 'components/providers';
 
 import './globals.css';
 
-const FONT = Inter({ subsets: ['latin'] });
+const FONT = IBM_Plex_Sans({ weight: ['400'], subsets: ['latin'] });
 
 export const metadata: Metadata = {
   title: `Mina - ${siteConfig.title}`,
@@ -28,7 +28,7 @@ const Layout = ({ children }: PropsWithChildren) => {
     <html lang="en" suppressHydrationWarning>
       <body className={cn('bg-background antialiased', FONT.className)}>
         <Providers>
-          <div className="relative flex flex-col">
+          <div className="relative flex flex-col min-h-screen">
             <Header />
             <div className="flex-1">{children}</div>
             <Footer />

diff --git a/web/app/mina-logo.svg b/web/app/mina-logo.svg
diff --git a/web/components/layout-footer.spec.tsx b/web/components/layout-footer.spec.tsx
@@ -16,7 +16,7 @@ describe(TestVariant.Component, () => {
     it('renders component', () => {
       const gLink = screen.getByRole('link', { name: /Granola/i });
       expect(gLink).toHaveAttribute('href', siteConfig.links.granola);
-      expect(gLink).toHaveAttribute('href', siteConfig.links.minaFoundation);
+      // expect(gLink).toHaveAttribute('href', siteConfig.links.minaFoundation);
       expect(gLink).toBeVisible();
     });
   });

diff --git a/web/components/layout-footer.tsx b/web/components/layout-footer.tsx
@@ -3,9 +3,52 @@ import { siteConfig } from 'common/config';
 export const Footer = () => {
   return (
     <footer className="py-6 md:px-8 md:py-0">
-      <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
-        <p className="text-center text-xs leading-loose text-muted-foreground md:text-left">
-          Built with ❤️ by{' '}
+      <div className="container mx-auto items-center md:h-24 md:flex-row">
+        {/* Main Footer Content */}
+        <div className="flex flex-col lg:flex-row justify-between items-center lg:items-start space-y-4 lg:space-y-0">
+          {/* Copyright Text */}
+          <p className="text-gray-400 text-sm">© 2024 Mina Foundation. All rights reserved.</p>
+
+          {/* Links */}
+          <div className="flex flex-col lg:flex-row items-center space-y-2 lg:space-y-0 lg:space-x-6">
+            <a
+              href="https://github.com/MinaProtocol/mina/blob/develop/CODE_OF_CONDUCT.md"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-gray-400 text-sm hover:text-white"
+            >
+              Code of Conduct
+            </a>
+            <a
+              href="https://minaprotocol.com/privacy"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-gray-400 text-sm hover:text-white"
+            >
+              Privacy Policy
+            </a>
+            <a
+              href="https://minaprotocol.com/tos"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-gray-400 text-sm hover:text-white"
+            >
+              Terms of Service
+            </a>
+            <a
+              href="https://minaprotocol.com/impressum"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-gray-400 text-sm hover:text-white"
+            >
+              Impressum
+            </a>
+          </div>
+        </div>
+
+        {/* Built by Granola */}
+        <div className="mt-4 text-gray-400 text-sm text-center lg:text-left">
+          Built by{' '}
           <a
             href={siteConfig.links.granola}
             target="_blank"
@@ -14,16 +57,7 @@ export const Footer = () => {
           >
             Granola
           </a>
-          {" and "}
-          <a
-            href={siteConfig.links.minaFoundation}
-            target="_blank"
-            rel="noreferrer"
-            className="font-medium underline underline-offset-4 text-logoOrange"
-          >
-            Mina Foundation
-          </a>
-        </p>
+        </div>
       </div>
     </footer>
   );

diff --git a/web/components/layout-header.tsx b/web/components/layout-header.tsx
@@ -11,7 +11,14 @@ import { ThemeToggle } from 'components/theme-toggle';
 
 export const Header = () => {
   return (
-    <header className="supports-backdrop-blur:bg-background/60 sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur">
+    <header
+      className="sticky top-0 z-50 w-full bg-header-gradient backdrop-blur"
+      style={{
+        background:
+          'linear-gradient(90deg, rgba(49,130,206,1) 0%, rgba(130,113,194,1) 50%, rgba(175,120,219,1) 75%, rgba(141,188,235,1) 100%)',
+        padding: '40px 0',
+      }}
+    >
       <div className="container flex h-14 items-center">
         <NavigationDesktop />
         <NavigationMobile />
@@ -23,10 +30,10 @@ export const Header = () => {
                   buttonVariants({
                     variant: 'ghost',
                   }),
-                  'w-9 px-0'
+                  'w-9 px-0',
                 )}
               >
-                <span className="hover:text-foreground/80">FAQ</span>
+                <span className="text-white hover:text-foreground/80">FAQ</span>
               </div>
             </Link>
             <Link href={siteConfig.links.github}>
@@ -35,10 +42,10 @@ export const Header = () => {
                   buttonVariants({
                     variant: 'ghost',
                   }),
-                  'w-9 px-0'
+                  'w-9 px-0',
                 )}
               >
-                <Icons.gitHub className="h-4 w-4" />
+                <Icons.gitHub className="h-4 w-4 text-white hover:text-foreground/80" />
                 <span className="sr-only">GitHub</span>
               </div>
             </Link>

diff --git a/web/components/layout-nav-desktop.tsx b/web/components/layout-nav-desktop.tsx
@@ -4,13 +4,21 @@ import * as React from 'react';
 
 import Link from 'next/link';
 
-import { siteConfig } from 'common/config';
-
 export const NavigationDesktop = () => {
   return (
     <div className="mr-4 hidden md:flex">
       <Link href="/" className="mr-6 flex items-center space-x-2">
-        <span className="hidden font-bold sm:inline-block">{siteConfig.title}</span>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" height="36" viewBox="0 0 127 36" width="127">
+          <clipPath id="a">
+            <path d="m0 0h126.735v36h-126.735z" />
+          </clipPath>
+          <g clip-path="url(#a)" fill="#FFFFFF">
+            <path d="m19.7016 35.9257c-.6628.0193-1.3078-.2159-1.803-.6574-.4951-.4414-.8029-1.0557-.8602-1.7169l-.2997-2.3514c-2.8544-.8143-4.5243-2.9286-4.9581-6.2857l-2.56904-19.81145c-.55108-.08877-1.10889-.12892-1.66699-.12-.82607-.00677-1.64917.09994-2.44626.31714v30.04571h-5.040937v-24.1514c0-3.27717 1.470037-5.59145 4.147497-6.55431v-1.55714c0-1.8 1.09325-3.0085746 2.71743-3.0085746s2.64321 1.0114246 2.90582 2.8571446l.19978 1.44286c2.9315.82 4.6442 3.17714 5.1523 7.00282l2.3749 19.0972c1.4189.2743 2.8771.2743 4.2959 0l2.3749-19.0943c.4967-3.82858 2.2293-6.18572 5.1523-7.0143l.1998-1.44285c.2626-1.83715 1.2959-2.8571457 2.9058-2.8571457s2.7174 1.2085757 2.7174 3.0085757v1.55714c2.6775.96286 4.1475 3.27714 4.1475 6.55428v24.1514h-5.0466v-30.03997c-.7971-.2172-1.6202-.32391-2.4463-.31714-.5581-.00892-1.1159.03123-1.667.12l-2.569 19.81431c-.4253 3.2971-2.1351 5.4628-4.9581 6.2857l-.2826 2.3543c-.0441.6686-.3501 1.2928-.8515 1.7369-.5013.4441-1.1575.6721-1.826.6345zm-2.0295-4.4971.2598 2.0257c.0272.4442.2283.8597.5596 1.1566.3312.2968.766.451 1.2101.4291.221.0159.4428-.0128.6525-.0843s.4029-.1844.5682-.332.2993-.3269.3941-.5273.1485-.4177.1578-.6393l.2598-2.0285c-1.345.2209-2.7169.2209-4.0619 0zm17.5291 3.0314h3.2484v-23.2657c0-2.77717-1.119-4.69431-3.2484-5.5886zm-34.253242 0h3.256912v-28.8543c-2.12655.89429-3.234076 2.81143-3.234076 5.5886zm9.208442-29.11144 2.5176 19.44854c.3597 2.8143 1.687 4.6343 3.942 5.4286l-2.3264-18.7371c-.4282-3.3029-1.784-5.32004-4.1332-6.14004zm19.0933 0c-2.3492.82-3.7107 2.83715-4.1332 6.14284l-2.3264 18.7229c2.2579-.7943 3.5824-2.6143 3.942-5.4286zm-24.14568-.99428c.8007-.19489 1.62224-.29085 2.44626-.28572.5153-.00544 1.03035.02511 1.54139.09143l-.15413-1.12286c-.19696-1.37714-.87632-2.074283-2.01524-2.074283s-1.81828.808573-1.81828 2.108573zm26.75178-.28572c.824-.00513 1.6456.09083 2.4463.28572v-1.27143c0-1.3-.6965-2.108574-1.8183-2.108574s-1.8183.697144-2.0152 2.074284l-.1542 1.12286c.5111-.06633 1.0261-.09688 1.5414-.09143z" />
+            <path d="m53.264 35.3457h-4.9525v-34.691434h4.9525zm-4.0533-.9h3.1541v-32.89143h-3.1541z" />
+            <path d="m85.3935 35.9257c-2.1494 0-2.6403-1.9628-2.8002-2.6086l-.3711-1.6457c-3.2169-.5714-5.1808-2.6485-5.9943-6.3314l-4.6613-20.26286c-.5331-.06683-1.0698-.09928-1.6071-.09715-.8921-.01447-1.7813.10594-2.6375.35715v29.99996h-5.0466v-24.2857c0-3.14283 1.4272-5.32855 4.1475-6.3514v-1.61715c0-1.8 1.0904-3.0085702 2.7146-3.0085702 1.4015 0 2.4319.8914282 2.7574 2.3828602l.4139 1.82857c3.1398.57143 5.0238 2.58857 5.9001 6.32859l4.7526 20.2657c.535.0667 1.0737.0992 1.6128.0971.8885.0069 1.7741-.1016 2.6346-.3228v-30.000019h5.0467v25.060019c0 2.5714-1.5043 4.5886-4.1475 5.58v1.5628c0 1.8972-1.039 3.0686-2.7146 3.0686zm-2.215-4.1114.2854 1.2943c.3397 1.36.8992 1.9171 1.9268 1.9171 1.1417 0 1.8154-.7857 1.8154-2.1571v-1.2915c-.8641.1979-1.7483.2938-2.6347.2858-.4652.001-.9301-.0218-1.3929-.0686v.0143zm-20.004 2.6314h3.2484v-28.77999c-2.158.93429-3.2484 2.74286-3.2484 5.38289zm9.354-29.19999 4.5671 19.89429c.7079 3.1857 2.2836 4.9714 4.8983 5.5686l-4.6585-19.8943c-.7593-3.23145-2.2521-4.97716-4.8069-5.56859zm15.5796-3.69143v28.78282c2.1008-.8914 3.2483-2.5114 3.2483-4.6114v-24.17142zm-20.7861 2.83429c.8613-.22227 1.7481-.32986 2.6375-.32.4652-.0011.9302.02179 1.393.06857v-.01429l-.3368-1.48285c-.137-.62858-.5709-1.677149-1.8782-1.677149-1.3074 0-1.8155 1.088569-1.8155 2.108569z" />
+            <path d="m126.909 35.3457h-5.281l-2.603-10.3314h-14.638l-2.555 10.3314h-5.2805l6.8105-25.0914c.788-2.86573 2.589-4.82573 5.221-5.68287l.471-1.97143c.285-1.08572.856-2.5171448 2.657-2.5171448 1.802 0 2.375 1.4285748 2.655 2.5085748l.465 1.98c2.626.85714 4.428 2.82571 5.218 5.68857zm-4.582-.9h3.403l-6.548-23.9543c-.648-2.3514-2.053-4.01997-4.085-4.85712l4.047 16.00282h-14.814l3.996-16.0171c-2.035.85714-3.44 2.51714-4.087 4.8571l-6.5029 23.9686h3.4029l2.554-10.3314h16.022zm-16.841-13.7143h12.497l-3.894-15.45712c-1.56-.39716-3.195-.39716-4.755 0zm4.096-16.46855v.03429c1.406-.28858 2.856-.28858 4.262 0v-.03714l-.349-1.46572c-.339-1.31143-.839-1.825711-1.781-1.825711s-1.441.514291-1.784 1.834291l-.348 1.45714z" />
+          </g>
+        </svg>
       </Link>
     </div>
   );

diff --git a/web/components/layout-nav-mobile.tsx b/web/components/layout-nav-mobile.tsx
@@ -13,6 +13,7 @@ import { ScrollArea } from 'components/core/scroll-area';
 import { Sheet, SheetContent, SheetTrigger } from 'components/core/sheet';
 
 import { ViewVerticalIcon } from '@radix-ui/react-icons';
+import { MinaLogo } from './mina-logo';
 
 export const NavigationMobile = () => {
   const [open, setOpen] = React.useState(false);
@@ -29,9 +30,7 @@ export const NavigationMobile = () => {
         </Button>
       </SheetTrigger>
       <SheetContent side="left" className="pr-0">
-        <MobileLink href="/" className="flex items-center" onOpenChange={setOpen}>
-          <span className="font-bold">{siteConfig.title}</span>
-        </MobileLink>
+        <MinaLogo />
         <ScrollArea className="my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
           <div className="flex flex-col space-y-3">
             {siteConfig.nav?.map((item) => (

diff --git a/web/components/mina-logo.tsx b/web/components/mina-logo.tsx
@@ -0,0 +1,15 @@
+export const MinaLogo = () => {
+  return (
+    <svg fill="none" height="36" viewBox="0 0 127 36" width="127" xmlns="http://www.w3.org/2000/svg">
+      <clipPath id="a">
+        <path d="m0 0h126.735v36h-126.735z" />
+      </clipPath>
+      <g clip-path="url(#a)" fill="#2d2d2d">
+        <path d="m19.7016 35.9257c-.6628.0193-1.3078-.2159-1.803-.6574-.4951-.4414-.8029-1.0557-.8602-1.7169l-.2997-2.3514c-2.8544-.8143-4.5243-2.9286-4.9581-6.2857l-2.56904-19.81145c-.55108-.08877-1.10889-.12892-1.66699-.12-.82607-.00677-1.64917.09994-2.44626.31714v30.04571h-5.040937v-24.1514c0-3.27717 1.470037-5.59145 4.147497-6.55431v-1.55714c0-1.8 1.09325-3.0085746 2.71743-3.0085746s2.64321 1.0114246 2.90582 2.8571446l.19978 1.44286c2.9315.82 4.6442 3.17714 5.1523 7.00282l2.3749 19.0972c1.4189.2743 2.8771.2743 4.2959 0l2.3749-19.0943c.4967-3.82858 2.2293-6.18572 5.1523-7.0143l.1998-1.44285c.2626-1.83715 1.2959-2.8571457 2.9058-2.8571457s2.7174 1.2085757 2.7174 3.0085757v1.55714c2.6775.96286 4.1475 3.27714 4.1475 6.55428v24.1514h-5.0466v-30.03997c-.7971-.2172-1.6202-.32391-2.4463-.31714-.5581-.00892-1.1159.03123-1.667.12l-2.569 19.81431c-.4253 3.2971-2.1351 5.4628-4.9581 6.2857l-.2826 2.3543c-.0441.6686-.3501 1.2928-.8515 1.7369-.5013.4441-1.1575.6721-1.826.6345zm-2.0295-4.4971.2598 2.0257c.0272.4442.2283.8597.5596 1.1566.3312.2968.766.451 1.2101.4291.221.0159.4428-.0128.6525-.0843s.4029-.1844.5682-.332.2993-.3269.3941-.5273.1485-.4177.1578-.6393l.2598-2.0285c-1.345.2209-2.7169.2209-4.0619 0zm17.5291 3.0314h3.2484v-23.2657c0-2.77717-1.119-4.69431-3.2484-5.5886zm-34.253242 0h3.256912v-28.8543c-2.12655.89429-3.234076 2.81143-3.234076 5.5886zm9.208442-29.11144 2.5176 19.44854c.3597 2.8143 1.687 4.6343 3.942 5.4286l-2.3264-18.7371c-.4282-3.3029-1.784-5.32004-4.1332-6.14004zm19.0933 0c-2.3492.82-3.7107 2.83715-4.1332 6.14284l-2.3264 18.7229c2.2579-.7943 3.5824-2.6143 3.942-5.4286zm-24.14568-.99428c.8007-.19489 1.62224-.29085 2.44626-.28572.5153-.00544 1.03035.02511 1.54139.09143l-.15413-1.12286c-.19696-1.37714-.87632-2.074283-2.01524-2.074283s-1.81828.808573-1.81828 2.108573zm26.75178-.28572c.824-.00513 1.6456.09083 2.4463.28572v-1.27143c0-1.3-.6965-2.108574-1.8183-2.108574s-1.8183.697144-2.0152 2.074284l-.1542 1.12286c.5111-.06633 1.0261-.09688 1.5414-.09143z" />
+        <path d="m53.264 35.3457h-4.9525v-34.691434h4.9525zm-4.0533-.9h3.1541v-32.89143h-3.1541z" />
+        <path d="m85.3935 35.9257c-2.1494 0-2.6403-1.9628-2.8002-2.6086l-.3711-1.6457c-3.2169-.5714-5.1808-2.6485-5.9943-6.3314l-4.6613-20.26286c-.5331-.06683-1.0698-.09928-1.6071-.09715-.8921-.01447-1.7813.10594-2.6375.35715v29.99996h-5.0466v-24.2857c0-3.14283 1.4272-5.32855 4.1475-6.3514v-1.61715c0-1.8 1.0904-3.0085702 2.7146-3.0085702 1.4015 0 2.4319.8914282 2.7574 2.3828602l.4139 1.82857c3.1398.57143 5.0238 2.58857 5.9001 6.32859l4.7526 20.2657c.535.0667 1.0737.0992 1.6128.0971.8885.0069 1.7741-.1016 2.6346-.3228v-30.000019h5.0467v25.060019c0 2.5714-1.5043 4.5886-4.1475 5.58v1.5628c0 1.8972-1.039 3.0686-2.7146 3.0686zm-2.215-4.1114.2854 1.2943c.3397 1.36.8992 1.9171 1.9268 1.9171 1.1417 0 1.8154-.7857 1.8154-2.1571v-1.2915c-.8641.1979-1.7483.2938-2.6347.2858-.4652.001-.9301-.0218-1.3929-.0686v.0143zm-20.004 2.6314h3.2484v-28.77999c-2.158.93429-3.2484 2.74286-3.2484 5.38289zm9.354-29.19999 4.5671 19.89429c.7079 3.1857 2.2836 4.9714 4.8983 5.5686l-4.6585-19.8943c-.7593-3.23145-2.2521-4.97716-4.8069-5.56859zm15.5796-3.69143v28.78282c2.1008-.8914 3.2483-2.5114 3.2483-4.6114v-24.17142zm-20.7861 2.83429c.8613-.22227 1.7481-.32986 2.6375-.32.4652-.0011.9302.02179 1.393.06857v-.01429l-.3368-1.48285c-.137-.62858-.5709-1.677149-1.8782-1.677149-1.3074 0-1.8155 1.088569-1.8155 2.108569z" />
+        <path d="m126.909 35.3457h-5.281l-2.603-10.3314h-14.638l-2.555 10.3314h-5.2805l6.8105-25.0914c.788-2.86573 2.589-4.82573 5.221-5.68287l.471-1.97143c.285-1.08572.856-2.5171448 2.657-2.5171448 1.802 0 2.375 1.4285748 2.655 2.5085748l.465 1.98c2.626.85714 4.428 2.82571 5.218 5.68857zm-4.582-.9h3.403l-6.548-23.9543c-.648-2.3514-2.053-4.01997-4.085-4.85712l4.047 16.00282h-14.814l3.996-16.0171c-2.035.85714-3.44 2.51714-4.087 4.8571l-6.5029 23.9686h3.4029l2.554-10.3314h16.022zm-16.841-13.7143h12.497l-3.894-15.45712c-1.56-.39716-3.195-.39716-4.755 0zm4.096-16.46855v.03429c1.406-.28858 2.856-.28858 4.262 0v-.03714l-.349-1.46572c-.339-1.31143-.839-1.825711-1.781-1.825711s-1.441.514291-1.784 1.834291l-.348 1.45714z" />
+      </g>
+    </svg>
+  );
+};