feat(dapp): banner (#634)

Signed-off-by: Urban Vidovič <[email protected]>
blockchain-lab-um · Apr 23, 2024 · c829624 · c829624
1 parent dcfa325
commit c829624
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 24 deletions.
diff --git a/.changeset/lemon-snakes-taste.md b/.changeset/lemon-snakes-taste.md
@@ -0,0 +1,5 @@
+---
+"@blockchain-lab-um/dapp": patch
+---
+
+Adds banner at the top of dapp.
diff --git a/packages/dapp/src/app/[locale]/(public)/layout.tsx b/packages/dapp/src/app/[locale]/(public)/layout.tsx
@@ -1,3 +1,4 @@
+import Banner from '@/components/Banner';
 import PublicFooter from '@/components/PublicFooter';
 import PublicNavbar from '@/components/PublicNavbar';
 
@@ -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>
   );

diff --git a/packages/dapp/src/app/[locale]/app/layout.tsx b/packages/dapp/src/app/[locale]/app/layout.tsx
@@ -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,
@@ -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 />

diff --git a/packages/dapp/src/components/Banner/index.tsx b/packages/dapp/src/components/Banner/index.tsx
@@ -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>
+  );
+}
diff --git a/packages/dapp/src/components/ConnectedProvider/index.tsx b/packages/dapp/src/components/ConnectedProvider/index.tsx
@@ -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')}
@@ -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')}
@@ -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')}