[#3]feat: edit dasboard styling

next.config.js

@@ -10,7 +10,7 @@ const nextConfig = {
     defaultLocale: 'en',
   },
   images: {
-    domains: ['images.unsplash.com'],
+    domains: ['images.unsplash.com', 'avatars.githubusercontent.com'],
   },
 };
 

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 = {

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>

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>

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,27 +19,28 @@ 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('/');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [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">
             <div className="flex items-center justify-between h-16">
               <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>

src/components/templates/ProfilePage/ProfilePage.tsx → 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;

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';

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>
   );
 };