overleaf/services/web/frontend/stylesheets/modules/overleaf-integration.less
Domagoj Kriskovic 2d552f27e2 Confirm email component (storybook) (#15362)
* checkout confirm email component

* useTranslation

* less and locales

* mocked api story

* sort locales

* feedback state, img as prop

* confirm instead of verify

* locales changes

* use Trans components

* disable jsx-key for trans

* confirm email page

* success typo, bsStyle

* added aria-polite

* aria-live as wrapper

* using btn-secondary

* secondary btn only for resend

* InputNumber component

* fix lint

* inputMode numeric

* bsStyle

* example email in storybook

* autocomplete, autofocus

* aria-live on alert

* removed unused classes

* wrapped aria-live

* fix lint errors

* wrong eslint ignore line

* handle any type

* apply pr suggestions

* aria-label on input

* using error icon

* removed aria-label

GitOrigin-RevId: 2330b7da9278bc250e68acd5d80c28a325c3c653
2023-10-27 08:03:19 +00:00

103 lines
1.4 KiB
Text

#confirm-email {
max-width: 400px;
padding: 24px;
margin: 0 auto;
background: #fff;
display: flex;
flex-direction: column;
gap: 24px;
.logo {
width: 130px;
margin: 0 auto;
}
form {
.text-danger {
display: flex;
gap: 6px;
padding: 4px;
.icon {
padding-top: 2px;
}
}
.form-actions {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 20px;
}
}
}
#onboarding-data-collection {
width: 720px;
padding: 24px;
margin: 0 auto;
background: #fff;
display: flex;
flex-direction: column;
gap: 24px;
p {
font-size: 20px;
margin-bottom: 5px;
}
.logo {
width: 130px;
margin: 0 auto;
}
form {
display: flex;
flex-direction: column;
gap: 24px;
.group-horizontal {
display: flex;
justify-content: stretch;
gap: 24px;
.form-group {
flex-grow: 1;
}
}
.form-actions {
display: flex;
justify-content: space-between;
> div {
display: flex;
align-items: center;
gap: 8px;
button.btn-info-ghost {
color: @gray-dark;
}
}
}
}
.onboarding-step-2 {
.checkbox {
margin: 0;
p {
margin-bottom: 0;
}
label {
display: flex;
align-items: center;
gap: 8px;
input {
margin-right: 4px;
}
}
}
}
}