add back arrow

mozilla · Nov 13, 2024 · 58e3fbf · 58e3fbf
1 parent fd0e94f
commit 58e3fbf
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 14 deletions.
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/FixView.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/FixView.tsx
@@ -31,6 +31,7 @@ export type FixViewProps = {
     | "security-recommendations";
   hideProgressIndicator?: boolean;
   hideNavClose?: boolean;
+  hideNextNavigationRightArrow?: boolean;
   showConfetti?: boolean;
 };
 
@@ -94,18 +95,20 @@ export const FixView = (props: FixViewProps) => {
         {!props.hideNavClose && navigationClose()}
         <section className={styles.fixSection}>
           <div className={styles.viewWrapper}>{props.children}</div>
-          <Link
-            className={`${styles.navArrow} ${styles.navArrowNext}`}
-            href={props.nextStep.href}
-            aria-label={l10n.getString("guided-resolution-flow-next-arrow")}
-            onClick={() => {
-              recordTelemetry("button", "click", {
-                button_id: "next_arrow",
-              });
-            }}
-          >
-            <Image alt="" src={ImageArrowRight} />
-          </Link>
+          {!props.hideNextNavigationRightArrow && (
+            <Link
+              className={`${styles.navArrow} ${styles.navArrowNext}`}
+              href={props.nextStep.href}
+              aria-label={l10n.getString("guided-resolution-flow-next-arrow")}
+              onClick={() => {
+                recordTelemetry("button", "click", {
+                  button_id: "next_arrow",
+                });
+              }}
+            >
+              <Image alt="" src={ImageArrowRight} />
+            </Link>
+          )}
         </section>
       </div>
     </div>

diff --git a/...rd/fix/data-broker-profiles/removal-under-maintenance/RemovalUnderMaintenance.module.scss b/...rd/fix/data-broker-profiles/removal-under-maintenance/RemovalUnderMaintenance.module.scss
@@ -13,9 +13,12 @@
 }
 
 .removalGuideInstructionsWrapper {
-  padding-top: $spacing-lg;
-
+  .backArrow {
+    all: unset;
+    cursor: pointer;
+  }
   .headerRemovalGuide {
+    padding-top: $spacing-lg;
     font: $text-body-xl;
     font-weight: 700;
   }

diff --git a/...hboard/fix/data-broker-profiles/removal-under-maintenance/RemovalUnderMaintenanceView.tsx b/...hboard/fix/data-broker-profiles/removal-under-maintenance/RemovalUnderMaintenanceView.tsx
@@ -17,6 +17,7 @@ import { TelemetryLink } from "../../../../../../../../../components/client/Tele
 import { TelemetryButton } from "../../../../../../../../../components/client/TelemetryButton";
 import { CONST_URL_SUMO_MANUAL_REMOVAL } from "../../../../../../../../../../constants";
 import { useState } from "react";
+import { BackArrow } from "../../../../../../../../../components/server/Icons";
 
 export type Props = {
   data: OnerepScanResultRow[];
@@ -128,6 +129,14 @@ export const RemovalUnderMaintenanceView = (props: Props) => {
 
   const removalGuideInstructions = (
     <div className={styles.removalGuideInstructionsWrapper}>
+      <button
+        onClick={() => {
+          setDetailedRemovalGuide(!detailedRemovalGuide);
+        }}
+        className={styles.backArrow}
+      >
+        <BackArrow width="20" height="20" alt="" />
+      </button>
       <p className={styles.headerRemovalGuide}>
         {l10n.getString("data-broker-removal-guide-header")}
       </p>
@@ -213,6 +222,7 @@ export const RemovalUnderMaintenanceView = (props: Props) => {
       data={props.stepDeterminationData}
       hideProgressIndicator={detailedRemovalGuide}
       hideNavClose={detailedRemovalGuide}
+      hideNextNavigationRightArrow={detailedRemovalGuide}
     >
       {!detailedRemovalGuide ? dataBrokerInformation : removalGuideInstructions}
     </FixView>

diff --git a/src/app/components/server/Icons.tsx b/src/app/components/server/Icons.tsx
@@ -527,3 +527,28 @@ export const AvatarIcon = (
     </svg>
   );
 };
+
+// Keywords: go back, return, left arrow
+export const BackArrow = (props: SVGProps<SVGSVGElement> & { alt: string }) => {
+  return (
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      role="img"
+      aria-label={props.alt}
+      aria-hidden={props.alt === ""}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      className={`${props.className ?? ""} ${styles.colorifyFill}`}
+    >
+      <title>{props.alt}</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="
+        M15.0176 7.03994H3.29277L7.89437 2.43834C8.07472 2.25842 8.17621 2.01422 8.17651 1.75947C8.17681 1.50472 8.0759 1.26029 7.89597 1.07994C7.71605 0.899593 7.47186 0.798107 7.21711 0.797806C6.96236 0.797506 6.71792 0.898417 6.53757 1.07834L0.294375 7.32154C0.249759 7.36623 0.210065 7.41558 0.175975 7.46874C0.161296 7.49113 0.148454 7.51468 0.137575 7.53914C0.118618 7.56899 0.101519 7.59999 0.0863748 7.63194C0.0863748 7.66394 0.0671748 7.69594 0.0575748 7.72794C0.0475844 7.7552 0.0390391 7.78298 0.0319748 7.81114C0.0095647 7.93601 0.0095647 8.06387 0.0319748 8.18874C0.0390391 8.2169 0.0475844 8.24468 0.0575748 8.27194C0.0575748 8.30394 0.0735748 8.33594 0.0863748 8.36794C0.101519 8.3999 0.118618 8.43089 0.137575 8.46074C0.148454 8.48521 0.161296 8.50875 0.175975 8.53114C0.210065 8.5843 0.249759 8.63365 0.294375 8.67834L6.53757 14.9215C6.71792 15.1015 6.96236 15.2024 7.21711 15.2021C7.47186 15.2018 7.71605 15.1003 7.89597 14.9199C8.0759 14.7396 8.17681 14.4952 8.17651 14.2404C8.17621 13.9857 8.07472 13.7415 7.89437 13.5615L3.29277 8.95994H15.0176C15.1436 8.95994 15.2685 8.93511 15.3849 8.88687C15.5014 8.83862 15.6073 8.76791 15.6964 8.67876C15.7855 8.58962 15.8563 8.48379 15.9045 8.36732C15.9527 8.25084 15.9776 8.12601 15.9776 7.99994C15.9776 7.87387 15.9527 7.74904 15.9045 7.63256C15.8563 7.51609 15.7855 7.41026 15.6964 7.32112C15.6073 7.23197 15.5014 7.16126 15.3849 7.11302C15.2685 7.06477 15.1436 7.03994 15.0176 7.03994V7.03994Z"
+      />
+    </svg>
+  );
+};