Style: UI improvements (#695)

## What was done? - Increase the size of the lecture title - Add button to close inApp notification - Fix breadcrumb on EditCourse page
corona-school · Oct 28, 2024 · be8de73 · be8de73
1 parent cc99d15
commit be8de73
Show file tree

Hide file tree

Showing 11 changed files with 39 additions and 11 deletions.
diff --git a/src/components/notifications/MessageBox.tsx b/src/components/notifications/MessageBox.tsx
@@ -8,16 +8,19 @@ import { Typography } from '../Typography';
 import { cn } from '@/lib/Tailwind';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../Tooltip';
 import { GlobalModalsContext } from '@/context/GlobalModalsProvider';
+import { IconX } from '@tabler/icons-react';
+import { Button } from '../Button';
 
 interface MessageBoxProps {
     userNotification: Concrete_Notification;
     isStandalone?: boolean;
     isRead?: boolean;
     updateLastTimeChecked?: () => void;
     className?: string;
+    onClose?: () => void;
 }
 
-const MessageBox = ({ userNotification, isStandalone, isRead, updateLastTimeChecked, className }: MessageBoxProps) => {
+const MessageBox = ({ userNotification, isStandalone, isRead, updateLastTimeChecked, className, onClose }: MessageBoxProps) => {
     const [notificationModalOpen, setNotificationModalOpen] = useState<boolean>(false);
     const navigate = useNavigate();
     const { openLeavePageModal, openAchievementModal } = useContext(GlobalModalsContext);
@@ -86,12 +89,22 @@ const MessageBox = ({ userNotification, isStandalone, isRead, updateLastTimeChec
     return (
         <LinkedBox
             className={cn(
-                'cursor-pointer rounded-md mb-2 py-2 h-full max-h-[500px] hover:bg-primary-lighter',
+                'cursor-pointer relative rounded-md mb-2 py-2 h-full max-h-[500px] hover:bg-primary-lighter',
                 isRead ? 'bg-white' : 'bg-primary-lighter',
                 !isStandalone ? 'w-full' : 'w-[270px]',
                 className
             )}
         >
+            {onClose && (
+                <Button
+                    onClick={onClose}
+                    variant="none"
+                    size="auto"
+                    className="size-6 rounded-full absolute top-[-6px] right-[-6px] shadow-sm bg-primary-lighter text-primary hover:shadow-md"
+                >
+                    <IconX className="size-3" style={{ strokeWidth: '1.5px' }} />
+                </Button>
+            )}
             <div className="flex items-center gap-x-1">
                 <div className="flex flex-col px-1.5">
                     <Icon />

diff --git a/src/hooks/useBreadcrumb.ts b/src/hooks/useBreadcrumb.ts
@@ -14,6 +14,7 @@ export const useBreadcrumbRoutes = () => {
             EDIT_APPOINTMENT: { label: t('navigation.label.editAppointment'), route: '/edit-appointment' },
             COURSES: { label: t('navigation.label.group'), route: '/group' },
             CREATE_COURSE: { label: t('navigation.label.createCourse'), route: '/create-course' },
+            EDIT_COURSE: { label: t('navigation.label.editCourse'), route: '/edit-course' },
             MATCHING: { label: t('navigation.label.matching'), route: '/matching' },
             REQUEST_MATCH: { label: t('navigation.label.requestMatch'), route: '/request-match' },
             SETTINGS: { label: t('navigation.label.settings'), route: '/settings' },

diff --git a/src/lang/ar.json b/src/lang/ar.json
@@ -2025,7 +2025,8 @@
             "newEmail": "تغيير البريد الإلكتروني",
             "newPassword": "تغيير كلمة المرور",
             "install": "Lern-Fair التطبيق",
-            "progress": "إنجازات والتقدم"
+            "progress": "إنجازات والتقدم",
+            "editCourse": "تحرير الدورة التدريبية"
         }
     },
     "screening": {

diff --git a/src/lang/de.json b/src/lang/de.json
@@ -2098,6 +2098,7 @@
             "forPupils": "Wissens-Center",
             "requestMatch": "Ein neues Lernpaar bilden",
             "createCourse": "Kurse anlegen",
+            "editCourse": "Kurs editieren",
             "createAppointment": "Termin erstellen",
             "editAppointment": "Termin bearbeiten",
             "settings": "Einstellungen",

diff --git a/src/lang/en.json b/src/lang/en.json
@@ -2025,7 +2025,8 @@
             "newEmail": "Change e-mail",
             "newPassword": "Change password",
             "install": "The Lern-Fair app",
-            "progress": "Successes & progress"
+            "progress": "Successes & progress",
+            "editCourse": "Edit course"
         }
     },
     "screening": {

diff --git a/src/lang/ru.json b/src/lang/ru.json
@@ -2029,7 +2029,8 @@
             "newEmail": "Изменить электронную почту",
             "newPassword": "Изменить пароль",
             "install": "Lern-Fair Приложение",
-            "progress": "Успехи и прогресс"
+            "progress": "Успехи и прогресс",
+            "editCourse": "Редактировать курс"
         }
     },
     "screening": {

diff --git a/src/lang/tr.json b/src/lang/tr.json
@@ -2029,7 +2029,8 @@
             "newEmail": "E-posta değiştir",
             "newPassword": "Şifre değiştirme",
             "install": "Lern-Fair Uygulama",
-            "progress": "Başarılar ve ilerleme"
+            "progress": "Başarılar ve ilerleme",
+            "editCourse": "Kursu düzenle"
         }
     },
     "screening": {

diff --git a/src/lang/uk.json b/src/lang/uk.json
@@ -2029,7 +2029,8 @@
             "newEmail": "Змінити електронну пошту",
             "newPassword": "Змінити пароль",
             "install": "Lern-Fair Додаток",
-            "progress": "Успіхи та прогрес"
+            "progress": "Успіхи та прогрес",
+            "editCourse": "Редагувати курс"
         }
     },
     "screening": {

diff --git a/src/pages/CreateCourse.tsx b/src/pages/CreateCourse.tsx
@@ -36,6 +36,7 @@ import { Course_Category_Enum, Course_Subject_Enum } from '../gql/graphql';
 import SwitchLanguageButton from '../components/SwitchLanguageButton';
 import useApollo, { useUserType } from '../hooks/useApollo';
 import { Breadcrumb } from '@/components/Breadcrumb';
+import { useBreadcrumbRoutes } from '@/hooks/useBreadcrumb';
 
 export type CreateCourseError = 'course' | 'subcourse' | 'set_image' | 'upload_image' | 'instructors' | 'lectures' | 'tags' | 'appointments';
 export enum ChatType {
@@ -98,6 +99,7 @@ const CreateCourse: React.FC = () => {
     const location = useLocation();
     const state = location.state as { courseId?: number; currentStep?: number };
     const prefillCourseId = state?.courseId;
+    const breadcrumbRoutes = useBreadcrumbRoutes();
 
     const [courseId, setCourseId] = useState<string>('');
     const [courseName, setCourseName] = useState<string>('');
@@ -911,8 +913,14 @@ const CreateCourse: React.FC = () => {
                     }}
                 >
                     {(((roles.includes('INSTRUCTOR') && canCreateCourse?.allowed) || roles.includes('COURSE_SCREENER')) && (
-                        <VStack space={space['1']} padding={space['1']} marginX="auto" width="100%" maxWidth={ContentContainerWidth}>
-                            <Breadcrumb />
+                        <VStack space={space['1']} marginX="auto" width="100%" maxWidth={ContentContainerWidth}>
+                            {isEditing ? (
+                                <Breadcrumb
+                                    items={[breadcrumbRoutes.COURSES, { label: courseName, route: `single-course/${courseId}` }, breadcrumbRoutes.EDIT_COURSE]}
+                                />
+                            ) : (
+                                <Breadcrumb />
+                            )}
                             <InstructionProgress
                                 isDark={false}
                                 currentIndex={currentIndex}

diff --git a/src/widgets/AppointmentTile.tsx b/src/widgets/AppointmentTile.tsx
@@ -93,7 +93,7 @@ const AppointmentTile: React.FC<Props> = ({
                         <Typography className={cn('font-bold', isHighlighted ? 'text-white' : 'text-primary')}>{displayName}</Typography>
 
                         {position && (
-                            <Typography variant="xs" className={cn('mt-1', isHighlighted ? 'text-white' : 'text-primary')}>
+                            <Typography variant="sm" className={cn('mt-1', isHighlighted ? 'text-white' : 'text-primary')}>
                                 {t('appointment.appointmentTile.lecture', { position: position }) +
                                     (title ? t('appointment.appointmentTile.title', { appointmentTitle: title }) : '')}
                             </Typography>

diff --git a/src/widgets/InAppMessage.tsx b/src/widgets/InAppMessage.tsx
@@ -12,7 +12,7 @@ export const showInAppMessage = (notification: Concrete_Notification) => {
     toast.custom(
         () => (
             <div className="w-fit" onClick={handleOnClickNotification}>
-                <MessageBox className="mb-0" key={notification.id} isStandalone={true} userNotification={notification} />
+                <MessageBox className="mb-0" key={notification.id} isStandalone={true} userNotification={notification} onClose={handleOnClickNotification} />
             </div>
         ),
         {