Skip to content

Commit

Permalink
feat: Onboarding questions screen mobile responsiveness bb-289 (#345)
Browse files Browse the repository at this point in the history
* feat(frontend): make onboarding screen mobile responsive bb-289

* fix(frontend): fix radio input size on mobile bb-289

* fix(frontend): change button size to match figma bb-289

* refactor(frontend): resolve pr comments B10 bb-289

* refactor(frontend): change breakpoint bb-289

* fix(frontend): decrease font-size on mobile bb-289

* refactor(frontend): added button label enum bb-289

* fix(frontend): fix back button showing on first question bb-289

* fix(frontend): fix back button not displaying on last question bb-289

* chore(frontend): resolve pr comments bb-289

---------

Co-authored-by: Farid Shabanov <61088675+fshabanov@users.noreply.github.com>
  • Loading branch information
JD-Rosales and fshabanov authored Sep 10, 2024
1 parent 812ce87 commit 7a0c849
Show file tree
Hide file tree
Showing 8 changed files with 56 additions and 23 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
}
}

@media (width <= 640px) {
@media (width <= 480px) {
.progress-line {
width: 40px;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
.onboarding-answer {
width: 342px;
width: 100%;
max-width: 342px;
}

@media (width <= 640px) {
@media (width <= 768px) {
.onboarding-answer {
width: 250px;
max-width: 312px;
}
}
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export { FIRST_QUESTION_INDEX } from "./first-question-index.constant.js";
export { ONBOARDING_FORM_DEFAULT_VALUES } from "./onboarding-form-default-values.contant.js";
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
const FIRST_QUESTION_INDEX = 0;

export { FIRST_QUESTION_INDEX };
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
const ButtonLabel = {
ANALYZE: "ANALYZE",
BACK: "BACK",
NEXT: "NEXT",
} as const;

export { ButtonLabel };
1 change: 1 addition & 0 deletions apps/frontend/src/pages/onboarding/libs/enums/enums.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { ButtonLabel } from "./button-label.enum.js";
36 changes: 24 additions & 12 deletions apps/frontend/src/pages/onboarding/onboarding.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@ import {
} from "~/modules/onboarding/onboarding.js";

import { OnboardingAnswer } from "./libs/components/components.js";
import { ONBOARDING_FORM_DEFAULT_VALUES } from "./libs/constants/constants.js";
import {
FIRST_QUESTION_INDEX,
ONBOARDING_FORM_DEFAULT_VALUES,
} from "./libs/constants/constants.js";
import { ButtonLabel } from "./libs/enums/enums.js";
import {
type OnboardingAnswerRequestBodyDto,
type OnboardingFormValues,
Expand All @@ -30,11 +34,13 @@ const Onboarding: React.FC = () => {

const {
currentQuestionIndex,
isFirstQuestion,
isLastQuestion,
question,
totalQuestionsAmount,
} = useAppSelector(({ onboarding }) => ({
currentQuestionIndex: onboarding.currentQuestionIndex,
isFirstQuestion: onboarding.currentQuestionIndex === FIRST_QUESTION_INDEX,
isLastQuestion:
onboarding.currentQuestionIndex ===
onboarding.questions.length - PREVIOUS_INDEX_OFFSET,
Expand Down Expand Up @@ -132,19 +138,25 @@ const Onboarding: React.FC = () => {
);
})}
<div className={styles["button-container"]}>
{!isLastQuestion && (
{!isFirstQuestion && (
<div className={styles["button-wrapper"]}>
<Button
label={ButtonLabel.BACK}
onClick={handlePreviousStep}
type="button"
variant="secondary"
/>
</div>
)}
<div className={styles["button-wrapper"]}>
<Button
label="BACK"
onClick={handlePreviousStep}
type="button"
variant="secondary"
isPrimary={isValid}
label={
isLastQuestion ? ButtonLabel.ANALYZE : ButtonLabel.NEXT
}
type="submit"
/>
)}
<Button
isPrimary={isValid}
label={isLastQuestion ? "ANALYZE" : "NEXT"}
type="submit"
/>
</div>
</div>
</form>
</>
Expand Down
22 changes: 15 additions & 7 deletions apps/frontend/src/pages/onboarding/styles.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -40,31 +40,39 @@
justify-content: center;
width: 342px;
margin-bottom: auto;
text-align: center;
}

.button-container {
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
justify-content: center;
width: 100%;
max-width: 300px;
margin-top: 76px;
}

.button-container .button-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 309px;
height: 42px;
}

@media (width <= 768px) {
.container {
padding: 20px;
}

.question {
width: 100%;
font-size: 28px;
line-height: 30px;
font-size: 25px;
line-height: 25px;
}

.button-container {
flex-direction: column;
max-width: 250px;
.answers {
width: 100%;
}
}

0 comments on commit 7a0c849

Please sign in to comment.