Skip to content
Snippets Groups Projects
Commit 6097e8e4 authored by Bastien DUMONT's avatar Bastien DUMONT :angel:
Browse files

fix: profile navigation and buttons style

parent e2709835
Branches
Tags
2 merge requests!777Update master to V2.0,!729Resolve "[Profil] Navigation lors de la complétion d'un profil"
Hide whitespace changes
Inline Side-by-side
Showing
with 66 additions and 69 deletions
src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+ 11
− 11
View file @ 6097e8e4
......@@ -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"
>
&lt; 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 &gt;
</span>
......
src/components/Content/content.scss
+ 3
− 0
View file @ 6097e8e4
......@@ -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%;
......
src/components/EcogestureForm/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
+ 11
− 11
View file @ 6097e8e4
......@@ -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"
>
&lt; 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 &gt;
</span>
......
src/components/EcogestureForm/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
+ 11
− 11
View file @ 6097e8e4
......@@ -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"
>
&lt; 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 &gt;
</span>
......
src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
+ 11
− 11
View file @ 6097e8e4
......@@ -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"
>
&lt; 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 &gt;
</span>
......
src/components/FormGlobal/FormNavigation.tsx
+ 3
− 3
View file @ 6097e8e4
......@@ -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 ||
......
src/components/FormGlobal/formNavigation.scss
+ 6
− 13
View file @ 6097e8e4
......@@ -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;
}
}
src/components/ProfileType/profileTypeForm.scss
+ 0
− 4
View file @ 6097e8e4
......@@ -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;
......
src/components/ProfileType/profileTypeView.scss
+ 3
− 2
View file @ 6097e8e4
.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;
......
src/styles/components/_buttons.scss
+ 7
− 3
View file @ 6097e8e4
......@@ -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);
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment