From 2d584eeaf743fb2bb44b01723a2c9e9b4c6efc8e Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Wed, 25 Oct 2023 23:57:47 +0700
Subject: [PATCH] complete stage update

---
 .../components/steps/Complete.tsx             | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/Complete.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/Complete.tsx
index 447c805c4b..ea3847919b 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/Complete.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/Complete.tsx
@@ -1,16 +1,31 @@
 import Button from "components/common/Button/Button";
 import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight, faCheck } from "@fortawesome/pro-solid-svg-icons";
 
 function Complete() {
   return (
-    <div className="d-flex flex-column gap-3 align-items-center">
-      <div className="d-flex gap-3">
-        <Button label="Use Voice" />
-        <Button label="Create another voice" variant="secondary" />
+    <div className="d-flex flex-column align-items-center">
+      <div className="d-flex flex-column align-items-center">
+        <div className="bg-success rounded-circle p-3 mb-3">
+          <FontAwesomeIcon icon={faCheck} className="display-6 text-white" />
+        </div>
+
+        <h1 className="fw-bold">Voice successfully created!</h1>
       </div>
-      <Button label="My Voices" variant="link" />
+
+      <div className="d-flex gap-3 mt-4">
+        <Button label="Use voice now" />
+        <Button label="Create another" variant="secondary" />
+      </div>
+      <Button
+        icon={faArrowRight}
+        iconFlip={true}
+        label="View all my voices"
+        variant="link"
+        className="mt-4"
+      />
     </div>
   );
 }
-
 export { Complete };