studio/meet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚨(front) fix ui enhancement formats

Browse Source 
Some formatting were forgotten, here is the fix.
This commit is contained in:
Nathan Vasse
2024-11-28 11:36:33 +01:00
parent 0b0efa5bab
commit 0b672ef8da
13 changed files with 359 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/frontend/src/App.tsx
View File

@@ -30,7 +30,7 @@ function App() {
<Route component={NotFoundScreen} />
</Switch>
</Layout>
<ReactQueryDevtools initialIsOpen={false} position="top-left" />
<ReactQueryDevtools initialIsOpen={false} />
</I18nProvider>
</Suspense>
</QueryClientProvider>

10
src/frontend/src/features/home/routes/Home.tsx
View File

@@ -17,7 +17,7 @@ import { MoreLink } from '@/features/home/components/MoreLink'
import { ReactNode, useState } from 'react'
import { css } from '@/styled-system/css'
import { menuRecipe } from '@/primitives/menuRecipe.ts';
import { menuRecipe } from '@/primitives/menuRecipe.ts'
const Columns = ({ children }: { children?: ReactNode }) => {
return (
@@ -173,7 +173,9 @@ export const Home = () => {
</Button>
<RACMenu>
<MenuItem
className={menuRecipe({icon: true, variant: 'light'}).item}
className={
menuRecipe({ icon: true, variant: 'light' }).item
}
onAction={async () => {
const slug = generateRoomId()
createRoom({ slug, username }).then((data) =>
@@ -188,7 +190,9 @@ export const Home = () => {
{t('createMenu.instantOption')}
</MenuItem>
<MenuItem
className={menuRecipe({icon: true, variant: 'light'}).item}
className={
menuRecipe({ icon: true, variant: 'light' }).item
}
onAction={() => {
const slug = generateRoomId()
createRoom({ slug, username }).then((data) =>

2
src/frontend/src/features/rooms/components/Conference.tsx
View File

@@ -109,7 +109,7 @@ export const Conference = ({
video={userConfig.videoEnabled}
connectOptions={connectOptions}
className={css({
backgroundColor: 'primaryDark.50 !important'
backgroundColor: 'primaryDark.50 !important',
})}
>
<VideoConference />

4
src/frontend/src/features/rooms/components/InviteDialog.tsx
View File

@@ -9,7 +9,7 @@ import {
RiCloseLine,
RiFileCopyLine,
RiSpam2Fill,
} from '@remixicon/react';
} from '@remixicon/react'
import { useEffect, useState } from 'react'
// fixme - extract in a proper primitive this dialog without overlay
@@ -92,7 +92,7 @@ export const InviteDialog = ({
</>
) : (
<>
<RiFileCopyLine size={24} style={{ marginRight: '8px' }}/>
<RiFileCopyLine size={24} style={{ marginRight: '8px' }} />
{t('shareDialog.copyButton')}
</>
)}

2
src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx
View File

@@ -9,7 +9,7 @@ import { Dispatch, SetStateAction } from 'react'
import { DialogState } from './OptionsButton'
import { Separator } from '@/primitives/Separator'
import { useSidePanel } from '../../../hooks/useSidePanel'
import { menuRecipe } from '@/primitives/menuRecipe.ts';
import { menuRecipe } from '@/primitives/menuRecipe.ts'
// @todo try refactoring it to use MenuList component
export const OptionsMenuItems = ({

14
src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx
View File

@@ -18,7 +18,7 @@ import { Track } from 'livekit-client'
import { Shortcut } from '@/features/shortcuts/types'
import { ToggleDevice } from '@/features/rooms/livekit/components/controls/ToggleDevice.tsx'
import { css } from '@/styled-system/css';
import { css } from '@/styled-system/css'
export type ToggleSource = Exclude<
Track.Source,
@@ -86,10 +86,12 @@ export const SelectToggleDevice = <T extends ToggleSource>({
const selectLabel = t('choose', { keyPrefix: `join.${config.kind}` })
return (
<div className={css({
display: 'flex',
gap: '1px'
})}>
<div
className={css({
display: 'flex',
gap: '1px',
})}
>
<ToggleDevice {...trackProps} config={config} />
<Menu>
<Button
@@ -97,7 +99,7 @@ export const SelectToggleDevice = <T extends ToggleSource>({
aria-label={selectLabel}
groupPosition="right"
square
variant={trackProps.enabled ? "primaryDark" : "error2"}
variant={trackProps.enabled ? 'primaryDark' : 'error2'}
>
<RiArrowDownSLine />
</Button>

48
src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx
View File

@@ -112,21 +112,21 @@ export function ControlBar({
bottom: 0,
left: 0,
right: 0,
base: {
display: 'flex'
}
display: 'flex',
})}
>
<div className={css({
display: 'flex',
gap: '.5rem',
alignItems: 'center',
lg: {
position: 'absolute',
left: '50%',
transform: 'translateX(-50%)',
},
})}>
<div
className={css({
display: 'flex',
gap: '.5rem',
alignItems: 'center',
lg: {
position: 'absolute',
left: '50%',
transform: 'translateX(-50%)',
},
})}
>
<SelectToggleDevice
source={Track.Source.Microphone}
onChange={microphoneOnChange}
@@ -159,16 +159,18 @@ export function ControlBar({
<LeaveButton />
<StartMediaButton />
</div>
<div className={css({
display: 'flex',
gap: '.5rem',
alignItems: 'center',
marginRight: '6.25rem',
lg: {
position: 'absolute',
right: 0
}
})}>
<div
className={css({
display: 'flex',
gap: '.5rem',
alignItems: 'center',
marginRight: '6.25rem',
lg: {
position: 'absolute',
right: 0,
},
})}
>
<ChatToggle />
<ParticipantsToggle />
</div>

5
src/frontend/src/features/rooms/routes/Feedback.tsx
View File

@@ -28,10 +28,7 @@ export const FeedbackRoute = () => {
<VStack>
<Heading>{t('feedback.heading')}</Heading>
<HStack>
<Button
variant="secondary"
onPress={() => window.history.back()}
>
<Button variant="secondary" onPress={() => window.history.back()}>
{t('feedback.back')}
</Button>
<Button variant="primary" onPress={() => setLocation('/')}>

2
src/frontend/src/layout/Header.tsx
View File

@@ -83,7 +83,7 @@ export const Header = () => {
</span>
</Button>
<MenuList
variant={"light"}
variant={'light'}
items={[{ value: 'logout', label: t('logout') }]}
onAction={(value) => {
if (value === 'logout') {

13
src/frontend/src/primitives/MenuList.tsx
View File

@@ -1,11 +1,7 @@
import { ReactNode } from 'react'
import { Menu, MenuProps, MenuItem } from 'react-aria-components'
import { menuRecipe } from '@/primitives/menuRecipe.ts';
import type { RecipeVariantProps } from '@/styled-system/types';
import { menuRecipe } from '@/primitives/menuRecipe.ts'
import type { RecipeVariantProps } from '@/styled-system/types'
/**
* render a Button primitive that shows a popover showing a list of pressable items
@@ -19,9 +15,10 @@ export const MenuList = <T extends string | number = string>({
onAction: (key: T) => void
selectedItem?: T
items: Array<string | { value: T; label: ReactNode }>
} & MenuProps<unknown> & RecipeVariantProps<typeof menuRecipe>) => {
} & MenuProps<unknown> &
RecipeVariantProps<typeof menuRecipe>) => {
const [variantProps] = menuRecipe.splitVariantProps(menuProps)
const classes = menuRecipe({extraPadding: true, ...variantProps})
const classes = menuRecipe({ extraPadding: true, ...variantProps })
return (
<Menu
selectionMode={selectedItem !== undefined ? 'single' : undefined}

6
src/frontend/src/primitives/Select.tsx
View File

@@ -11,7 +11,7 @@ import {
} from 'react-aria-components'
import { Box } from './Box'
import { StyledPopover } from './Popover'
import { menuRecipe } from '@/primitives/menuRecipe.ts';
import { menuRecipe } from '@/primitives/menuRecipe.ts'
const StyledButton = styled(Button, {
base: {
@@ -75,7 +75,9 @@ export const Select = <T extends string | number>({
<ListBox>
{items.map((item) => (
<ListBoxItem
className={menuRecipe({extraPadding: true, variant: 'light'}).item}
className={
menuRecipe({ extraPadding: true, variant: 'light' }).item
}
id={item.value}
key={item.value}
>

475
src/frontend/src/primitives/buttonRecipe.ts
View File

@@ -1,246 +1,247 @@
import { type RecipeVariantProps, cva } from '@/styled-system/css';
import { type RecipeVariantProps, cva } from '@/styled-system/css'
export type ButtonRecipe = typeof buttonRecipe
export type ButtonRecipeProps = RecipeVariantProps<ButtonRecipe>
export const buttonRecipe = cva({
base: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
transition: 'background 200ms, outline 200ms, border-color 200ms',
cursor: 'pointer',
border: '1px solid transparent',
base: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
transition: 'background 200ms, outline 200ms, border-color 200ms',
cursor: 'pointer',
border: '1px solid transparent',
},
variants: {
size: {
default: {
borderRadius: 4,
paddingX: '1',
paddingY: '0.625',
'--square-padding': '{spacing.0.625}',
},
sm: {
borderRadius: 4,
paddingX: '0.5',
paddingY: '0.25',
'--square-padding': '{spacing.0.25}',
},
xs: {
borderRadius: 4,
'--square-padding': '0',
},
},
variants: {
size: {
default: {
borderRadius: 4,
paddingX: '1',
paddingY: '0.625',
'--square-padding': '{spacing.0.625}',
},
sm: {
borderRadius: 4,
paddingX: '0.5',
paddingY: '0.25',
'--square-padding': '{spacing.0.25}',
},
xs: {
borderRadius: 4,
'--square-padding': '0',
},
},
square: {
true: {
paddingX: 'var(--square-padding)',
paddingY: 'var(--square-padding)',
},
},
variant: {
primary: {
backgroundColor: 'primary.800',
color: 'white',
'&[data-hovered]': {
backgroundColor: 'primary.action',
},
'&[data-pressed]': {
backgroundColor: 'primary.action',
},
'&[data-disabled]': {
backgroundColor: 'greyscale.100',
color: 'greyscale.400',
},
},
secondary: {
backgroundColor: 'white',
color: 'primary.800',
borderColor: 'primary.800',
'&[data-hovered]': {
backgroundColor: 'greyscale.100',
},
'&[data-pressed]': {
backgroundColor: 'greyscale.100',
},
},
secondaryText: {
backgroundColor: 'transparent',
color: 'primary.800',
'&[data-hovered]': {
backgroundColor: 'greyscale.100',
},
'&[data-pressed]': {
backgroundColor: 'greyscale.100',
},
'&[data-disabled]': {
color: 'greyscale.400',
},
},
tertiary: {
backgroundColor: 'primary.100',
color: 'primary.800',
'&[data-hovered]': {
backgroundColor: 'primary.300',
},
'&[data-pressed]': {
backgroundColor: 'primary.300',
},
},
primaryDark: {
backgroundColor: 'primaryDark.100',
color: 'white',
'&[data-pressed]': {
backgroundColor: 'primaryDark.900',
color: 'primaryDark.100'
},
'&[data-hovered]': {
backgroundColor: 'primaryDark.300',
color: 'white',
},
'&[data-selected]': {
backgroundColor: 'primaryDark.900 !important',
color: 'primaryDark.100 !important'
},
},
primaryTextDark: {
backgroundColor: 'transparent',
color: 'primaryDark.800',
'&[data-hovered]': {
backgroundColor: 'primaryDark.100',
},
'&[data-pressed]': {
backgroundColor: 'primaryDark.700',
color: 'primaryDark.100'
},
'&[data-selected]': {
backgroundColor: 'primaryDark.700',
color: 'primaryDark.100'
},
},
greyscale: {
backgroundColor: 'transparent',
color: 'greyscale.400',
'&[data-hovered]': {
color: 'greyscale.800',
},
'&[data-pressed]': {
color: 'greyscale.800',
},
'&[data-selected]': {
color: 'greyscale.800',
},
'&[data-disabled]': {
color: 'greyscale.200',
},
},
danger: {
backgroundColor: 'error.400',
color: 'white',
'&[data-hovered]': {
backgroundColor: 'error.600',
},
'&[data-pressed]': {
backgroundColor: 'error.700',
color: 'error.200',
},
},
error2: {
backgroundColor: 'error.200',
color: 'error.900',
'&[data-hovered]': {
backgroundColor: 'error.300',
},
'&[data-focused]': {
backgroundColor: 'error.200',
},
'&[data-pressed]': {
backgroundColor: 'error.900',
color: 'error.100',
},
'&[data-selected]': {
backgroundColor: 'error.900 !important',
color: 'error.100 !important',
},
'&[data-disabled]': {
backgroundColor: 'error.200',
color: 'error.300',
},
},
// @TODO: better handling of colors… this is a mess
success: {
colorPalette: 'success',
color: 'success.subtle-text',
backgroundColor: 'success.subtle',
'&[data-hovered]': {
backgroundColor: 'success.200',
},
'&[data-pressed]': {
backgroundColor: 'success.subtle!',
},
},
text: {
color: 'primary',
'&[data-hovered]': {
background: 'gray.100 !important',
color: 'primary !important',
},
},
},
invisible: {
true: {
borderColor: 'none!',
backgroundColor: 'none!',
'&[data-hovered]': {
backgroundColor: 'none!',
borderColor: 'colorPalette.active!',
},
'&[data-pressed]': {
borderColor: 'currentcolor',
},
'&[data-disabled]': {
color: 'gray.300',
},
},
},
fullWidth: {
true: {
width: 'full',
},
},
// some toggle buttons make more sense without a "pushed button" style when selected because their content changes to mark the state
shySelected: {},
// if the button is next to other ones to make a "button group", tell where the button is to handle radius
groupPosition: {
left: {
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
},
right: {
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
borderLeft: 0,
},
center: {
borderRadius: 0,
},
},
square: {
true: {
paddingX: 'var(--square-padding)',
paddingY: 'var(--square-padding)',
},
},
compoundVariants: [
{
variant: 'primaryDark',
shySelected: true,
css: {
'&[data-selected]': {
backgroundColor: 'primaryDark.100',
color: 'white'
},
}
}
],
defaultVariants: {
size: 'default',
variant: 'primary',
variant: {
primary: {
backgroundColor: 'primary.800',
color: 'white',
'&[data-hovered]': {
backgroundColor: 'primary.action',
},
'&[data-pressed]': {
backgroundColor: 'primary.action',
},
'&[data-disabled]': {
backgroundColor: 'greyscale.100',
color: 'greyscale.400',
},
},
secondary: {
backgroundColor: 'white',
color: 'primary.800',
borderColor: 'primary.800',
'&[data-hovered]': {
backgroundColor: 'greyscale.100',
},
'&[data-pressed]': {
backgroundColor: 'greyscale.100',
},
},
secondaryText: {
backgroundColor: 'transparent',
color: 'primary.800',
'&[data-hovered]': {
backgroundColor: 'greyscale.100',
},
'&[data-pressed]': {
backgroundColor: 'greyscale.100',
},
'&[data-disabled]': {
color: 'greyscale.400',
},
},
tertiary: {
backgroundColor: 'primary.100',
color: 'primary.800',
'&[data-hovered]': {
backgroundColor: 'primary.300',
},
'&[data-pressed]': {
backgroundColor: 'primary.300',
},
},
primaryDark: {
backgroundColor: 'primaryDark.100',
color: 'white',
'&[data-pressed]': {
backgroundColor: 'primaryDark.900',
color: 'primaryDark.100',
},
'&[data-hovered]': {
backgroundColor: 'primaryDark.300',
color: 'white',
},
'&[data-selected]': {
backgroundColor: 'primaryDark.900 !important',
color: 'primaryDark.100 !important',
},
},
primaryTextDark: {
backgroundColor: 'transparent',
color: 'primaryDark.800',
'&[data-hovered]': {
backgroundColor: 'primaryDark.100',
},
'&[data-pressed]': {
backgroundColor: 'primaryDark.700',
color: 'primaryDark.100',
},
'&[data-selected]': {
backgroundColor: 'primaryDark.700',
color: 'primaryDark.100',
},
},
greyscale: {
backgroundColor: 'transparent',
color: 'greyscale.400',
'&[data-hovered]': {
color: 'greyscale.800',
},
'&[data-pressed]': {
color: 'greyscale.800',
},
'&[data-selected]': {
color: 'greyscale.800',
},
'&[data-disabled]': {
color: 'greyscale.200',
},
},
danger: {
backgroundColor: 'error.400',
color: 'white',
'&[data-hovered]': {
backgroundColor: 'error.600',
},
'&[data-pressed]': {
backgroundColor: 'error.700',
color: 'error.200',
},
},
error2: {
backgroundColor: 'error.200',
color: 'error.900',
'&[data-hovered]': {
backgroundColor: 'error.300',
},
'&[data-focused]': {
backgroundColor: 'error.200',
},
'&[data-pressed]': {
backgroundColor: 'error.900',
color: 'error.100',
},
'&[data-selected]': {
backgroundColor: 'error.900 !important',
color: 'error.100 !important',
},
'&[data-disabled]': {
backgroundColor: 'error.200',
color: 'error.300',
},
},
// @TODO: better handling of colors… this is a mess
success: {
colorPalette: 'success',
color: 'success.subtle-text',
backgroundColor: 'success.subtle',
'&[data-hovered]': {
backgroundColor: 'success.200',
},
'&[data-pressed]': {
backgroundColor: 'success.subtle!',
},
},
text: {
color: 'primary',
'&[data-hovered]': {
background: 'gray.100 !important',
color: 'primary !important',
},
},
},
});
invisible: {
true: {
borderColor: 'none!',
backgroundColor: 'none!',
'&[data-hovered]': {
backgroundColor: 'none!',
borderColor: 'colorPalette.active!',
},
'&[data-pressed]': {
borderColor: 'currentcolor',
},
'&[data-disabled]': {
color: 'gray.300',
},
},
},
fullWidth: {
true: {
width: 'full',
},
},
// some toggle buttons make more sense without a "pushed button" style when selected because their content changes to mark the state
shySelected: {
true: {},
},
// if the button is next to other ones to make a "button group", tell where the button is to handle radius
groupPosition: {
left: {
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
},
right: {
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
borderLeft: 0,
},
center: {
borderRadius: 0,
},
},
},
compoundVariants: [
{
variant: 'primaryDark',
shySelected: true,
css: {
'&[data-selected]': {
backgroundColor: 'primaryDark.100',
color: 'white',
},
},
},
],
defaultVariants: {
size: 'default',
variant: 'primary',
},
})

132
src/frontend/src/primitives/menuRecipe.ts
View File

@@ -1,74 +1,72 @@
import { sva } from '@/styled-system/css';
import { sva } from '@/styled-system/css'
export const menuRecipe = sva({
slots: ['root', 'item'],
base: {
root: { },
slots: ['root', 'item'],
base: {
root: {},
item: {
paddingY: 0.125,
paddingX: 0.5,
textAlign: 'left',
width: 'full',
borderRadius: 4,
cursor: 'pointer',
color: 'box.text',
border: '1px solid transparent',
position: 'relative',
'&[data-selected]': {
'&::before': {
content: '"✓"',
position: 'absolute',
top: '2px',
left: '6px',
},
},
'&[data-focused]': {
color: 'primary.text',
backgroundColor: 'primaryDark.100',
outline: 'none!',
},
'&[data-hovered]': {
color: 'primary.text',
backgroundColor: 'primaryDark.100',
outline: 'none!',
},
},
},
variants: {
variant: {
light: {
item: {
paddingY: 0.125,
paddingX: 0.5,
textAlign: 'left',
width: 'full',
borderRadius: 4,
cursor: 'pointer',
color: 'box.text',
border: '1px solid transparent',
position: 'relative',
'&[data-selected]': {
'&::before': {
content: '"✓"',
position: 'absolute',
top: '2px',
left: '6px',
},
},
'&[data-focused]': {
color: 'primary.text',
backgroundColor: 'primaryDark.100',
outline: 'none!',
},
'&[data-hovered]': {
color: 'primary.text',
backgroundColor: 'primaryDark.100',
outline: 'none!',
},
}
'&[data-focused]': {
backgroundColor: 'primary.800',
},
'&[data-hovered]': {
backgroundColor: 'primary.800',
},
},
},
dark: {},
},
variants: {
variant: {
light: {
item: {
'&[data-focused]': {
backgroundColor: 'primary.800',
},
'&[data-hovered]': {
backgroundColor: 'primary.800',
},
}
},
dark: {
}
},
extraPadding: {
true: {
item: {
paddingLeft: 1.5,
}
},
},
icon: {
true: {
item: {
display: 'flex',
alignItems: 'center',
gap: '1rem',
paddingY: '0.4rem',
}
},
extraPadding: {
true: {
item: {
paddingLeft: 1.5,
},
},
},
defaultVariants: {
variant: 'dark'
}
icon: {
true: {
item: {
display: 'flex',
alignItems: 'center',
gap: '1rem',
paddingY: '0.4rem',
},
},
},
},
defaultVariants: {
variant: 'dark',
},
})