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.

Sign up for GitHub

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

feat(dapp): banner #634

Merged
merged 3 commits into from
Apr 23, 2024
Merged

feat(dapp): banner #634

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9986d17
fix(dapp): paddings on app landing page
pseudobun Apr 23, 2024
4c6a248
feat(dapp): add banner
pseudobun Apr 23, 2024
ba84708
chore: add changeset
pseudobun Apr 23, 2024
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
5 changes: 5 additions & 0 deletions .changeset/lemon-snakes-taste.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@blockchain-lab-um/dapp": patch
---

Adds banner at the top of dapp.
24 changes: 15 additions & 9 deletions packages/dapp/src/app/[locale]/(public)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import Banner from '@/components/Banner';
import PublicFooter from '@/components/PublicFooter';
import PublicNavbar from '@/components/PublicNavbar';

Expand All @@ -7,17 +8,22 @@ export default async function PublicLayout({
children: React.ReactNode;
}) {
return (
<div className="flex flex-col h-screen px-4 sm:px-12">
<div className="m-0 p-6 sm:px-12">
<PublicNavbar />
<div className="flex flex-col h-screen">
<div>
<Banner />
</div>
<div className="flex flex-1">
<div className="flex flex-1 items-center justify-center overflow-auto">
{children}
<div className="h-full flex flex-col px-4 sm:px-12">
<div className="m-0 p-6 sm:px-12">
<PublicNavbar />
</div>
<div className="flex flex-1">
<div className="flex flex-1 items-center justify-center overflow-auto">
{children}
</div>
</div>
<div className="relative bottom-0 left-0 right-0 p-6 max-md:hidden sm:px-12">
<PublicFooter setIsMenuOpen={null} />
</div>
</div>
<div className="relative bottom-0 left-0 right-0 p-6 max-md:hidden sm:px-12">
<PublicFooter setIsMenuOpen={null} />
</div>
</div>
);
Expand Down
26 changes: 16 additions & 10 deletions packages/dapp/src/app/[locale]/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { SignInModal } from '@/components/SignInModal';
import ToastWrapper from '@/components/ToastWrapper';
import { Providers } from '@/components/Providers';
import { ScrollShadow } from '@nextui-org/react';
import Banner from '@/components/Banner';

export default async function AppLayout({
children,
Expand All @@ -14,17 +15,22 @@ export default async function AppLayout({
}) {
return (
<Providers>
<div className="flex flex-col h-screen px-4 pb-6 sm:px-12">
<div className="p-6 m-0 sm:px-2 max-sm:py-2">
<AppNavbar />
<div className="flex flex-col h-screen pb-6">
<div>
<Banner />
</div>
<div className="flex flex-col h-full px-4 pb-6 sm:px-12">
<div className="p-6 m-0 sm:px-2 max-sm:py-2">
<AppNavbar />
</div>
<ScrollShadow
className="flex h-full w-full flex-col py-6 px-2 main-bg max-sm:mb-12"
hideScrollBar
size={8}
>
{children}
</ScrollShadow>
</div>
<ScrollShadow
className="flex h-full w-full flex-col py-6 px-2 main-bg max-sm:mb-12"
hideScrollBar
size={8}
>
{children}
</ScrollShadow>
</div>
<AppBottomBar />
<SignInModal />
Expand Down
21 changes: 21 additions & 0 deletions packages/dapp/src/components/Banner/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { Link } from '@nextui-org/react';

export default function Banner() {
return (
<div className="bg-pink-200 text-center dark:bg-navy-blue-800">
<div className="container mx-auto px-4">
<p>
Support Masca on{' '}
<Link
className="animate-pulse"
target="_blank"
href="https://explorer.gitcoin.co/#/round/42161/25/162"
>
Gitcoin Grants
</Link>
!
</p>
</div>
</div>
);
}
10 changes: 5 additions & 5 deletions packages/dapp/src/components/ConnectedProvider/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,13 +50,13 @@ const ConnectedProvider = ({ children }: ConnectedProviderProps) => {
<div className="flex justify-center">
<ul className="text-md flex flex-col items-start text-justify tracking-normal sm:text-xl">
<li className="mt-12 max-sm:mt-4">
<div className=" just flex items-center gap-x-4">
<div className="flex items-center gap-x-4">
<LockClosedIcon className="dark:text-orange-accent-dark h-6 w-6 text-pink-500 sm:h-8 sm:w-8" />
<div className="dark:text-navy-blue-50 font-ubuntu text-md text-start font-medium text-gray-900 sm:text-2xl ">
{t('features.feat-1')}
</div>
</div>
<div className="dark:text-navy-blue-200 mt-4 max-w-lg text-gray-700">
<div className="dark:text-navy-blue-200 mt-4 max-w-[42em] text-gray-700">
{t('features.desc-1-1')}
<span className="dark:text-navy-blue-100 font-bold text-gray-800">
{t('features.desc-1-2')}
Expand All @@ -75,7 +75,7 @@ const ConnectedProvider = ({ children }: ConnectedProviderProps) => {
{t('features.feat-2')}
</div>
</div>
<div className="dark:text-navy-blue-200 mt-4 max-w-lg text-gray-700">
<div className="dark:text-navy-blue-200 mt-4 text-gray-700 max-w-[42em]">
{t('features.desc-2-1')}
<span className="dark:text-navy-blue-100 font-bold text-gray-800">
{t('features.desc-2-2')}
Expand All @@ -88,13 +88,13 @@ const ConnectedProvider = ({ children }: ConnectedProviderProps) => {
</div>
</li>
<li className="mt-12 max-sm:mt-4">
<div className=" flex items-center gap-x-4">
<div className="flex items-center gap-x-4">
<GlobeAltIcon className="dark:text-orange-accent-dark h-8 w-8 text-pink-500 sm:h-8 sm:w-8" />
<div className="dark:text-navy-blue-50 font-ubuntu text-md max-w-[15em] text-start font-medium text-gray-900 sm:text-2xl ">
{t('features.feat-3')}
</div>
</div>
<div className="dark:text-navy-blue-200 mt-4 max-w-lg text-gray-700">
<div className="dark:text-navy-blue-200 mt-4 text-gray-700 max-w-[42em]">
{t('features.desc-3-1')}
<span className="dark:text-navy-blue-100 font-bold text-gray-800">
{t('features.desc-3-2')}
Expand Down