Skip to content

Commit

Permalink
Update survey UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@wpalani
wpalani committed Jul 6, 2024
1 parent 5021c12 commit 50963f7
Show file tree
Hide file tree
Showing 2 changed files with 168 additions and 160 deletions.
231 changes: 116 additions & 115 deletions static/css/deactivation-survey.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@
display: flex;
justify-content: center;
z-index: 100000;
--nfd-deactivation-overlay: rgba(43, 46, 56, 0.9);
--nfd-deactivation-background: #F8F8F8;
--nfd-deactivation-title: #242424;
--nfd-deactivation-text: #6C6B6B;
}

#nfd-deactivation-survey * {
Expand All @@ -39,137 +43,95 @@

.nfd-deactivation-survey__overlay {
animation: nfd-fade-in 200ms both;
background-color: rgba(43, 46, 56, 0.9);
background-color: var(--nfd-deactivation-overlay);
}

.nfd-deactivation-survey__disabled {
z-index: 2;
}

.nfd-deactivation-survey__container {
animation: nfd-fade-in 400ms 200ms both, nfd-slide-up 400ms 200ms both;
background-color: white;
border-radius: 5px;
background-color: var(--nfd-deactivation-background);
color: #3C434A;
max-height: 80vh;
max-width: 1024px;
max-height: 90dvh;
max-width: 780px;
border-radius: 5px;
position: relative;
width: 80vw;
overflow-y: auto;
overflow-x: hidden;
animation: nfd-fade-in 400ms 200ms both, nfd-slide-up 400ms 200ms both;
}

.nfd-deactivation__content {
align-items: center;
background-color: #f9f9f6;
display:flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
justify-content: center;
text-align: center;
}

.nfd-deactivation-form {
width: 100%;
gap: 1.5rem;
width: 700px;
min-height: 500px;
padding: 2rem;
}

.nfd-deactivation__header,
.nfd-deactivation__body,
.nfd-deactivation__footer-content,
.nfd-deactivation-fieldset {
padding: 0 4rem;
margin: 0 auto;
max-width: 90%;
}

.nfd-deactivation__header {
margin-top: 2rem;
text-align: center;
width: 100%;
}

.nfd-deactivation__body {
margin: 1rem auto;
text-align: left;
width: 100%;
}

.nfd-deactivation__footer {
background-color: #fff;
border-top: 1px solid #dcdcde;
margin-top: 1rem;
width: 100%;
}

.nfd-deactivation__footer-content {
padding-top: .5rem;
padding-bottom: .5rem
margin: 0 auto;
max-width: 99%;
}

