From 103ef7e1a249037bf0f72f58742688acbf34342f Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Wed, 21 Jun 2023 03:39:25 -0700 Subject: [PATCH] Quality pass (#326) * Move min-width to RaidCombobox, not Popover This fixes #318 * Use snapshots to make tokens reactive This fixes #319 * Revert ChatGPT refactor of this method Oops. This code was nice, but it didn't actually assign `false` to keys to be sent to the server. We will revisit this, but it needs to be fixed right now. This fixes #325 * Ignore gacha directory We will probably scrape these images soon. * Add translation for Auto Summon token * Add auto summon token to app state * Set battle settings in state on update Also renames PartyDetails to PartyFooter and makes description reactive * Stop 1password icon from appearing in name field * Use snapshot for reactive Edit party modal * Fix Edit modal placeholder colors * Fix bug with RaidCombobox and Farming Selecting farming then opening the raid combobox *twice* consecutively would put you in no segment, so no raids appeared Fixes #323 * Fix values staying in Edit team even if not saved The values a user entered in the Edit team modal would persist even if the user hit cancel to close the modal. They wouldn't save to the server, but very confusing nonetheless. Now fixed. * Fix unreadable colors in ElementToggle * Fix button alignment in weapon modal * Add text to filters button on small screens The FilterBar showed a left aligned filter icon on mobile for months and it was driving me insane * Remove extraneous code from Header Including the party name, since it's at the top now * Fix Alert at small sizes * Make copy link toast work again * Remove stylesheet links * Fix remix toasts and alerts from both locations The remix toast and alert was barely hooked up and not showing up when invoked from PartyHeader. It now shows up whether you remix your own team (from PartyDropdown) or if you remix another person's team (from PartyHeader). --- .gitignore | 1 + components/ElementToggle/index.scss | 12 +- components/FilterBar/index.scss | 17 ++ components/FilterBar/index.tsx | 1 + components/Header/index.tsx | 128 ----------- components/common/Alert/index.scss | 17 +- .../common/CharLimitedFieldset/index.scss | 3 + .../common/CharLimitedFieldset/index.tsx | 1 + components/common/Input/index.scss | 2 +- components/common/Popover/index.scss | 1 - components/common/Token/index.scss | 3 +- components/dialogs/RemixTeamAlert/index.tsx | 2 +- components/party/EditPartyModal/index.tsx | 45 ++-- components/party/Party/index.tsx | 61 +++--- components/party/PartyDropdown/index.tsx | 31 ++- .../{PartyDetails => PartyFooter}/index.scss | 204 +++++++++--------- .../{PartyDetails => PartyFooter}/index.tsx | 35 ++- components/party/PartyHeader/index.tsx | 128 ++++++++--- components/raids/RaidCombobox/index.scss | 5 + components/raids/RaidCombobox/index.tsx | 26 ++- components/toasts/RemixedToast/index.tsx | 8 +- components/toasts/UrlCopiedToast/index.tsx | 2 - components/weapon/WeaponModal/index.tsx | 14 +- public/locales/en/common.json | 2 + public/locales/ja/common.json | 2 + utils/appState.tsx | 2 + 26 files changed, 384 insertions(+), 369 deletions(-) rename components/party/{PartyDetails => PartyFooter}/index.scss (70%) rename components/party/{PartyDetails => PartyFooter}/index.tsx (89%) diff --git a/.gitignore b/.gitignore index 9bb7f6d8..46792764 100644 --- a/.gitignore +++ b/.gitignore @@ -58,6 +58,7 @@ public/images/mastery* public/images/updates* public/images/guidebooks* public/images/raids* +public/images/gacha* # Typescript v1 declaration files typings/ diff --git a/components/ElementToggle/index.scss b/components/ElementToggle/index.scss index 595458df..d1910810 100644 --- a/components/ElementToggle/index.scss +++ b/components/ElementToggle/index.scss @@ -47,32 +47,32 @@ &.fire { background: var(--fire-bg); - color: var(--fire-text); + color: var(--fire-hover-text); } &.water { background: var(--water-bg); - color: var(--water-text); + color: var(--water-hover-text); } &.earth { background: var(--earth-bg); - color: var(--earth-text); + color: var(--earth-hover-text); } &.wind { background: var(--wind-bg); - color: var(--wind-text); + color: var(--wind-hover-text); } &.dark { background: var(--dark-bg); - color: var(--dark-text); + color: var(--dark-hover-text); } &.light { background: var(--light-bg); - color: var(--light-text); + color: var(--light-hover-text); } } } diff --git a/components/FilterBar/index.scss b/components/FilterBar/index.scss index 5cfb852f..3bb8821e 100644 --- a/components/FilterBar/index.scss +++ b/components/FilterBar/index.scss @@ -102,6 +102,23 @@ } } + .Filter.Button { + justify-content: center; + + .Text { + display: none; + width: auto; + + @include breakpoint(tablet) { + display: block; + } + + @include breakpoint(phone) { + display: block; + } + } + } + .UserInfo { align-items: center; display: flex; diff --git a/components/FilterBar/index.tsx b/components/FilterBar/index.tsx index 5d94deb9..9d69cca8 100644 --- a/components/FilterBar/index.tsx +++ b/components/FilterBar/index.tsx @@ -181,6 +181,7 @@ const FilterBar = (props: Props) => { className={filterButtonClasses} blended={true} leftAccessoryIcon={} + text={t('filters.name')} onClick={() => setFilterModalOpen(true)} /> diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 3a5ccbe5..5bd6d940 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -7,7 +7,6 @@ import classNames from 'classnames' import clonedeep from 'lodash.clonedeep' import Link from 'next/link' -import api from '~utils/api' import { accountState, initialAccountState } from '~utils/accountState' import { appState, initialAppState } from '~utils/appState' import { getLocalId } from '~utils/localId' @@ -32,11 +31,8 @@ import Tooltip from '~components/common/Tooltip' import * as Switch from '@radix-ui/react-switch' import ChevronIcon from '~public/icons/Chevron.svg' -import LinkIcon from '~public/icons/Link.svg' import MenuIcon from '~public/icons/Menu.svg' -import RemixIcon from '~public/icons/Remix.svg' import PlusIcon from '~public/icons/Add.svg' -import SaveIcon from '~public/icons/Save.svg' import './index.scss' @@ -51,7 +47,6 @@ const Header = () => { const localeData = retrieveLocaleCookies() // State management - const [copyToastOpen, setCopyToastOpen] = useState(false) const [remixToastOpen, setRemixToastOpen] = useState(false) const [loginModalOpen, setLoginModalOpen] = useState(false) const [signupModalOpen, setSignupModalOpen] = useState(false) @@ -64,7 +59,6 @@ const Header = () => { const [originalName, setOriginalName] = useState('') // Snapshots - const { account } = useSnapshot(accountState) const { party: partySnapshot } = useSnapshot(appState) // Subscribe to app state to listen for party name and @@ -108,15 +102,6 @@ const Header = () => { setRightMenuOpen(false) } - // Methods: Event handlers (Copy toast) - function handleCopyToastOpenChanged(open: boolean) { - setCopyToastOpen(open) - } - - function handleCopyToastCloseClicked() { - setCopyToastOpen(false) - } - // Methods: Event handlers (Remix toasts) function handleRemixToastOpenChanged(open: boolean) { setRemixToastOpen(open) @@ -142,23 +127,6 @@ const Header = () => { router.push(router.asPath, undefined, { locale: language }) } - function copyToClipboard() { - const path = router.asPath.split('/')[1] - - if (path === 'p') { - 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() - - setCopyToastOpen(true) - } - } - function logout() { // Close menu closeRightMenu() @@ -188,84 +156,6 @@ const Header = () => { router.push('/new') } - function remixTeam() { - setOriginalName(partySnapshot.name ? partySnapshot.name : t('no_title')) - - if (partySnapshot.shortcode) { - const body = getLocalId() - api - .remix({ shortcode: partySnapshot.shortcode, body: body }) - .then((response) => { - const remix = response.data.party - - // Store the edit key in local storage - if (remix.edit_key) { - storeEditKey(remix.id, remix.edit_key) - setEditKey(remix.id, remix.user) - } - - router.push(`/p/${remix.shortcode}`) - setRemixToastOpen(true) - }) - } - } - - function toggleFavorite() { - if (partySnapshot.favorited) unsaveFavorite() - else saveFavorite() - } - - function saveFavorite() { - if (partySnapshot.id) - api.saveTeam({ id: partySnapshot.id }).then((response) => { - if (response.status == 201) appState.party.favorited = true - }) - else console.error('Failed to save team: No party ID') - } - - function unsaveFavorite() { - if (partySnapshot.id) - api.unsaveTeam({ id: partySnapshot.id }).then((response) => { - if (response.status == 200) appState.party.favorited = false - }) - else console.error('Failed to unsave team: No party ID') - } - - // Rendering: Elements - const pageTitle = () => { - let title = '' - let hasAccessory = false - - const path = router.asPath.split('/')[1] - if (path === 'p') { - hasAccessory = true - if (appState.party && appState.party.name) { - title = appState.party.name - } else { - title = t('no_title') - } - } else { - title = '' - } - - return title !== '' ? ( - -