From 034b597cdc62299ca31d90985ebaa27b7725b0eb Mon Sep 17 00:00:00 2001
From: greyguy21 <e0559779@u.nus.edu>
Date: Wed, 12 Jul 2023 18:16:27 +0800
Subject: [PATCH] Make UI Improvements

---
 public/electron/main.js                       |  2 +-
 public/electron/userDataManager.js            |  2 +-
 src/App.css                                   | 24 +++++----------
 .../Onboarding/OnboardingComponent.jsx        | 30 +++++++++----------
 .../components/DownloadFolderDropdown.jsx     | 15 +++++-----
 src/common/components/UserDetailsForm.jsx     |  2 +-
 6 files changed, 33 insertions(+), 42 deletions(-)

diff --git a/public/electron/main.js b/public/electron/main.js
index 066fe1f0..2be20d39 100644
--- a/public/electron/main.js
+++ b/public/electron/main.js
@@ -107,7 +107,7 @@ app.on("ready", async () => {
   })
   
   await userDataManager.setData(userDataEvent);
-  await userDataFormManager.init();
+  // await userDataFormManager.init();
 });
 
 app.on("quit", () => {
diff --git a/public/electron/userDataManager.js b/public/electron/userDataManager.js
index 91a5b5e0..f3341c27 100644
--- a/public/electron/userDataManager.js
+++ b/public/electron/userDataManager.js
@@ -54,7 +54,7 @@ const init = async () => {
             defaultPath: data.exportDir
         }); 
         if (results) {
-            data.exportDir = results[0] + "/Purple HATS"; 
+            data.exportDir = results[0]; 
         }    
         fs.writeFileSync(userDataFilePath, JSON.stringify(data));
         return data.exportDir;
diff --git a/src/App.css b/src/App.css
index 2b58784a..9b1be606 100644
--- a/src/App.css
+++ b/src/App.css
@@ -147,6 +147,10 @@ a:hover {
     margin-bottom: 1rem;
   }
 
+  .onboarding-modal .download-dropdown {
+    padding-bottom: 1rem;
+  }
+  
   .modal {
     display: flex;
     align-items: center;  
@@ -330,7 +334,7 @@ a:hover {
     white-space: nowrap;
   }
 
-  @keyframes fade-in {
+  @keyframes slide-in {
     from {
       opacity: 0;
       transform: translateX(20px);
@@ -340,24 +344,10 @@ a:hover {
     }
   }
 
-  .fade-in {
-    animation: fade-in 0.5s;
-  }
-
-  @keyframes fade-out {
-    from {
-      opacity: 0;
-      transform: translateX(-20px);
-    } to {
-      opacity: 1;
-      transform: translateX(0px);
-    }
+  .slide-in {
+    animation: slide-in 0.5s;
   }
 
-  .fade-out {
-    animation: fade-out 0.5s;
-  }
-  
 #first-timer-2-container {
   position: relative;
   display: flex;
diff --git a/src/MainWindow/Onboarding/OnboardingComponent.jsx b/src/MainWindow/Onboarding/OnboardingComponent.jsx
index 2a3f1aca..29f05246 100644
--- a/src/MainWindow/Onboarding/OnboardingComponent.jsx
+++ b/src/MainWindow/Onboarding/OnboardingComponent.jsx
@@ -88,11 +88,11 @@ const OnboardingComponent = ({
         return (
           <>
             <div className="visually-hidden" aria-live="polite" role="status">Item 1 of 5</div>
-            <div className="modal-img-container fade-in" aria-hidden="true">
+            <div className="modal-img-container slide-in" aria-hidden="true">
               <img className="modal-img" src={firstTimer1}></img>
             </div>
-            <h3 className="modal-title fade-in">Hi There!</h3>
-            <p className="modal-desc fade-in">Making your website accessible is within reach. Let’s get started by taking a quick look at how Purple HATS work.</p>
+            <h3 className="modal-title slide-in">Hi There!</h3>
+            <p className="modal-desc slide-in">Making your website accessible is within reach. Let’s get started by taking a quick look at how Purple HATS work.</p>
             <PageIndicator page={1}></PageIndicator>
           </>
         )
@@ -101,14 +101,14 @@ const OnboardingComponent = ({
         return (
           <>
             <div className="visually-hidden" aria-live="polite" role="status">Item 2 of 5</div>
-            <div className="modal-img-container fade-in" aria-hidden="true">
+            <div className="modal-img-container slide-in" aria-hidden="true">
               <div id="first-timer-2-container">
                 <div className="typewriter">https://www.</div>
                 <img className="modal-img" src={firstTimer2}></img>
               </div>
             </div>
-            <h3 className="modal-title fade-in">Get started</h3>
-            <p className="modal-desc fade-in">You just need to enter your website/sitemap URL and Purple HATS will crawl through all the web pages to analyse for accessibility issues.</p>
+            <h3 className="modal-title slide-in">Get started</h3>
+            <p className="modal-desc slide-in">You just need to enter your website/sitemap URL and Purple HATS will crawl through all the web pages to analyse for accessibility issues.</p>
             <PageIndicator page={2}></PageIndicator>
           </>
         )
@@ -117,11 +117,11 @@ const OnboardingComponent = ({
        return (
         <>
           <div className="visually-hidden" aria-live="polite" role="status">Item 3 of 5</div>
-          <div className="modal-img-container fade-in" aria-hidden="true">
+          <div className="modal-img-container slide-in" aria-hidden="true">
             <img className="modal-img" src={firstTimer3}></img>
           </div>
-          <h3 className="modal-title fade-in">Custom Flow</h3>
-          <p className="modal-desc fade-in">Custom flow scan type allows you to specify a user journey of your choice by recording a series of actions on the browser and re-play them automatically.</p>
+          <h3 className="modal-title slide-in">Custom Flow</h3>
+          <p className="modal-desc slide-in">Custom flow scan type allows you to specify a user journey of your choice by recording a series of actions on the browser and re-play them automatically.</p>
           <PageIndicator page={3}></PageIndicator>
         </>
        )
@@ -130,12 +130,12 @@ const OnboardingComponent = ({
         return (
           <>
             <div className="visually-hidden" aria-live="polite" role="status">Item 4 of 5</div>
-            <div className="modal-img-container fade-in" aria-hidden="true">
+            <div className="modal-img-container slide-in" aria-hidden="true">
               <img className="modal-img" src={firstTimer4}></img>
             </div>
-            <h3 className="modal-title fade-in">Download report location</h3>
-            <DownloadFolderDropdown></DownloadFolderDropdown>
-            <p className="modal-desc fade-in">All reports generated from Purple HATS will be auto-downloaded into this folder.</p>
+            <h3 className="modal-title slide-in">Download report location</h3>
+            <DownloadFolderDropdown isOnboarding={true}></DownloadFolderDropdown>
+            <p className="modal-desc slide-in">All reports generated from Purple HATS will be auto-downloaded into this folder.</p>
             <PageIndicator page={4}></PageIndicator>
           </>
         )
@@ -144,7 +144,7 @@ const OnboardingComponent = ({
         return (
           <>
             <div className="visually-hidden" aria-live="polite" role="status">Item 5 of 5</div>
-            <h3 className="modal-title fade-in">Get to know you</h3>
+            <h3 className="modal-title slide-in">Get to know you</h3>
             <UserDetailsForm
               formID={formID}
               setName={setName}
@@ -154,7 +154,7 @@ const OnboardingComponent = ({
               setUserInputErrorMessage={setUserInputErrorMessage}
               isOnboarding={true}
             />
-            <p className="modal-desc fade-in">
+            <p className="modal-desc slide-in">
               To personalise your experience, we will be collecting your name, email address and app usage data. Your information fully complies with {policyUrlElem}
             </p>
             <PageIndicator page={5}></PageIndicator>
diff --git a/src/common/components/DownloadFolderDropdown.jsx b/src/common/components/DownloadFolderDropdown.jsx
index 611a7ff9..125cb572 100644
--- a/src/common/components/DownloadFolderDropdown.jsx
+++ b/src/common/components/DownloadFolderDropdown.jsx
@@ -7,10 +7,12 @@ import { useEffect, useState } from "react";
 import services from "../../services";
 import editIcon from "../../assets/edit-icon.svg";
 
-const DownloadFolderDropdown = () => {
+const DownloadFolderDropdown = ({
+  isOnboarding
+}) => {
+    const dropdownClassName = isOnboarding ? "download-dropdown slide-in" : "download-dropdown";
     const [exportDir, setExportDir] = useState();
-    const [openDropDown, setOpenDropDown] = useState(false);
-   
+    
     useEffect(() => {
         const getExportDir = async () => {
             const userData = await services.getUserData();
@@ -23,12 +25,11 @@ const DownloadFolderDropdown = () => {
     const handleSetExportDir = async () => {
         const exportDir = await window.services.setExportDir(); 
         setExportDir(exportDir);
-        setOpenDropDown(false);
     }
 
     return (
-        <div className="download-dropdown">
-          <Button className="dir-info-button download-dropdown-btn" aria-describedby="download-folder-label" onClick={handleSetExportDir}>
+        <div className={dropdownClassName}>
+          <button className="dir-info-button download-dropdown-btn" aria-describedby="download-folder-label" onClick={handleSetExportDir}>
             <div className="d-flex download-path">
               <img src={folder}></img>
               <span id="dir-info">{exportDir}</span>
@@ -36,7 +37,7 @@ const DownloadFolderDropdown = () => {
             <div className="change-download-btn">
               <img src={editIcon} aria-label="Change download directory"></img>
             </div>
-        </Button>
+        </button>
       </div>
     )
 }
diff --git a/src/common/components/UserDetailsForm.jsx b/src/common/components/UserDetailsForm.jsx
index e3c8727c..0eff1b26 100644
--- a/src/common/components/UserDetailsForm.jsx
+++ b/src/common/components/UserDetailsForm.jsx
@@ -11,7 +11,7 @@ const UserDetailsForm = ({
     setUserInputErrorMessage,
     isOnboarding,
 }) => {
-    const userFormClassName = isOnboarding ? "user-form fade-in" : "user-form";
+    const userFormClassName = isOnboarding ? "user-form slide-in" : "user-form";
     const emailInput = document.querySelector('#email'); 
 
     const onHandleEmailChange = (e) => {