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

v2.1.3 #134

Merged
merged 1 commit into from
Jul 3, 2023
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
4 changes: 4 additions & 0 deletions src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
import { IndexPage } from './pages/index';
import { CommunityApplicationPage } from './pages/communtiyapplication';
import { ScoreboardPage } from './pages/scoreboard';
import { CommunitySBTPage } from './pages/communitySBT';

const RedirectComponent = () => {
return <Redirect to="/" />;
Expand All @@ -26,6 +27,9 @@ export function App({ isSignedIn }) {
<Route exact path="/community-scoreboard">
<ScoreboardPage isSignedIn={isSignedIn} />
</Route>
<Route exact path="/community-sbts">
<CommunitySBTPage />
</Route>
<Route exact path="/">
<IndexPage isSignedIn={isSignedIn} />
</Route>
Expand Down
12 changes: 12 additions & 0 deletions src/components/common/OutlineButton.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from 'react';

export const OutlineButton = ({ onClick, children }) => {
return (
<button
onClick={onClick}
className="cursor-auto rounded-md border border-gray-500 border-1 px-5 text-center py-2 font-light text-black shadow-sm"
>
{children}
</button>
);
};
12 changes: 12 additions & 0 deletions src/components/common/PrimaryButton.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from 'react';

export const PrimaryButton = ({ onClick, children }) => {
return (
<button
onClick={onClick}
className="rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-5 py-3 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
>
{children}
</button>
);
};
244 changes: 107 additions & 137 deletions src/components/common/header.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@ import Logo from '../../images/ndc.png';
import { useAdmin } from '../../utils/useAdmin';
import { Link } from 'react-router-dom/cjs/react-router-dom.min';

export const Header = ({ setShowAdmin, setActiveTabIndex }) => {
export const Header = ({
setShowAdmin = () => {},
setActiveTabIndex = () => {},
}) => {
const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
const [isSignedIn, setIsSignedIn] = React.useState(false);
const [isAdmin] = useAdmin({ address: wallet.accountId });
Expand All @@ -34,162 +37,129 @@ export const Header = ({ setShowAdmin, setActiveTabIndex }) => {
}
};

const ApplyToOGSBT = ({ className }) => {
const HomeMenu = ({ isDialog = false }) => {
const activeHomePage =
window.location.href.indexOf('community-sbts') === -1;

return (
<div
onClick={() =>
window.open(
'https://docs.google.com/forms/d/e/1FAIpQLSfQ80mza1ssDRuEkjTl61ty0ORxm23whmwBDlaxWHjodTiz-w/viewform',
'_blank'
)
className={
'cursor-pointer ' +
(isDialog
? 'flex flex-col gap-7'
: 'hidden md:flex gap-12 font-semibold self-center')
}
className={className + ' cursor-pointer'}
>
Apply to OG SBT
<Link to={'/'} className={activeHomePage ? 'text-gradient' : ''}>
Home
</Link>
<Link
to={'community-sbts'}
className={activeHomePage ? '' : 'text-gradient'}
>
Community SBTs
</Link>
</div>
);
};

return (
<>
<div>
<div>
<nav
className="flex h-9 items-center justify-between"
aria-label="Global"
<nav
className="flex h-9 items-center justify-between"
aria-label="Global"
>
<button
type="button"
className="inline-flex md:hidden items-center justify-center rounded-md text-gray-700"
onClick={() => setMobileMenuOpen(true)}
>
<span className="sr-only">Open main menu</span>
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
</button>
<div onClick={() => setActiveTabIndex(null)}>
<Link to="/" className="-m-1.5 p-1.5 font-bold tracking-tight">
<img
src={Logo}
onClick={() => {
setShowAdmin?.(false);
}}
alt="logo"
className="h-[80px] md:h-[120px] md:w-[100px] mt-6 object-cover"
/>
</Link>
</div>
{isSignedIn && isAdmin && (
<>
<button
onClick={() => setShowAdmin(true)}
className="inline-block rounded-lg px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900 shadow-sm ring-1 ring-gray-900/10 hover:ring-gray-900/20 flex items-center space-x-2"
>
<p>Admin Console</p>
<CheckCircleIcon className="h-4 w-4 text-green-600" />
</button>
</>
)}
<div className="self-end flex gap-12">
<HomeMenu />
{wallet.accountId && (
<p className="hidden md:inline-block px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
{wallet.accountId}
</p>
)}
<button
type="button"
onClick={() => signOut()}
className="inline-block bg-yellow-300 rounded-lg px-3 py-1.5 text-sm font-semibold leading-6 text-black shadow-sm"
>
<div className="flex lg:min-w-0 lg:flex-1" aria-label="Global">
<div onClick={() => setActiveTabIndex(null)}>
<Link to="/" className="-m-1.5 p-1.5 font-bold tracking-tight">
<img
src={Logo}
onClick={() => {
setShowAdmin?.(false);
}}
alt="logo"
className="h-[120px] w-[100px] mt-6"
/>
</Link>
</div>
</div>
<div className="flex lg:hidden">
{isSignedIn ? (
<>
<button
type="button"
className=" inline-flex items-center justify-center rounded-md text-gray-700"
onClick={() => setMobileMenuOpen(true)}
>
<span className="sr-only">Open main menu</span>
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
</button>
</>
) : (
<div className="flex flex-wrap justify-end gap-6">
<button
type="button"
onClick={() => wallet.signIn()}
className="inline-block bg-yellow-300 rounded-lg px-3 py-1.5 text-sm font-semibold leading-6 text-black shadow-sm"
>
Connect Wallet
</button>
<ApplyToOGSBT className="text-gradient font-semibold self-center" />
</div>
)}
{isSignedIn ? 'Sign Out' : 'Connect Wallet'}
</button>
</div>
</nav>
<Dialog as="div" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
<Dialog.Panel className="fixed inset-0 z-10 overflow-y-auto bg-white px-6 py-6 lg:hidden">
<div className="flex h-9 items-center justify-between">
<div className="flex">
<a href="#" className="-m-1.5 p-1.5 font-bold tracking-tight">
<img
src={Logo}
alt="logo"
className="h-[80px] w-[70px] mt-6 "
/>
</a>
</div>
<div className="hidden lg:flex lg:min-w-0 lg:flex-1 lg:justify-center lg:gap-x-12"></div>
<div className="hidden lg:flex lg:min-w-0 space-x-4 lg:justify-end">
{isSignedIn && isAdmin && (
<>
<button
onClick={() => setShowAdmin(true)}
className="inline-block rounded-lg px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900 shadow-sm ring-1 ring-gray-900/10 hover:ring-gray-900/20 flex items-center space-x-2"
>
<p>Admin Console</p>
<CheckCircleIcon className="h-4 w-4 text-green-600" />
</button>
</>
)}
{wallet.accountId && (
<p className="inline-block px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
{wallet.accountId}
</p>
)}
<ApplyToOGSBT className="text-gradient font-semibold self-center" />
<div className="flex">
<button
type="button"
onClick={() => signOut()}
className="inline-block bg-yellow-300 rounded-lg px-3 py-1.5 text-sm font-semibold leading-6 text-black shadow-sm"
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
onClick={() => setMobileMenuOpen(false)}
>
{isSignedIn ? 'Sign Out' : 'Connect Wallet'}
<span className="sr-only">Close menu</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
</nav>
<Dialog as="div" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
<Dialog.Panel className="fixed inset-0 z-10 overflow-y-auto bg-white px-6 py-6 lg:hidden">
<div className="flex h-9 items-center justify-between">
<div className="flex">
<a href="#" className="-m-1.5 p-1.5 font-bold tracking-tight">
<img
src={Logo}
alt="logo"
className="h-[80px] w-[70px] mt-6 "
/>
</a>
</div>
<div className="flex">
<button
type="button"
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
onClick={() => setMobileMenuOpen(false)}
>
<span className="sr-only">Close menu</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</div>
<div className="mt-6 flow-root">
<div className="-my-6 divide-y divide-gray-500/10">
<div className="space-y-2 py-6"></div>
<div className="flex flex-col gap-7 py-6 text-base font-semibold leading-6 text-gray-900">
<HomeMenu isDialog={true} />
{isSignedIn && isAdmin && (
<button onClick={() => setShowAdmin(true)}>
<p>Admin Console</p>
<CheckCircleIcon className="h-4 w-4 text-green-600" />
</button>
</div>
</div>
<div className="mt-6 flow-root">
<div className="-my-6 divide-y divide-gray-500/10">
<div className="space-y-2 py-6">
{/* {navigation.map((item) => (
<a
key={item.name}
href={item.href}
className="-mx-3 block rounded-lg py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-400/10"
>
{item.name}
</a>
))} */}
)}
{wallet.accountId && (
<div className="text-container truncate">
{wallet.accountId}
</div>
<div className="flex flex-col gap-7 py-6 text-base font-semibold leading-6 text-gray-900">
{isSignedIn && isAdmin && (
<button onClick={() => setShowAdmin(true)}>
<p>Admin Console</p>
<CheckCircleIcon className="h-4 w-4 text-green-600" />
</button>
)}
{wallet.accountId && (
<div className="text-container truncate">
{wallet.accountId}
</div>
)}
<ApplyToOGSBT />
<div
onClick={
isSignedIn
? () => wallet.signOut()
: () => wallet.signIn()
}
>
{isSignedIn ? 'Sign Out' : 'Connect Wallet'}
</div>
</div>
</div>
)}
</div>
</Dialog.Panel>
</Dialog>
</div>
</div>
</div>
</div>
</Dialog.Panel>
</Dialog>
</>
);
};
Binary file added src/images/HandLogo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading