From 3acd2fa26273dcdabb04e7874d5650782a8f4020 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 21:52:22 -0800 Subject: [PATCH 01/22] GridRepCollection should start from the left --- components/GridRepCollection/index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/GridRepCollection/index.scss b/components/GridRepCollection/index.scss index 1f0a2db3..db3ee5b0 100644 --- a/components/GridRepCollection/index.scss +++ b/components/GridRepCollection/index.scss @@ -1,6 +1,6 @@ .GridRepCollection { display: grid; - grid-template-columns: auto auto auto; + grid-template-columns: 1fr 1fr 1fr; margin: 0 auto; padding: 0; width: fit-content; From 5130f52f612aaedf22666aadf4cb06239e30b167 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 22:15:41 -0800 Subject: [PATCH 02/22] Use Link on GridRep * Open grids in new tab * Can favorite or open grid still * Can now navigate to profile from grid collection --- components/GridRep/index.scss | 4 ++ components/GridRep/index.tsx | 90 ++++++++++++++++++++++------------- styles/themes.scss | 4 ++ styles/variables.scss | 3 ++ 4 files changed, 67 insertions(+), 34 deletions(-) diff --git a/components/GridRep/index.scss b/components/GridRep/index.scss index a47aa2fa..27717f65 100644 --- a/components/GridRep/index.scss +++ b/components/GridRep/index.scss @@ -99,6 +99,10 @@ .bottom { display: flex; flex-direction: row; + + a.user:hover { + color: var(--link-text-hover); + } } .raid, diff --git a/components/GridRep/index.tsx b/components/GridRep/index.tsx index f353a8ed..41180b6a 100644 --- a/components/GridRep/index.tsx +++ b/components/GridRep/index.tsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react' +import Link from 'next/link' import { useRouter } from 'next/router' import { useSnapshot } from 'valtio' import { useTranslation } from 'next-i18next' @@ -132,11 +133,28 @@ const GridRep = (props: Props) => { } else return
} + const linkedAttribution = () => ( + + + {userImage()} + {props.user ? props.user.username : t('no_user')} + + + ) + + const unlinkedAttribution = () => ( +
+ {userImage()} + {props.user ? props.user.username : t('no_user')} +
+ ) + const details = (
-

- {props.name ? props.name : t('no_title')} -

+

{props.name ? props.name : t('no_title')}

{props.raid ? props.raid.name[locale] : t('no_raid')} @@ -152,7 +170,7 @@ const GridRep = (props: Props) => {
-

+

{props.name ? props.name : t('no_title')}

@@ -162,23 +180,25 @@ const GridRep = (props: Props) => { {account.authorized && ((props.user && account.user && account.user.id !== props.user.id) || !props.user) ? ( -
-
- {userImage()} - {props.user ? props.user.username : t('no_user')} -
+ {props.user ? linkedAttribution() : unlinkedAttribution()} + @@ -187,25 +207,27 @@ const GridRep = (props: Props) => { ) return ( - + + ) } diff --git a/styles/themes.scss b/styles/themes.scss index 4871bb75..acc5dfd8 100644 --- a/styles/themes.scss +++ b/styles/themes.scss @@ -7,6 +7,8 @@ --card-bg: #{$grey-100}; --bar-bg: #{$grey-100}; + --link-text-hover: #{$text--link--hover--light}; + // Light - Menus --dialog-bg: #{$dialog--bg--light}; @@ -120,6 +122,8 @@ --card-bg: #{$page--element--bg--dark}; --bar-bg: #{$grey-10}; + --link-text-hover: #{$text--link--hover--dark}; + // Dark - Dialogs --dialog-bg: #{$dialog--bg--dark}; diff --git a/styles/variables.scss b/styles/variables.scss index f0bec0fe..94a22bdc 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -235,6 +235,9 @@ $text--tertiary--color--dark: $grey-50; $text--tertiary--hover--light: $grey-40; $text--tertiary--hover--dark: $grey-70; +$text--link--hover--light: $grey-40; +$text--link--hover--dark: $grey-100; + // Color Definitions: Icon $icon--secondary--color--light: $grey-70; $icon--secondary--color--dark: $grey-50; From 4dbbe01486a36ee05cc408bc88d663bd9197fe1c Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 22:27:44 -0800 Subject: [PATCH 03/22] Attempt to fix header menu hover bug --- components/Header/index.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/Header/index.scss b/components/Header/index.scss index 0715b1d0..34dcc5b9 100644 --- a/components/Header/index.scss +++ b/components/Header/index.scss @@ -1,6 +1,6 @@ .Header { display: flex; - margin-bottom: $unit-2x; + margin-bottom: $unit; width: 100%; &.bottom { @@ -16,9 +16,10 @@ .dropdown { display: inline-block; position: relative; + padding-bottom: $unit; &:hover { - padding-right: 50px; + padding-right: $unit-4x; .Button { background: var(--button-bg-hover); From e0eb0fdf212fc79693d7d468ed16bb77b5c16534 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 23:00:39 -0800 Subject: [PATCH 04/22] Fix uncap levels Shit was really broken Since 0 is a valid value, we needed to check if it was null, because Javascript --- components/UncapIndicator/index.tsx | 18 +++++++++--------- components/UncapStar/index.tsx | 2 +- components/WeaponGrid/index.tsx | 1 + components/WeaponUnit/index.tsx | 5 ++--- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/components/UncapIndicator/index.tsx b/components/UncapIndicator/index.tsx index d71a6043..296e85da 100644 --- a/components/UncapIndicator/index.tsx +++ b/components/UncapIndicator/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from 'react' +import React, { useEffect } from 'react' import UncapStar from '~components/UncapStar' import './index.scss' @@ -10,12 +10,10 @@ interface Props { flb: boolean ulb: boolean special: boolean - updateUncap?: (uncap: number) => void + updateUncap?: (index: number) => void } const UncapIndicator = (props: Props) => { - const [uncap, setUncap] = useState(props.uncapLevel) - const numStars = setNumStars() function setNumStars() { let numStars @@ -53,7 +51,7 @@ const UncapIndicator = (props: Props) => { function toggleStar(index: number, empty: boolean) { if (props.updateUncap) { - if (empty) props.updateUncap(index + 1) + if (empty && index > 0) props.updateUncap(index + 1) else props.updateUncap(index) } } @@ -71,10 +69,11 @@ const UncapIndicator = (props: Props) => { } const ulb = (i: number) => { + // console.log('ULB; Number of stars:', props.uncapLevel) return ( = props.uncapLevel : false} + empty={props.uncapLevel != null ? i >= props.uncapLevel : false} key={`star_${i}`} index={i} onClick={toggleStar} @@ -83,10 +82,11 @@ const UncapIndicator = (props: Props) => { } const flb = (i: number) => { + // console.log('FLB; Number of stars:', props.uncapLevel) return ( = props.uncapLevel : false} + empty={props.uncapLevel != null ? i >= props.uncapLevel : false} key={`star_${i}`} index={i} onClick={toggleStar} @@ -95,10 +95,10 @@ const UncapIndicator = (props: Props) => { } const mlb = (i: number) => { - // console.log("MLB; Number of stars:", props.uncapLevel) + // console.log('MLB; Number of stars:', props.uncapLevel) return ( = props.uncapLevel : false} + empty={props.uncapLevel != null ? i >= props.uncapLevel : false} key={`star_${i}`} index={i} onClick={toggleStar} diff --git a/components/UncapStar/index.tsx b/components/UncapStar/index.tsx index 9b0969f7..78510fad 100644 --- a/components/UncapStar/index.tsx +++ b/components/UncapStar/index.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useEffect } from 'react' import classnames from 'classnames' import './index.scss' diff --git a/components/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx index 33d9d32e..511709aa 100644 --- a/components/WeaponGrid/index.tsx +++ b/components/WeaponGrid/index.tsx @@ -252,6 +252,7 @@ const WeaponGrid = (props: Props) => { ) const updateUncapLevel = (position: number, uncapLevel: number) => { + console.log(`Updating uncap level at position ${position} to ${uncapLevel}`) if (appState.grid.weapons.mainWeapon && position == -1) appState.grid.weapons.mainWeapon.uncap_level = uncapLevel else { diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx index 2baba499..5a59c138 100644 --- a/components/WeaponUnit/index.tsx +++ b/components/WeaponUnit/index.tsx @@ -11,7 +11,6 @@ import Button from '~components/Button' import type { SearchableObject } from '~types' -import { appState } from '~utils/appState' import { axData } from '~utils/axData' import { weaponAwakening } from '~utils/awakening' @@ -341,9 +340,9 @@ const WeaponUnit = (props: Props) => { } else return } - function passUncapData(uncap: number) { + function passUncapData(index: number) { if (props.gridWeapon) - props.updateUncap(props.gridWeapon.id, props.position, uncap) + props.updateUncap(props.gridWeapon.id, props.position, index) } function canBeModified(gridWeapon: GridWeapon) { From 61ded6bcba52cf297013bc027f9cb6f2187a34c3 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 23:20:05 -0800 Subject: [PATCH 05/22] Fix localization --- public/locales/ja/common.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json index 3a5813b5..9b2b7114 100644 --- a/public/locales/ja/common.json +++ b/public/locales/ja/common.json @@ -291,7 +291,7 @@ "no_skill": "設定されていません" } }, - "extra_weapons": "Additional
Weapons", + "extra_weapons": "Additional Weapons", "coming_soon": "開発中", "no_title": "無題", "no_raid": "マルチなし", From 78f37abaa5b399a9ad977fee343b8f2239655a08 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 23:20:13 -0800 Subject: [PATCH 06/22] Fix colors in PartyDetails --- styles/globals.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/styles/globals.scss b/styles/globals.scss index 7de3fc7f..462cddd5 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -33,27 +33,27 @@ a { text-decoration: none; &.wind { - color: $wind-text-10; + color: var(--wind-bg); } &.fire { - color: $fire-text-10; + color: var(--fire-bg); } &.water { - color: $water-text-10; + color: var(--water-bg); } &.earth { - color: $earth-text-10; + color: var(--earth-bg); } &.dark { - color: $dark-text-10; + color: var(--dark-bg); } &.light { - color: $light-text-10; + color: var(--light-bg); } } From fc93ab58ea32e0a52bab6291007cc0306bd81e42 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 23:22:43 -0800 Subject: [PATCH 07/22] Tweak subaura orange in dark mode --- styles/variables.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/styles/variables.scss b/styles/variables.scss index 94a22bdc..17ba813a 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -55,6 +55,7 @@ $orange-10: #6b401b; $orange-30: #825b39; $orange-40: #925a2a; $orange-50: #a8703f; +$orange-70: #d08f57; $orange-80: #facea7; $orange-90: #ffebd9; @@ -213,7 +214,7 @@ $subaura--orange--bg--dark: $orange-10; $subaura--orange--card--bg--dark: $orange-30; $subaura--orange--primary--dark: $orange-00; $subaura--orange--secondary--dark: $orange-10; -$subaura--orange--text--dark: $orange-00; +$subaura--orange--text--dark: $orange-70; // Color Definitions: Element Toggle $toggle--bg--light: $grey-90; From db254e87ec789cfcab7334d28f1a3a414658a482 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 23:52:00 -0800 Subject: [PATCH 08/22] Fix visual bug with taller input --- components/CharLimitedFieldset/index.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/CharLimitedFieldset/index.scss b/components/CharLimitedFieldset/index.scss index b1bd3c6e..f465a160 100644 --- a/components/CharLimitedFieldset/index.scss +++ b/components/CharLimitedFieldset/index.scss @@ -17,6 +17,10 @@ // box-shadow: 0 2px rgba(255, 255, 255, 1); } + .Input { + padding: $unit * 1.5 $unit-2x; + } + .Counter { color: $grey-55; font-weight: $bold; From c3f8fa57d04f4a34469ce1bcb56889d734aa70a9 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 25 Dec 2022 23:52:24 -0800 Subject: [PATCH 09/22] Always show title/raid/author-style party details --- components/PartyDetails/index.tsx | 27 ++++++--------------------- 1 file changed, 6 insertions(+), 21 deletions(-) diff --git a/components/PartyDetails/index.tsx b/components/PartyDetails/index.tsx index a171ad48..adabdbc3 100644 --- a/components/PartyDetails/index.tsx +++ b/components/PartyDetails/index.tsx @@ -42,23 +42,24 @@ const PartyDetails = (props: Props) => { const nameInput = React.createRef() const descriptionInput = React.createRef() + const [open, setOpen] = useState(false) const [raidSlug, setRaidSlug] = useState('') const readOnlyClasses = classNames({ PartyDetails: true, ReadOnly: true, - Visible: !party.detailsVisible, + Visible: true, }) const editableClasses = classNames({ PartyDetails: true, Editable: true, - Visible: party.detailsVisible, + Visible: open, }) const emptyClasses = classNames({ EmptyDetails: true, - Visible: !party.detailsVisible, + Visible: true, }) const userClass = classNames({ @@ -99,7 +100,7 @@ const PartyDetails = (props: Props) => { } function toggleDetails() { - appState.party.detailsVisible = !appState.party.detailsVisible + setOpen(!open) } function receiveRaid(slug?: string) { @@ -284,25 +285,9 @@ const PartyDetails = (props: Props) => { ) - const emptyDetails = ( -
- {party.editable ? ( -