Skip to content

Commit

Permalink
Polishing
Browse files Browse the repository at this point in the history
  • Loading branch information
kristoferlund committed Sep 25, 2022
1 parent 7e17542 commit 63d7b65
Show file tree
Hide file tree
Showing 5 changed files with 42 additions and 55 deletions.
42 changes: 23 additions & 19 deletions packages/frontend/src/navigation/Nav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import { EthAccount } from '@/components/account/EthAccount';
import { AdminOnly } from '@/components/auth/AdminOnly';
import { Theme } from '@/model/theme';
import { NavItem } from './NavItem';
import { NavSubItem } from './NavSubItem';

export const Nav = (): JSX.Element => {
const setTheme = useSetRecoilState(Theme);
Expand Down Expand Up @@ -73,24 +72,29 @@ export const Nav = (): JSX.Element => {
</ul>
</div>

<div className="flex flex-col m-4 mt-auto h-36">
<NavSubItem
icon={faBullhorn}
description="Give us feedback"
to="https://praise.sleekplan.app/"
/>
<NavSubItem
icon={faFire}
description="Latest changes"
to="https://github.com/commons-stack/praise/releases"
/>
<NavSubItem
icon={faFileLines}
description="Docs"
to="https://givepraise.xyz/docs/"
/>
<div className="flex flex-col justify-end mt-auto h-60">
<ul>
<NavItem
icon={faBullhorn}
description="Give us feedback"
to="https://praise.sleekplan.app/"
iconClassName="text-themecolor-3"
/>
<NavItem
icon={faFire}
description="Latest changes"
to="https://github.com/commons-stack/praise/releases"
iconClassName="text-themecolor-3"
/>
<NavItem
icon={faFileLines}
description="Docs"
to="https://givepraise.xyz/docs/"
iconClassName="text-themecolor-3"
/>
</ul>
<div
className="items-center justify-center hidden h-16 border-2 rounded-lg cursor-pointer dark:flex dark:text-white text-themecolor-3 grow dark:border-slate-700"
className="hidden px-2 py-3 m-3 border-2 rounded-lg cursor-pointer dark:flex border-slate-700"
onClick={(): void => handleTheme('Light')}
>
<div className="inline-block w-8 px-1 text-center text-themecolor-3">
Expand All @@ -102,7 +106,7 @@ export const Nav = (): JSX.Element => {
</div>

<div
className="flex items-center justify-center h-16 border-2 rounded-lg cursor-pointer dark:hidden "
className="flex px-2 py-3 m-3 border-2 rounded-lg cursor-pointer dark:hidden "
onClick={(): void => handleTheme('Dark')}
>
<div className="inline-block w-8 pl-1 text-center text-themecolor-3">
Expand Down
21 changes: 15 additions & 6 deletions packages/frontend/src/navigation/NavItem.tsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,39 @@
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { NavLink } from 'react-router-dom';
import { classNames } from '../utils';

interface NavProps {
icon?: IconProp;
description: string;
to: string;
replace?: boolean;
external?: boolean;
iconClassName?: string;
rounded?: boolean;
}

export const NavItem = ({
icon,
description,
to,
replace = false,
external = false,
iconClassName,
rounded = false,
}: NavProps): JSX.Element => {
const url = !external ? to : { pathname: to };
const target = !external ? '' : '_blank';
const url = to.startsWith('http') ? { pathname: to } : to;
const target = to.startsWith('http') ? '_blank' : '';

return (
<li className="group">
<NavLink
to={url}
className={(isActive): string =>
`relative group-first:rounded-t-lg group-last:rounded-b-lg px-5 py-2 cursor-pointer no-underline flex items-center ${
`relative px-5 py-2 cursor-pointer no-underline flex items-center ${
isActive
? ' bg-warm-gray-100 dark:bg-slate-700'
: ' hover:bg-warm-gray-100 dark:hover:bg-slate-700'
} ${
rounded ? 'group-first:rounded-t-lg group-last:rounded-b-lg' : ''
}`
}
id={to.substring(1) + '-nav-button'}
Expand All @@ -37,7 +42,11 @@ export const NavItem = ({
>
{icon && (
<div className="inline-block w-8 text-center">
<FontAwesomeIcon icon={icon} size="1x" className="inline-block" />
<FontAwesomeIcon
icon={icon}
size="1x"
className={classNames('inline-block', iconClassName)}
/>
</div>
)}
<div className="flex-auto inline-block my-1 whitespace-nowrap">
Expand Down
30 changes: 0 additions & 30 deletions packages/frontend/src/navigation/NavSubItem.tsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ export const PeriodDetailsPage = (): JSX.Element | null => {
description="Receivers"
icon={faHeartbeat}
replace
rounded
/>
<NavItem
to={`${url}/quantifiers`}
Expand All @@ -125,6 +126,7 @@ export const PeriodDetailsPage = (): JSX.Element | null => {
description="Analytics"
icon={faChartBar}
replace
rounded
/>
</ul>
</SubPageNav>
Expand Down
2 changes: 2 additions & 0 deletions packages/frontend/src/pages/Settings/SettingsPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ const SettingsPage = (): JSX.Element | null => {
to={`${url}/application`}
description="Application"
replace
rounded
/>
<NavItem
to={`${url}/period`}
Expand All @@ -72,6 +73,7 @@ const SettingsPage = (): JSX.Element | null => {
to={`${url}/custom-export`}
description="Custom Export"
replace
rounded
/>
</ul>
</SubPageNav>
Expand Down

0 comments on commit 63d7b65

Please sign in to comment.