From 88b05c6de8aef5947e102a71e4b2a77048fdfe0d Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Fri, 4 Feb 2022 18:21:05 -0800 Subject: [PATCH 01/22] Add ButtonType to enums --- utils/enums.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/utils/enums.tsx b/utils/enums.tsx index 86e2af6d..ca8289b1 100644 --- a/utils/enums.tsx +++ b/utils/enums.tsx @@ -1,3 +1,8 @@ +export enum ButtonType { + Base, + Destructive +} + export enum GridType { Class, Character, From 194b1c5ff39aa7faa30ea7355a46374dd83499cf Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Fri, 4 Feb 2022 18:21:37 -0800 Subject: [PATCH 02/22] Remove GridType definitions in favor of the shared one --- components/ExtraSummons/index.tsx | 8 -------- components/ExtraWeapons/index.tsx | 8 -------- components/Party/index.tsx | 10 +--------- components/PartySegmentedControl/index.tsx | 8 +------- 4 files changed, 2 insertions(+), 32 deletions(-) diff --git a/components/ExtraSummons/index.tsx b/components/ExtraSummons/index.tsx index 80d21a4b..14b1c4c3 100644 --- a/components/ExtraSummons/index.tsx +++ b/components/ExtraSummons/index.tsx @@ -2,14 +2,6 @@ import React from 'react' import SummonUnit from '~components/SummonUnit' import './index.scss' -// GridType -export enum GridType { - Class, - Character, - Weapon, - Summon -} - // Props interface Props { grid: GridArray diff --git a/components/ExtraWeapons/index.tsx b/components/ExtraWeapons/index.tsx index 71fcda5c..fbce69c5 100644 --- a/components/ExtraWeapons/index.tsx +++ b/components/ExtraWeapons/index.tsx @@ -3,14 +3,6 @@ import WeaponUnit from '~components/WeaponUnit' import './index.scss' -// GridType -export enum GridType { - Class, - Character, - Weapon, - Summon -} - // Props interface Props { grid: GridArray diff --git a/components/Party/index.tsx b/components/Party/index.tsx index fa20c988..5d8375bc 100644 --- a/components/Party/index.tsx +++ b/components/Party/index.tsx @@ -9,18 +9,10 @@ import SummonGrid from '~components/SummonGrid' import CharacterGrid from '~components/CharacterGrid' import api from '~utils/api' -import { TeamElement } from '~utils/enums' +import { GridType, TeamElement } from '~utils/enums' import './index.scss' -// GridType -enum GridType { - Class, - Character, - Weapon, - Summon -} - // Props interface Props { slug?: string diff --git a/components/PartySegmentedControl/index.tsx b/components/PartySegmentedControl/index.tsx index 3d30e8f4..427244d0 100644 --- a/components/PartySegmentedControl/index.tsx +++ b/components/PartySegmentedControl/index.tsx @@ -7,13 +7,7 @@ import SegmentedControl from '~components/SegmentedControl' import Segment from '~components/Segment' import ToggleSwitch from '~components/ToggleSwitch' -// GridType -export enum GridType { - Class, - Character, - Weapon, - Summon -} +import { GridType } from '~utils/enums' interface Props { selectedTab: GridType From e8876d3b90572d1696b33cb77f559938511656a6 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Fri, 4 Feb 2022 18:22:30 -0800 Subject: [PATCH 03/22] Slight update adding Button type Previous type prop renamed to icon --- components/Button/index.scss | 21 ++++++++++++++++++++- components/Button/index.tsx | 33 ++++++++++++++++++++++++--------- public/icons/Cross.svg | 3 +++ 3 files changed, 47 insertions(+), 10 deletions(-) create mode 100644 public/icons/Cross.svg diff --git a/components/Button/index.scss b/components/Button/index.scss index 818625be..6bd0fdde 100644 --- a/components/Button/index.scss +++ b/components/Button/index.scss @@ -16,7 +16,21 @@ color: $grey-00; .icon svg { - fill: $grey-50; + fill: $grey-00; + } + + .icon.stroke svg { + fill: none; + stroke: $grey-00; + } + } + + &.destructive:hover { + background: $error; + color: white; + + .icon svg { + fill: white; } } @@ -28,6 +42,11 @@ height: 12px; width: 12px; } + + &.stroke svg { + fill: none; + stroke: $grey-50; + } } &.btn-blue { diff --git a/components/Button/index.tsx b/components/Button/index.tsx index b24b1550..d355730f 100644 --- a/components/Button/index.tsx +++ b/components/Button/index.tsx @@ -1,15 +1,22 @@ import React from 'react' import classNames from 'classnames' +import Link from 'next/link' + import AddIcon from '~public/icons/Add.svg' +import CrossIcon from '~public/icons/Cross.svg' +import EditIcon from '~public/icons/Edit.svg' +import LinkIcon from '~public/icons/Link.svg' import MenuIcon from '~public/icons/Menu.svg' import './index.scss' +import { ButtonType } from '~utils/enums' + interface Props { - color: string disabled: boolean - type: string | null + icon: string | null + type: ButtonType click: any } @@ -19,9 +26,9 @@ interface State { class Button extends React.Component { static defaultProps: Props = { - color: 'grey', disabled: false, - type: null, + icon: null, + type: ButtonType.Base, click: () => {} } @@ -34,17 +41,25 @@ class Button extends React.Component { render() { let icon - if (this.props.type === 'new') { + if (this.props.icon === 'new') { icon = - } else if (this.props.type === 'menu') { + } else if (this.props.icon === 'menu') { icon = - } else if (this.props.type === 'link') { + } else if (this.props.icon === 'link') { + icon = + + + } else if (this.props.icon === 'cross') { icon = - + + + } else if (this.props.icon === 'edit') { + icon = + } @@ -52,7 +67,7 @@ class Button extends React.Component { Button: true, 'btn-pressed': this.state.isPressed, 'btn-disabled': this.props.disabled, - [`btn-${this.props.color}`]: true + 'destructive': this.props.type == ButtonType.Destructive }) return + ) + } + + const rightNav = () => { + return ( +
+ { (editable && router.route === '/p/[party]') ? + : '' + } +
+ ) + } + + + return ( +
+ ) +} + +export default BottomHeader \ No newline at end of file diff --git a/components/Header/index.scss b/components/Header/index.scss index 5eb0d7cc..d5f5afea 100644 --- a/components/Header/index.scss +++ b/components/Header/index.scss @@ -1,8 +1,13 @@ -#Header { +.Header { display: flex; height: 34px; width: 100%; + &.bottom { + position: sticky; + bottom: $unit * 2; + } + #right { display: flex; gap: 8px; diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 0ae20284..d82d83e3 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -1,82 +1,19 @@ -import React, { useContext, useEffect, useState } from 'react' -import { useCookies } from 'react-cookie' -import { useRouter } from 'next/router' - -import AppContext from '~context/AppContext' - -import Button from '~components/Button' -import HeaderMenu from '~components/HeaderMenu' +import React from 'react' import './index.scss' -interface Props {} +interface Props { + position: 'top' | 'bottom' + left: JSX.Element, + right: JSX.Element +} -const Header = (props: Props) => { - const { editable, setEditable, authenticated, setAuthenticated } = useContext(AppContext) - - const [username, setUsername] = useState(undefined) - const [cookies, _, removeCookie] = useCookies(['user']) - - const router = useRouter() - - useEffect(() => { - if (cookies.user) { - setAuthenticated(true) - setUsername(cookies.user.username) - console.log(`Logged in as user "${cookies.user.username}"`) - } else { - setAuthenticated(false) - console.log('You are currently not logged in.') - } - }, [cookies, setUsername, setAuthenticated]) - - function copyToClipboard() { - const el = document.createElement('input') - el.value = window.location.href - el.id = 'url-input' - document.body.appendChild(el) - - el.select() - document.execCommand('copy') - el.remove() - } - - function newParty() { - router.push('/') - } - - function logout() { - removeCookie('user') - - setAuthenticated(false) - if (editable) setEditable(false) - - // How can we log out without navigating to root - router.push('/') - return false - } - +const Header = (props: Props) => { return ( -