Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Nov 27, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified web/app/favicon.ico
Binary file not shown.
6 changes: 3 additions & 3 deletions web/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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}`,
Expand All @@ -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 />
Expand Down
11 changes: 11 additions & 0 deletions web/app/mina-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion web/components/layout-footer.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
Expand Down
60 changes: 47 additions & 13 deletions web/components/layout-footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
);
Expand Down
17 changes: 12 additions & 5 deletions web/components/layout-header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand All @@ -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}>
Expand All @@ -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>
Expand Down
14 changes: 11 additions & 3 deletions web/components/layout-nav-desktop.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
5 changes: 2 additions & 3 deletions web/components/layout-nav-mobile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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) => (
Expand Down
15 changes: 15 additions & 0 deletions web/components/mina-logo.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
Loading