From 668523aa8bc3a021023cb3f55f20934d96d6fe0e Mon Sep 17 00:00:00 2001 From: Emmanuel Pelletier Date: Thu, 25 Jul 2024 14:39:34 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20follow=20antoine's=20r?= =?UTF-8?q?emarks=20on=20homepage=20and=20header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - show the header on homepage. Not sure we want any header on this app actually but I guess he's right since we have one it feels more consistent to have it everywhere - show logged in email in header. ditched it because i didn't quite get the value of showing it all the time in this app but i guess it's better than nothing - remove user info from settings. Since they are back in the header, no need --- src/frontend/panda.config.ts | 1 + .../src/features/home/routes/Home.tsx | 5 +-- .../src/features/rooms/components/Join.tsx | 9 ++++- .../settings/components/SettingsDialog.tsx | 28 +------------- src/frontend/src/layout/Header.tsx | 38 ++++++++++++++++--- src/frontend/src/layout/LoadingScreen.tsx | 2 +- src/frontend/src/locales/de/global.json | 1 + src/frontend/src/locales/de/rooms.json | 6 ++- src/frontend/src/locales/de/settings.json | 5 --- src/frontend/src/locales/en/global.json | 1 + src/frontend/src/locales/en/rooms.json | 6 ++- src/frontend/src/locales/en/settings.json | 7 +--- src/frontend/src/locales/fr/global.json | 1 + src/frontend/src/locales/fr/rooms.json | 6 ++- src/frontend/src/locales/fr/settings.json | 7 +--- src/frontend/src/primitives/A.tsx | 1 + src/frontend/src/primitives/Button.tsx | 26 +++++++------ src/frontend/src/primitives/PopoverList.tsx | 16 ++++++-- src/frontend/src/primitives/Tooltip.tsx | 27 +++++++++++-- 19 files changed, 117 insertions(+), 76 deletions(-) diff --git a/src/frontend/panda.config.ts b/src/frontend/panda.config.ts index 41ba16a9..79f581ff 100644 --- a/src/frontend/panda.config.ts +++ b/src/frontend/panda.config.ts @@ -181,6 +181,7 @@ const config: Config = { active: { value: '{colors.gray.300}' }, text: { value: '{colors.default.text}' }, border: { value: '{colors.gray.500}' }, + subtle: { value: '{colors.gray.400}' }, }, primary: { DEFAULT: { value: '{colors.blue.700}' }, diff --git a/src/frontend/src/features/home/routes/Home.tsx b/src/frontend/src/features/home/routes/Home.tsx index 65187793..f4f9274d 100644 --- a/src/frontend/src/features/home/routes/Home.tsx +++ b/src/frontend/src/features/home/routes/Home.tsx @@ -4,7 +4,6 @@ import { Button, Div, Text, VerticallyOffCenter } from '@/primitives' import { HStack } from '@/styled-system/jsx' import { authUrl, useUser } from '@/features/auth' import { navigateToNewRoom } from '@/features/rooms' -import { SettingsButton } from '@/features/settings' import { Screen } from '@/layout/Screen' import { JoinMeetingDialog } from '../components/JoinMeetingDialog' @@ -12,7 +11,7 @@ export const Home = () => { const { t } = useTranslation('home') const { isLoggedIn } = useUser() return ( - +
@@ -41,8 +40,6 @@ export const Home = () => { - -
diff --git a/src/frontend/src/features/rooms/components/Join.tsx b/src/frontend/src/features/rooms/components/Join.tsx index ed79076e..03da5a4e 100644 --- a/src/frontend/src/features/rooms/components/Join.tsx +++ b/src/frontend/src/features/rooms/components/Join.tsx @@ -11,7 +11,14 @@ export const Join = ({ return ( - + ) } diff --git a/src/frontend/src/features/settings/components/SettingsDialog.tsx b/src/frontend/src/features/settings/components/SettingsDialog.tsx index 03689c35..69a65182 100644 --- a/src/frontend/src/features/settings/components/SettingsDialog.tsx +++ b/src/frontend/src/features/settings/components/SettingsDialog.tsx @@ -1,36 +1,12 @@ -import { Trans, useTranslation } from 'react-i18next' +import { useTranslation } from 'react-i18next' import { useLanguageLabels } from '@/i18n/useLanguageLabels' -import { A, Badge, Dialog, Field, H, P } from '@/primitives' -import { authUrl, logoutUrl, useUser } from '@/features/auth' +import { Dialog, Field, H } from '@/primitives' export const SettingsDialog = () => { const { t, i18n } = useTranslation('settings') - const { user, isLoggedIn } = useUser() const { languagesList, currentLanguage } = useLanguageLabels() return ( - {t('account.heading')} - {isLoggedIn ? ( - <> -

- ]} - /> -

-

- {t('logout', { ns: 'global' })} -

- - ) : ( - <> -

{t('account.youAreNotLoggedIn')}

-

- {t('login', { ns: 'global' })} -

- - )} {t('language.heading')} { const { t } = useTranslation() + const isHome = window.location.pathname === '/' + const { user, isLoggedIn } = useUser() + return (
@@ -26,7 +29,32 @@ export const Header = () => {
diff --git a/src/frontend/src/layout/LoadingScreen.tsx b/src/frontend/src/layout/LoadingScreen.tsx index eb2fee0b..167c6205 100644 --- a/src/frontend/src/layout/LoadingScreen.tsx +++ b/src/frontend/src/layout/LoadingScreen.tsx @@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next' import { BoxScreen } from './BoxScreen' import { Screen } from './Screen' import { VerticallyOffCenter } from '@/primitives' -import { Center, Container } from '@/styled-system/jsx' +import { Center } from '@/styled-system/jsx' export const LoadingScreen = ({ asBox = false, diff --git a/src/frontend/src/locales/de/global.json b/src/frontend/src/locales/de/global.json index bbcbc161..5e902bab 100644 --- a/src/frontend/src/locales/de/global.json +++ b/src/frontend/src/locales/de/global.json @@ -14,6 +14,7 @@ "popoverLabel": "" }, "loading": "", + "loggedInUserTooltip": "", "login": "Anmelden", "logout": "", "notFound": { diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index 08e25206..df55de10 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -1,5 +1,9 @@ { "join": { - "heading": "" + "camlabel": "", + "heading": "", + "joinLabel": "", + "micLabel": "", + "userLabel": "" } } diff --git a/src/frontend/src/locales/de/settings.json b/src/frontend/src/locales/de/settings.json index 65808b8c..8b402ca9 100644 --- a/src/frontend/src/locales/de/settings.json +++ b/src/frontend/src/locales/de/settings.json @@ -1,9 +1,4 @@ { - "account": { - "currentlyLoggedAs": "", - "heading": "", - "youAreNotLoggedIn": "" - }, "dialog": { "heading": "" }, diff --git a/src/frontend/src/locales/en/global.json b/src/frontend/src/locales/en/global.json index 9b376015..6cfcb6ec 100644 --- a/src/frontend/src/locales/en/global.json +++ b/src/frontend/src/locales/en/global.json @@ -14,6 +14,7 @@ "popoverLabel": "Choose language" }, "loading": "Loading…", + "loggedInUserTooltip": "Logged in as…", "login": "Login", "logout": "Logout", "notFound": { diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index 3667050b..17202997 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/src/frontend/src/locales/en/rooms.json @@ -1,5 +1,9 @@ { "join": { - "heading": "Verify your settings before joining" + "camlabel": "Camera", + "heading": "Join the meeting", + "joinLabel": "Join", + "micLabel": "Microphone", + "userLabel": "Your name" } } diff --git a/src/frontend/src/locales/en/settings.json b/src/frontend/src/locales/en/settings.json index 0e23bb68..e10ef8c5 100644 --- a/src/frontend/src/locales/en/settings.json +++ b/src/frontend/src/locales/en/settings.json @@ -1,11 +1,6 @@ { - "account": { - "currentlyLoggedAs": "You are currently logged in as <0>{{user}}", - "heading": "Account", - "youAreNotLoggedIn": "You are not logged in." - }, "dialog": { - "heading": "Account and settings" + "heading": "Settings" }, "language": { "heading": "Language", diff --git a/src/frontend/src/locales/fr/global.json b/src/frontend/src/locales/fr/global.json index 65630b4a..63b477a3 100644 --- a/src/frontend/src/locales/fr/global.json +++ b/src/frontend/src/locales/fr/global.json @@ -14,6 +14,7 @@ "popoverLabel": "Choix de la langue" }, "loading": "Chargement…", + "loggedInUserTooltip": "Connecté en tant que…", "login": "Se connecter", "logout": "Se déconnecter", "notFound": { diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index 1a7dbae0..4a2184d6 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/src/frontend/src/locales/fr/rooms.json @@ -1,5 +1,9 @@ { "join": { - "heading": "Vérifiez vos paramètres" + "camlabel": "Webcam", + "heading": "Rejoindre la réunion", + "joinLabel": "Rejoindre", + "micLabel": "Micro", + "userLabel": "Votre nom" } } diff --git a/src/frontend/src/locales/fr/settings.json b/src/frontend/src/locales/fr/settings.json index 72e42066..a9c260e1 100644 --- a/src/frontend/src/locales/fr/settings.json +++ b/src/frontend/src/locales/fr/settings.json @@ -1,11 +1,6 @@ { - "account": { - "currentlyLoggedAs": "Vous êtes actuellement connecté en tant que <0>{{user}}", - "heading": "Compte", - "youAreNotLoggedIn": "Vous n'êtes pas connecté." - }, "dialog": { - "heading": "Compte et paramètres" + "heading": "Paramètres" }, "language": { "heading": "Langue", diff --git a/src/frontend/src/primitives/A.tsx b/src/frontend/src/primitives/A.tsx index 6a032062..5e223780 100644 --- a/src/frontend/src/primitives/A.tsx +++ b/src/frontend/src/primitives/A.tsx @@ -7,6 +7,7 @@ const link = cva({ textUnderlineOffset: '2', cursor: 'pointer', borderRadius: 2, + transition: 'all 0.2s', '&[data-hovered]': { textDecoration: 'none', }, diff --git a/src/frontend/src/primitives/Button.tsx b/src/frontend/src/primitives/Button.tsx index 32033cc1..53d93e4c 100644 --- a/src/frontend/src/primitives/Button.tsx +++ b/src/frontend/src/primitives/Button.tsx @@ -7,7 +7,7 @@ import { LinkProps, } from 'react-aria-components' import { cva, type RecipeVariantProps } from '@/styled-system/css' -import { Tooltip, TooltipArrow } from './Tooltip' +import { Tooltip } from './Tooltip' const button = cva({ base: { @@ -76,7 +76,7 @@ const button = cva({ backgroundColor: 'none!', '&[data-hovered]': { backgroundColor: 'none!', - borderColor: 'currentcolor', + borderColor: 'colorPalette.active!', }, '&[data-pressed]': { borderColor: 'currentcolor', @@ -93,6 +93,7 @@ const button = cva({ type Tooltip = { tooltip?: string + tooltipType?: 'instant' | 'delayed' } export type ButtonProps = RecipeVariantProps & RACButtonsProps & @@ -102,17 +103,21 @@ type LinkButtonProps = RecipeVariantProps & LinkProps & Tooltip type ButtonOrLinkProps = ButtonProps | LinkButtonProps -export const Button = ({ tooltip, ...props }: ButtonOrLinkProps) => { +export const Button = ({ + tooltip, + tooltipType = 'instant', + ...props +}: ButtonOrLinkProps) => { const [variantProps, componentProps] = button.splitVariantProps(props) if ((props as LinkButtonProps).href !== undefined) { return ( - + ) } return ( - + { const TooltipWrapper = ({ tooltip, + tooltipType, children, }: { - tooltip?: string children: ReactNode -}) => { +} & Tooltip) => { return tooltip ? ( - + {children} - - - {tooltip} - + {tooltip} ) : ( children diff --git a/src/frontend/src/primitives/PopoverList.tsx b/src/frontend/src/primitives/PopoverList.tsx index 5009a6b8..61d74fc4 100644 --- a/src/frontend/src/primitives/PopoverList.tsx +++ b/src/frontend/src/primitives/PopoverList.tsx @@ -14,10 +14,20 @@ const ListItem = styled(Button, { width: 'full', borderRadius: 4, cursor: 'pointer', - color: 'primary', + color: 'box.text', + border: '1px solid transparent', + '&[data-selected]': { + fontWeight: 'bold', + }, + '&[data-focused]': { + color: 'primary.text', + backgroundColor: 'primary', + outline: 'none!', + }, '&[data-hovered]': { - color: 'primary.subtle-text', - backgroundColor: 'primary.subtle', + color: 'primary.text', + backgroundColor: 'primary', + outline: 'none!', }, }, }) diff --git a/src/frontend/src/primitives/Tooltip.tsx b/src/frontend/src/primitives/Tooltip.tsx index 8c1a659b..2faf6d55 100644 --- a/src/frontend/src/primitives/Tooltip.tsx +++ b/src/frontend/src/primitives/Tooltip.tsx @@ -1,4 +1,9 @@ -import { OverlayArrow, Tooltip as RACTooltip } from 'react-aria-components' +import { type ReactNode } from 'react' +import { + OverlayArrow, + Tooltip as RACTooltip, + TooltipProps, +} from 'react-aria-components' import { styled } from '@/styled-system/jsx' /** @@ -9,7 +14,7 @@ import { styled } from '@/styled-system/jsx' * * Style taken from example at https://react-spectrum.adobe.com/react-aria/Tooltip.html */ -export const Tooltip = styled(RACTooltip, { +const StyledTooltip = styled(RACTooltip, { base: { boxShadow: '0 8px 20px rgba(0 0 0 / 0.1)', borderRadius: '4px', @@ -18,7 +23,9 @@ export const Tooltip = styled(RACTooltip, { forcedColorAdjust: 'none', outline: 'none', padding: '2px 8px', - maxWidth: '150px', + maxWidth: '200px', + textAlign: 'center', + fontSize: 14, transform: 'translate3d(0, 0, 0)', '&[data-placement=top]': { marginBottom: '8px', @@ -63,7 +70,7 @@ const StyledOverlayArrow = styled(OverlayArrow, { }, }) -export const TooltipArrow = () => { +const TooltipArrow = () => { return ( @@ -72,3 +79,15 @@ export const TooltipArrow = () => { ) } + +export const Tooltip = ({ + children, + ...props +}: Omit & { children: ReactNode }) => { + return ( + + + {children} + + ) +}