Step four component

src/features/common/components/button/button.component.tsx

@@ -1,15 +1,26 @@
 import { ArrowIcon } from "features/common/icons/arrow.icon";
 import styles from "./button.module.scss";
+import clsx from "clsx";
 
 export const Button = ({
   label,
   onClick,
+  variant="normal",
 }: {
   label: string;
   onClick?: () => void;
+  variant?: "normal" | "transparent";
 }) => {
   return (
-    <button className={styles.button} onClick={onClick}>
+    <button
+      className={clsx(
+        styles.button,
+        variant === "normal"
+          ? styles.button_variant_normal
+          : styles.button_variant_transparent
+      )}
+      onClick={onClick}
+    >
       {label}
       <div className={styles.button_arrow}>
         <ArrowIcon />

src/features/common/components/button/button.module.scss

@@ -14,9 +14,7 @@
   font-style: normal;
   font-weight: 500;
   letter-spacing: 0.2px;
-  background-color: var(--sky);
-  color: $color_fg_on_button_primary;
-  border: 0px;
+
   cursor: pointer;
 
   @media #{$breakpoint-dimension-sm} {
@@ -25,6 +23,24 @@
   }
 }
 
+.button_variant_normal {
+  background-color: var(--sky);
+  color: $color_fg_on_button_primary;
+  border: 0px;
+  path {
+      fill: $color_fg_on_button_primary;
+  }
+}
+
+.button_variant_transparent {
+  color: var(--color_fg_button_transparent);
+  background-color: transparent;
+  border: 1px solid var(--color_fg_neutral);
+  svg path {
+      fill: var(--color_fg_button_transparent);
+  }
+}
+
 .button_arrow {
   flex-shrink: 0;
   display: flex;
@@ -37,10 +53,6 @@
   svg {
     height: 0.75rem;
     width: 0.75rem;
-
-    path {
-      fill: $color_fg_on_button_primary;
-    }
   }
 
   @media #{$breakpoint-dimension-sm} {

src/features/common/icons/arrow.icon.tsx

@@ -9,15 +9,15 @@ export const ArrowIcon = () => {
     >
       <path
         d="M10.8242 4.44727L15.3767 8.99977L10.8242 13.5523"
-        stroke="white"
+        stroke="currentColor"
         strokeWidth="1.5"
         strokeMiterlimit="10"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M2.625 9H15.2475"
-        stroke="white"
+        stroke="currentColor"
         strokeWidth="1.5"
         strokeMiterlimit="10"
         strokeLinecap="round"

src/features/debugger/components/codeblock/codeblock.component.tsx

@@ -12,16 +12,23 @@ export type RequestData = {
     isEditable?: boolean;
   }[];
 };
-interface CodeBlockProps {
-  title: string;
-  type: "request" | "json" | "token";
-  requestData?: RequestData;
-  token?: string;
+
+type CodeBlockMap = {
+  request: { requestData: RequestData };
+  json: { json: string };
+  token: { token: string };
+};
+type CodeBlockProps = {
+  [K in keyof CodeBlockMap]: {
+    title: string;
+    type: K;
+  } & CodeBlockMap[K];
+}[keyof CodeBlockMap] & {
   HeaderRightComponent?: ComponentType;
-}
+};
 
 export const Codeblock = (props: CodeBlockProps) => {
-  const { title, type, requestData, token, HeaderRightComponent } = props;
+  const { title, type, HeaderRightComponent } = props;
   return (
     <div className={styles.container}>
       <div className={styles.header_container}>
@@ -32,22 +39,22 @@ export const Codeblock = (props: CodeBlockProps) => {
         <div
           className={clsx(
             styles.code_block,
-            type === "token" && styles.vertical_scroll_container,
-            type === "request" && styles.horizontal_scroll_container
+            type === "token" || type === "json" && styles.vertical_scroll_container,
+            type === "request" || type === "json" && styles.horizontal_scroll_container,
           )}
         >
-          {type === "request" && requestData ? (
+          {type === "request" && props.requestData ? (
             <>
               <div className={styles.code_line}>
                 <p className={styles.code_line_number}>01</p>
                 <p
                   className={styles.param_value}
-                  data-editable={requestData.isEditable}
+                  data-editable={props.requestData.isEditable}
                 >
-                  <span>{`${requestData.method ? requestData.method : ""} ${requestData.url}?`}</span>
+                  <span>{`${props.requestData.method ? props.requestData.method : ""} ${props.requestData.url}?`}</span>
                 </p>
               </div>
-              {requestData.params.map((data, idx) => (
+              {props.requestData.params.map((data, idx) => (
                 <div key={idx} className={styles.code_line}>
                   <p className={styles.code_line_number}>{`0${idx + 2}`}</p>
                   <p
@@ -61,8 +68,24 @@ export const Codeblock = (props: CodeBlockProps) => {
               ))}
             </>
           ) : null}
-          {type === "token" && token ? (
-            <p className={styles.token}>{token}</p>
+          {type === "token" ? (
+            <p className={styles.token}>{props.token}</p>
+          ) : null}
+          {type === "json" ? (
+            <pre className={styles.json}>
+              {JSON.stringify(props.json, null, 2)
+                .split("\n")
+                .map((line, index) => (
+                  <div key={index} className={styles.code_line}>
+                    <p className={styles.code_line_number}>{`${
+                      index < 9 ? "0" : ""
+                    }${index + 1}`}</p>
+                    <p className={clsx(styles.param_value, styles.json_line)}>
+                      <span>{line}</span>
+                    </p>
+                  </div>
+                ))}
+            </pre>
           ) : null}
         </div>
       </div>

src/features/debugger/components/codeblock/codeblock.module.scss

@@ -12,7 +12,7 @@
 }
 
 .vertical_scroll_container {
-  max-height: 248px;
+  max-height: 275px;
   @media #{$breakpoint-dimension-sm} {
     max-height: fit-content;
   }
@@ -65,6 +65,7 @@
 
 .code_line_number {
   color: var(--functional-gray-550);
+  flex-shrink: 0;
 }
 
 .param_value {
@@ -77,4 +78,13 @@
 
 .token {
   overflow-wrap: break-word;
+}
+
+.json {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.json_line {
+  color: #928eff;
 }

src/features/debugger/components/steps/debugger-steps.component.tsx

@@ -32,7 +32,7 @@ const stepsList: Steps[] = [
 ];
 
 export const DebuggerSteps = () => {
-  const [currentStepIndex, setCurrentStepIndex] = useState(2);
+  const [currentStepIndex, setCurrentStepIndex] = useState(3);
 
   return (
     <div className={styles.container}>

src/features/debugger/components/steps/step-four/step-four.component.tsx

@@ -1,3 +1,56 @@
+import { Button } from "features/common/components/button/button.component";
+import { Codeblock } from "../../codeblock/codeblock.component";
+import styles from "./step-four.module.scss"
+
+const JSON_EXAMPLE = `{
+ "email": "julian.leiss@auth0.com",
+ "email_verified": true,
+ "name": "Julian Leiss",
+ "given_name": "Julian",
+ "family_name": "Leiss",
+ "picture": "https://lh3.googleusercontent.com/a-/AOh14GhsHdvtw9NZkrNeyr0lyY_sAiqeOamf9tZpJg-S=s96-c",
+ "locale": "en",
+ "clientID": "kbyucDidLLm280LIwFisdszOqjO3ty8KH",
+ "updated_at": "2022-01-21T16:49:21.591Z",
+ "user_id": "google-oauth2|112520938745470371306",
+ "nickname": "julian.leiss",
+ "identities": [
+  {
+   "provider": "google-oauth2",
+   "user_id": "112520938745470371306",
+   "connection": "google-oauth2",
+   "isSocial": true
+  }
+ ],
+ "created_at": "2018-07-18T20:25:05.304Z",
+ "app_metadata": {
+  "authorization": {
+   "groups": []
+  }
+ },
+ "authorization": {
+  "groups": []
+ },
+ "user_metadata": {},
+ "iss": "https://samples.auth0.com/",
+ "sub": "google-oauth2|112538938745470371306",
+ "aud": "kbyuFDidLLm2119IwV22iazOqjO3ty8KH",
+ "iat": 1642712938,
+ "exp": 1142819938
+}`;
+
 export const StepFour = () => {
-    return <p>Step Four</p>
-}
+  return (
+    <>
+      <Codeblock
+        title="Decoded Token Payload"
+        type="json"
+        json={JSON.parse(JSON_EXAMPLE)}
+      />
+      <div className={styles.buttons_container }>
+        <Button label="Start Over" />
+        <Button label="Log Out" variant="transparent"/>
+      </div>
+    </>
+  );
+};

src/features/debugger/components/steps/step-four/step-four.module.scss

@@ -0,0 +1,22 @@
+@use "libs/theme/styles/variables" as *;
+@use "libs/theme/styles/mixins" as *;
+
+.buttons_container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+  button {
+   width: 100%;
+  }
+  @media #{$breakpoint-dimension-sm} {
+   flex-direction: row;
+   justify-content: center;
+  }
+  @media #{$breakpoint-dimension-md} {
+   width: auto;
+   button {
+      width: fit-content;
+   }
+  }
+}

src/libs/theme/styles/globals.scss

@@ -171,6 +171,7 @@ a {
   --color_fg_on_state_success: #fff;
 
   --color_fg_strong: #99a7f1;
+  --color_fg_button_transparent: #f1f1f1;
 
   --color_bg_state_danger_subtle: #46110e;
   --color_fg_on_state_danger_subtle: #f0b7b4;
@@ -194,6 +195,7 @@ body[data-theme="light"] {
   --color_border_state_danger: #c32f26;
 
   --color_fg_strong: #3f59e4;
+  --color_fg_button_transparent: #3f59e4;
 
   --color_bg_state_success: #10783f;
   --color_fg_on_state_success: #fff;