🚨(front) fix ui enhancement formats

Some formatting were forgotten, here is the fix.

src/frontend/src/App.tsx

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

src/frontend/src/features/home/routes/Home.tsx

@@ -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) =>

src/frontend/src/features/rooms/components/Conference.tsx

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

src/frontend/src/features/rooms/components/InviteDialog.tsx

@@ -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

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

@@ -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 = ({

src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx

@@ -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({
+    <div
+      className={css({
         display: 'flex',
-      gap: '1px'
+        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>

src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx

@@ -112,12 +112,11 @@ export function ControlBar({
         bottom: 0,
         left: 0,
         right: 0,
-        base: {
+        display: 'flex',
-          display: 'flex'
-        }
       })}
     >
-      <div className={css({
+      <div
+        className={css({
           display: 'flex',
           gap: '.5rem',
           alignItems: 'center',
@@ -126,7 +125,8 @@ export function ControlBar({
             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({
+      <div
+        className={css({
           display: 'flex',
           gap: '.5rem',
           alignItems: 'center',
           marginRight: '6.25rem',
           lg: {
             position: 'absolute',
-          right: 0
+            right: 0,
-        }
+          },
-      })}>
+        })}
+      >
         <ChatToggle />
         <ParticipantsToggle />
       </div>

src/frontend/src/features/rooms/routes/Feedback.tsx

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

src/frontend/src/layout/Header.tsx

@@ -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') {

src/frontend/src/primitives/MenuList.tsx

@@ -1,11 +1,7 @@
 import { ReactNode } from 'react'
 import { Menu, MenuProps, MenuItem } from 'react-aria-components'
-import { menuRecipe } from '@/primitives/menuRecipe.ts';
+import { menuRecipe } from '@/primitives/menuRecipe.ts'
-import type { RecipeVariantProps } from '@/styled-system/types';
+import type { RecipeVariantProps } from '@/styled-system/types'
-
-
-
-
 
 /**
  * render a Button primitive that shows a popover showing a list of pressable items
@@ -19,7 +15,8 @@ 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 })
   return (

src/frontend/src/primitives/Select.tsx

@@ -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}
               >

src/frontend/src/primitives/buttonRecipe.ts

@@ -1,4 +1,4 @@
-import { type RecipeVariantProps, cva } from '@/styled-system/css';
+import { type RecipeVariantProps, cva } from '@/styled-system/css'
 
 export type ButtonRecipe = typeof buttonRecipe
 
@@ -92,7 +92,7 @@ export const buttonRecipe = cva({
         color: 'white',
         '&[data-pressed]': {
           backgroundColor: 'primaryDark.900',
-                    color: 'primaryDark.100'
+          color: 'primaryDark.100',
         },
         '&[data-hovered]': {
           backgroundColor: 'primaryDark.300',
@@ -100,7 +100,7 @@ export const buttonRecipe = cva({
         },
         '&[data-selected]': {
           backgroundColor: 'primaryDark.900 !important',
-                    color: 'primaryDark.100 !important'
+          color: 'primaryDark.100 !important',
         },
       },
       primaryTextDark: {
@@ -111,11 +111,11 @@ export const buttonRecipe = cva({
         },
         '&[data-pressed]': {
           backgroundColor: 'primaryDark.700',
-                    color: 'primaryDark.100'
+          color: 'primaryDark.100',
         },
         '&[data-selected]': {
           backgroundColor: 'primaryDark.700',
-                    color: 'primaryDark.100'
+          color: 'primaryDark.100',
         },
       },
       greyscale: {
@@ -209,7 +209,9 @@ export const buttonRecipe = cva({
       },
     },
     // some toggle buttons make more sense without a "pushed button" style when selected because their content changes to mark the state
-        shySelected: {},
+    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: {
@@ -233,14 +235,13 @@ export const buttonRecipe = cva({
       css: {
         '&[data-selected]': {
           backgroundColor: 'primaryDark.100',
-                    color: 'white'
+          color: 'white',
+        },
+      },
     },
-            }
-        }
   ],
   defaultVariants: {
     size: 'default',
     variant: 'primary',
   },
-});
+})
-

src/frontend/src/primitives/menuRecipe.ts

@@ -1,4 +1,4 @@
-import { sva } from '@/styled-system/css';
+import { sva } from '@/styled-system/css'
 
 export const menuRecipe = sva({
   slots: ['root', 'item'],
@@ -32,7 +32,7 @@ export const menuRecipe = sva({
         backgroundColor: 'primaryDark.100',
         outline: 'none!',
       },
-        }
+    },
   },
   variants: {
     variant: {
@@ -44,17 +44,15 @@ export const menuRecipe = sva({
           '&[data-hovered]': {
             backgroundColor: 'primary.800',
           },
-                }
         },
-            dark: {
+      },
-
+      dark: {},
-            }
     },
     extraPadding: {
       true: {
         item: {
           paddingLeft: 1.5,
-                }
+        },
       },
     },
     icon: {
@@ -64,11 +62,11 @@ export const menuRecipe = sva({
           alignItems: 'center',
           gap: '1rem',
           paddingY: '0.4rem',
-                }
+        },
       },
     },
   },
   defaultVariants: {
-        variant: 'dark'
+    variant: 'dark',
-    }
+  },
 })