reformat v3

uzh-bf · Aug 27, 2024 · 3584705 · 3584705
1 parent 3fcadc7
commit 3584705
Show file tree

Hide file tree

Showing 227 changed files with 27,694 additions and 4,221 deletions.
diff --git a/apps/auth/src/pages/index.tsx b/apps/auth/src/pages/index.tsx
@@ -77,7 +77,7 @@ function SignInOutButton() {
 
   return (
     <div className="flex flex-col gap-4">
-      <p className="px-3 py-2 rounded shadow bg-slate-100 border-slate-300">
+      <p className="rounded border-slate-300 bg-slate-100 px-3 py-2 shadow">
         {t('auth.loginInfo')}
       </p>
       <Checkbox
@@ -124,7 +124,7 @@ function SignInOutButton() {
       )}
       <Button
         className={{
-          root: 'disabled:opacity-50 justify-center italic',
+          root: 'justify-center italic disabled:opacity-50',
         }}
         disabled={!tosChecked}
         data={{ cy: 'delegated-login-button' }}
@@ -147,9 +147,9 @@ export function Index() {
   const t = useTranslations()
 
   return (
-    <div className="m-auto flex w-full md:max-w-2xl flex-grow flex-col md:!flex-grow-0 md:rounded-lg md:border md:shadow">
-      <div className="flex flex-col items-center justify-center flex-1 gap-8 md:p-8">
-        <div className="w-full px-5 pb-4 text-center border-b sm:px-8">
+    <div className="m-auto flex w-full flex-grow flex-col md:max-w-2xl md:!flex-grow-0 md:rounded-lg md:border md:shadow">
+      <div className="flex flex-1 flex-col items-center justify-center gap-8 md:p-8">
+        <div className="w-full border-b px-5 pb-4 text-center sm:px-8">
           <Image
             src="/KlickerLogo.png"
             width={300}
@@ -159,7 +159,7 @@ export function Index() {
             data-cy="login-logo"
           />
         </div>
-        <div className="flex flex-row justify-between w-full px-6 sm:px-10 md:mx-0">
+        <div className="flex w-full flex-row justify-between px-6 sm:px-10 md:mx-0">
           <H1 className={{ root: 'mb-0' }}>{t('auth.authentication')}</H1>
           <div>
             <LanguageChanger
@@ -177,7 +177,7 @@ export function Index() {
           <SignInOutButton />
         </div>
       </div>
-      <div className="flex-none w-full">
+      <div className="w-full flex-none">
         <Footer className="!text-xs" />
       </div>
     </div>

diff --git a/apps/frontend-control/src/components/Layout.tsx b/apps/frontend-control/src/components/Layout.tsx
@@ -30,7 +30,7 @@ function Layout({ title, children, sessionId, className }: LayoutProps) {
   }
 
   return (
-    <div className="flex flex-col w-full h-full">
+    <div className="flex h-full w-full flex-col">
       <Head>
         <title>KlickerUZH Controller {title}</title>
         <meta
@@ -40,16 +40,16 @@ function Layout({ title, children, sessionId, className }: LayoutProps) {
         ></meta>
       </Head>
 
-      <div className={twMerge('h-full overflow-y-none', className)}>
+      <div className={twMerge('overflow-y-none h-full', className)}>
         <div className="fixed top-0 z-10 w-full">
           <Header title={title} />
         </div>
 
-        <div className="flex flex-col p-4 mt-11 mb-12 md:mb-0 overflow-y-auto [height:_calc(100%-5.75rem)] md:[height:_calc(100%-2.75rem)]">
+        <div className="mb-12 mt-11 flex flex-col overflow-y-auto p-4 [height:_calc(100%-5.75rem)] md:mb-0 md:[height:_calc(100%-2.75rem)]">
           {children}
         </div>
 
-        <div className="fixed bottom-0 w-full h-12 md:hidden">
+        <div className="fixed bottom-0 h-12 w-full md:hidden">
           <MobileMenuBar sessionId={sessionId} />
         </div>
       </div>

diff --git a/apps/frontend-control/src/components/common/ListButton.tsx b/apps/frontend-control/src/components/common/ListButton.tsx
@@ -44,7 +44,7 @@ function ListButton({
       onClick={onClick ? onClick : () => router.push(link)}
       className={{
         root: twMerge(
-          'p-2 border border-solid rounded-md bg-uzh-grey-40 border-uzh-grey-100 w-full',
+          'bg-uzh-grey-40 border-uzh-grey-100 w-full rounded-md border border-solid p-2',
           className?.root
         ),
       }}

diff --git a/apps/frontend-control/src/components/common/LoginForm.tsx b/apps/frontend-control/src/components/common/LoginForm.tsx
@@ -57,9 +57,9 @@ export function LoginForm({
   }
 
   return (
-    <div className="flex flex-col flex-grow max-w-xl md:!flex-grow-0 md:border md:rounded-lg md:shadow">
-      <div className="flex flex-col items-center justify-center flex-1 md:p-12">
-        <div className="w-full mb-8 text-center sm:mb-12">
+    <div className="flex max-w-xl flex-grow flex-col md:!flex-grow-0 md:rounded-lg md:border md:shadow">
+      <div className="flex flex-1 flex-col items-center justify-center md:p-12">
+        <div className="mb-8 w-full text-center sm:mb-12">
           <Image
             src="/KlickerLogo.png"
             width={300}
@@ -91,7 +91,7 @@ export function LoginForm({
 
             <div className="flex flex-row justify-between">
               <Button
-                className={{ root: 'mt-2 border-uzh-grey-80' }}
+                className={{ root: 'border-uzh-grey-80 mt-2' }}
                 type="submit"
                 disabled={isSubmitting}
                 data={{ cy: 'submit-login' }}
@@ -101,11 +101,11 @@ export function LoginForm({
             </div>
 
             {installAndroid && onChrome && (
-              <div className="flex flex-col justify-center mt-4 md:hidden">
+              <div className="mt-4 flex flex-col justify-center md:hidden">
                 <UserNotification type="info" message={installAndroid}>
                   <Button
                     className={{
-                      root: 'mt-2 w-fit border-uzh-grey-80',
+                      root: 'border-uzh-grey-80 mt-2 w-fit',
                     }}
                     onClick={onInstallClick}
                     data={{ cy: 'install-control-pwa' }}
@@ -127,7 +127,7 @@ export function LoginForm({
           </Form>
         </div>
       </div>
-      <div className="flex-none w-full">
+      <div className="w-full flex-none">
         <Footer />
       </div>
     </div>

diff --git a/apps/frontend-control/src/components/layout/Header.tsx b/apps/frontend-control/src/components/layout/Header.tsx
@@ -15,8 +15,8 @@ function Header({ title }: HeaderProps) {
   const [logoutUser] = useMutation(LogoutUserDocument)
 
   return (
-    <div className="fixed top-0 flex flex-row items-center justify-between w-full px-2 text-white h-11 md:px-4 bg-slate-800">
-      <div className="text-lg font-bold line-clamp-1">{title}</div>
+    <div className="fixed top-0 flex h-11 w-full flex-row items-center justify-between bg-slate-800 px-2 text-white md:px-4">
+      <div className="line-clamp-1 text-lg font-bold">{title}</div>
       <div className="flex flex-row gap-4">
         <Select
           value={router.locale}
@@ -31,7 +31,7 @@ function Header({ title }: HeaderProps) {
           }
           className={{
             trigger:
-              'text-white border-b border-solid p-0.5 pb-0 rounded-none hover:bg-transparent hover:text-white',
+              'rounded-none border-b border-solid p-0.5 pb-0 text-white hover:bg-transparent hover:text-white',
           }}
           data={{ cy: 'language-select' }}
           basic

diff --git a/apps/frontend-control/src/components/layout/MenuButton.tsx b/apps/frontend-control/src/components/layout/MenuButton.tsx
@@ -29,8 +29,8 @@ function MenuButton({
     <Button
       className={{
         root: twMerge(
-          'flex justify-center flex-1 my-0.5 flex-col gap-0 bg-grey-60 border-0 shadow-none text-white',
-          disabled && 'cursor-not-allowed text-uzh-grey-100',
+          'bg-grey-60 my-0.5 flex flex-1 flex-col justify-center gap-0 border-0 text-white shadow-none',
+          disabled && 'text-uzh-grey-100 cursor-not-allowed',
           className?.root
         ),
       }}

diff --git a/apps/frontend-control/src/components/layout/MobileMenuBar.tsx b/apps/frontend-control/src/components/layout/MobileMenuBar.tsx
@@ -20,8 +20,8 @@ function MobileMenuBar({ sessionId }: MobileMenuBarProps) {
   const [embedModalOpen, setEmbedModalOpen] = useState<boolean>(false)
 
   return (
-    <div className="fixed bottom-0 w-full h-12 bg-slate-800">
-      <div className="flex flex-row justify-between h-full">
+    <div className="fixed bottom-0 h-12 w-full bg-slate-800">
+      <div className="flex h-full flex-row justify-between">
         <MenuButton
           icon={<FontAwesomeIcon icon={faArrowLeftLong} />}
           onClick={() => router.back()}

diff --git a/apps/frontend-control/src/components/sessions/EmbeddingModal.tsx b/apps/frontend-control/src/components/sessions/EmbeddingModal.tsx
@@ -40,7 +40,7 @@ function LazyHMACLink({
   }`
 
   return (
-    <div className="flex flex-row items-center gap-3 px-1.5 py-0.5 mr-2 border border-solid rounded bg-uzh-grey-40">
+    <div className="bg-uzh-grey-40 mr-2 flex flex-row items-center gap-3 rounded border border-solid px-1.5 py-0.5">
       <FontAwesomeIcon
         icon={faClipboard}
         className="hover:cursor-pointer"
@@ -84,7 +84,7 @@ function EmbeddingModal({ open, setOpen, sessionId }: EmbeddingModalProps) {
       }
       className={{
         content:
-          'h-max max-h-[calc(100%-5rem)] overflow-y-scroll w-full md:w-max md:min-w-[30rem] my-auto mx-auto',
+          'mx-auto my-auto h-max max-h-[calc(100%-5rem)] w-full overflow-y-scroll md:w-max md:min-w-[30rem]',
       }}
       hideCloseButton
     >
@@ -93,10 +93,10 @@ function EmbeddingModal({ open, setOpen, sessionId }: EmbeddingModalProps) {
         {questions?.map((question: any, ix: number) => {
           return (
             <div key={question.id}>
-              <div className="w-full font-bold line-clamp-1">{`${ix + 1}. ${
+              <div className="line-clamp-1 w-full font-bold">{`${ix + 1}. ${
                 question.questionData.name
               }`}</div>
-              <div className="flex flex-row items-center gap-3 px-1.5 py-0.5 mr-2 border border-solid rounded bg-uzh-grey-40">
+              <div className="bg-uzh-grey-40 mr-2 flex flex-row items-center gap-3 rounded border border-solid px-1.5 py-0.5">
                 <LazyHMACLink
                   sessionId={sessionId}
                   params={`questionIx=${ix}`}
@@ -107,7 +107,7 @@ function EmbeddingModal({ open, setOpen, sessionId }: EmbeddingModalProps) {
         })}
       </div>
       <div className="mt-3">
-        <div className="font-bold w-30">{t('shared.generic.leaderboard')}:</div>
+        <div className="w-30 font-bold">{t('shared.generic.leaderboard')}:</div>
         <LazyHMACLink sessionId={sessionId} params={`leaderboard=true`} />
       </div>
     </Modal>

diff --git a/apps/frontend-control/src/components/sessions/SessionBlock.tsx b/apps/frontend-control/src/components/sessions/SessionBlock.tsx
@@ -47,13 +47,13 @@ function SessionBlock({ block, active = false }: SessionBlockProps) {
   return (
     <div
       className={twMerge(
-        'mb-2 border border-solid rounded-md border-uzh-grey-100',
+        'border-uzh-grey-100 mb-2 rounded-md border border-solid',
         active && 'border-uzh-darkgreen-80'
       )}
     >
       <div
         className={twMerge(
-          'flex flex-row justify-between p-1 bg-uzh-grey-40',
+          'bg-uzh-grey-40 flex flex-row justify-between p-1',
           active && 'bg-green-300'
         )}
       >

diff --git a/apps/frontend-control/src/components/sessions/SessionLists.tsx b/apps/frontend-control/src/components/sessions/SessionLists.tsx
@@ -46,7 +46,7 @@ function SessionLists({ runningSessions, plannedSessions }: SessionListsProps) {
                   setSessionId(session.id)
                 }}
                 className={{
-                  root: 'h-full p-2 border border-solid rounded-md bg-uzh-grey-40 border-uzh-grey-100',
+                  root: 'bg-uzh-grey-40 border-uzh-grey-100 h-full rounded-md border border-solid p-2',
                 }}
                 data={{ cy: `ppt-link-${session.name}` }}
               >
@@ -87,7 +87,7 @@ function SessionLists({ runningSessions, plannedSessions }: SessionListsProps) {
                   setSessionId(session.id)
                 }}
                 className={{
-                  root: 'h-full p-2 border border-solid rounded-md bg-uzh-grey-40 border-uzh-grey-100',
+                  root: 'bg-uzh-grey-40 border-uzh-grey-100 h-full rounded-md border border-solid p-2',
                 }}
                 data={{ cy: `ppt-link-${session.name}` }}
               >

diff --git a/apps/frontend-control/src/components/sessions/StartModal.tsx b/apps/frontend-control/src/components/sessions/StartModal.tsx
@@ -41,7 +41,7 @@ function StartModal({
             }
           }}
           className={{
-            root: 'text-white bg-primary-80',
+            root: 'bg-primary-80 text-white',
           }}
           data={{
             cy: 'confirm-start-session',
@@ -58,11 +58,11 @@ function StartModal({
           {t('shared.generic.cancel')}
         </Button>
       }
-      className={{ content: 'h-max w-max md:min-w-[30rem] my-auto mx-auto' }}
+      className={{ content: 'mx-auto my-auto h-max w-max md:min-w-[30rem]' }}
       hideCloseButton
     >
       <H3>{t('control.course.startSession')}</H3>
-      <div className="p-2 border border-solid rounded border-uzh-grey-100 bg-uzh-grey-20">
+      <div className="border-uzh-grey-100 bg-uzh-grey-20 rounded border border-solid p-2">
         {t('control.course.confirmStartSession')}
         <div className="font-bold">{startName}</div>
       </div>

diff --git a/apps/frontend-control/src/pages/404.tsx b/apps/frontend-control/src/pages/404.tsx
@@ -6,9 +6,9 @@ import Layout from '../components/Layout'
 function MissingPage() {
   return (
     <Layout title="KlickerUZH">
-      <div className="flex flex-col items-center gap-4 mt-10 text-center">
-        <div className="flex flex-row items-center gap-4 text-2xl text-red-600 sm:gap-6 md:gap-8 sm:text-3xl md:text-4xl">
-          <FontAwesomeIcon icon={faBan} className="h-14 sm:h-18 md:h-20" />
+      <div className="mt-10 flex flex-col items-center gap-4 text-center">
+        <div className="flex flex-row items-center gap-4 text-2xl text-red-600 sm:gap-6 sm:text-3xl md:gap-8 md:text-4xl">
+          <FontAwesomeIcon icon={faBan} className="sm:h-18 h-14 md:h-20" />
           <div>404 Page not found</div>
         </div>
         <div className="max-w-[90%] sm:max-w-[70%] md:max-w-[35rem]">

diff --git a/apps/frontend-control/src/pages/index.tsx b/apps/frontend-control/src/pages/index.tsx
@@ -39,7 +39,7 @@ function Index() {
 
   return (
     <Layout title={t('control.home.courseSelection')}>
-      <div className="flex flex-col w-full gap-4">
+      <div className="flex w-full flex-col gap-4">
         {dataCourses?.controlCourses && (
           <div>
             <H4>{t('control.home.selectCourse')}</H4>

diff --git a/apps/frontend-control/src/pages/login.tsx b/apps/frontend-control/src/pages/login.tsx
@@ -21,7 +21,7 @@ function Login() {
   })
 
   return (
-    <div className="flex flex-col items-center h-full md:justify-center">
+    <div className="flex h-full flex-col items-center md:justify-center">
       <Formik
         isInitialValid={false}
         initialValues={{ shortname: '', token: '' }}

diff --git a/apps/frontend-control/src/pages/session/[id].tsx b/apps/frontend-control/src/pages/session/[id].tsx
@@ -122,10 +122,10 @@ function RunningSession() {
             {typeof currentBlockOrder !== 'undefined' &&
               nextBlockOrder !== -1 &&
               nextBlockOrder < blocks.length && (
-                <div className="flex flex-col gap-2 mt-2">
+                <div className="mt-2 flex flex-col gap-2">
                   <FontAwesomeIcon
                     icon={faArrowDown}
-                    className="w-full mx-auto"
+                    className="mx-auto w-full"
                     size="2xl"
                   />
 
@@ -165,7 +165,7 @@ function RunningSession() {
               <FontAwesomeIcon
                 icon={faEllipsis}
                 size="2xl"
-                className="w-full mx-auto"
+                className="mx-auto w-full"
               />
             )}
             <SessionBlock
@@ -179,7 +179,7 @@ function RunningSession() {
               <FontAwesomeIcon
                 icon={faEllipsis}
                 size="2xl"
-                className="w-full mx-auto"
+                className="mx-auto w-full"
               />
             )}
             <Button
@@ -198,7 +198,7 @@ function RunningSession() {
                 }
               }}
               className={{
-                root: 'float-right text-white bg-primary-80',
+                root: 'bg-primary-80 float-right text-white',
               }}
               data={{ cy: 'activate-next-block' }}
             >
@@ -222,7 +222,7 @@ function RunningSession() {
                 )
               }}
               className={{
-                root: 'float-right text-white bg-uzh-red-100',
+                root: 'bg-uzh-red-100 float-right text-white',
               }}
               data={{ cy: 'end-session' }}
             >

diff --git a/apps/frontend-manage/src/components/Layout.tsx b/apps/frontend-manage/src/components/Layout.tsx
@@ -68,7 +68,7 @@ function Layout({
 
       <div
         className={twMerge(
-          'flex-1 flex flex-col md:overflow-y-auto p-4',
+          'flex flex-1 flex-col p-4 md:overflow-y-auto',
           className?.children
         )}
         data-cy={data?.cy}