style: simplify styling of element stack and improve placement of ele…

…ment feedback icons
uzh-bf · Aug 26, 2024 · 7055c6d · 7055c6d
1 parent 107aecd
commit 7055c6d
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 28 deletions.
diff --git a/apps/frontend-pwa/src/components/groupActivity/GroupActivityStack.tsx b/apps/frontend-pwa/src/components/groupActivity/GroupActivityStack.tsx
@@ -171,6 +171,7 @@ function GroupActivityStack({
                   stackInstanceIds={
                     stack.elements?.map((element) => element.id) ?? []
                   }
+                  showSeparator={element.elementType === ElementType.Flashcard}
                   withParticipant
                 />
                 <StudentElement
@@ -184,7 +185,7 @@ function GroupActivityStack({
                 {grading && correctness && (
                   <div
                     className={twMerge(
-                      'rounded mb-6 mt-3 shadow !border-l-4 text-base',
+                      'mb-6 mt-3 rounded !border-l-4 text-base shadow',
                       correctness === ResponseCorrectnessType.Correct &&
                         '!border-l-green-500',
                       correctness === ResponseCorrectnessType.Partial &&
@@ -206,7 +207,7 @@ function GroupActivityStack({
                       )}
                     >
                       <div>{t(`pwa.groupActivity.answer${correctness}`)}</div>
-                      <div className="font-bold self-end">{`${grading.score}/${
+                      <div className="self-end font-bold">{`${grading.score}/${
                         grading.maxPoints
                       } ${t('shared.generic.points')}`}</div>
                     </div>
@@ -225,7 +226,7 @@ function GroupActivityStack({
       {!decisions ? (
         <Button
           className={{
-            root: 'mt-4 text-lg font-bold float-right',
+            root: 'float-right mt-4 text-lg font-bold',
           }}
           disabled={Object.values(studentResponse).some(
             (response) => !response.valid
@@ -298,7 +299,7 @@ function GroupActivityStack({
           {t('pwa.groupActivity.sendAnswers')}
         </Button>
       ) : (
-        <div className="p-2 mt-4 text-sm text-center rounded text-slate-500 bg-slate-100">
+        <div className="mt-4 rounded bg-slate-100 p-2 text-center text-sm text-slate-500">
           {t.rich('pwa.groupActivity.alreadySubmittedAt', {
             br: () => <br />,
             date: submittedAt,

diff --git a/apps/frontend-pwa/src/components/practiceQuiz/Bookmark.tsx b/apps/frontend-pwa/src/components/practiceQuiz/Bookmark.tsx
@@ -64,18 +64,22 @@ function Bookmark({ bookmarks, quizId, stackId }: BookmarkProps) {
   })
 
   return (
-    <div
-      className={twMerge(
-        'flex flex-row gap-2',
-        (bookmarks === null || typeof bookmarks === 'undefined') && 'hidden'
-      )}
+    <Button
+      onClick={() => bookmarkElementStack()}
+      data={{ cy: 'bookmark-element-stack' }}
+      className={{
+        root: twMerge(
+          'flex flex-row items-center text-sm shadow-none',
+          bookmarks === null || typeof bookmarks === 'undefined'
+            ? 'hidden'
+            : undefined
+        ),
+      }}
     >
-      <div>{t('shared.generic.bookmark')}</div>
-      <Button
-        basic
-        onClick={() => bookmarkElementStack()}
-        data={{ cy: 'bookmark-element-stack' }}
-      >
+      <Button.Label>
+        <div>{t('shared.generic.bookmark')}</div>
+      </Button.Label>
+      <Button.Icon>
         {isBookmarked ? (
           <FontAwesomeIcon
             className="text-red-600 hover:text-red-500"
@@ -84,8 +88,8 @@ function Bookmark({ bookmarks, quizId, stackId }: BookmarkProps) {
         ) : (
           <FontAwesomeIcon className="hover:text-red-400" icon={faBookmark} />
         )}
-      </Button>
-    </div>
+      </Button.Icon>
+    </Button>
   )
 }
 

diff --git a/apps/frontend-pwa/src/components/practiceQuiz/ElementStack.tsx b/apps/frontend-pwa/src/components/practiceQuiz/ElementStack.tsx
@@ -121,7 +121,7 @@ function ElementStack({
           </div>
         )}
 
-        <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-8">
           {stack.elements &&
             stack.elements.length > 0 &&
             stack.elements.map((element, elementIx) => {
@@ -139,6 +139,9 @@ function ElementStack({
                     stackInstanceIds={
                       stack.elements?.map((element) => element.id) ?? []
                     }
+                    showSeparator={
+                      element.elementType === ElementType.Flashcard
+                    }
                   />
                   <StudentElement
                     element={element}
@@ -156,7 +159,7 @@ function ElementStack({
       {/* display continue button if question was already answered */}
       {typeof stackStorage !== 'undefined' && !showMarkAsRead && (
         <Button
-          className={{ root: 'float-right text-lg mt-4' }}
+          className={{ root: 'float-right mt-4 text-lg' }}
           onClick={() => {
             setStudentResponse({})
 
@@ -177,7 +180,7 @@ function ElementStack({
       {/* display mark all as read button, if only content elements have not been answered yet */}
       {typeof stackStorage === 'undefined' && showMarkAsRead && (
         <Button
-          className={{ root: 'float-right text-lg mt-4' }}
+          className={{ root: 'float-right mt-4 text-lg' }}
           disabled={Object.values(studentResponse).some(
             (response) => !response.valid
           )}
@@ -210,7 +213,7 @@ function ElementStack({
 
       {typeof stackStorage === 'undefined' && !showMarkAsRead && (
         <Button
-          className={{ root: 'float-right text-lg mt-4' }}
+          className={{ root: 'float-right mt-4 text-lg' }}
           disabled={Object.values(studentResponse).some(
             (response) => !response.valid
           )}

diff --git a/apps/frontend-pwa/src/components/practiceQuiz/InstanceHeader.tsx b/apps/frontend-pwa/src/components/practiceQuiz/InstanceHeader.tsx
@@ -50,6 +50,7 @@ interface InstanceHeaderProps {
   correctness?: ResponseCorrectnessType
   previousElementFeedback?: ElementFeedback
   stackInstanceIds: number[]
+  showSeparator?: boolean
   className?: string
 }
 
@@ -62,6 +63,7 @@ function InstanceHeader({
   correctness,
   previousElementFeedback,
   stackInstanceIds,
+  showSeparator = false,
   className,
 }: InstanceHeaderProps) {
   const [rateElement, { loading: ratingLoading }] =
@@ -156,7 +158,7 @@ function InstanceHeader({
   }
 
   return (
-    <div className={twMerge('mb-4', className)}>
+    <div className={className}>
       <div className="flex flex-row justify-between">
         <div className="flex flex-row items-center gap-2">
           {correctness === ResponseCorrectnessType.Correct && (
@@ -171,7 +173,7 @@ function InstanceHeader({
           <H4 data={{ cy: `element-instance-header-${name}` }}>{name}</H4>
         </div>
         {withParticipant && (
-          <div className="flex flex-row items-center gap-4">
+          <div className="-mr-2 flex flex-row items-center gap-4">
             <Button
               basic
               active={vote === 1}
@@ -223,7 +225,7 @@ function InstanceHeader({
           </div>
         )}
       </div>
-      <hr className="h-[1px] border-0 bg-gray-300" />
+      {showSeparator && <hr className="mb-3 h-[1px] border-0 bg-gray-300" />}
     </div>
   )
 }

diff --git a/packages/shared-components/src/ChoicesQuestion.tsx b/packages/shared-components/src/ChoicesQuestion.tsx
@@ -48,7 +48,7 @@ function ChoicesQuestion({
         {content !== '<br>' && (
           <div
             className={twMerge(
-              'bg-primary-10 prose mb-4 mt-4 min-h-[6rem] max-w-none flex-initial rounded border border-slate-300 p-4 leading-6 prose-p:!m-0 prose-img:!m-0'
+              'bg-primary-10 prose mb-4 min-h-[6rem] max-w-none flex-initial rounded border border-slate-300 p-4 leading-6 prose-p:!m-0 prose-img:!m-0'
             )}
           >
             <Markdown content={content} />

diff --git a/packages/shared-components/src/ContentElement.tsx b/packages/shared-components/src/ContentElement.tsx
@@ -27,7 +27,7 @@ function ContentElement({
   return (
     <div
       className={twMerge(
-        'mt-4 rounded-lg border border-solid bg-slate-100 px-3 py-2',
+        'rounded-md border border-solid bg-slate-100 px-3 py-2',
         !hideReadButton && 'pb-10'
       )}
       data-cy={`content-element-${elementIx + 1}`}

diff --git a/packages/shared-components/src/FreeTextQuestion.tsx b/packages/shared-components/src/FreeTextQuestion.tsx
@@ -40,7 +40,7 @@ function FreeTextQuestion({
         {content !== '<br>' && (
           <div
             className={twMerge(
-              'bg-primary-10 prose mb-4 mt-4 min-h-[6rem] max-w-none flex-initial rounded border border-slate-300 p-4 leading-6 prose-p:!m-0 prose-img:!m-0'
+              'bg-primary-10 prose mb-4 min-h-[6rem] max-w-none flex-initial rounded border border-slate-300 p-4 leading-6 prose-p:!m-0 prose-img:!m-0'
             )}
           >
             <Markdown content={content} />

diff --git a/packages/shared-components/src/NumericalQuestion.tsx b/packages/shared-components/src/NumericalQuestion.tsx
@@ -40,7 +40,7 @@ function NumericalQuestion({
         {content !== '<br>' && (
           <div
             className={twMerge(
-              'bg-primary-10 prose mb-4 mt-4 min-h-[6rem] max-w-none flex-initial rounded border border-slate-300 p-4 leading-6 prose-p:!m-0 prose-img:!m-0'
+              'bg-primary-10 prose mb-4 min-h-[6rem] max-w-none flex-initial rounded border border-slate-300 p-4 leading-6 prose-p:!m-0 prose-img:!m-0'
             )}
           >
             <Markdown content={content} />