From ef17be3efc695b9ed84437261635c3c59a1618f9 Mon Sep 17 00:00:00 2001
From: Damla Koksal <me@damlakoksal.com>
Date: Fri, 22 Apr 2022 03:05:17 +0300
Subject: [PATCH 1/5] [#4]feat: add language selector

---
 next.config.js                                |  2 +-
 .../LanguageSelector/LanguageSelector.tsx     | 55 +++++++++++++++++++
 .../common/Notification/Notification.tsx      |  2 +-
 src/components/common/index.tsx               |  1 +
 src/components/layouts/Home/HomeLayout.tsx    | 11 ----
 .../layouts/Home/modules/Footer/Footer.tsx    | 13 +++--
 6 files changed, 67 insertions(+), 17 deletions(-)
 create mode 100644 src/components/common/LanguageSelector/LanguageSelector.tsx

diff --git a/next.config.js b/next.config.js
index 4a80a01..c1c91ed 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
+  reactStrictMode: false,
   i18n: {
     // These are all the locales you want to support in
     // your application
diff --git a/src/components/common/LanguageSelector/LanguageSelector.tsx b/src/components/common/LanguageSelector/LanguageSelector.tsx
new file mode 100644
index 0000000..3c234d0
--- /dev/null
+++ b/src/components/common/LanguageSelector/LanguageSelector.tsx
@@ -0,0 +1,55 @@
+import { Menu, Transition } from '@headlessui/react';
+import { ChevronUpIcon } from '@heroicons/react/solid';
+import Link from 'next/link';
+import { Fragment } from 'react';
+
+const LanguageSelector = () => {
+  // const [selectedLang, setSelectedLang] = useState([
+  //   { value: 'en', label: 'English', current: true },
+  //   { value: 'tr', label: 'Turkish', current: false },
+  // ]);
+
+  return (
+    <div className="w-28 text-left">
+      <Menu as="div" className="relative inline-block text-left">
+        <Menu.Button className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
+          Languages
+          <ChevronUpIcon
+            className="w-5 h-5 ml-2 -mr-1 text-cyan-100 hover:text-cyan-100"
+            aria-hidden="true"
+          />
+        </Menu.Button>
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-50"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-50"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <Menu.Items className="absolute left-0 bottom-10 w-32 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+            <div className="px-1 py-1">
+              <Menu.Item>
+                <Link href="/" locale="en">
+                  <a className="font-bold hover:bg-cyan-500 active:bg-cyan-500 hover:text-white text-gray-900 group flex rounded-md items-center w-full px-2 py-2 text-sm">
+                    🇺🇸 EN
+                  </a>
+                </Link>
+              </Menu.Item>
+              <Menu.Item>
+                <Link href="/" locale="tr">
+                  <a className="font-bold hover:bg-cyan-500 hover:text-white text-gray-900 group flex rounded-md items-center w-full px-2 py-2 text-sm">
+                    🇹🇷 TR
+                  </a>
+                </Link>
+              </Menu.Item>
+            </div>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </div>
+  );
+};
+
+export default LanguageSelector;
diff --git a/src/components/common/Notification/Notification.tsx b/src/components/common/Notification/Notification.tsx
index 75b18e4..9f7f34b 100644
--- a/src/components/common/Notification/Notification.tsx
+++ b/src/components/common/Notification/Notification.tsx
@@ -21,7 +21,7 @@ const Notification = () => {
   return (
     <div
       id="toast-warning"
-      className={`absolute transition-transform ease-out scale-0 duration-500 right-5 top-5 items-center shadow-md w-full max-w-xs p-4 text-gray-500 bg-slate-100 rounded-lg dark:text-gray-400 dark:bg-gray-800 ${
+      className={`absolute transition-all ease-out scale-0 duration-500 right-5 top-5 items-center shadow-md w-full max-w-xs p-4 text-gray-500 bg-slate-100 rounded-lg dark:text-gray-400 dark:bg-gray-800 ${
         isVisible &&
         classNames('flex transition-all ease-in scale-100 duration-500')
       }`}
diff --git a/src/components/common/index.tsx b/src/components/common/index.tsx
index 9db91e0..61277db 100644
--- a/src/components/common/index.tsx
+++ b/src/components/common/index.tsx
@@ -2,3 +2,4 @@ export { default as Icon } from './Icon/Icon';
 export { default as Spinner } from './Spinner/Spinner';
 export { default as ConnectWallet } from './ConnectWallet/ConnectWallet';
 export { default as Notification } from './Notification/Notification';
+export { default as LanguageSelector } from './LanguageSelector/LanguageSelector';
diff --git a/src/components/layouts/Home/HomeLayout.tsx b/src/components/layouts/Home/HomeLayout.tsx
index aef2aa3..9962a27 100644
--- a/src/components/layouts/Home/HomeLayout.tsx
+++ b/src/components/layouts/Home/HomeLayout.tsx
@@ -31,14 +31,3 @@ const Landing = ({ children, data }: Props) => {
   );
 };
 export default Landing;
-
-// TODO: ADD LANGUAGE SELECTOR
-{
-  /* <Link href="/" locale="en">
-        <a className="pl-2">EN</a>
-      </Link>
-      <span> | </span>
-      <Link href="/" locale="tr">
-        <a>TR</a>
-      </Link> */
-}
diff --git a/src/components/layouts/Home/modules/Footer/Footer.tsx b/src/components/layouts/Home/modules/Footer/Footer.tsx
index 2f7d586..867ebdb 100644
--- a/src/components/layouts/Home/modules/Footer/Footer.tsx
+++ b/src/components/layouts/Home/modules/Footer/Footer.tsx
@@ -1,6 +1,6 @@
-import Link from 'next/link';
 import { IFooter } from '../../../../../interfaces/landing';
 import { APP_NAME } from '../../../../../utils/constants';
+import { LanguageSelector } from '../../../../common';
 
 interface Props {
   data: IFooter;
@@ -9,9 +9,14 @@ interface Props {
 const Footer = ({ data }: Props) => {
   const { rights } = data;
   return (
-    <footer className="flex h-24 w-full bg-white drop-shadow-2xl flex-col items-center justify-center p-7 text-center text-xs font-bold tracking-tight text-gray-800 md:flex-row md:p-0 md:text-sm cursor-default">
-      <span>{rights}&nbsp; </span>
-      <span>2022 © {APP_NAME}</span>
+    <footer className="flex h-24 w-full bg-white drop-shadow-2xl flex-col items-center justify-between md:justify-between p-7 text-center text-xs font-bold tracking-tight text-gray-800 md:flex-row md:px-40 md:text-sm cursor-default">
+      <div className="flex flex-col md:flex-row md:p-0">
+        <span>{rights}&nbsp; </span>
+        <span>2022 © {APP_NAME}</span>
+      </div>
+      <div className="flex">
+        <LanguageSelector />
+      </div>
     </footer>
   );
 };

From 7a845ea6446fcd9192d059852b8b6227c979b69b Mon Sep 17 00:00:00 2001
From: Damla Koksal <me@damlakoksal.com>
Date: Fri, 22 Apr 2022 04:06:17 +0300
Subject: [PATCH 2/5] [#3]feat: edit dasboard styling

---
 next.config.js                                |  2 +-
 src/components/common/Icon/Icon.tsx           | 18 ++++
 .../layouts/Dashboard/DashboardLayout.tsx     |  8 +-
 .../Dashboard/modules/Footer/Footer.tsx       |  4 +-
 .../layouts/Dashboard/modules/Nav/Nav.tsx     | 84 ++++++++-----------
 .../DashboardPage.tsx}                        |  4 +-
 src/components/templates/index.tsx            |  2 +-
 src/pages/dashboard/index.tsx                 |  4 +-
 8 files changed, 69 insertions(+), 57 deletions(-)
 rename src/components/templates/{ProfilePage/ProfilePage.tsx => DashboardPage/DashboardPage.tsx} (98%)

diff --git a/next.config.js b/next.config.js
index c1c91ed..7a9e925 100644
--- a/next.config.js
+++ b/next.config.js
@@ -10,7 +10,7 @@ const nextConfig = {
     defaultLocale: 'en',
   },
   images: {
-    domains: ['images.unsplash.com'],
+    domains: ['images.unsplash.com', 'avatars.githubusercontent.com'],
   },
 };
 
diff --git a/src/components/common/Icon/Icon.tsx b/src/components/common/Icon/Icon.tsx
index 984349b..e701c9e 100644
--- a/src/components/common/Icon/Icon.tsx
+++ b/src/components/common/Icon/Icon.tsx
@@ -3,6 +3,7 @@ export enum Icons {
   TWITTER = 'twitter',
   METAMASK = 'metamask',
   ETHEREUM = 'ethereum',
+  ETHEREUM_WHITE = 'ethereumWhite',
 }
 
 const icons = {
@@ -470,6 +471,23 @@ const icons = {
       ></path>
     </svg>
   ),
+  ethereumWhite: (
+    <svg
+      className="w-5 h-5 mr-2 -ml-1 text-white"
+      aria-hidden="true"
+      focusable="false"
+      data-prefix="fab"
+      data-icon="ethereum"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 320 512"
+    >
+      <path
+        fill="currentColor"
+        d="M311.9 260.8L160 353.6 8 260.8 160 0l151.9 260.8zM160 383.4L8 290.6 160 512l152-221.4-152 92.8z"
+      ></path>
+    </svg>
+  ),
 };
 
 type Props = {
diff --git a/src/components/layouts/Dashboard/DashboardLayout.tsx b/src/components/layouts/Dashboard/DashboardLayout.tsx
index 2f3ed9c..5dfb16e 100644
--- a/src/components/layouts/Dashboard/DashboardLayout.tsx
+++ b/src/components/layouts/Dashboard/DashboardLayout.tsx
@@ -16,9 +16,11 @@ const Dashboardlayout = ({ children, title }: Props) => (
         content="ConnEth dashboard for using utilities"
       />
     </Head>
-    <div className="min-h-full">
-      <Nav />
-      <Header title={title} />
+    <div className="min-h-screen flex flex-col justify-between">
+      <div>
+        <Nav />
+        <Header title={title} />
+      </div>
       <Main>{children}</Main>
       <Footer />
     </div>
diff --git a/src/components/layouts/Dashboard/modules/Footer/Footer.tsx b/src/components/layouts/Dashboard/modules/Footer/Footer.tsx
index 1c9faa7..d922497 100644
--- a/src/components/layouts/Dashboard/modules/Footer/Footer.tsx
+++ b/src/components/layouts/Dashboard/modules/Footer/Footer.tsx
@@ -1,12 +1,14 @@
 import Link from 'next/link';
 import { APP_NAME } from '../../../../../utils/constants';
+import Icon, { Icons } from '../../../../common/Icon/Icon';
 
 const Footer = () => (
   <footer className="p-4 bg-white shadow md:px-6 md:py-8 dark:bg-gray-800">
     <div className="sm:flex sm:items-center sm:justify-between">
       <ul className="flex items-center mb-6 text-sm sm:mb-0">
         <Link href="/">
-          <a className="text-xl font-semibold whitespace-nowrap dark:text-white">
+          <a className="hover:cursor-pointer inline-flex sm:mb-0 text-gray-800 hover:opacity-80 text-xl font-bold items-center">
+            <Icon icon={Icons.ETHEREUM} alt="ethereum" />
             {APP_NAME}
           </a>
         </Link>
diff --git a/src/components/layouts/Dashboard/modules/Nav/Nav.tsx b/src/components/layouts/Dashboard/modules/Nav/Nav.tsx
index ab2b2a0..75274ca 100644
--- a/src/components/layouts/Dashboard/modules/Nav/Nav.tsx
+++ b/src/components/layouts/Dashboard/modules/Nav/Nav.tsx
@@ -1,11 +1,14 @@
 import { Disclosure } from '@headlessui/react';
-import { MenuIcon, XIcon } from '@heroicons/react/outline';
+import Image from 'next/image';
+import { LogoutIcon, MenuIcon, XIcon } from '@heroicons/react/outline';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import { useMoralis } from 'react-moralis';
 import { APP_NAME } from '../../../../../utils/constants';
 import { getEllipsesText } from '../../../../../utils/utils';
+import { Icon } from '../../../../common';
+import { Icons } from '../../../../common/Icon/Icon';
 
 const Nav = () => {
   const { isAuthenticated, logout, user } = useMoralis();
@@ -16,11 +19,11 @@ const Nav = () => {
     { name: '💰 Balance', href: '#' },
   ];
 
-  const userNavigation = [
-    // { name: 'Your Profile', href: '#' },
-    { name: user && getEllipsesText(user?.get('ethAddress')), href: '#' },
-    { name: 'Sign out', href: '#' },
-  ];
+  // const userNavigation = [
+  //   // { name: 'Your Profile', href: '#' },
+  //   { name: user && getEllipsesText(user?.get('ethAddress')), href: '#' },
+  //   { name: 'Sign out', href: '#' },
+  // ];
 
   useEffect(() => {
     if (!isAuthenticated) router.replace('/');
@@ -28,7 +31,7 @@ const Nav = () => {
   }, [isAuthenticated]);
 
   return (
-    <Disclosure as="nav" className="bg-gray-800">
+    <Disclosure as="nav" className="bg-gradient-to-r from-cyan-500 to-blue-500">
       {({ open }) => (
         <>
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -36,7 +39,8 @@ const Nav = () => {
               <div className="flex items-center">
                 <div className="flex-shrink-0">
                   <Link href="/">
-                    <a className="hover:cursor-pointer hover:text-gray-300 text-white text-xl font-bold">
+                    <a className="hover:cursor-pointer inline-flex sm:mb-0 text-white hover:opacity-80 text-xl font-bold items-center">
+                      <Icon icon={Icons.ETHEREUM_WHITE} alt="ethereum" />
                       {APP_NAME}
                     </a>
                   </Link>
@@ -47,7 +51,7 @@ const Nav = () => {
                       <a
                         key={item.name}
                         href={item.href}
-                        className="text-white hover:bg-gray-700 hover:text-gray px-3 py-2 rounded-md text-sm font-medium"
+                        className="text-white hover:bg-blue-500 hover:text-gray px-3 py-2 rounded-md text-sm font-medium"
                       >
                         {item.name}
                       </a>
@@ -59,38 +63,31 @@ const Nav = () => {
                 <div className="ml-4 flex items-center md:ml-6"></div>
                 <div className="flex">
                   {user && (
-                    <>
-                      <div className="flex text-white hover:bg-gray-700 hover:text-gray px-3 py-2 rounded-md items-center hover:cursor-default">
-                        {/* <Avatar
-                          isRounded
-                          avatarKey={Math.floor(Math.random() * 100)}
-                          text={user?.get('ethAddress').slice(0, 2)}
-                          theme="letters"
-                        /> */}
-                        <div className="flex flex-col justify-end">
-                          <span
-                            onClick={logout}
-                            className="px-4 text-base font-medium inline-flex items-center"
-                          >
-                            {getEllipsesText(user?.get('ethAddress'))}
-                          </span>
-                          {/* <PopoverElement
-                            icon="logOut"
-                            iconColor="white"
-                            onClick={logout}
-                            text="Logout"
-                            textSize={13}
-                            textColor="white"
-                          /> */}
-                        </div>
+                    <button
+                      type="button"
+                      onClick={logout}
+                      className="flex text-white hover:bg-cyan-500 hover:text-gray px-3 py-2 rounded-md items-center"
+                    >
+                      <Image
+                        width={40}
+                        height={40}
+                        className="w-10 h-10 rounded-full"
+                        src="https://avatars.githubusercontent.com/u/24878421?s=48&v=4"
+                        alt="Rounded avatar"
+                      />
+                      <div className="flex items-center">
+                        <span className="px-4 text-sm font-medium inline-flex items-center">
+                          {getEllipsesText(user?.get('ethAddress'))}
+                        </span>
+                        <LogoutIcon className="w-6 h-6 text-white" />
                       </div>
-                    </>
+                    </button>
                   )}
                 </div>
               </div>
               <div className="-mr-2 flex md:hidden">
                 {/* Mobile menu button */}
-                <Disclosure.Button className="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
+                <Disclosure.Button className="bg-cyan-300 inline-flex items-center justify-center p-2 rounded-md text-white hover:text-white hover:bg-cyan-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-cyan-50 focus:ring-white">
                   <span className="sr-only">Open main menu</span>
                   {open ? (
                     <XIcon className="block h-6 w-6" aria-hidden="true" />
@@ -109,25 +106,18 @@ const Nav = () => {
                   key={item.name}
                   as="a"
                   href={item.href}
-                  className="text-white hover:bg-gray-700 hover:text-gray block px-3 py-2 rounded-md text-base font-medium"
+                  className="text-white hover:bg-blue-600 hover:text-gray block px-3 py-2 rounded-md text-base font-medium"
                 >
                   {item.name}
                 </Disclosure.Button>
               ))}
             </div>
-            <div className="pt-4 pb-3 border-t border-gray-700">
+            <div className="pt-4 pb-3 ">
               <div className="flex items-center px-5"></div>
               <div className="mt-3 px-2 space-y-1">
-                {userNavigation.map((item) => (
-                  <Disclosure.Button
-                    key={item.name}
-                    as="a"
-                    href={item.href}
-                    className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700"
-                  >
-                    {item.name}
-                  </Disclosure.Button>
-                ))}
+                <Disclosure.Button className="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-blue-600">
+                  {/* {getEllipsesText(user?.get('ethAddress'))} */} coz burayi
+                </Disclosure.Button>
               </div>
             </div>
           </Disclosure.Panel>
diff --git a/src/components/templates/ProfilePage/ProfilePage.tsx b/src/components/templates/DashboardPage/DashboardPage.tsx
similarity index 98%
rename from src/components/templates/ProfilePage/ProfilePage.tsx
rename to src/components/templates/DashboardPage/DashboardPage.tsx
index e6151c9..26d6519 100644
--- a/src/components/templates/ProfilePage/ProfilePage.tsx
+++ b/src/components/templates/DashboardPage/DashboardPage.tsx
@@ -1,6 +1,6 @@
 import { PaperClipIcon } from '@heroicons/react/outline';
 
-const ProfilePage = () => {
+const DashboardPage = () => {
   return (
     <div className="min-h-full">
       <div className="bg-white shadow overflow-hidden sm:rounded-lg">
@@ -109,4 +109,4 @@ const ProfilePage = () => {
   );
 };
 
-export default ProfilePage;
+export default DashboardPage;
diff --git a/src/components/templates/index.tsx b/src/components/templates/index.tsx
index c882a02..1173e65 100644
--- a/src/components/templates/index.tsx
+++ b/src/components/templates/index.tsx
@@ -1,3 +1,3 @@
 export { default as HomePage } from './HomePage/HomePage';
-export { default as ProfilePage } from './ProfilePage/ProfilePage';
+export { default as DashboardPage } from './DashboardPage/DashboardPage';
 export { default as OtherPage } from './OtherPage/OtherPage';
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index 1bd035a..ddb760d 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -1,11 +1,11 @@
 import type { NextPage } from 'next';
 import { DashboardLayout } from '../../components/layouts';
-import { ProfilePage } from '../../components/templates';
+import { DashboardPage } from '../../components/templates';
 
 const Dashboard: NextPage = () => {
   return (
     <DashboardLayout title="dashboard">
-      <ProfilePage />
+      <DashboardPage />
     </DashboardLayout>
   );
 };

From ae3a6186059a0e00478532173088109f4a5ee0e3 Mon Sep 17 00:00:00 2001
From: Damla Koksal <me@damlakoksal.com>
Date: Fri, 22 Apr 2022 14:25:42 +0300
Subject: [PATCH 3/5] style: delete comment lines

---
 src/components/common/ConnectWallet/ConnectWallet.tsx | 1 -
 src/hooks/useError.ts                                 | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/common/ConnectWallet/ConnectWallet.tsx b/src/components/common/ConnectWallet/ConnectWallet.tsx
index ccb4f7f..a0dbec0 100644
--- a/src/components/common/ConnectWallet/ConnectWallet.tsx
+++ b/src/components/common/ConnectWallet/ConnectWallet.tsx
@@ -39,7 +39,6 @@ const ConnectWallet = ({ icon, defaultText }: Props) => {
         })
         .catch(function (err) {
           console.log(err);
-          // TODO: error notification for non-wallet users
           addError(err);
         });
     }
diff --git a/src/hooks/useError.ts b/src/hooks/useError.ts
index a1d55b6..32b0215 100644
--- a/src/hooks/useError.ts
+++ b/src/hooks/useError.ts
@@ -1,5 +1,4 @@
 import { useContext } from 'react';
 import { ErrorContext } from '../context/Error/errorContext';
 
-// created custom hook
 export const useError = () => useContext(ErrorContext);

From 7f6e2af23bc2509d13e953a655b1ecbade5c1ebe Mon Sep 17 00:00:00 2001
From: Damla Koksal <me@damlakoksal.com>
Date: Fri, 22 Apr 2022 14:52:28 +0300
Subject: [PATCH 4/5] [#4]feat: change flag

---
 src/components/common/LanguageSelector/LanguageSelector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/LanguageSelector/LanguageSelector.tsx b/src/components/common/LanguageSelector/LanguageSelector.tsx
index 3c234d0..3500a4f 100644
--- a/src/components/common/LanguageSelector/LanguageSelector.tsx
+++ b/src/components/common/LanguageSelector/LanguageSelector.tsx
@@ -33,7 +33,7 @@ const LanguageSelector = () => {
               <Menu.Item>
                 <Link href="/" locale="en">
                   <a className="font-bold hover:bg-cyan-500 active:bg-cyan-500 hover:text-white text-gray-900 group flex rounded-md items-center w-full px-2 py-2 text-sm">
-                    🇺🇸 EN
+                    🇬🇧 EN
                   </a>
                 </Link>
               </Menu.Item>

From 3d8d94d17de6f901ad812dda387c3db4932d0f1b Mon Sep 17 00:00:00 2001
From: Damla Koksal <me@damlakoksal.com>
Date: Fri, 22 Apr 2022 14:53:40 +0300
Subject: [PATCH 5/5] [#17]fix: notification component

---
 src/components/common/Notification/Notification.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/common/Notification/Notification.tsx b/src/components/common/Notification/Notification.tsx
index 9f7f34b..4d180de 100644
--- a/src/components/common/Notification/Notification.tsx
+++ b/src/components/common/Notification/Notification.tsx
@@ -21,9 +21,10 @@ const Notification = () => {
   return (
     <div
       id="toast-warning"
-      className={`absolute transition-all ease-out scale-0 duration-500 right-5 top-5 items-center shadow-md w-full max-w-xs p-4 text-gray-500 bg-slate-100 rounded-lg dark:text-gray-400 dark:bg-gray-800 ${
-        isVisible &&
-        classNames('flex transition-all ease-in scale-100 duration-500')
+      className={`absolute flex right-5 top-5 items-center shadow-md w-full max-w-xs p-4 text-gray-500 bg-slate-100 rounded-lg dark:text-gray-400 dark:bg-gray-800 ${
+        isVisible
+          ? classNames('transition-all ease-in scale-100 duration-300')
+          : 'transition-transform ease-out scale-0 duration-300'
       }`}
       role="alert"
     >