Styling changes to completed screen (#49)

GovTechSG · Oct 19, 2023 · 14481dd · 14481dd
1 parent 367e5fb
commit 14481dd
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 82 deletions.
diff --git a/src/App.css b/src/App.css
@@ -584,6 +584,7 @@ a {
 }
 
 hr {
+  opacity: 1;
   background-color: #B5C5CA;
 }
 

diff --git a/src/MainWindow/ResultPage/ResultPage.scss b/src/MainWindow/ResultPage/ResultPage.scss
@@ -10,14 +10,6 @@
     margin: auto;
   }
 
-  #main-contents {
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 0 2rem;
-  }
-
   #form-container {
     height: 100%;
     display: flex;
@@ -52,7 +44,8 @@
     font-family: "Viga";
     font-size: 2rem;
     font-weight: 400;
-    margin-bottom: 2.5rem;
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
   }
 
   #btn-container {
@@ -90,17 +83,10 @@
     margin-right: 0.5rem;
   }
 
-  hr {
-    border-color: #b5c5ca;
-    width: 115%;
-    margin: 2rem 0;
-  }
-
   #main-contents a {
     text-underline-offset: 0.5rem;
   }
 
-
   #other-actions {
     width: 100%;
     text-align: left;
@@ -110,7 +96,7 @@
     border-radius: 4px;
   }
 
-  #other-actions p {
+  #other-actions h2 {
     margin-bottom: 1rem;
     font-size: 18px;
     font-weight: 700;
@@ -120,18 +106,13 @@
   #other-actions a {
     display: flex;
     text-decoration: none;
-    margin-top: 0.5rem;
   }
 
-  #other-actions img {
+  #other-actions img,
+  #view-button img {
     margin-right: 0.5rem;
   }
 
-  #other-actions hr {
-    width: 100%;
-    margin: 1rem 0;
-  }
-
   #main-contents a:before {
     // content: "\F116   ";
     // font-family: bootstrap-icons;

diff --git a/src/MainWindow/ResultPage/index.jsx b/src/MainWindow/ResultPage/index.jsx
@@ -5,13 +5,13 @@ import services from "../../services";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { handleClickLink } from "../../common/constants";
 import ButtonSvgIcon from "../../common/components/ButtonSvgIcon";
-import { ReactComponent as CheckCircleIcon } from "../../assets/check-circle.svg";
-import { ReactComponent as BoxArrowUpRightIcon } from "../../assets/box-arrow-up-right.svg";
 import { ReactComponent as MailIcon } from "../../assets/mail.svg";
 import { ReactComponent as MailSuccessIcon } from "../../assets/mail-success.svg";
 import houseIcon from "../../assets/house.svg"; 
 import thumbsUpIcon from "../../assets/hand-thumbs-up.svg";
 import arrowRepeatIcon from "../../assets/arrow-repeat.svg";
