Fix Summary Page Styling Issues (PT-188732109)

cypress/e2e/completion-page.test.ts

@@ -17,14 +17,15 @@ context("Test the overall app", () => {
       cy.log("test incomplete activity text");
       cy.get(".progress-text").should("contain", `It looks like you haven't quite finished this activity yet.`);
       cy.get(".exit-container .show-my-work").should("contain", "Show My Work");
-      cy.get(".next-step-text").should("contain", activity2Title);
-      cy.get(".next-step button").should("have.length", 2);
+      cy.get(".preview-title-container").should("contain", activity2Title);
+      cy.get(".next-activity-buttons").first().should("contain", "Start Next Activity");
+      cy.get(".next-activity-buttons").last().should("contain", "Exit");
       cy.get("[data-cy=summary-table]").should("have.length", 1);
       cy.get("[data-cy=summary-table-row]").should("have.length", 7);
       cy.get("[data-cy=summary-table-row]").eq(0).find("svg").should("have.class", "incomplete");
 
       cy.log("test next activity button loads next activity");
-      cy.get(".next-step button").first().should("contain", "Start Next Activity").click();
+      cy.get(".next-activity-buttons button").first().click();
       cy.get(".activity-title").should("contain", activity2Title);
 
       cy.log("Test completion page of last activity in a sequence");

src/components/activity-completion/completion-page-content.scss

@@ -108,66 +108,6 @@
     }
   }
 
