From 16ed034b16c5de9d3393d0cb7b5809d54f8a8e40 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sat, 21 Jan 2023 03:40:30 -0800 Subject: [PATCH 01/12] Fix spacing in AboutModal --- components/AboutModal/index.scss | 6 ++++++ components/AboutModal/index.tsx | 1 + 2 files changed, 7 insertions(+) diff --git a/components/AboutModal/index.scss b/components/AboutModal/index.scss index cd5a8ace..df4372bc 100644 --- a/components/AboutModal/index.scss +++ b/components/AboutModal/index.scss @@ -9,6 +9,12 @@ padding: 0 $unit-4x; } + .sections { + display: flex; + flex-direction: column; + gap: $unit-2x; + } + section { margin-bottom: $unit; diff --git a/components/AboutModal/index.tsx b/components/AboutModal/index.tsx index 6a5d7fd3..227f093f 100644 --- a/components/AboutModal/index.tsx +++ b/components/AboutModal/index.tsx @@ -42,6 +42,7 @@ const AboutModal = () => {
+

Granblue.team is a tool to save and share team comps for{' '} From baeaf4f73dd074b2283726398de6eb2600f2ed65 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sat, 21 Jan 2023 03:42:29 -0800 Subject: [PATCH 02/12] Implement shadow on DialogHeader in static modals --- components/AboutModal/index.tsx | 11 +---- components/ChangelogModal/index.scss | 7 ++- components/ChangelogModal/index.tsx | 12 +---- components/CharacterModal/index.tsx | 28 ++++++++++++ components/DialogContent/index.scss | 6 +++ components/DialogContent/index.tsx | 68 ++++++++++++++++++++++++++-- components/RoadmapModal/index.tsx | 10 +--- components/WeaponModal/index.tsx | 1 - 8 files changed, 108 insertions(+), 35 deletions(-) diff --git a/components/AboutModal/index.tsx b/components/AboutModal/index.tsx index 227f093f..bc11f179 100644 --- a/components/AboutModal/index.tsx +++ b/components/AboutModal/index.tsx @@ -29,19 +29,10 @@ const AboutModal = () => { event.preventDefault()} onEscapeKeyDown={() => {}} > -

- {t('menu.about')} - - - - - -
- -

diff --git a/components/ChangelogModal/index.scss b/components/ChangelogModal/index.scss index 4a4a3597..bd9a1756 100644 --- a/components/ChangelogModal/index.scss +++ b/components/ChangelogModal/index.scss @@ -1,6 +1,5 @@ .Changelog.DialogContent { gap: 0; - padding-bottom: $unit-4x; & > div:not(.DialogHeader) { padding: 0 $unit-4x; @@ -30,6 +29,11 @@ display: grid; grid-template-rows: 1fr auto; gap: $unit; + + & > h4 { + font-weight: $medium; + font-size: $font-regular; + } } .items { @@ -66,6 +70,7 @@ li { margin-bottom: $unit-half; + font-size: $font-regular; } } } diff --git a/components/ChangelogModal/index.tsx b/components/ChangelogModal/index.tsx index a5422610..c7c870e3 100644 --- a/components/ChangelogModal/index.tsx +++ b/components/ChangelogModal/index.tsx @@ -26,20 +26,10 @@ const ChangelogModal = () => { event.preventDefault()} onEscapeKeyDown={() => {}} > -

- - {t('menu.changelog')} - - - - - - -
-
diff --git a/components/CharacterModal/index.tsx b/components/CharacterModal/index.tsx index c1b9b90d..0446d20a 100644 --- a/components/CharacterModal/index.tsx +++ b/components/CharacterModal/index.tsx @@ -81,17 +81,45 @@ const CharacterModal = ({ // UI state const [open, setOpen] = useState(false) + const [scrolled, setScrolled] = useState(false) const [formValid, setFormValid] = useState(false) // Classes const headerClasses = classNames({ DialogHeader: true, + Short: true, Scrolled: scrolled, }) + + // Callbacks and Hooks + const onScroll = useCallback((event: Event) => { + // const dialogContent = event.target as HTMLDivElement + // const { scrollTop } = dialogContent + // if (scrollTop > 150) { + // console.log(scrollTop, scrollTop % 5) + // if (scrollTop > 20) setScrolled(true) + // else setScrolled(false) + // console.log('scrollTop', scrollTop) + // } + }, []) + useEffect(() => { setOpen(modalOpen) }, [modalOpen]) + useEffect(() => { + //add eventlistener to window + // const dialogContent = document.querySelector('.DialogContent') + // if (dialogContent) { + // dialogContent.addEventListener('scroll', onScroll, { passive: true }) + // // remove event on unmount to prevent a memory leak with the cleanup + // return () => { + // // what does passive do? + // dialogContent.removeEventListener('scroll', onScroll) + // } + // } + }, []) + // Character properties: Perpetuity const [perpetuity, setPerpetuity] = useState(false) diff --git a/components/DialogContent/index.scss b/components/DialogContent/index.scss index 4955f130..47fc570d 100644 --- a/components/DialogContent/index.scss +++ b/components/DialogContent/index.scss @@ -49,8 +49,14 @@ width: 100%; } + .Scrollable { + overflow-y: auto; + } + .DialogHeader { background: var(--dialog-bg); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0); + border-bottom: 1px solid rgba(0, 0, 0, 0); display: flex; align-items: center; gap: $unit-2x; diff --git a/components/DialogContent/index.tsx b/components/DialogContent/index.tsx index 6086da4c..7c1211eb 100644 --- a/components/DialogContent/index.tsx +++ b/components/DialogContent/index.tsx @@ -1,15 +1,20 @@ -import React from 'react' +import React, { useEffect } from 'react' import * as DialogPrimitive from '@radix-ui/react-dialog' import classNames from 'classnames' -import './index.scss' +import { DialogClose, DialogTitle } from '~components/Dialog' import Overlay from '~components/Overlay' +import CrossIcon from '~public/icons/Cross.svg' +import './index.scss' + interface Props extends React.DetailedHTMLProps< React.DialogHTMLAttributes, HTMLDivElement > { + header?: React.ReactNode + title?: string onEscapeKeyDown: (event: KeyboardEvent) => void onOpenAutoFocus: (event: Event) => void } @@ -18,10 +23,60 @@ const DialogContent = React.forwardRef(function dialog( { children, ...props }, forwardedRef ) { + // Classes const classes = classNames(props.className, { DialogContent: true, }) + // Refs + const headerRef = React.createRef() + const containerRef = React.createRef() + + // Elements + const genericHeader = ( +
+ + {props.title ? props.title : ''} + + + + + + +
+ ) + + // Handlers + function handleScroll(event: React.UIEvent) { + const headerElement = headerRef.current + const scrollTop = event.currentTarget?.scrollTop + const boxShadowBase = '0 2px 8px' + const maxValue = 50 + + if (headerElement && scrollTop >= 0) { + const input = scrollTop > maxValue ? maxValue : scrollTop + + const boxShadowOpacity = mapRange(input, 0, maxValue, 0.0, 0.16) + const borderOpacity = mapRange(input, 0, maxValue, 0.0, 0.24) + console.log( + `Scroll top: ${scrollTop}, interpolated opacity: ${boxShadowOpacity}` + ) + + headerElement.style.boxShadow = `${boxShadowBase} rgba(0, 0, 0, ${boxShadowOpacity})` + headerElement.style.borderBottomColor = `rgba(0, 0, 0, ${borderOpacity})` + } + } + + function mapRange( + value: number, + low1: number, + high1: number, + low2: number, + high2: number + ) { + return low2 + ((high2 - low2) * (value - low1)) / (high1 - low1) + } + return ( @@ -32,7 +87,14 @@ const DialogContent = React.forwardRef(function dialog( onEscapeKeyDown={props.onEscapeKeyDown} ref={forwardedRef} > - {children} + {props.title ? genericHeader : ''} +
+ {children} +
diff --git a/components/RoadmapModal/index.tsx b/components/RoadmapModal/index.tsx index 61df0b89..770a9c3a 100644 --- a/components/RoadmapModal/index.tsx +++ b/components/RoadmapModal/index.tsx @@ -27,18 +27,10 @@ const RoadmapModal = () => { event.preventDefault()} onEscapeKeyDown={() => {}} > -
- {t('title')} - - - - - -
-

{t('blurb')}

diff --git a/components/WeaponModal/index.tsx b/components/WeaponModal/index.tsx index 5f582189..7f8857fe 100644 --- a/components/WeaponModal/index.tsx +++ b/components/WeaponModal/index.tsx @@ -346,7 +346,6 @@ const WeaponModal = ({ } return ( - // TODO: Refactor into Dialog component {children} Date: Sat, 21 Jan 2023 03:43:18 -0800 Subject: [PATCH 03/12] Fix spacing at bottom of ChangelogModal --- components/ChangelogModal/index.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/components/ChangelogModal/index.scss b/components/ChangelogModal/index.scss index bd9a1756..c5640d8f 100644 --- a/components/ChangelogModal/index.scss +++ b/components/ChangelogModal/index.scss @@ -9,6 +9,7 @@ display: flex; flex-direction: column; gap: $unit-4x; + margin-bottom: $unit-4x; } .version { From 7ad9032e8602f0482e9e95531384bb306fc05f5f Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sat, 21 Jan 2023 06:04:40 -0800 Subject: [PATCH 04/12] Fix shadows for static and mod modals --- components/AboutModal/index.scss | 2 +- components/AboutModal/index.tsx | 14 +++- components/AccountModal/index.tsx | 6 +- components/ChangelogModal/index.scss | 2 +- components/ChangelogModal/index.tsx | 13 +++ components/CharacterModal/index.scss | 2 +- components/CharacterModal/index.tsx | 36 ++------- components/DialogContent/index.scss | 4 +- components/DialogContent/index.tsx | 113 ++++++++++++++++++--------- components/RoadmapModal/index.scss | 2 +- components/RoadmapModal/index.tsx | 13 ++- components/WeaponModal/index.tsx | 7 +- 12 files changed, 139 insertions(+), 75 deletions(-) diff --git a/components/AboutModal/index.scss b/components/AboutModal/index.scss index df4372bc..a1c82a2c 100644 --- a/components/AboutModal/index.scss +++ b/components/AboutModal/index.scss @@ -2,7 +2,7 @@ gap: 0; padding-bottom: $unit; - & > div:not(.DialogHeader) { + .content { display: flex; flex-direction: column; gap: $unit-2x; diff --git a/components/AboutModal/index.tsx b/components/AboutModal/index.tsx index bc11f179..7935befd 100644 --- a/components/AboutModal/index.tsx +++ b/components/AboutModal/index.tsx @@ -19,6 +19,7 @@ import './index.scss' const AboutModal = () => { const { t } = useTranslation('common') + const headerRef = React.createRef() return ( @@ -29,11 +30,20 @@ const AboutModal = () => { event.preventDefault()} onEscapeKeyDown={() => {}} > -
+
+ {t('menu.about')} + + + + + +
+ +

Granblue.team is a tool to save and share team comps for{' '} diff --git a/components/AccountModal/index.tsx b/components/AccountModal/index.tsx index 1824bb1e..52677f06 100644 --- a/components/AccountModal/index.tsx +++ b/components/AccountModal/index.tsx @@ -85,6 +85,9 @@ const AccountModal = (props: Props) => { const [languageOpen, setLanguageOpen] = useState(false) const [themeOpen, setThemeOpen] = useState(false) + // Refs + const headerRef = React.createRef() + // UI management function openChange(open: boolean) { setOpen(open) @@ -286,10 +289,11 @@ const AccountModal = (props: Props) => { {}} onEscapeKeyDown={onEscapeKeyDown} > -

+
{t('modals.settings.title')} diff --git a/components/ChangelogModal/index.scss b/components/ChangelogModal/index.scss index c5640d8f..5d63d501 100644 --- a/components/ChangelogModal/index.scss +++ b/components/ChangelogModal/index.scss @@ -1,7 +1,7 @@ .Changelog.DialogContent { gap: 0; - & > div:not(.DialogHeader) { + .updates { padding: 0 $unit-4x; } diff --git a/components/ChangelogModal/index.tsx b/components/ChangelogModal/index.tsx index c7c870e3..5ba0677f 100644 --- a/components/ChangelogModal/index.tsx +++ b/components/ChangelogModal/index.tsx @@ -16,6 +16,7 @@ import './index.scss' const ChangelogModal = () => { const { t } = useTranslation('common') + const headerRef = React.createRef() return ( @@ -27,9 +28,21 @@ const ChangelogModal = () => { event.preventDefault()} onEscapeKeyDown={() => {}} > +
+ + {t('menu.changelog')} + + + + + + +
+
diff --git a/components/CharacterModal/index.scss b/components/CharacterModal/index.scss index 31b1e9aa..f2f35bf6 100644 --- a/components/CharacterModal/index.scss +++ b/components/CharacterModal/index.scss @@ -35,7 +35,7 @@ display: flex; flex-direction: column; gap: $unit-4x; - padding: 0 $unit-4x; + padding: 0 $unit-4x $unit-2x; section { display: flex; diff --git a/components/CharacterModal/index.tsx b/components/CharacterModal/index.tsx index 0446d20a..d2f31326 100644 --- a/components/CharacterModal/index.tsx +++ b/components/CharacterModal/index.tsx @@ -81,45 +81,23 @@ const CharacterModal = ({ // UI state const [open, setOpen] = useState(false) - const [scrolled, setScrolled] = useState(false) const [formValid, setFormValid] = useState(false) + // Refs + const headerRef = React.createRef() + const footerRef = React.createRef() + // Classes const headerClasses = classNames({ DialogHeader: true, Short: true, - Scrolled: scrolled, }) // Callbacks and Hooks - const onScroll = useCallback((event: Event) => { - // const dialogContent = event.target as HTMLDivElement - // const { scrollTop } = dialogContent - // if (scrollTop > 150) { - // console.log(scrollTop, scrollTop % 5) - // if (scrollTop > 20) setScrolled(true) - // else setScrolled(false) - // console.log('scrollTop', scrollTop) - // } - }, []) - useEffect(() => { setOpen(modalOpen) }, [modalOpen]) - useEffect(() => { - //add eventlistener to window - // const dialogContent = document.querySelector('.DialogContent') - // if (dialogContent) { - // dialogContent.addEventListener('scroll', onScroll, { passive: true }) - // // remove event on unmount to prevent a memory leak with the cleanup - // return () => { - // // what does passive do? - // dialogContent.removeEventListener('scroll', onScroll) - // } - // } - }, []) - // Character properties: Perpetuity const [perpetuity, setPerpetuity] = useState(false) @@ -309,10 +287,12 @@ const CharacterModal = ({ {children} event.preventDefault()} onEscapeKeyDown={() => {}} > -
+
{gridCharacter.object.name[locale]} -
+
-
+
-
-
+
+
+
+
diff --git a/components/DialogContent/index.scss b/components/DialogContent/index.scss index f40bb59b..78d89ee6 100644 --- a/components/DialogContent/index.scss +++ b/components/DialogContent/index.scss @@ -149,6 +149,19 @@ flex-direction: column; padding: ($unit * 1.5) ($unit * $multiplier) $unit-3x; position: sticky; + + .Buttons { + display: flex; + gap: $unit; + + &.Span { + width: 100%; + + .Button { + width: 100%; + } + } + } } .actions { @@ -160,16 +173,23 @@ &.Conflict { $weapon-diameter: 14rem; - & > p { - line-height: 1.2; - max-width: 400px; + .Content { + display: flex; + flex-direction: column; + gap: $unit-4x; + padding: $unit-4x $unit-4x $unit-2x $unit-4x; - strong { - font-weight: $bold; - } - - &:lang(ja) { + & > p { + font-size: $font-regular; line-height: 1.4; + + strong { + font-weight: $bold; + } + + &:lang(ja) { + line-height: 1.4; + } } } diff --git a/components/DialogContent/index.tsx b/components/DialogContent/index.tsx index d2aabd2c..cc8a9b5e 100644 --- a/components/DialogContent/index.tsx +++ b/components/DialogContent/index.tsx @@ -11,7 +11,7 @@ interface Props React.DialogHTMLAttributes, HTMLDivElement > { - headerref: React.RefObject + headerref?: React.RefObject footerref?: React.RefObject onEscapeKeyDown: (event: KeyboardEvent) => void onOpenAutoFocus: (event: Event) => void diff --git a/components/WeaponConflictModal/index.tsx b/components/WeaponConflictModal/index.tsx index d1a9a3c7..a93f4345 100644 --- a/components/WeaponConflictModal/index.tsx +++ b/components/WeaponConflictModal/index.tsx @@ -30,6 +30,9 @@ const WeaponConflictModal = (props: Props) => { // States const [open, setOpen] = useState(false) + // Refs + const footerRef = React.createRef() + useEffect(() => { setOpen(props.open) }, [setOpen, props.open]) @@ -67,40 +70,50 @@ const WeaponConflictModal = (props: Props) => { event.preventDefault()} onEscapeKeyDown={close} > -

{infoString()}

-
-
    - {props.conflictingWeapons?.map((weapon, i) => ( -
  • +
    +

    {infoString()}

    +
    +
      + {props.conflictingWeapons?.map((weapon, i) => ( +
    • + {weapon.object.name[locale]} + {weapon.object.name[locale]} +
      • + ))} +
    + → +
    +
    {weapon.object.name[locale]} - {weapon.object.name[locale]} -
    • - ))} -
- → -
-
- {props.incomingWeapon?.name[locale]} - {props.incomingWeapon?.name[locale]} + {props.incomingWeapon?.name[locale]} +
-
-
+
+
+
+
From 1ee55cc1c20f8b458fe527dcfaceec478b7792d4 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sat, 21 Jan 2023 08:21:43 -0800 Subject: [PATCH 09/12] Fix delete party alert and redirect to profile on delete --- components/Alert/index.scss | 2 +- components/Party/index.tsx | 12 +++++- components/PartyDetails/index.tsx | 69 ++++++++++++++----------------- 3 files changed, 42 insertions(+), 41 deletions(-) diff --git a/components/Alert/index.scss b/components/Alert/index.scss index 33f92d99..dbcff33a 100644 --- a/components/Alert/index.scss +++ b/components/Alert/index.scss @@ -2,7 +2,7 @@ align-items: center; display: flex; justify-content: center; - position: absolute; + position: fixed; height: 100vh; width: 100vw; top: 0; diff --git a/components/Party/index.tsx b/components/Party/index.tsx index fd32525d..07e47403 100644 --- a/components/Party/index.tsx +++ b/components/Party/index.tsx @@ -12,6 +12,7 @@ import CharacterGrid from '~components/CharacterGrid' import api from '~utils/api' import { appState, initialAppState } from '~utils/appState' import { GridType } from '~utils/enums' +import { retrieveCookies } from '~utils/retrieveCookies' import type { DetailsObject } from '~types' import './index.scss' @@ -37,6 +38,9 @@ const Party = (props: Props) => { const { party } = useSnapshot(appState) const [currentTab, setCurrentTab] = useState(GridType.Weapon) + // Retrieve cookies + const cookies = retrieveCookies() + // Reset state on first load useEffect(() => { const resetState = clonedeep(initialAppState) @@ -107,13 +111,17 @@ const Party = (props: Props) => { } // Deleting the party - function deleteTeam(event: React.MouseEvent) { + function deleteTeam() { if (appState.party.editable && appState.party.id) { api.endpoints.parties .destroy({ id: appState.party.id }) .then(() => { // Push to route - router.push('/') + if (cookies && cookies.account.username) { + router.push(`/${cookies.account.username}`) + } else { + router.push('/') + } // Clean state const resetState = clonedeep(initialAppState) diff --git a/components/PartyDetails/index.tsx b/components/PartyDetails/index.tsx index ee7440df..285f8f59 100644 --- a/components/PartyDetails/index.tsx +++ b/components/PartyDetails/index.tsx @@ -9,7 +9,7 @@ import LiteYouTubeEmbed from 'react-lite-youtube-embed' import classNames from 'classnames' import reactStringReplace from 'react-string-replace' -import * as AlertDialog from '@radix-ui/react-alert-dialog' +import Alert from '~components/Alert' import Button from '~components/Button' import CharLimitedFieldset from '~components/CharLimitedFieldset' @@ -40,9 +40,7 @@ interface Props { new: boolean editable: boolean updateCallback: (details: DetailsObject) => void - deleteCallback: ( - event: React.MouseEvent - ) => void + deleteCallback: () => void } const PartyDetails = (props: Props) => { @@ -60,6 +58,7 @@ const PartyDetails = (props: Props) => { const [open, setOpen] = useState(false) const [name, setName] = useState('') + const [alertOpen, setAlertOpen] = useState(false) const [chargeAttack, setChargeAttack] = useState(true) const [fullAuto, setFullAuto] = useState(false) @@ -293,6 +292,14 @@ const PartyDetails = (props: Props) => { toggleDetails() } + function handleClick() { + setAlertOpen(!alertOpen) + } + + function deleteParty() { + props.deleteCallback() + } + function extractYoutubeVideoIds(text: string) { // Initialize an array to store the video IDs const videoIds = [] @@ -381,42 +388,18 @@ const PartyDetails = (props: Props) => { ) } - const deleteButton = () => { + const deleteAlert = () => { if (party.editable) { return ( - - - - - - {t('buttons.delete')} - - - - - - {t('modals.delete_team.title')} - - - {t('modals.delete_team.description')} - -
- - {t('modals.delete_team.buttons.cancel')} - - props.deleteCallback(e)} - > - {t('modals.delete_team.buttons.confirm')} - -
- - - + setAlertOpen(false)} + cancelActionText={t('modals.delete_team.buttons.cancel')} + message={t('modals.delete_team.description')} + /> ) - } else { - return '' } } @@ -553,7 +536,16 @@ const PartyDetails = (props: Props) => {
- {router.pathname !== '/new' ? deleteButton() : ''} + {router.pathname !== '/new' ? ( +
{readOnly} {editable} + {deleteAlert()}
) } From da1bca2c05a92e7b090b0e0f0a766d638227fdd4 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sat, 21 Jan 2023 08:37:11 -0800 Subject: [PATCH 10/12] Fix auth modals --- components/LoginModal/index.scss | 7 ++- components/LoginModal/index.tsx | 53 +++++++++++-------- components/SignupModal/index.scss | 5 +- components/SignupModal/index.tsx | 87 +++++++++++++++++-------------- 4 files changed, 83 insertions(+), 69 deletions(-) diff --git a/components/LoginModal/index.scss b/components/LoginModal/index.scss index c7cfb390..137816e4 100644 --- a/components/LoginModal/index.scss +++ b/components/LoginModal/index.scss @@ -2,11 +2,10 @@ gap: $unit; min-width: $unit * 52; - form { + .Fields { display: flex; flex-direction: column; - gap: calc($unit / 2); - margin-bottom: $unit-3x; - padding: 0 $unit-3x; + gap: $unit; + padding: 0 $unit-4x; } } diff --git a/components/LoginModal/index.tsx b/components/LoginModal/index.tsx index 60252c43..15d485c9 100644 --- a/components/LoginModal/index.tsx +++ b/components/LoginModal/index.tsx @@ -9,7 +9,7 @@ import setUserToken from '~utils/setUserToken' import { accountState } from '~utils/accountState' import Button from '~components/Button' -import Input from '~components/LabelledInput' +import Input from '~components/Input' import { Dialog, DialogTrigger, DialogClose } from '~components/Dialog' import DialogContent from '~components/DialogContent' import changeLanguage from '~utils/changeLanguage' @@ -43,6 +43,7 @@ const LoginModal = () => { // Set up form refs const emailInput: React.RefObject = React.createRef() const passwordInput: React.RefObject = React.createRef() + const footerRef: React.RefObject = React.createRef() const form: React.RefObject[] = [emailInput, passwordInput] function handleChange(event: React.ChangeEvent) { @@ -199,6 +200,7 @@ const LoginModal = () => { @@ -212,29 +214,34 @@ const LoginModal = () => {
- +
+ - - -
+
+
+
+
diff --git a/components/SignupModal/index.scss b/components/SignupModal/index.scss index 595141b9..5bf08462 100644 --- a/components/SignupModal/index.scss +++ b/components/SignupModal/index.scss @@ -2,12 +2,11 @@ gap: $unit; min-width: $unit * 52; - form { + .Fields { display: flex; flex-direction: column; gap: calc($unit / 2); - margin-bottom: $unit-2x; - padding: 0 $unit-3x; + padding: 0 $unit-4x; .terms { color: $grey-50; diff --git a/components/SignupModal/index.tsx b/components/SignupModal/index.tsx index 3c745913..88c96372 100644 --- a/components/SignupModal/index.tsx +++ b/components/SignupModal/index.tsx @@ -9,7 +9,7 @@ import setUserToken from '~utils/setUserToken' import { accountState } from '~utils/accountState' import Button from '~components/Button' -import Input from '~components/LabelledInput' +import Input from '~components/Input' import { Dialog, DialogTrigger, DialogClose } from '~components/Dialog' import DialogContent from '~components/DialogContent' import CrossIcon from '~public/icons/Cross.svg' @@ -49,6 +49,8 @@ const SignupModal = (props: Props) => { const emailInput = React.createRef() const passwordInput = React.createRef() const passwordConfirmationInput = React.createRef() + const footerRef = React.createRef() + const form = [ usernameInput, emailInput, @@ -279,6 +281,7 @@ const SignupModal = (props: Props) => { @@ -292,48 +295,54 @@ const SignupModal = (props: Props) => {
- +
+ - + - + - + +
-
+

{/* From 89908777a24da20c24443dd842584a375d3bfcde Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sat, 21 Jan 2023 09:42:50 -0800 Subject: [PATCH 11/12] Add backdrop-filter for Overlay and animate --- components/Alert/index.scss | 2 ++ components/DialogContent/index.scss | 7 +++++-- components/JobSection/index.tsx | 2 +- components/Overlay/index.scss | 8 ++++++++ styles/globals.scss | 14 ++++++++++++-- styles/variables.scss | 1 + 6 files changed, 29 insertions(+), 5 deletions(-) diff --git a/components/Alert/index.scss b/components/Alert/index.scss index dbcff33a..6a01e10e 100644 --- a/components/Alert/index.scss +++ b/components/Alert/index.scss @@ -11,6 +11,8 @@ } .Alert { + animation: $duration-modal-open cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none + running openModalDesktop; background: var(--dialog-bg); border-radius: $unit; display: flex; diff --git a/components/DialogContent/index.scss b/components/DialogContent/index.scss index 78d89ee6..f3d65773 100644 --- a/components/DialogContent/index.scss +++ b/components/DialogContent/index.scss @@ -1,6 +1,4 @@ .Dialog { - // animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running - // openModalDesktop; position: fixed; background: none; border: 0; @@ -16,9 +14,13 @@ .DialogContent { $multiplier: 4; + animation: $duration-modal-open cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal + none running openModalDesktop; background: var(--dialog-bg); border-radius: $card-corner; box-sizing: border-box; + border: 0.5px solid rgba(0, 0, 0, 0.18); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; gap: $unit * $multiplier; @@ -26,6 +28,7 @@ min-width: $unit * 48; // min-height: $unit-12x; overflow-y: scroll; + height: 80vh; max-height: 80vh; min-width: 580px; max-width: 42vw; diff --git a/components/JobSection/index.tsx b/components/JobSection/index.tsx index e7ec6893..5ff48ed5 100644 --- a/components/JobSection/index.tsx +++ b/components/JobSection/index.tsx @@ -136,7 +136,7 @@ const JobSection = (props: Props) => { ) : ( '' )} -

+
{props.editable ? ( diff --git a/components/Overlay/index.scss b/components/Overlay/index.scss index 6059c821..b94ff228 100644 --- a/components/Overlay/index.scss +++ b/components/Overlay/index.scss @@ -6,6 +6,14 @@ right: 0; bottom: 0; left: 0; + backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0); + animation: 0.24s ease-in fadeInFilter; + animation-fill-mode: forwards; + + &.Job { + animation: none; + backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1); + } &.Visible { background: rgba(0, 0, 0, 0.6); diff --git a/styles/globals.scss b/styles/globals.scss index 562d7797..b0fb3efa 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -291,12 +291,12 @@ i.tag { @keyframes openModalDesktop { 0% { opacity: 0; - transform: translate(-50%, -48%) scale(0.96); + transform: scale(0.96); } 100% { // opacity: 1; - transform: translate(-50%, -50%) scale(1); + transform: scale(1); } } @@ -311,3 +311,13 @@ i.tag { transform: translate(0, 30%); } } + +@keyframes fadeInFilter { + from { + backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0); + } + + to { + backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1); + } +} diff --git a/styles/variables.scss b/styles/variables.scss index 8b05efa9..d7a2f265 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -315,5 +315,6 @@ $hover-stroke: 1px solid rgba(0, 0, 0, 0.1); $hover-shadow: rgba(0, 0, 0, 0.08) 0px 0px 14px; // Durations +$duration-modal-open: 0.48s; $duration-color-fade: 0.24s; $duration-zoom: 0.18s; From 4bb625934bca61de78df79572b3c22ae4b9b2011 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sat, 21 Jan 2023 15:18:43 -0800 Subject: [PATCH 12/12] Remove hardcoded height from dialog Causing issues of course --- components/DialogContent/index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/DialogContent/index.scss b/components/DialogContent/index.scss index f3d65773..42ea3f74 100644 --- a/components/DialogContent/index.scss +++ b/components/DialogContent/index.scss @@ -28,7 +28,7 @@ min-width: $unit * 48; // min-height: $unit-12x; overflow-y: scroll; - height: 80vh; + // height: 80vh; max-height: 80vh; min-width: 580px; max-width: 42vw;