PM-1906 - mobile ui

Author: vas3a

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardGroup/ScorecardGroup.module.scss

@@ -36,6 +36,17 @@
             }
         }
     }
+
+    @include ltemd {
+        flex-wrap: wrap;
+        row-gap: $sp-2;
+
+        .score {
+            order: 7;
+            width: 100%;
+            margin-left: $sp-10;
+        }
+    }
 }
 
 .index {

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardGroup/ScorecardGroup.tsx

@@ -35,11 +35,11 @@ const ScorecardGroup: FC<ScorecardGroupProps> = props => {
                     {props.index}
                     .
                 </span>
-                <span>
+                <span className={styles.name}>
                     {props.group.name}
                 </span>
                 <span className={styles.mx} />
-                <span>
+                <span className={styles.score}>
                     <ScorecardScore
                         score={score}
                         scaleMax={1}

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/AiFeedback.module.scss

@@ -3,5 +3,9 @@
 .wrap {
     p {
         margin-bottom: $sp-4;
+
+        @include ltemd {
+            margin-bottom: $sp-2;
+        }
     }
 }

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/ScorecardQuestionRow/ScorecardQuestionRow.module.scss

@@ -11,6 +11,42 @@
     font-size: 14px;
     line-height: 20px;
     color: #0A0A0A;
+
+    @include ltemd {
+        display: flex;
+        gap: $sp-2 $sp-4;
+        flex-wrap: wrap;
+
+        .icon {
+            width: 24px;
+            flex: 0 0 auto
+        }
+
+        .index {
+            width: 128px;
+            flex: 0 0 auto
+        }
+
+        .content {
+            flex: 100%;
+            padding-left: $sp-10;
+        }
+
+        .score {
+            width: 100%;
+            padding-left: $sp-10;
+
+            &:empty {
+                display: none;
+            }
+            &:not(:empty)::before {
+                content: 'Score';
+                display: block;
+                font-weight: bold;
+                margin-bottom: $sp-2;
+            }
+        }
+    }
 }
 
 .content {

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/ScorecardQuestionRow/ScorecardQuestionRow.tsx

@@ -12,10 +12,10 @@ interface ScorecardQuestionRowProps extends PropsWithChildren {
 
 const ScorecardQuestionRow: FC<ScorecardQuestionRowProps> = props => (
     <div className={classNames(props.className, styles.wrap)}>
-        <span>{props.icon}</span>
-        <span>{props.index}</span>
+        <span className={styles.icon}>{props.icon}</span>
+        <span className={styles.index}>{props.index}</span>
         <span className={styles.content}>{props.children}</span>
-        <span>{props.score}</span>
+        <span className={styles.score}>{props.score}</span>
     </div>
 )
 

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardScore/ScorecardScore.module.scss

@@ -8,4 +8,8 @@
         margin-left: $sp-1;
         opacity: 0.75;
     }
+
+    @include ltemd {
+        text-align: left;
+    }
 }

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardSection/ScorecardSection.module.scss

@@ -18,6 +18,16 @@
     color: #0A0A0A;
 
     padding-right: 56px;
+    @include ltemd {
+        flex-wrap: wrap;
+        row-gap: $sp-2;
+
+        .score {
+            order: 7;
+            width: 100%;
+            margin-left: $sp-10;
+        }
+    }
 }
 
 .mx {

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardSection/ScorecardSection.tsx

@@ -24,15 +24,15 @@ const ScorecardSection: FC<ScorecardSectionProps> = props => {
     return (
         <div className={styles.wrap}>
             <div className={styles.headerBar}>
-                <span>
+                <span className={styles.index}>
                     {props.index}
                     .
                 </span>
-                <span>
+                <span className={styles.name}>
                     {props.section.name}
                 </span>
                 <span className={styles.mx} />
-                <span>
+                <span className={styles.score}>
                     <ScorecardScore
                         score={score}
                         scaleMax={1}

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardViewer.module.scss

@@ -6,3 +6,22 @@
         font-weight: bold;
     }
 }
+
+.conclusion {
+    padding: $sp-4;
+    background: #E0E4E8;
+    color: #0A0A0A;
+    margin-bottom: $sp-4;
+
+    > strong {
+        font-size: 16px;
+        line-height: 22px;
+
+        margin-bottom: $sp-2;
+    }
+
+    p {
+        font-size: 14px;
+        line-height: 20px;
+    }
+}

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardViewer.tsx

@@ -19,6 +19,27 @@ const ScorecardViewer: FC<ScorecardViewerProps> = props => (
             scorecard={props.scorecard}
             aiFeedbackItems={props.aiFeedback}
         >
+            {!!props.score && (
+                <div className={styles.conclusion}>
+                    <strong>Conclusion</strong>
+                    <p>
+                        Congratulations! You earned a score of
+                        {' '}
+                        <strong>
+                            {props.score.toFixed(2)}
+                        </strong>
+                        {' '}
+                        out of the maximum of
+                        {' '}
+                        <strong>
+                            {props.scorecard.maxScore.toFixed(2)}
+                        </strong>
+                        .
+                        You did a good job on passing the scorecard criteria.
+                        Please check the below sections to see if there is any place for improvement.
+                    </p>
+                </div>
+            )}
             {props.scorecard.scorecardGroups.map((group, index) => (
                 <ScorecardGroup key={group.id} group={group} index={index + 1} />
             ))}