Skip to content

Commit

Permalink
Make UI Improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@greyguy21
greyguy21 committed Jul 12, 2023
1 parent a6d365b commit 034b597
Show file tree
Hide file tree
Showing 6 changed files with 33 additions and 42 deletions.
2 changes: 1 addition & 1 deletion public/electron/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ app.on("ready", async () => {
})

await userDataManager.setData(userDataEvent);
await userDataFormManager.init();
// await userDataFormManager.init();
});

app.on("quit", () => {
Expand Down
2 changes: 1 addition & 1 deletion public/electron/userDataManager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
24 changes: 7 additions & 17 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,10 @@ a:hover {
margin-bottom: 1rem;
}

.onboarding-modal .download-dropdown {
padding-bottom: 1rem;
}

.modal {
display: flex;
align-items: center;
Expand Down Expand Up @@ -330,7 +334,7 @@ a:hover {
white-space: nowrap;
}

@keyframes fade-in {
@keyframes slide-in {
from {
opacity: 0;
transform: translateX(20px);
Expand All @@ -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;
Expand Down
30 changes: 15 additions & 15 deletions src/MainWindow/Onboarding/OnboardingComponent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
)
Expand All @@ -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>
</>
)
Expand All @@ -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>
</>
)
Expand All @@ -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>
</>
)
Expand All @@ -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}
Expand All @@ -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>
Expand Down
15 changes: 8 additions & 7 deletions src/common/components/DownloadFolderDropdown.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -23,20 +25,19 @@ 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>
</div>
<div className="change-download-btn">
<img src={editIcon} aria-label="Change download directory"></img>
</div>
</Button>
</button>
</div>
)
}
Expand Down
2 changes: 1 addition & 1 deletion src/common/components/UserDetailsForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down

0 comments on commit 034b597

Please sign in to comment.