+import checkCircleIcon from '../../assets/check-circle.svg'; 
+import boxArrowUpRightIcon from "../../assets/box-arrow-up-right.svg";
 import EditMailDetailsModal from "./EditMailDetailsModal";
 
 const ResultPage = ({ completedScanId: scanId }) => {
@@ -125,86 +125,80 @@ const ResultPage = ({ completedScanId: scanId }) => {
     <div id="result-page">
       <div id="main-container">
         <div id="main-contents">
-          <ButtonSvgIcon
-            className={`check-circle-icon`}
-            svgIcon={<CheckCircleIcon />}
-          />
+          <img alt="" src={checkCircleIcon}></img>
           <h1>Scan completed</h1>
           <p id="download-content">
             You can find the downloaded report at{" "}
             <a href="#" onClick={handleOpenResultsFolder}>
               {resultsPath}
-            </a>
+            </a>.
           </p>
           <Button id="view-button" type="primary" onClick={handleViewReport}>
-            <ButtonSvgIcon
-              className={`box-arrow-up-right-icon `}
-              svgIcon={<BoxArrowUpRightIcon />}
-            />
+           <img alt="" src={boxArrowUpRightIcon}></img>
             View report
           </Button>
-          <hr/>
+          <hr class="my-5"/>
           <div id="other-actions">
-            <p>Other actions</p>
+            <h2>Other actions</h2>
             <a
-              role="link"
-              className="link"
               href="#"
               onClick={(e) => {handleClickLink(e, feedbackFormUrl)}}
             >
-              <img src={thumbsUpIcon}></img>
+              <img alt="" src={thumbsUpIcon}></img>
               Help us improve
             </a>
             { showCustomFlowReplayButton && 
               <Link to="/custom_flow" state={{ isReplay: true }}>
-                <img src={arrowRepeatIcon}></img>
+                <img alt="" src={arrowRepeatIcon}></img>
                 Rerun custom flow {`(${customFlowLabel})`}
               </Link>
             }
             <hr/>
             <Link to="/" onClick={handleScanAgain}>
-              <img src={houseIcon}></img>
+              <img alt="" src={houseIcon}></img>
               Back To Home 
             </Link>
           </div>
-
-          <div id="btn-container">
-            {isWindows && isEvent && mailStatus === "send" && (
-              <Button
-                id="mail-report-button"
-                type="primary"
-                className="bold-text"
-                onClick={() => setShowEditMailDetailsModal(true)}
-              >
-                <ButtonSvgIcon svgIcon={<MailIcon />} className={`mail-icon`} />
-                Mail report
-              </Button>
-            )}
-            {isWindows && isEvent && mailStatus === "sending" && (
-              <Button
-                id="mail-report-button"
-                type="primary"
-                className="bold-text"
-                disabled="disabled"
-              >
-                <ButtonSvgIcon svgIcon={<MailIcon />} className={`mail-icon`} />
-                Sending mail...
-              </Button>
-            )}
-            {isWindows && isEvent && mailStatus === "sent" && (
-              <Button
-                id="mail-report-button"
-                type="primary"
-                disabled="disabled"
-              >
-                <ButtonSvgIcon
-                  svgIcon={<MailSuccessIcon />}
-                  className={`mail-icon`}
-                />
-                Report mailed
-              </Button>
-            )}
-          </div>
+          {isWindows && isEvent && (
+            <div id="btn-container">
+              {mailStatus === "send" && (
+                <Button
+                  id="mail-report-button"
+                  type="primary"
+                  className="bold-text"
+                  onClick={() => setShowEditMailDetailsModal(true)}
+                >
+                  <ButtonSvgIcon svgIcon={<MailIcon />} className={`mail-icon`} />
+                  Mail report
+                </Button>
+              )}
+              {mailStatus === "sending" && (
+                <Button
+                  id="mail-report-button"
+                  type="primary"
+                  className="bold-text"
+                  disabled="disabled"
+                >
+                  <ButtonSvgIcon svgIcon={<MailIcon />} className={`mail-icon`} />
+                  Sending mail...
+                </Button>
+              )}
+              {mailStatus === "sent" && (
+                <Button
+                  id="mail-report-button"
+                  type="primary"
+                  disabled="disabled"
+                >
+                  <ButtonSvgIcon
+                    svgIcon={<MailSuccessIcon />}
+                    className={`mail-icon`}
+                  />
+                  Report mailed
+                </Button>
+              )}
+            </div>
+          )
+          }
           {showEditMailDetailsModal && (
             <EditMailDetailsModal
               showModal={showEditMailDetailsModal}

diff --git a/src/common/components/ButtonSvgIcon.jsx b/src/common/components/ButtonSvgIcon.jsx
@@ -1,6 +1,6 @@
-const ButtonSvgIcon = ({ className, focusable = false, svgIcon }) => {
+const ButtonSvgIcon = ({ className, svgIcon }) => {
   return (
-    <span aria-hidden focusable={focusable} className={`${className}`}>
+    <span aria-hidden className={`${className}`}>
       {svgIcon}
     </span>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -584,6 +584,7 @@ a { @@
     }
     hr {
+      opacity: 1;
       background-color: #B5C5CA;
     }
@@ Expand Down @@