-  .next-step {
-    background-color: $cc-teal-light6;
-    display: flex;
-    flex-basis: 100%;
-    margin-bottom: 20px;
-    padding: 10px;
-
-    .next-step-thumbnail {
-      background-color: var(--theme-primary-color);
-      border: solid 1px var(--theme-primary-color);
-      border-radius: 8px;
-      height: 80px;
-      margin-right: 10px;
-      max-width: 108px;
-      overflow: hidden;
-
-      img {
-        height: 100%;
-        object-fit: cover;
-        width: 100%;
-      }
-    }
-    .next-step-content {
-      display: flex;
-      flex-wrap: wrap;
-      line-height: 1.2;
-
-      .next-step-buttons {
-        margin-right: 15px;
-        width: 260px;
-
-        button {
-          width: 100%;
-        }
-        span {
-          display: block;
-          margin: 10px 0;
-          text-align: center;
-        }
-      }
-      .next-step-text {
-        flex-grow: 2;
-        margin: 0 10px 0 0;
-        width: 495px;
-
-        p {
-          margin: 0;
-        }
-        .next-step-title {
-          font-size: pxToRem(16);
-          font-weight: bold;
-        }
-        .next {
-          font-style: italic;
-          font-weight: normal;
-          margin-bottom: 5px;
-        }
-      }
-    }
-  }
 
   .num-complete-text {
     margin: 15px 0;

src/components/activity-completion/completion-page-content.tsx

@@ -11,8 +11,8 @@ import { watchAllAnswers, WrappedDBAnswer } from "../../firebase-db";
 import { isQuestion } from "../../utilities/activity-utils";
 import { answerHasResponse, refIdToAnswersQuestionId } from "../../utilities/embeddable-utils";
 import { SummaryTable, IQuestionStatus } from "./summary-table";
-import ccPlaceholderLogo from "../../assets/cc-placeholder.png";
 import { ReadAloudToggle } from "../read-aloud-toggle";
+import { NextSteps } from "./next-steps";
 
 import "./completion-page-content.scss";
 
@@ -106,10 +106,7 @@ export const CompletionPageContent: React.FC<IProps> = (props) => {
   const incompleteActivityProgressText =
     `It looks like you haven't quite finished this activity yet.`;
   const isLastActivityInSequence = activityIndex ? sequence?.activities.length === activityIndex + 1 : false;
-  const nextActivityTitle = !isLastActivityInSequence && sequence?.activities[activityNum + 1].name;
-  const nextActivityThumbnailURL = !isLastActivityInSequence && sequence?.activities[activityNum + 1].thumbnail_url;
-  const nextActivityDescription = !isLastActivityInSequence &&
-                                  renderHTML(sequence?.activities[activityNum + 1].description || "");
+
   let progressText = "";
 
   if (sequence) {
@@ -147,25 +144,13 @@ export const CompletionPageContent: React.FC<IProps> = (props) => {
             </div>
           </div>
           {sequence && !isLastActivityInSequence &&
-            <div className="next-step" data-cy="next-step">
-              <div className="next-step-thumbnail">
-                <img src={nextActivityThumbnailURL ? nextActivityThumbnailURL : ccPlaceholderLogo} alt="Next Activity" />
-              </div>
-              <div className="next-step-content">
-                <div className="next-step-text">
-                  <div className="next-step-title">
-                    <div className="next"><DynamicText>Next Up ...</DynamicText></div>
-                    <DynamicText>{nextActivityTitle}</DynamicText>
-                  </div>
-                  <DynamicText>{nextActivityDescription}</DynamicText>
-                </div>
-                <div className="next-step-buttons">
-                  <button className="button" onClick={handleNextActivity}>Start Next Activity</button>
-                  <span>or</span>
-                  <button className="textButton" onClick={handleExit}>Exit</button>
-                </div>
-              </div>
-            </div>
+           <NextSteps
+              nextActivityThumbnailURL={sequence?.activities[activityNum + 1].thumbnail_url}
+              nextActivityTitle={sequence?.activities[activityNum + 1].name}
+              nextActivityDescription={renderHTML(sequence?.activities[activityNum + 1].description || "")}
+              handleNextActivity={handleNextActivity}
+              handleExit={handleExit}
+            />
           }
           <div className="exit-container" data-cy="exit-container">
             <div className="summary-of-work">

src/components/activity-completion/next-steps.scss

@@ -0,0 +1,60 @@
+@import "../vars.scss";
+
+.next-up-container {
+  background-color: $cc-teal-light6;
+  display: flex;
+  flex-basis: 100%;
+  margin-bottom: 20px;
+  padding: 20px;
+  box-sizing: border-box;
+  font-size: pxToRem(18);
+
+  .next-activity-preview {
+    width: 75%;
+    .preview-header {
+      display: flex;
+      .preview-thumbnail {
+        background-color: var(--theme-primary-color);
+        border: solid 1px var(--theme-primary-color);
+        border-radius: 8px;
+        height: 80px;
+        margin-right: 10px;
+        max-width: 108px;
+        overflow: hidden;
+        img {
+          height: 100%;
+          object-fit: cover;
+          width: 100%;
+        }
+      }
+      .preview-title-container {
+        align-self:last baseline;
+        .next {
+          font-style: italic;
+        }
+        .activity-title {
+          font-weight: bold;
+        }
+      }
+    }
+    .preview-description {
+      padding-right: 20px;
+    }
+  }
+
+  .next-activity-options {
+    font-weight: bold;
+    .next-activity-buttons {
+      width: 260px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+      button {
+        width: 100%;
+        font-family: 'Lato', sans-serif;
+      }
+    }
+  }
+}

src/components/activity-completion/next-steps.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { DynamicText } from "@concord-consortium/dynamic-text";
+import ccPlaceholderLogo from "../../assets/cc-placeholder.png";
+
+import "./next-steps.scss";
+
+interface IProps {
+  nextActivityThumbnailURL?: string|null;
+  nextActivityTitle: string;
+  nextActivityDescription: string|JSX.Element|JSX.Element[];
+  handleNextActivity: () => void;
+  handleExit: () => void;
+}
+
+export const NextSteps: React.FC<IProps> = (props) => {
+  const { nextActivityThumbnailURL, nextActivityTitle, nextActivityDescription, handleNextActivity, handleExit } = props;
+  return (
+    <div className="next-up-container" data-cy="next-step">
+      <div className="next-activity-preview">
+        <div className="preview-header">
+          <div className="preview-thumbnail">
+            <img src={nextActivityThumbnailURL ? nextActivityThumbnailURL : ccPlaceholderLogo} alt="Next Activity" />
+          </div>
+          <div className="preview-title-container">
+            <div className="next">
+              <DynamicText>Next Up ...</DynamicText>
+            </div>
+            <div className="activity-title">
+              <DynamicText>{nextActivityTitle}</DynamicText>
+            </div>
+          </div>
+        </div>
+        <div className="preview-description">
+          <DynamicText>{nextActivityDescription}</DynamicText>
+        </div>
+      </div>
+      <div className="next-activity-options">
+        <div className="next-activity-buttons">
+          <button className="button" onClick={handleNextActivity}>Start Next Activity</button>
+          <div>or</div>
+          <button className="textButton" onClick={handleExit}>Exit</button>
+        </div>
+      </div>
+    </div>
+    );
+};

src/components/activity-completion/summary-table.scss

@@ -16,8 +16,6 @@
     text-align: left;
     text-overflow: ellipsis;
     vertical-align: middle;
-    white-space: nowrap;
-
     &:nth-child(1) {
       width: 90%;
     }