Skip to content
Snippets Groups Projects
Commit 37908171 authored by Guilhem CARRON's avatar Guilhem CARRON
Browse files

fix(design): Design fixs 1.5.1 konnector modal message + css after completing profile

parent 41efdacc
Branches
Tags
2 merge requests!496fix(design): Design fixs 1.5.1 konnector modal message + css after completing profile,!4941.5.1
...@@ -123,6 +123,7 @@ const KonnectorModal: React.FC<KonnectorModalProps> = ({ ...@@ -123,6 +123,7 @@ const KonnectorModal: React.FC<KonnectorModalProps> = ({
})} })}
> >
<p>{text.first}</p> <p>{text.first}</p>
<p>{text.second}</p>
</div> </div>
))} ))}
</div> </div>
......
...@@ -30,197 +30,197 @@ ...@@ -30,197 +30,197 @@
} }
} }
} }
} .profile-question-label {
.profile-question-label { font-weight: bold;
font-weight: bold; font-size: 1.375rem;
font-size: 1.375rem; line-height: 150%;
line-height: 150%; padding: 1rem 0;
padding: 1rem 0; }
} .profile-question-hint {
.profile-question-hint { font-size: 1rem;
font-size: 1rem; color: $grey-bright;
color: $grey-bright; display: block;
display: block; margin-bottom: 1rem;
margin-bottom: 1rem; font-style: italic;
font-style: italic; }
} .profile-question-answers {
.profile-question-answers { display: flex;
display: flex; }
} .profile-question-answers-radio-long {
.profile-question-answers-radio-long { flex-wrap: wrap;
flex-wrap: wrap; }
}
.profile-question-answers-other { .profile-question-answers-other {
flex-direction: column; flex-direction: column;
} }
.radio_short, .radio_short,
.radio_long, .radio_long,
.checkbox { .checkbox {
background: linear-gradient(180deg, #323339 0%, #25262b 100%); background: linear-gradient(180deg, #323339 0%, #25262b 100%);
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
margin: 0.5rem 0; margin: 0.5rem 0;
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: bold; font-weight: bold;
input { input {
margin: 0.5rem 1rem 0.5rem 0.5rem; margin: 0.5rem 1rem 0.5rem 0.5rem;
appearance: none; appearance: none;
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
border-radius: 50%; border-radius: 50%;
background: $dark-background; background: $dark-background;
position: relative; position: relative;
// &:focus {
// outline: none;
// }
}
}
.checkbox {
input {
border-radius: 1px;
}
}
.radio_short,
.checkbox {
padding: 1.2rem;
border-radius: 4px;
}
.radio_long {
padding: 0.5rem 1rem;
border-radius: 4px;
text-align: center;
}
.answer-checked {
background: radial-gradient(
105.25% 64.58% at 49.68% 70.83%,
rgba(226, 137, 4, 0.5) 0%,
rgba(255, 255, 255, 0) 100%
),
#f1c017;
color: $dark-light-2;
input {
&:before,
&:after {
content: '';
position: absolute;
display: inline-block;
background: $gold-shadow;
border-radius: 0.5rem;
}
&:before {
width: 3px;
height: 12px;
left: 10px;
top: 4px;
transform: rotate(41deg);
}
&:after {
width: 3px;
height: 6px;
left: 5px;
top: 8px;
transform: rotate(133deg);
}
}
}
.number-container {
display: flex;
justify-content: left;
align-items: center;
}
.btn-profile-number {
background: $grey-linear-gradient-background;
background-color: transparent;
border: none;
border-radius: 2px;
width: 2.5rem;
height: 2.5rem;
font-size: 2rem;
color: $white;
display: flex;
align-items: center;
justify-content: center;
margin: 0.5rem;
// &:focus { // &:focus {
// outline: none; // outline: none;
// } // }
} }
} button:disabled {
.checkbox { opacity: 0.5;
input {
border-radius: 1px;
} }
} .date-select {
.radio_short, margin: 0.5em;
.checkbox { border: 1px solid $gold-shadow;
padding: 1.2rem; background: $dark-light-2;
border-radius: 4px; font-weight: bold;
} .MuiInput-underline:after {
.radio_long { display: none;
padding: 0.5rem 1rem;
border-radius: 4px;
text-align: center;
}
.answer-checked {
background: radial-gradient(
105.25% 64.58% at 49.68% 70.83%,
rgba(226, 137, 4, 0.5) 0%,
rgba(255, 255, 255, 0) 100%
),
#f1c017;
color: $dark-light-2;
input {
&:before,
&:after {
content: '';
position: absolute;
display: inline-block;
background: $gold-shadow;
border-radius: 0.5rem;
} }
&:before { .year {
width: 3px; text-align: center;
height: 12px; display: inline-flex;
left: 10px; align-content: center;
top: 4px; font-size: 1.25rem;
transform: rotate(41deg); font-family: $text-font;
color: $white;
width: 93px;
svg {
top: 0;
background-color: $gold-shadow;
height: 100%;
}
} }
&:after { .month {
width: 3px; color: $white;
height: 6px; font-size: 1.25rem;
left: 5px; text-align: center;
top: 8px; display: inline-flex;
transform: rotate(133deg); align-content: center;
font-family: $text-font;
min-width: 130px;
max-width: 150px;
svg {
top: 0;
right: 0;
background-color: $gold-shadow;
height: 100%;
}
} }
} }
}
.number-container {
display: flex;
justify-content: left;
align-items: center;
}
.btn-profile-number {
background: $grey-linear-gradient-background;
background-color: transparent;
border: none;
border-radius: 2px;
width: 2.5rem;
height: 2.5rem;
font-size: 2rem;
color: $white;
display: flex;
align-items: center;
justify-content: center;
margin: 0.5rem;
// &:focus { .select-container {
// outline: none; display: flex;
// }
}
button:disabled {
opacity: 0.5;
}
.date-select {
margin: 0.5em;
border: 1px solid $gold-shadow;
background: $dark-light-2;
font-weight: bold;
.MuiInput-underline:after {
display: none;
}
.year {
text-align: center;
display: inline-flex;
align-content: center;
font-size: 1.25rem;
font-family: $text-font;
color: $white;
width: 93px;
svg {
top: 0;
background-color: $gold-shadow;
height: 100%;
}
} }
.month {
.date-option {
color: $white; color: $white;
font-size: 1.25rem;
text-align: center;
display: inline-flex;
align-content: center;
font-family: $text-font;
min-width: 130px;
max-width: 150px;
svg {
top: 0;
right: 0;
background-color: $gold-shadow;
height: 100%;
}
} }
}
.select-container {
display: flex;
}
.date-option { ul {
color: $white; background: linear-gradient(180deg, #323339 0%, #25262b 100%);
} color: $white;
font-weight: normal;
ul { .MuiMenuItem-root {
background: linear-gradient(180deg, #323339 0%, #25262b 100%); font-family: $text-font;
color: $white; text-align: center;
font-weight: normal; font-size: 1.25rem;
.MuiMenuItem-root { display: flex;
font-family: $text-font; justify-content: space-evenly;
text-align: center; :hover {
font-size: 1.25rem; background-color: $gold-shadow;
display: flex; }
justify-content: space-evenly; }
:hover { .MuiListItem-root.Mui-selected,
.MuiListItem-root.Mui-selected:hover {
background-color: $gold-shadow; background-color: $gold-shadow;
color: $dark-2;
font-weight: bold;
display: flex;
justify-content: space-evenly;
} }
} }
.MuiListItem-root.Mui-selected,
.MuiListItem-root.Mui-selected:hover {
background-color: $gold-shadow;
color: $dark-2;
font-weight: bold;
display: flex;
justify-content: space-evenly;
}
} }
[ [
{ {
"first": "La première fois cela peut prendre quelques minutes, par la suite, seulement quelques secondes." "first": "La première fois cela peut prendre quelques minutes, par la suite, seulement quelques secondes.",
"second": ""
}, },
{ {
"first": "Afin de limiter le temps de ce premier chargement, un historique réduit de vos consommations va être chargé. Vous aurez tout de même accès à un an d'historique dès à présent." }, "first": "Afin de limiter le temps de ce premier chargement, un historique réduit de vos consommations va être chargé. Vous aurez tout de même accès à un an d'historique dès à présent.",
"second": ""
},
{ {
"first": "Demain matin, vous aurez accès à l'ensemble de vos données (jusqu'à trois ans d'historique)." "first": "Demain matin, vous aurez accès à l'ensemble de vos données (jusqu'à trois ans d'historique).",
"second": ""
} }
] ]
...@@ -10754,12 +10754,19 @@ mini-css-extract-plugin@0.5.0: ...@@ -10754,12 +10754,19 @@ mini-css-extract-plugin@0.5.0:
schema-utils "^1.0.0" schema-utils "^1.0.0"
webpack-sources "^1.1.0" webpack-sources "^1.1.0"
   
minilog@3.1.0, "minilog@git+https://github.com/cozy/minilog.git#master": minilog@3.1.0:
version "3.1.0" version "3.1.0"
resolved "git+https://github.com/cozy/minilog.git#6da0aa58759c4f1a1a7e0fd093dbe2a67c035c55" resolved "git+https://github.com/cozy/minilog.git#6da0aa58759c4f1a1a7e0fd093dbe2a67c035c55"
dependencies: dependencies:
microee "0.0.6" microee "0.0.6"
   
"minilog@https://github.com/cozy/minilog.git#master":
version "3.1.0"
uid "6da0aa58759c4f1a1a7e0fd093dbe2a67c035c55"
resolved "https://github.com/cozy/minilog.git#6da0aa58759c4f1a1a7e0fd093dbe2a67c035c55"
dependencies:
microee "0.0.6"
minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1: minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment