Skip to content

Commit

Permalink
Merge pull request #22 from damla/dev
Browse files Browse the repository at this point in the history 
[#3, #7] Design Changes Done on the Dashboard
  • Loading branch information
@damla
damla authored Apr 24, 2022
2 parents f54efdb + 98690f5 commit d5b8593
Show file tree
Hide file tree
Showing 7 changed files with 319 additions and 88 deletions.
54 changes: 31 additions & 23 deletions src/components/layouts/Dashboard/modules/Footer/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,40 @@
import Link from 'next/link';
import { useMoralis } from 'react-moralis';
import { APP_NAME } from '../../../../../utils/constants';
import { LanguageSelector } from '../../../../common';
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">
const Footer = () => {
const { logout } = useMoralis();

return (
<footer className="p-4 bg-white shadow md:px-6 md:py-5 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
onClick={logout}
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>
</ul>
<ul className="flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
<LanguageSelector />
</ul>
</div>
<hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-4" />
<span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400">
© {new Date().getFullYear()}{' '}
<Link href="/">
<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>
<a className="hover:underline">{APP_NAME}</a>
</Link>
</ul>
<ul className="flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
<LanguageSelector />
</ul>
</div>
<hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
<span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400">
© {new Date().getFullYear()}{' '}
<Link href="/">
<a className="hover:underline">{APP_NAME}</a>
</Link>
. All Rights Reserved.
</span>
</footer>
);
. All Rights Reserved.
</span>
</footer>
);
};

export default Footer;
53 changes: 33 additions & 20 deletions src/components/layouts/Dashboard/modules/Nav/Nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ import { Disclosure } from '@headlessui/react';
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, useMemo } from 'react';
import { useMemo } from 'react';
import { useMoralis } from 'react-moralis';
import { useEthBalance } from '../../../../../hooks/useEthBalance';
import { APP_NAME } from '../../../../../utils/constants';
Expand All @@ -12,14 +11,16 @@ import { Icon } from '../../../../common';
import { Icons } from '../../../../common/Icon/Icon';

const Nav = () => {
const { isAuthenticated, logout, user } = useMoralis();
const { logout, user } = useMoralis();
const { formattedBalance, loading } = useEthBalance();
const router = useRouter();
const ethAddress = user?.get('ethAddress');

const navigation = [
{ name: '🧾 Transactions', href: '#' },
{ name: '💰 Balance', href: '#' },
const infoBar = [
{
name: `💰 Balance: ${loading ? 'Loading...' : formattedBalance}`,
href: `https://rinkeby.etherscan.io/address/${ethAddress}`,
type: 'balance',
},
];

// TODO: implement menu
Expand All @@ -29,11 +30,6 @@ const Nav = () => {
// { name: 'Sign out', href: '#' },
// ];

useEffect(() => {
if (!isAuthenticated) router.replace('/');
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isAuthenticated]);

const ellipsedUserName = useMemo(
() => ethAddress && getEllipsesText(ethAddress),
[ethAddress]
Expand All @@ -58,14 +54,13 @@ const Nav = () => {
</a>
</Link>
</div>
{!loading && formattedBalance}
<div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4">
{navigation.map((item) => (
{infoBar.map((item) => (
<a
key={item.name}
href={item.href}
className="text-white hover:bg-blue-500 hover:text-gray px-3 py-2 rounded-md text-sm font-medium"
className="bg-lime-400 text-green-800 px-3 py-2 rounded-md text-sm font-medium"
>
{item.name}
</a>
Expand Down Expand Up @@ -115,12 +110,12 @@ const Nav = () => {

<Disclosure.Panel className="md:hidden">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
{navigation.map((item) => (
{infoBar.map((item) => (
<Disclosure.Button
key={item.name}
as="a"
href={item.href}
className="text-white hover:bg-blue-600 hover:text-gray block px-3 py-2 rounded-md text-base font-medium"
className="hover:bg-blue-600 text-white block px-3 py-2 rounded-md text-base font-medium"
>
{item.name}
</Disclosure.Button>
Expand All @@ -129,9 +124,27 @@ const Nav = () => {
<div className="pt-4 pb-3 ">
<div className="flex items-center px-5"></div>
<div className="mt-3 px-2 space-y-1">
<Disclosure.Button className="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-blue-600">
{user && getEllipsesText(user?.get('ethAddress'))}
</Disclosure.Button>
{user && (
<button
type="button"
onClick={logout}
className="flex text-white hover:bg-blue-600 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">
{ellipsedUserName}
</span>
<LogoutIcon className="w-6 h-6 text-white" />
</div>
</button>
)}
</div>
</div>
</Disclosure.Panel>
Expand Down
12 changes: 6 additions & 6 deletions src/components/layouts/Dashboard/modules/Table/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,26 @@ import { SearchInput, TableBody } from '.';

const Table = () => (
<div className="min-h-full max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<div className="relative overflow-x-auto shadow-md sm:rounded-lg bg-gradient-to-b from-cyan-300 to-teal-100 dark:from-cyan-800 dark:to-cyan-800">
<div className="relative overflow-x-auto shadow-lg sm:rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 dark:from-cyan-800 dark:to-cyan-800">
<SearchInput />
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead className="text-xs text-gray-700 uppercase bg-teal-100 dark:bg-gray-700 dark:text-gray-400">
<thead className="text-xs text-white uppercase dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" className="px-6 py-3">
FROM
</th>
<th scope="col" className="px-6 py-3">
TO
</th>
<th scope="col" className="px-6 py-3">
AGE
</th>
<th scope="col" className="px-6 py-3">
DATE
</th>
<th scope="col" className="px-6 py-3">
<span className="sr-only">View More</span>
VALUE
</th>
{/* <th scope="col" className="px-6 py-3">
<span className="sr-only">View More</span>
</th> */}
</tr>
</thead>
{/* TODO: pagination */}
Expand Down
Loading

1 comment on commit d5b8593

@vercel
Copy link

@vercel vercel bot commented on d5b8593 Apr 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

next-dapp-example – ./

next-dapp-example-git-main-damla.vercel.app
nextjs-dapp-example.vercel.app
next-dapp-example-damla.vercel.app

Please sign in to comment.