From 6097e8e449e90bc4e39b955fe3030dfae6c5354b Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Fri, 30 Sep 2022 13:25:24 +0000
Subject: [PATCH] fix: profile navigation and buttons style
---
.../SgeConnectView.spec.tsx.snap | 22 +++++++++----------
src/components/Content/content.scss | 3 +++
.../EcogestureFormEquipment.spec.tsx.snap | 22 +++++++++----------
.../EcogestureFormSingleChoice.spec.tsx.snap | 22 +++++++++----------
.../EcogestureFormView.spec.tsx.snap | 22 +++++++++----------
src/components/FormGlobal/FormNavigation.tsx | 6 ++---
src/components/FormGlobal/formNavigation.scss | 19 +++++-----------
.../ProfileType/profileTypeForm.scss | 4 ----
.../ProfileType/profileTypeView.scss | 5 +++--
src/styles/components/_buttons.scss | 10 ++++++---
10 files changed, 66 insertions(+), 69 deletions(-)
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index 349a2f992..c47420eac 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
@@ -1100,7 +1100,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
className="profile-navigation-button"
classes={
Object {
- "label": "text-16-normal",
+ "label": "text-16-bold",
"root": "btn-profile-back",
}
}
@@ -1126,7 +1126,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label text-16-bold",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
@@ -1193,7 +1193,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label text-16-bold"
>
< profile_type.form.button_previous
</span>
@@ -1207,8 +1207,8 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
className="profile-navigation-button disabled"
classes={
Object {
- "label": "text-16-normal",
- "root": "btn-profile-next rounded",
+ "label": "text-16-bold",
+ "root": "btn-profile-next",
}
}
disabled={true}
@@ -1233,13 +1233,13 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label text-16-bold",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
+ "root": "MuiButton-root btn-profile-next",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -1255,7 +1255,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button disabled Mui-disabled"
+ className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
component="button"
disabled={true}
focusRipple={true}
@@ -1265,7 +1265,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button disabled Mui-disabled"
+ className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
classes={
Object {
"disabled": "Mui-disabled",
@@ -1282,7 +1282,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
>
<button
aria-label="profile_type.accessibility.button_next"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button disabled Mui-disabled Mui-disabled"
+ className="MuiButtonBase-root MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled Mui-disabled"
disabled={true}
onBlur={[Function]}
onClick={[Function]}
@@ -1300,7 +1300,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label text-16-bold"
>
profile_type.form.button_next >
</span>
diff --git a/src/components/Content/content.scss b/src/components/Content/content.scss
index 5d6b401d1..4d5c7ecbc 100644
--- a/src/components/Content/content.scss
+++ b/src/components/Content/content.scss
@@ -6,6 +6,9 @@
height: inherit;
margin-top: 116px;
background-color: $default-background;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
@media #{$large-phone} {
margin-top: 0;
height: 100%;
diff --git a/src/components/EcogestureForm/__snapshots__/EcogestureFormEquipment.spec.tsx.snap b/src/components/EcogestureForm/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
index e4159159d..a08a41566 100644
--- a/src/components/EcogestureForm/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
+++ b/src/components/EcogestureForm/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
@@ -317,7 +317,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
className="profile-navigation-button"
classes={
Object {
- "label": "text-16-normal",
+ "label": "text-16-bold",
"root": "btn-profile-back",
}
}
@@ -343,7 +343,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label text-16-bold",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
@@ -410,7 +410,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label text-16-bold"
>
< profile_type.form.button_previous
</span>
@@ -424,8 +424,8 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
className="profile-navigation-button"
classes={
Object {
- "label": "text-16-normal",
- "root": "btn-profile-next rounded",
+ "label": "text-16-bold",
+ "root": "btn-profile-next",
}
}
disabled={false}
@@ -450,13 +450,13 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label text-16-bold",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
+ "root": "MuiButton-root btn-profile-next",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -472,7 +472,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button"
+ className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button"
component="button"
disabled={false}
focusRipple={true}
@@ -482,7 +482,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button"
+ className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button"
classes={
Object {
"disabled": "Mui-disabled",
@@ -499,7 +499,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
>
<button
aria-label="profile_type.accessibility.button_next"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button"
+ className="MuiButtonBase-root MuiButton-root btn-profile-next MuiButton-text profile-navigation-button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -517,7 +517,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label text-16-bold"
>
profile_type.form.button_next >
</span>
diff --git a/src/components/EcogestureForm/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap b/src/components/EcogestureForm/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
index e68886b80..93eafddb3 100644
--- a/src/components/EcogestureForm/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
+++ b/src/components/EcogestureForm/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
@@ -92,7 +92,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
className="profile-navigation-button"
classes={
Object {
- "label": "text-16-normal",
+ "label": "text-16-bold",
"root": "btn-profile-back",
}
}
@@ -118,7 +118,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label text-16-bold",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
@@ -185,7 +185,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label text-16-bold"
>
< profile_type.form.button_previous
</span>
@@ -199,8 +199,8 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
className="profile-navigation-button disabled"
classes={
Object {
- "label": "text-16-normal",
- "root": "btn-profile-next rounded",
+ "label": "text-16-bold",
+ "root": "btn-profile-next",
}
}
disabled={true}
@@ -225,13 +225,13 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label text-16-bold",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
+ "root": "MuiButton-root btn-profile-next",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -247,7 +247,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button disabled Mui-disabled"
+ className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
component="button"
disabled={true}
focusRipple={true}
@@ -257,7 +257,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
>
<ForwardRef(ButtonBase)
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button disabled Mui-disabled"
+ className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
classes={
Object {
"disabled": "Mui-disabled",
@@ -274,7 +274,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
>
<button
aria-label="profile_type.accessibility.button_next"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button disabled Mui-disabled Mui-disabled"
+ className="MuiButtonBase-root MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled Mui-disabled"
disabled={true}
onBlur={[Function]}
onClick={[Function]}
@@ -292,7 +292,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label text-16-bold"
>
profile_type.form.button_next >
</span>
diff --git a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
index 3caf0d886..70dd31dc9 100644
--- a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
+++ b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
@@ -103,7 +103,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
className="profile-navigation-button"
classes={
Object {
- "label": "text-16-normal",
+ "label": "text-16-bold",
"root": "btn-profile-back",
}
}
@@ -129,7 +129,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label text-16-bold",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
@@ -196,7 +196,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label text-16-bold"
>
< profile_type.form.button_previous
</span>
@@ -210,8 +210,8 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
className="profile-navigation-button disabled"
classes={
Object {
- "label": "text-16-normal",
- "root": "btn-profile-next rounded",
+ "label": "text-16-bold",
+ "root": "btn-profile-next",
}
}
disabled={true}
@@ -236,13 +236,13 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label text-16-bold",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
+ "root": "MuiButton-root btn-profile-next",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -258,7 +258,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button disabled Mui-disabled"
+ className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
component="button"
disabled={true}
focusRipple={true}
@@ -268,7 +268,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button disabled Mui-disabled"
+ className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
classes={
Object {
"disabled": "Mui-disabled",
@@ -285,7 +285,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
>
<button
aria-label="profile_type.accessibility.button_next"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button disabled Mui-disabled Mui-disabled"
+ className="MuiButtonBase-root MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled Mui-disabled"
disabled={true}
onBlur={[Function]}
onClick={[Function]}
@@ -303,7 +303,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label text-16-bold"
>
profile_type.form.button_next >
</span>
diff --git a/src/components/FormGlobal/FormNavigation.tsx b/src/components/FormGlobal/FormNavigation.tsx
index 62dc25ad9..085b6984e 100644
--- a/src/components/FormGlobal/FormNavigation.tsx
+++ b/src/components/FormGlobal/FormNavigation.tsx
@@ -47,7 +47,7 @@ const FormNavigation: React.FC<FormNavigationProps> = ({
disabled={step === ProfileTypeStepForm.HOUSING_TYPE}
classes={{
root: 'btn-profile-back',
- label: 'text-16-normal',
+ label: 'text-16-bold',
}}
>
{`< ${t('profile_type.form.button_previous')}`}
@@ -65,8 +65,8 @@ const FormNavigation: React.FC<FormNavigationProps> = ({
})}
disabled={disableNextButton}
classes={{
- root: 'btn-profile-next rounded',
- label: 'text-16-normal',
+ root: 'btn-profile-next',
+ label: 'text-16-bold',
}}
>
{step === ProfileTypeStepForm.UPDATE_DATE ||
diff --git a/src/components/FormGlobal/formNavigation.scss b/src/components/FormGlobal/formNavigation.scss
index 4ed172750..d3eca1a9e 100644
--- a/src/components/FormGlobal/formNavigation.scss
+++ b/src/components/FormGlobal/formNavigation.scss
@@ -4,30 +4,23 @@
.profile-navigation {
border-top: 1px solid $grey-dark;
background: $dark-2;
- position: fixed;
- bottom: 0;
- height: 6.5rem;
- width: 100%;
display: flex;
justify-content: center;
- align-items: flex-start;
- padding: 0 0 env(safe-area-inset-bottom) 0;
- left: 0;
+ align-items: center;
+ gap: 1.5rem;
+ padding: 1rem;
+
@media (min-width: $width-tablet) {
background: $dark-light-2;
height: 3rem;
}
- .rounded {
- border-radius: 22px;
- margin-left: 1rem;
- margin-right: 1rem;
- }
+
.disabled {
opacity: 0.5;
}
button.profile-navigation-button {
max-width: 12.5rem;
- margin: 0.375rem 1rem;
+ margin: 0;
padding: 0.5rem 1rem;
}
}
diff --git a/src/components/ProfileType/profileTypeForm.scss b/src/components/ProfileType/profileTypeForm.scss
index e24cda70d..f6729209f 100644
--- a/src/components/ProfileType/profileTypeForm.scss
+++ b/src/components/ProfileType/profileTypeForm.scss
@@ -5,11 +5,7 @@
.profile-form-container {
color: $white;
margin: 1rem 1rem 3.5rem;
- width: 100%;
max-width: 53rem;
- @media (min-width: $width-tablet) {
- margin: 1rem 1rem 0;
- }
.text,
.number {
font-size: 1.25rem;
diff --git a/src/components/ProfileType/profileTypeView.scss b/src/components/ProfileType/profileTypeView.scss
index 2723a89e3..188ab4423 100644
--- a/src/components/ProfileType/profileTypeView.scss
+++ b/src/components/ProfileType/profileTypeView.scss
@@ -1,9 +1,10 @@
.profile-type-container {
position: relative;
- height: 100%;
min-height: inherit;
display: flex;
- justify-content: center;
+ flex: 1;
+ flex-direction: column;
+ justify-content: space-between;
label,
input {
cursor: pointer;
diff --git a/src/styles/components/_buttons.scss b/src/styles/components/_buttons.scss
index 974a18400..2ee92640a 100644
--- a/src/styles/components/_buttons.scss
+++ b/src/styles/components/_buttons.scss
@@ -79,12 +79,16 @@ button {
}
}
&.btn-profile-next {
- @include button($gold-shadow, #000000, none, $multi-color-radial-gradient) {
+ @include button(
+ $gold-shadow,
+ #000000,
+ 1px solid $gold-shadow,
+ $multi-color-radial-gradient
+ ) {
background-color: darken($gold-shadow, 12%);
}
}
&.btn-profile-back {
- @include button(none, $soft-grey, none, none) {
- }
+ @include button(none, $grey-bright, 1px solid $grey-bright, none);
}
}
--
GitLab