wip: improve trigger for course list archive

uzh-bf · Oct 3, 2024 · 5a3d53e · 5a3d53e
1 parent 1654196
commit 5a3d53e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 18 deletions.
diff --git a/apps/frontend-manage/src/components/courses/modals/CourseDeletionItem.tsx b/apps/frontend-manage/src/components/courses/modals/CourseDeletionItem.tsx
@@ -24,8 +24,8 @@ function CourseDeletionItem({
   const t = useTranslations()
 
   return (
-    <div className="flex h-10 flex-row items-center justify-between border-b pb-2">
-      <div className="flex flex-row items-center gap-4">
+    <div className="flex h-10 flex-row items-center justify-between border-b pb-2 pl-2">
+      <div className="flex flex-row items-center gap-3.5">
         <FontAwesomeIcon
           icon={notApplicable ? faInfoCircle : faExclamationCircle}
           className={twMerge(
@@ -36,7 +36,12 @@ function CourseDeletionItem({
                 : 'text-red-600'
           )}
         />
-        <div className={twMerge('mr-4', notApplicable && 'text-gray-500')}>
+        <div
+          className={twMerge(
+            'mr-4',
+            (notApplicable || confirmed) && 'text-gray-500'
+          )}
+        >
           {label}
         </div>
       </div>

diff --git a/apps/frontend-manage/src/pages/courses/index.tsx b/apps/frontend-manage/src/pages/courses/index.tsx
@@ -9,7 +9,7 @@ import {
   CreateCourseDocument,
   GetUserCoursesDocument,
 } from '@klicker-uzh/graphql/dist/ops'
-import { Button, H3, UserNotification } from '@uzh-bf/design-system'
+import { Button, H3, Switch, UserNotification } from '@uzh-bf/design-system'
 import { useRouter } from 'next/router'
 
 import { faTrashCan } from '@fortawesome/free-regular-svg-icons'
@@ -67,23 +67,17 @@ function CourseSelectionPage() {
           <div className="flex w-full flex-row justify-between">
             <H3>{t('manage.courseList.selectCourse')}:</H3>
             {(dataCourses?.userCourses?.length ?? 0) > 0 ? (
-              <Button
-                basic
+              <Switch
+                checked={showArchive}
+                onCheckedChange={(newValue) => setShowArchive(newValue)}
                 className={{
-                  root: 'hover:text-primary-100 mr-24 flex flex-row items-center gap-3',
+                  root: 'mr-24 flex flex-row items-center gap-3',
+                  label: 'mr-0 font-normal',
                 }}
-                onClick={() => setShowArchive((prev) => !prev)}
                 data={{ cy: 'toggle-course-archive' }}
-              >
-                <Button.Icon>
-                  <FontAwesomeIcon icon={showArchive ? faInbox : faArchive} />
-                </Button.Icon>
-                <Button.Label>
-                  {showArchive
-                    ? t('manage.courseList.hideArchive')
-                    : t('manage.courseList.showArchive')}
-                </Button.Label>
-              </Button>
+                label={t('manage.courseList.showArchive')}
+                size="sm"
+              />
             ) : null}
           </div>
           {courses && courses.length > 0 ? (