.nfd-deactivation__content-title {
font-size: 2.5rem;
.nfd-deactivation__header-title {
font-size: 2.1rem;
font-weight: 500;
line-height: 1.1em;
margin: 0 0 .75rem;
color: var(--nfd-deactivation-title);
}

.nfd-deactivation__content-subtitle {
font-size: 1.25rem;
.nfd-deactivation__header-subtitle {
font-size: 1.1rem;
line-height: 1.25em;
margin: 0;
color: var(--nfd-deactivation-text);
}

.nfd-deactivation__helptext {
font-size: 1.0rem;
padding-right: 3rem;
text-align: left;
}

.nfd-deactivation-survey__content {
padding: 1.5rem;
.nfd-deactivation__cards {
display: flex;
flex-direction: column;
gap: 1rem;
}

.nfd-deactivation__card {
align-items: center;
background-color: #fff;
border: none;
border-radius: 3px;
box-shadow: 0 0 15px #e2e2df;
display: flex;
flex-wrap: wrap;
gap: .5rem;
justify-content: left;
margin: 0 auto 1rem;
max-width: 100%;
padding: 1rem 2rem;
background-color: white;
text-align: left;
padding: 10px;
border: 1px solid #EBECF4;
border-radius: 4px;
}

.nfd-deactivation__card-title {
font-size: 1.25rem;
font-weight: 600;
color: #111111;
font-size: 1rem;
font-weight: 500;
color: var(--nfd-deactivation-title);
}

.nfd-deactivation__card-desc {
color: #000000;
}

.nfd-deactivation-fieldset {
border-top: 1px solid #dcdcde;
display: flex;
flex-direction: column;
padding-top: 1rem;
text-align: left;
gap: .75rem;
color: var(--nfd-deactivation-text);
}

.nfd-deactivation-label {
font-size: 1rem;
font-weight: 600;
}

.nfd-deactivation-textarea {
font-size: 1rem;
padding: .5em;
min-height: 10vh;
width: 100%;
}


.nfd-deactivation-survey__container button[aria-label="Close dialog"] {
border: none;
background-color: transparent;
Expand All @@ -183,50 +145,65 @@
top: 5px;
}

.nfd-deactivation-survey__content-header h3 {
color: #3C434A;
font-size: 1rem;
margin: 0 0 .45rem;
.nfd-deactivation-form {
width: 100%;
}

.nfd-deactivation-survey__content form {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1.5rem;
width: 100%;
.nfd-deactivation-form .nfd-deactivation__body {
width: 85%;
}

.nfd-deactivation-survey__content form label {
.nfd-deactivation-fieldset {
border-top: 1px solid #dcdcde;
padding-top: 1rem;
text-align: left;
}

.nfd-deactivation-form label {
display: inline-block;
font-weight: 500;
margin-bottom: 8px;
}

.nfd-deactivation-survey__content form textarea {
.nfd-deactivation-form textarea {
border-color: #8B8F94;
max-height: 150px;
min-height: 60px;
min-height: 75px;
padding: 8px;
width: 100%;
}

.nfd-deactivation-survey__content form textarea::placeholder {
.nfd-deactivation-form textarea::placeholder {
font-size: 13px;
}

.nfd-deactivation-survey__content-actions {
align-items: center;
.nfd-deactivation__footer {
padding-top: 1.3rem;
display: flex;
flex-direction: column;
gap: .75rem;
}

.nfd-deactivation__footer-actions {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
justify-content: space-between;
}

.nfd-deactivation-survey__content-actions > div {
align-items: center;
.nfd-deactivation__footer-actions > div {
display: flex;
justify-content: center;
align-items: center;
gap: .75rem;
}

.nfd-deactivation__helptext p {
color: var(--nfd-deactivation-text);
font-size: .9rem;
margin: 0;
}

.nfd-deactivation-survey-action {
background-color: transparent;
border: none;
Expand Down Expand Up @@ -268,28 +245,52 @@
width: 20%;
}

.nfd-deactivation__step {
position: absolute;
bottom: 15px;
right: 15px;
color: #8b8e9a;
font-size: 16px;
letter-spacing: 2.5px;
user-select: none;
}

/* mobile */
@media screen and (max-width: 600px) {
.nfd-deactivation-survey__container,
.nfd-deactivation-survey__container[data-step="1"] {
max-height: 100vh;
max-width: 100vw;
width: 100%;
@media screen and (max-width: 780px) {
.nfd-deactivation-survey__container {
max-width: 95vw;
}

.nfd-deactivation__header,
.nfd-deactivation__body,
.nfd-deactivation__footer-content,
.nfd-deactivation-fieldset {
padding: 0 2rem;
.nfd-deactivation__content {
max-width: 100%;
padding: 1.2rem;
gap: 1rem;
}
}

@media screen and (max-width: 600px) {
.nfd-deactivation-survey__container {
overflow: scroll;
.nfd-deactivation__header-title {
font-size: 1.6rem;
}

.nfd-deactivation__header-subtitle {
font-size: 1rem;
}

.nfd-deactivation__cards {
gap: .75rem;
}

.nfd-deactivation__card-title {
font-size: .9rem;
}

.nfd-deactivation-form .nfd-deactivation__body {
width: 99%;
}
}

.nfd-deactivation-form textarea {
max-height: 75px;
}
}

/* animations */
@keyframes nfd-submitting {
Expand Down
Loading

0 comments on commit 50963f7

Please sign in to comment.