mirror of
https://github.com/bluewave-labs/Checkmate.git
synced 2026-01-18 07:39:54 -06:00
Merge pull request #95 from MuhammadKhalilzadeh/polishing-values
Polishing values
This commit is contained in:
Veysel
@@ -1,22 +1,5 @@
|
||||
:root {
|
||||
--update-subscription-color-0: #101828;
|
||||
--update-subscription-color-1: #475467;
|
||||
--update-subscription-color-2: #fff;
|
||||
--update-subscription-color-3: #eaecf0;
|
||||
--update-subscription-color-4: #7f56d9;
|
||||
--update-subscription-color-5: #1570ef;
|
||||
--update-subscription-color-6: #344054;
|
||||
--update-subscription-color-7: #d0d5dd;
|
||||
--update-subscription-padding-0: 12px 16px;
|
||||
--update-subscription-margin-right: 12px;
|
||||
--update-subscription-font-size: 13px;
|
||||
--update-subscription-radius-0: 4px;
|
||||
--spacing-1: 16px;
|
||||
--spacing-2: 20px;
|
||||
}
|
||||
|
||||
.update-subscription {
|
||||
margin: var(--spacing-2);
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.update-subscription,
|
||||
@@ -33,7 +16,7 @@
|
||||
.subscription-dialog-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--update-subscription-color-0);
|
||||
color: var(--env-var-color-1);
|
||||
}
|
||||
|
||||
.v-spacing-small {
|
||||
@@ -46,7 +29,7 @@
|
||||
|
||||
.subscription-dialog-text {
|
||||
font-size: 13px;
|
||||
color: var(--update-subscription-color-1);
|
||||
color: var(--env-var-color-2);
|
||||
}
|
||||
|
||||
.subscription-dialog-controls {
|
||||
@@ -54,28 +37,28 @@
|
||||
}
|
||||
|
||||
.controls-negative {
|
||||
padding: var(--update-subscription-padding-0);
|
||||
margin-right: var(--update-subscription-margin-right);
|
||||
border-radius: var(--update-subscription-radius-0);
|
||||
border: 1px solid var(--update-subscription-color-3);
|
||||
background-color: var(--update-subscription-color-2);
|
||||
font-size: var(--update-subscription-font-size);
|
||||
padding: 12px 16px;
|
||||
margin-right: 12px;
|
||||
border-radius: var(--env-var-radius-1);
|
||||
border: 1px solid var(--env-var-color-6);
|
||||
background-color: var(--env-var-color-8);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
|
||||
.controls-positive,
|
||||
.subscribe-button {
|
||||
padding: var(--update-subscription-padding-0);
|
||||
margin-right: var(--update-subscription-margin-right);
|
||||
border-radius: var(--update-subscription-radius-0);
|
||||
border: 1px solid var(--update-subscription-color-4);
|
||||
background-color: var(--update-subscription-color-5);
|
||||
color: var(--update-subscription-color-2);
|
||||
font-size: var(--update-subscription-font-size);
|
||||
padding: 12px 16px;
|
||||
margin-right: 12px;
|
||||
border-radius: var(--env-var-radius-1);
|
||||
border: 1px solid var(--env-var-color-7);
|
||||
background-color: var(--env-var-color-3);
|
||||
color: var(--env-var-color-8);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
|
||||
.update-subscription-title {
|
||||
color: var(--update-subscription-color-6);
|
||||
padding: 0 var(--spacing-2);
|
||||
color: var(--env-var-color-5);
|
||||
padding: 0 20px;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
margin-bottom: 10px;
|
||||
@@ -83,17 +66,17 @@
|
||||
|
||||
.subscription-email {
|
||||
display: flex;
|
||||
padding: 0 var(--spacing-2);
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.subscription-email-field {
|
||||
width: 290px;
|
||||
height: 24px;
|
||||
border-radius: var(--update-subscription-radius-0);
|
||||
border: 1px solid var(--update-subscription-color-7);
|
||||
border-radius: var(--env-var-radius-1);
|
||||
border: 1px solid var(--env-var-color-4);
|
||||
box-shadow: 0px 1px 2px 0px rgba(101, 182, 28, 0.05);
|
||||
padding: 5px 15px;
|
||||
margin-right: var(--spacing-2);
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.subscribe-button {
|
||||
|
||||
@@ -1,24 +1,11 @@
|
||||
:root {
|
||||
--announcement-border-color: #d0d5dd;
|
||||
--announcement-border-radius: 4px;
|
||||
--announcement-border-radius-2: 8px;
|
||||
--announcement-font-size-0: 13px;
|
||||
--announcement-font-color-0: #344054;
|
||||
--announcement-font-color-1: #475467;
|
||||
--announcement-font-color-2: #1570ef;
|
||||
--announcement-padding: 16px;
|
||||
--info-icon-frame-color: #eaecf0;
|
||||
--margin: 20px;
|
||||
}
|
||||
|
||||
.announcement-without-tile {
|
||||
margin: var(--margin);
|
||||
margin: 20px;
|
||||
max-width: 343px;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
border: 1px solid var(--announcement-border-color);
|
||||
padding: var(--announcement-padding);
|
||||
border-radius: var(--announcement-border-radius);
|
||||
border: 1px solid var(--env-var-color-4);
|
||||
padding: 16px;
|
||||
border-radius: var(--env-var-radius-1);
|
||||
}
|
||||
|
||||
.h-spacing {
|
||||
@@ -26,13 +13,13 @@
|
||||
}
|
||||
|
||||
.announcement-without-content-subject {
|
||||
font-size: var(--announcement-font-size-0);
|
||||
color: var(--announcement-font-color-0);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
color: var(--env-var-color-5);
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.announcement-without-content-body {
|
||||
font-size: var(--announcement-font-size-0);
|
||||
color: var(--announcement-font-color-1);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
color: var(--env-var-color-2);
|
||||
}
|
||||
|
||||
@@ -1,71 +1,58 @@
|
||||
:root {
|
||||
--announcement-border-color: #d0d5dd;
|
||||
--announcement-border-radius: 4px;
|
||||
--announcement-border-radius-2: 8px;
|
||||
--announcement-font-size-0: 13px;
|
||||
--announcement-font-color-0: #344054;
|
||||
--announcement-font-color-1: #475467;
|
||||
--announcement-font-color-2: #1570ef;
|
||||
--announcement-padding: 16px;
|
||||
--info-icon-frame-color: #eaecf0;
|
||||
--tile-margin: 20px;
|
||||
}
|
||||
|
||||
.announcement-tile {
|
||||
margin: var(--tile-margin);
|
||||
margin: 20px;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
border: 1px solid var(--announcement-border-color);
|
||||
padding: var(--announcement-padding);
|
||||
border-radius: var(--announcement-border-radius);
|
||||
border: 1px solid var(--env-var-color-4);
|
||||
padding: 16px;
|
||||
border-radius: var(--env-var-radius-1);
|
||||
}
|
||||
|
||||
.info-icon-frame {
|
||||
display: flex;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid var(--info-icon-frame-color);
|
||||
border-radius: var(--announcement-border-radius-2);
|
||||
width: var(--env-var-default-2);
|
||||
height: var(--env-var-default-2);
|
||||
border: 1px solid var(--env-var-color-6);
|
||||
border-radius: var(--env-var-radius-2);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.announcement-content {
|
||||
padding: 0 var(--announcement-padding);
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.announcement-content-subject {
|
||||
font-size: var(--announcement-font-size-0);
|
||||
color: var(--announcement-font-color-0);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
color: var(--env-var-color-5);
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.announcement-content-body {
|
||||
font-size: var(--announcement-font-size-0);
|
||||
color: var(--announcement-font-color-1);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
color: var(--env-var-color-2);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.announcement-content-controllers {
|
||||
display: flex;
|
||||
font-size: var(--announcement-font-size-0);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.controllers-button-esc {
|
||||
font-size: var(--announcement-font-size-0);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
font-weight: 600;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.controllers-button-primary {
|
||||
font-size: var(--announcement-font-size-0);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
font-weight: 600;
|
||||
color: var(--announcement-font-color-2);
|
||||
color: var(--env-var-color-3);
|
||||
}
|
||||
|
||||
.announcement-close {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: var(--env-var-default-1);
|
||||
height: var(--env-var-default-1);
|
||||
}
|
||||
|
||||
@@ -1,13 +1,7 @@
|
||||
:root {
|
||||
--announcement-font-size-0: 13px;
|
||||
--announcement-padding: 16px;
|
||||
--margin: 20px;
|
||||
}
|
||||
|
||||
.announcement-messagebar-body {
|
||||
margin: var(--margin);
|
||||
font-size: var(--announcement-font-size-0);
|
||||
padding: 0 var(--announcement-padding) 0 0;
|
||||
margin: 20px;
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
padding: 0 16px 0 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: var(--env-var-img-width-1);
|
||||
height: var(--env-var-img-width-1);
|
||||
}
|
||||
|
||||
.check-h-spacing {
|
||||
@@ -14,7 +14,7 @@
|
||||
}
|
||||
|
||||
.check-label {
|
||||
font-size: 11px;
|
||||
font-size: var(--env-var-font-size-small);
|
||||
font-weight: 600;
|
||||
color: #475467;
|
||||
color: var(--env-var-color-2);
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
.checkbox-holder {
|
||||
height: 20px;
|
||||
height: var(--env-var-img-width-1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
width: var(--env-var-font-size-medium);
|
||||
height: var(--env-var-font-size-medium);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
@@ -14,8 +14,8 @@
|
||||
|
||||
.checkbox-label {
|
||||
margin-left: 5px;
|
||||
font-size: 13px;
|
||||
color: #344054;
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
color: var(--env-var-color-5);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,3 @@
|
||||
:root {
|
||||
--popup-color-border-0: #f2f2f2;
|
||||
--popup-color-0: #101828;
|
||||
--popup-color-1: #475467;
|
||||
--color-0: #1570ef;
|
||||
--color-1: #175cd3;
|
||||
}
|
||||
|
||||
.dual-button-popup-modal-holder {
|
||||
width: 380px;
|
||||
height: 130px;
|
||||
@@ -13,19 +5,19 @@
|
||||
padding: 30px;
|
||||
box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03),
|
||||
0px 20px 24px -4px rgba(16, 24, 40, 0.08);
|
||||
border: 1px solid var(--popup-color-border-0);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--env-var-color-9);
|
||||
border-radius: var(--env-var-radius-1);
|
||||
}
|
||||
|
||||
.dual-button-popup-modal-subject {
|
||||
color: var(--popup-color-0);
|
||||
color: var(--env-var-color-1);
|
||||
font-weight: bolder;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.dual-button-popup-modal-description {
|
||||
color: var(--popup-color-1);
|
||||
font-size: 13px;
|
||||
color: var(--env-var-color-2);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@@ -42,19 +34,19 @@
|
||||
width: 145px;
|
||||
height: 35px;
|
||||
padding: 5px 20px;
|
||||
background-color: var(--color-0);
|
||||
border: 1px solid var(--color-1);
|
||||
border-radius: 4px;
|
||||
background-color: var(--env-var-color-3);
|
||||
border: 1px solid var(--env-var-color-10);
|
||||
border-radius: var(--env-var-radius-1);
|
||||
margin: 5px 0;
|
||||
margin-left: 20px;
|
||||
color: white;
|
||||
color: var(--env-var-color-8);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
|
||||
.transparent-discard-button {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
margin: 5px 10px;
|
||||
font-size: 13px;
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
|
||||
@@ -1,16 +1,10 @@
|
||||
:root {
|
||||
--popup-color-with-input-border-0: #f2f2f2;
|
||||
--popup-color-with-input-border-1: #d0d5dd;
|
||||
--popup-modal-with-input-title-color: #344054;
|
||||
}
|
||||
|
||||
.popup-modal-holder {
|
||||
width: 480px;
|
||||
font-family: var(--popup-font-family-0);
|
||||
padding: 50px 40px;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--env-var-radius-1);
|
||||
margin: 10px 20px;
|
||||
border: 1px solid var(--popup-color-with-input-border-0);
|
||||
border: 1px solid var(--env-var-color-9);
|
||||
box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03),
|
||||
0px 20px 24px -4px rgba(16, 24, 40, 0.08);
|
||||
}
|
||||
@@ -31,14 +25,14 @@
|
||||
|
||||
.popup-modal-input-title {
|
||||
margin-bottom: 15px;
|
||||
color: var(--popup-modal-with-input-title-color);
|
||||
color: var(--env-var-color-5);
|
||||
}
|
||||
|
||||
.popup-modal-text-field {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
border: 1px solid var(--popup-color-with-input-border-1);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--env-var-color-4);
|
||||
border-radius: var(--env-var-radius-1);
|
||||
}
|
||||
|
||||
.popup-modal-controllers {
|
||||
@@ -54,8 +48,8 @@
|
||||
width: 145px;
|
||||
height: 35px;
|
||||
padding: 5px 20px;
|
||||
border: 1px solid var(--popup-color-with-input-border-1);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--env-var-color-4);
|
||||
border-radius: var(--env-var-radius-1);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
|
||||
@@ -1,32 +1,64 @@
|
||||
:root {
|
||||
--color-title-1: #344054;
|
||||
--text-field-margin-0: 10px 20px;
|
||||
--description-color-0: #344054;
|
||||
--env-var-color-1: #101828;
|
||||
--env-var-color-2: #475467;
|
||||
--env-var-color-3: #1570ef;
|
||||
|
||||
--env-var-color-4: #d0d5dd;
|
||||
--env-var-color-5: #344054;
|
||||
--env-var-color-6: #eaecf0;
|
||||
--env-var-color-7: #7f56d9;
|
||||
--env-var-color-8: #fff;
|
||||
--env-var-color-9: #f2f2f2;
|
||||
--env-var-color-10: #175cd3;
|
||||
|
||||
--env-var-radius-1: 4px;
|
||||
--env-var-radius-2: 8px;
|
||||
|
||||
--env-var-width-1: 100vw;
|
||||
--env-var-width-2: 360px;
|
||||
|
||||
--env-var-height-1: 100vh;
|
||||
|
||||
--env-var-spacing-1: 12px;
|
||||
--env-var-spacing-2: 24px;
|
||||
--env-var-spacing-3: 32px;
|
||||
--env-var-spacing-4: 40px;
|
||||
|
||||
--env-var-font-size-small: 11px;
|
||||
--env-var-font-size-medium: 13px;
|
||||
--env-var-font-size-medium-plus: 14px;
|
||||
--env-var-font-size-large: 16px;
|
||||
--env-var-font-size-xlarge: 30px;
|
||||
|
||||
--env-var-img-width-1: 20px;
|
||||
|
||||
--env-var-default-1: 24px;
|
||||
--env-var-default-2: 40px;
|
||||
}
|
||||
|
||||
.description-field-holder {
|
||||
margin: var(--text-field-margin-0);
|
||||
margin: 10px 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.text-field-title {
|
||||
color: var(--color-title-1);
|
||||
color: var(--env-var-color-5);
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
font-size: 13px;
|
||||
color: var(--description-color-0);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
color: var(--env-var-color-5);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.description-field-area {
|
||||
min-width: 320px;
|
||||
font-size: 13px;
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.description-field-label {
|
||||
margin-top: 10px;
|
||||
font-size: 11px;
|
||||
font-size: var(--env-var-font-size-small);
|
||||
}
|
||||
|
||||
.with-error {
|
||||
@@ -36,10 +68,10 @@
|
||||
#description-field-area-helper-text {
|
||||
margin-left: 0;
|
||||
margin-top: 10px;
|
||||
font-size: 11px;
|
||||
font-size: var(--env-var-font-size-small);
|
||||
}
|
||||
|
||||
#description-field-area {
|
||||
min-width: 320px;
|
||||
font-size: 13px;
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,39 @@
|
||||
:root {
|
||||
--textfield-color-0: #344054;
|
||||
--textfield-font-size: 13px;
|
||||
--env-var-color-1: #101828;
|
||||
--env-var-color-2: #475467;
|
||||
--env-var-color-3: #1570ef;
|
||||
|
||||
--env-var-color-4: #d0d5dd;
|
||||
--env-var-color-5: #344054;
|
||||
--env-var-color-6: #eaecf0;
|
||||
--env-var-color-7: #7f56d9;
|
||||
--env-var-color-8: #fff;
|
||||
--env-var-color-9: #f2f2f2;
|
||||
--env-var-color-10: #175cd3;
|
||||
|
||||
--env-var-radius-1: 4px;
|
||||
--env-var-radius-2: 8px;
|
||||
|
||||
--env-var-width-1: 100vw;
|
||||
--env-var-width-2: 360px;
|
||||
|
||||
--env-var-height-1: 100vh;
|
||||
|
||||
--env-var-spacing-1: 12px;
|
||||
--env-var-spacing-2: 24px;
|
||||
--env-var-spacing-3: 32px;
|
||||
--env-var-spacing-4: 40px;
|
||||
|
||||
--env-var-font-size-small: 11px;
|
||||
--env-var-font-size-medium: 13px;
|
||||
--env-var-font-size-medium-plus: 14px;
|
||||
--env-var-font-size-large: 16px;
|
||||
--env-var-font-size-xlarge: 30px;
|
||||
|
||||
--env-var-img-width-1: 20px;
|
||||
|
||||
--env-var-default-1: 24px;
|
||||
--env-var-default-2: 40px;
|
||||
}
|
||||
|
||||
.email-text-field {
|
||||
@@ -11,24 +44,24 @@
|
||||
#outlined-basic {
|
||||
width: 320px;
|
||||
height: 14px;
|
||||
font-size: var(--textfield-font-size);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.email-text-field-title {
|
||||
font-size: var(--textfield-font-size);
|
||||
color: var(--textfield-color-0);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
color: var(--env-var-color-5);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.email-text-field-input {
|
||||
font-size: var(--textfield-font-size);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
|
||||
#outlined-basic-helper-text {
|
||||
margin-left: 0;
|
||||
margin-top: 10px;
|
||||
font-size: 11px;
|
||||
font-size: var(--env-var-font-size-small);
|
||||
}
|
||||
|
||||
.text-field-icon {
|
||||
|
||||
@@ -1,5 +1,39 @@
|
||||
:root {
|
||||
--textfield-color-0: #344054;
|
||||
--env-var-color-1: #101828;
|
||||
--env-var-color-2: #475467;
|
||||
--env-var-color-3: #1570ef;
|
||||
|
||||
--env-var-color-4: #d0d5dd;
|
||||
--env-var-color-5: #344054;
|
||||
--env-var-color-6: #eaecf0;
|
||||
--env-var-color-7: #7f56d9;
|
||||
--env-var-color-8: #fff;
|
||||
--env-var-color-9: #f2f2f2;
|
||||
--env-var-color-10: #175cd3;
|
||||
|
||||
--env-var-radius-1: 4px;
|
||||
--env-var-radius-2: 8px;
|
||||
|
||||
--env-var-width-1: 100vw;
|
||||
--env-var-width-2: 360px;
|
||||
|
||||
--env-var-height-1: 100vh;
|
||||
|
||||
--env-var-spacing-1: 12px;
|
||||
--env-var-spacing-2: 24px;
|
||||
--env-var-spacing-3: 32px;
|
||||
--env-var-spacing-4: 40px;
|
||||
|
||||
--env-var-font-size-small: 11px;
|
||||
--env-var-font-size-medium: 13px;
|
||||
--env-var-font-size-medium-plus: 14px;
|
||||
--env-var-font-size-large: 16px;
|
||||
--env-var-font-size-xlarge: 30px;
|
||||
|
||||
--env-var-img-width-1: 20px;
|
||||
|
||||
--env-var-default-1: 24px;
|
||||
--env-var-default-2: 40px;
|
||||
}
|
||||
|
||||
.password-text-field {
|
||||
@@ -10,20 +44,20 @@
|
||||
#outlined-basic {
|
||||
width: 320px;
|
||||
height: 14px;
|
||||
font-size: 13px;
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.password-text-field-title {
|
||||
font-size: 13px;
|
||||
color: var(--textfield-color-0);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
color: var(--env-var-color-5);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#outlined-basic-helper-text {
|
||||
margin-left: 0;
|
||||
margin-top: 10px;
|
||||
font-size: 11px;
|
||||
font-size: var(--env-var-font-size-small);
|
||||
}
|
||||
|
||||
.text-field-icon {
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
:root {
|
||||
--env-var-color-1: #101828;
|
||||
--env-var-color-2: #475467;
|
||||
--env-var-color-3: #1570ef;
|
||||
|
||||
--env-var-color-4: #d0d5dd;
|
||||
--env-var-color-5: #344054;
|
||||
--env-var-color-6: #eaecf0;
|
||||
--env-var-color-7: #7f56d9;
|
||||
--env-var-color-8: #fff;
|
||||
--env-var-color-9: #f2f2f2;
|
||||
--env-var-color-10: #175cd3;
|
||||
|
||||
--env-var-radius-1: 4px;
|
||||
--env-var-radius-2: 8px;
|
||||
|
||||
--env-var-width-1: 100vw;
|
||||
--env-var-width-2: 360px;
|
||||
|
||||
--env-var-height-1: 100vh;
|
||||
|
||||
--env-var-spacing-1: 12px;
|
||||
--env-var-spacing-2: 24px;
|
||||
--env-var-spacing-3: 32px;
|
||||
--env-var-spacing-4: 40px;
|
||||
|
||||
--env-var-font-size-small: 11px;
|
||||
--env-var-font-size-medium: 13px;
|
||||
--env-var-font-size-medium-plus: 14px;
|
||||
--env-var-font-size-large: 16px;
|
||||
--env-var-font-size-xlarge: 30px;
|
||||
|
||||
--env-var-img-width-1: 20px;
|
||||
|
||||
--env-var-default-1: 24px;
|
||||
--env-var-default-2: 40px;
|
||||
}
|
||||
|
||||
@@ -1,17 +1,46 @@
|
||||
:root {
|
||||
--website-color-0: #344054;
|
||||
--border-color: #d0d5dd;
|
||||
--label-font-color: #475467;
|
||||
--icon-color: #98a2b3;
|
||||
--text-field-margin-0: 10px 20px;
|
||||
--text-field-margin-1: 10px 20px 5px;
|
||||
--env-var-color-1: #101828;
|
||||
--env-var-color-2: #475467;
|
||||
--env-var-color-3: #1570ef;
|
||||
|
||||
--env-var-color-4: #d0d5dd;
|
||||
--env-var-color-5: #344054;
|
||||
--env-var-color-6: #eaecf0;
|
||||
--env-var-color-7: #7f56d9;
|
||||
--env-var-color-8: #fff;
|
||||
--env-var-color-9: #f2f2f2;
|
||||
--env-var-color-10: #175cd3;
|
||||
|
||||
--env-var-radius-1: 4px;
|
||||
--env-var-radius-2: 8px;
|
||||
|
||||
--env-var-width-1: 100vw;
|
||||
--env-var-width-2: 360px;
|
||||
|
||||
--env-var-height-1: 100vh;
|
||||
|
||||
--env-var-spacing-1: 12px;
|
||||
--env-var-spacing-2: 24px;
|
||||
--env-var-spacing-3: 32px;
|
||||
--env-var-spacing-4: 40px;
|
||||
|
||||
--env-var-font-size-small: 11px;
|
||||
--env-var-font-size-medium: 13px;
|
||||
--env-var-font-size-medium-plus: 14px;
|
||||
--env-var-font-size-large: 16px;
|
||||
--env-var-font-size-xlarge: 30px;
|
||||
|
||||
--env-var-img-width-1: 20px;
|
||||
|
||||
--env-var-default-1: 24px;
|
||||
--env-var-default-2: 40px;
|
||||
}
|
||||
|
||||
.website-textfield-title {
|
||||
margin: 0 20px;
|
||||
margin-top: 30px;
|
||||
font-size: 13px;
|
||||
color: var(--website-color-0);
|
||||
color: var(--env-var-color-5);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -19,17 +48,17 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin: var(--text-field-margin-1);
|
||||
margin: 10px 20px 5px;
|
||||
}
|
||||
|
||||
.website-textfield-hint {
|
||||
margin: var(--text-field-margin-0);
|
||||
margin: 10px 20px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.website-label {
|
||||
padding: 6px 20px 6px 10px;
|
||||
border: solid 1px var(--border-color);
|
||||
border: solid 1px var(--env-var-color-4);
|
||||
border-right: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
font-size: 13px;
|
||||
@@ -37,21 +66,21 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--label-font-color);
|
||||
color: var(--env-var-color-2);
|
||||
}
|
||||
|
||||
.website-url {
|
||||
width: 248px;
|
||||
height: 31.5px;
|
||||
padding: 0px 15px;
|
||||
border: solid 1px var(--border-color);
|
||||
border: solid 1px var(--env-var-color-4);
|
||||
}
|
||||
|
||||
.website-icon-holder {
|
||||
width: 40px;
|
||||
height: 33px;
|
||||
padding: 5px;
|
||||
border: solid 1px var(--border-color);
|
||||
border: solid 1px var(--env-var-color-4);
|
||||
border-left: none;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
@@ -61,7 +90,7 @@
|
||||
|
||||
.copy-to-clipboard-button {
|
||||
padding: 5.5px 20px 6px 10px;
|
||||
border: solid 1px var(--border-color);
|
||||
border: solid 1px var(--env-var-color-4);
|
||||
border-left: none;
|
||||
border-radius: 0 8px 8px 0;
|
||||
font-size: 13px;
|
||||
@@ -69,7 +98,7 @@
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
color: var(--label-font-color);
|
||||
color: var(--env-var-color-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,17 +1,49 @@
|
||||
:root {
|
||||
--tooltip-color-0: #d0d5dd;
|
||||
--tooltip-margin: 5px;
|
||||
--tooltip-font-size: 12px;
|
||||
--env-var-color-1: #101828;
|
||||
--env-var-color-2: #475467;
|
||||
--env-var-color-3: #1570ef;
|
||||
|
||||
--env-var-color-4: #d0d5dd;
|
||||
--env-var-color-5: #344054;
|
||||
--env-var-color-6: #eaecf0;
|
||||
--env-var-color-7: #7f56d9;
|
||||
--env-var-color-8: #fff;
|
||||
--env-var-color-9: #f2f2f2;
|
||||
--env-var-color-10: #175cd3;
|
||||
|
||||
--env-var-radius-1: 4px;
|
||||
--env-var-radius-2: 8px;
|
||||
|
||||
--env-var-width-1: 100vw;
|
||||
--env-var-width-2: 360px;
|
||||
|
||||
--env-var-height-1: 100vh;
|
||||
|
||||
--env-var-spacing-1: 12px;
|
||||
--env-var-spacing-2: 24px;
|
||||
--env-var-spacing-3: 32px;
|
||||
--env-var-spacing-4: 40px;
|
||||
|
||||
--env-var-font-size-small: 11px;
|
||||
--env-var-font-size-medium: 13px;
|
||||
--env-var-font-size-medium-plus: 14px;
|
||||
--env-var-font-size-large: 16px;
|
||||
--env-var-font-size-xlarge: 30px;
|
||||
|
||||
--env-var-img-width-1: 20px;
|
||||
|
||||
--env-var-default-1: 24px;
|
||||
--env-var-default-2: 40px;
|
||||
}
|
||||
|
||||
.tooltip-title {
|
||||
font-size: var(--tooltip-font-size);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
font-weight: bold;
|
||||
margin: var(--tooltip-margin);
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.tooltip-description {
|
||||
font-size: var(--tooltip-font-size);
|
||||
color: var(--tooltip-color-0);
|
||||
margin: var(--tooltip-margin);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
color: var(--env-var-color-4);
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
@@ -1,32 +1,12 @@
|
||||
:root {
|
||||
--spacing-1: 15px;
|
||||
--spacing-2: 20px;
|
||||
--spacing-3: 25px;
|
||||
--textfield-font-size: 13px;
|
||||
|
||||
--check-email-page-width-1: 100vw;
|
||||
--check-email-page-height-1: 100vh;
|
||||
|
||||
--check-email-form-width-1: 360px;
|
||||
--check-email-form-height-1: 526px;
|
||||
|
||||
--logo-width-1: 20px;
|
||||
--check-email-font-size-medium: 13px;
|
||||
|
||||
--check-email-color-1: #101828;
|
||||
--check-email-color-2: #1570ef;
|
||||
--check-email-color-3: #475467;
|
||||
}
|
||||
|
||||
.check-email-page {
|
||||
width: 100vw;
|
||||
width: var(--env-var-width-1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
min-height: var(--env-var-height-1);
|
||||
}
|
||||
|
||||
.check-email-form {
|
||||
width: 360px;
|
||||
width: var(--env-var-width-2);
|
||||
margin: 90px auto;
|
||||
}
|
||||
|
||||
@@ -37,27 +17,27 @@
|
||||
}
|
||||
|
||||
.check-email-v-gap-large {
|
||||
height: 32px;
|
||||
height: var(--env-var-spacing-3);
|
||||
}
|
||||
|
||||
.check-email-v-gap-medium {
|
||||
height: 24px;
|
||||
height: var(--env-var-spacing-2);
|
||||
}
|
||||
|
||||
.check-email-v-gap-small {
|
||||
height: 12px;
|
||||
height: var(--env-var-spacing-1);
|
||||
}
|
||||
|
||||
.check-email-form-heading {
|
||||
font-size: 16px;
|
||||
font-size: var(--env-var-font-size-large);
|
||||
font-weight: 700;
|
||||
color: var(--check-email-color-1);
|
||||
color: var(--env-var-color-1);
|
||||
}
|
||||
|
||||
.check-email-form-subheading {
|
||||
font-size: 13px;
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
font-weight: 400;
|
||||
color: var(--check-email-color-3);
|
||||
color: var(--env-var-color-2);
|
||||
}
|
||||
|
||||
.check-email-form-subheading span {
|
||||
@@ -65,20 +45,20 @@
|
||||
}
|
||||
|
||||
.check-email-body {
|
||||
width: 360px;
|
||||
width: var(--env-var-width-2);
|
||||
}
|
||||
|
||||
.check-email-resend {
|
||||
font-size: 13px;
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
font-weight: 400;
|
||||
color: var(--check-email-color-3);
|
||||
color: var(--env-var-color-2);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.check-email-resend span {
|
||||
font-weight: 700;
|
||||
color: var(--check-email-color-2);
|
||||
color: var(--env-var-color-3);
|
||||
}
|
||||
|
||||
.check-email-back-button {
|
||||
@@ -88,15 +68,16 @@
|
||||
}
|
||||
|
||||
.check-email-back-button-img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: var(--env-var-img-width-1);
|
||||
height: var(--env-var-img-width-1);
|
||||
margin-right: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.check-email-back-button-text {
|
||||
font-size: 13px;
|
||||
height: var(--env-var-img-width-1);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
font-weight: 500;
|
||||
color: var(--check-email-color-3);
|
||||
color: var(--env-var-color-2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -1,33 +1,12 @@
|
||||
:root {
|
||||
--spacing-1: 15px;
|
||||
--spacing-2: 20px;
|
||||
--spacing-3: 25px;
|
||||
--textfield-font-size: 13px;
|
||||
|
||||
--forgot-password-page-width-1: 100vw;
|
||||
--forgot-password-page-height-1: 100vh;
|
||||
|
||||
--forgot-password-form-width-1: 360px;
|
||||
--forgot-password-form-height-1: 526px;
|
||||
|
||||
--logo-width-1: 20px;
|
||||
--forgot-font-size-medium: 13px;
|
||||
|
||||
--forgot-color-1: #101828;
|
||||
--forgot-color-2: #1570ef;
|
||||
--forgot-color-3: #475467;
|
||||
}
|
||||
|
||||
.forgot-password-page {
|
||||
width: var(--forgot-password-page-width-1);
|
||||
width: var(--env-var-width-1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: var(--forgot-password-page-height-1);
|
||||
min-height: var(--env-var-height-1);
|
||||
}
|
||||
|
||||
.forgot-password-form {
|
||||
width: var(--forgot-password-form-width-1);
|
||||
height: var(--forgot-password-form-height-1);
|
||||
width: var(--env-var-width-2);
|
||||
margin: 90px auto;
|
||||
}
|
||||
|
||||
@@ -42,37 +21,37 @@
|
||||
}
|
||||
|
||||
.forgot-password-v-gap-large {
|
||||
height: 32px;
|
||||
height: var(--env-var-spacing-3);
|
||||
}
|
||||
|
||||
.forgot-password-v-gap-medium {
|
||||
height: 24px;
|
||||
height: var(--env-var-spacing-2);
|
||||
}
|
||||
|
||||
.forgot-password-v-gap-small {
|
||||
height: 12px;
|
||||
height: var(--env-var-spacing-1);
|
||||
}
|
||||
|
||||
.forgot-password-form-heading {
|
||||
font-size: 16px;
|
||||
font-size: var(--env-var-font-size-large);
|
||||
font-weight: 700;
|
||||
color: #101828;
|
||||
color: var(--env-var-color-1);
|
||||
}
|
||||
|
||||
.forgot-password-form-subheading {
|
||||
font-size: 13px;
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
font-weight: 500;
|
||||
color: var(--forgot-color-3);
|
||||
color: var(--env-var-color-2);
|
||||
}
|
||||
|
||||
.forgot-password-body {
|
||||
width: 360px;
|
||||
width: var(--env-var-width-2);
|
||||
}
|
||||
|
||||
#forgot-password-email-input {
|
||||
width: 308px;
|
||||
height: 11px;
|
||||
font-size: var(--textfield-font-size);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
|
||||
.forgot-password-back-button {
|
||||
@@ -82,13 +61,13 @@
|
||||
}
|
||||
|
||||
.forgot-password-back-button-img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: var(--env-var-img-width-1);
|
||||
height: var(--env-var-img-width-1);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.forgot-password-back-button-text {
|
||||
font-size: 13px;
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
font-weight: 500;
|
||||
color: var(--forgot-color-3);
|
||||
color: var(--env-var-color-2);
|
||||
}
|
||||
|
||||
@@ -1,34 +1,13 @@
|
||||
:root {
|
||||
--spacing-1: 15px;
|
||||
--spacing-2: 20px;
|
||||
--spacing-3: 25px;
|
||||
--textfield-font-size: 13px;
|
||||
|
||||
--login-page-width-1: 100vw;
|
||||
--login-page-height-1: 100vh;
|
||||
|
||||
--login-form-width-1: 360px;
|
||||
--login-form-height-1: 526px;
|
||||
|
||||
--logo-width-1: 20px;
|
||||
--login-font-size-medium: 13px;
|
||||
|
||||
--login-color-1: #101828;
|
||||
--login-color-2: #1570ef;
|
||||
--login-color-3: #475467;
|
||||
}
|
||||
|
||||
.login-page {
|
||||
width: var(--login-page-width-1);
|
||||
width: var(--env-var-width-1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: var(--login-page-height-1);
|
||||
min-height: var(--env-var-height-1);
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: var(--login-form-width-1);
|
||||
height: var(--login-form-height-1);
|
||||
width: var(--env-var-width-2);
|
||||
margin: 90px auto;
|
||||
}
|
||||
|
||||
@@ -43,27 +22,27 @@
|
||||
}
|
||||
|
||||
.login-form-v-spacing {
|
||||
height: var(--spacing-1);
|
||||
height: var(--env-var-spacing-1);
|
||||
}
|
||||
|
||||
.login-form-v2-spacing {
|
||||
height: var(--spacing-2);
|
||||
height: var(--env-var-spacing-2);
|
||||
}
|
||||
|
||||
.login-form-v3-spacing {
|
||||
height: var(--spacing-3);
|
||||
height: var(--env-var-spacing-3);
|
||||
}
|
||||
|
||||
.login-form-heading {
|
||||
font-size: 30px;
|
||||
font-size: var(--env-var-font-size-xlarge);
|
||||
font-weight: 700;
|
||||
color: var(--login-color-1);
|
||||
color: var(--env-var-color-1);
|
||||
}
|
||||
|
||||
#login-email-input {
|
||||
width: 308px;
|
||||
height: 11px;
|
||||
font-size: var(--textfield-font-size);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
|
||||
.login-form-password-options {
|
||||
@@ -73,15 +52,15 @@
|
||||
}
|
||||
|
||||
.login-form-forgot-password {
|
||||
color: var(--login-color-2);
|
||||
color: var(--env-var-color-3);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
font-size: var(--login-font-size-medium);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
|
||||
.google-enter {
|
||||
width: var(--logo-width-1);
|
||||
height: var(--logo-width-1);
|
||||
width: var(--env-var-img-width-1);
|
||||
height: var(--env-var-img-width-1);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@@ -89,14 +68,15 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--login-color-3);
|
||||
font-size: var(--login-font-size-medium);
|
||||
color: var(--env-var-color-2);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.new-account-option-span {
|
||||
margin-left: 5px;
|
||||
color: var(--login-color-2);
|
||||
font-size: 14px;
|
||||
color: var(--env-var-color-3);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -1,18 +1,12 @@
|
||||
:root {
|
||||
--password-confirmed-color-1: #101828;
|
||||
--password-confirmed-color-2: #1570ef;
|
||||
--password-confirmed-color-3: #475467;
|
||||
}
|
||||
|
||||
.password-confirmed-page {
|
||||
width: 100vw;
|
||||
width: var(--env-var-width-1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
min-height: var(--env-var-height-1);
|
||||
}
|
||||
|
||||
.password-confirmed-form {
|
||||
width: 360px;
|
||||
width: var(--env-var-width-2);
|
||||
margin: 90px auto;
|
||||
}
|
||||
|
||||
@@ -23,31 +17,31 @@
|
||||
}
|
||||
|
||||
.password-confirmed-v-gap-large {
|
||||
height: 32px;
|
||||
height: var(--env-var-spacing-3);
|
||||
}
|
||||
|
||||
.password-confirmed-v-gap-medium {
|
||||
height: 24px;
|
||||
height: var(--env-var-spacing-2);
|
||||
}
|
||||
|
||||
.password-confirmed-v-gap-small {
|
||||
height: 12px;
|
||||
height: var(--env-var-spacing-1);
|
||||
}
|
||||
|
||||
.password-confirmed-form-heading {
|
||||
font-size: 16px;
|
||||
font-size: var(--env-var-font-size-large);
|
||||
font-weight: 700;
|
||||
color: var(--password-confirmed-color-1);
|
||||
color: var(--env-var-color-1);
|
||||
}
|
||||
|
||||
.password-confirmed-form-subheading {
|
||||
font-size: 13px;
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
font-weight: 600;
|
||||
color: var(--password-confirmed-color-3);
|
||||
color: var(--env-var-color-2);
|
||||
}
|
||||
|
||||
.password-confirmed-body {
|
||||
width: 360px;
|
||||
width: var(--env-var-width-2);
|
||||
}
|
||||
|
||||
.password-confirmed-back-button {
|
||||
@@ -58,16 +52,16 @@
|
||||
}
|
||||
|
||||
.password-confirmed-back-button-img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: var(--env-var-img-width-1);
|
||||
height: var(--env-var-img-width-1);
|
||||
margin-right: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.password-confirmed-back-button-text {
|
||||
height: 20px;
|
||||
font-size: 13px;
|
||||
height: var(--env-var-img-width-1);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
font-weight: 600;
|
||||
color: var(--password-confirmed-color-3);
|
||||
color: var(--env-var-color-2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -1,29 +1,12 @@
|
||||
:root {
|
||||
--dimension-width-1: 100vw;
|
||||
--dimension-width-2: 360px;
|
||||
|
||||
--dimension-height-1: 100vh;
|
||||
|
||||
--spacing-small: 12px;
|
||||
--spacing-medium: 24px;
|
||||
--spacing-large: 40px;
|
||||
|
||||
--font-size-small: 13px;
|
||||
--font-size-medium: 16px;
|
||||
|
||||
--register-form-heading-color-1: #101828;
|
||||
--register-form-subheading-color-1: #475467;
|
||||
}
|
||||
|
||||
.register-page {
|
||||
width: var(--dimension-width-1);
|
||||
width: var(--env-var-width-1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: var(--dimension-height-1);
|
||||
min-height: var(--env-var-height-1);
|
||||
}
|
||||
|
||||
.register-form {
|
||||
width: var(--dimension-width-2);
|
||||
width: var(--env-var-width-2);
|
||||
margin: 140px auto;
|
||||
}
|
||||
|
||||
@@ -37,27 +20,23 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.register-form-v-spacing-24px {
|
||||
height: var(--spacing-medium);
|
||||
.register-form-v-spacing-large {
|
||||
height: var(--env-var-spacing-3);
|
||||
}
|
||||
|
||||
.register-form-v-spacing-12px {
|
||||
height: var(--spacing-small);
|
||||
}
|
||||
|
||||
.register-form-v-spacing-40px {
|
||||
height: var(--spacing-large);
|
||||
.register-form-v-spacing-small {
|
||||
height: var(--env-var-spacing-1);
|
||||
}
|
||||
|
||||
.register-form-heading {
|
||||
font-size: var(--spacing-medium);
|
||||
font-size: var(--env-var-font-size-large);
|
||||
font-weight: 700;
|
||||
color: var(--register-form-heading-color-1);
|
||||
color: var(--env-var-color-1);
|
||||
}
|
||||
|
||||
.register-form-subheading {
|
||||
font-size: var(--spacing-small);
|
||||
color: var(--register-form-subheading-color-1);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
color: var(--env-var-color-2);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -65,7 +44,7 @@
|
||||
#register-lastname-input,
|
||||
#register-email-input,
|
||||
#register-password-input {
|
||||
font-size: var(--spacing-small);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
width: 294px;
|
||||
height: 11px;
|
||||
padding: 12px 14px;
|
||||
|
||||
@@ -20,12 +20,9 @@ const Register = () => {
|
||||
src={Logomark}
|
||||
alt="Logomark"
|
||||
/>
|
||||
<div className="register-form-v-spacing-24px" />
|
||||
<div className="register-form-v-spacing-large" />
|
||||
<div className="register-form-heading">Create an account</div>
|
||||
<div className="register-form-v-spacing-12px"></div>
|
||||
<div className="register-form-subheading">
|
||||
Start your 30-day free trial.
|
||||
</div>
|
||||
<div className="register-form-v-spacing-large"></div>
|
||||
</div>
|
||||
<div className="register-form-v-spacing-40px" />
|
||||
<div className="register-form-inputs">
|
||||
@@ -60,7 +57,7 @@ const Register = () => {
|
||||
<div className="login-form-v2-spacing" />
|
||||
<div className="register-form-checks">
|
||||
<Check text="Must be at least 8 characters" />
|
||||
<div className="register-form-v-spacing-12px"></div>
|
||||
<div className="register-form-v-spacing-small"></div>
|
||||
<Check text="Must contain one special character" />
|
||||
</div>
|
||||
<div className="login-form-v2-spacing" />
|
||||
|
||||
@@ -1,28 +1,12 @@
|
||||
:root {
|
||||
--set-new-password-page-width-1: 100vw;
|
||||
--set-new-password-page-height-1: 100vh;
|
||||
|
||||
--set-new-password-form-width-1: 360px;
|
||||
--set-new-password-form-height-1: 526px;
|
||||
|
||||
--set-new-password-logo-width-1: 20px;
|
||||
--set-new-password-font-size-medium: 13px;
|
||||
|
||||
--set-new-password-color-1: #101828;
|
||||
--set-new-password-color-2: #1570ef;
|
||||
--set-new-password-color-3: #475467;
|
||||
}
|
||||
|
||||
.set-new-password-page {
|
||||
width: var(--set-new-password-page-width-1);
|
||||
width: var(--env-var-width-1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: var(--set-new-password-page-height-1);
|
||||
min-height: var(--env-var-height-1);
|
||||
}
|
||||
|
||||
.set-new-password-form {
|
||||
width: var(--set-new-password-form-width-1);
|
||||
min-height: var(--set-new-password-form-height-1);
|
||||
width: var(--env-var-width-2);
|
||||
margin: 90px auto;
|
||||
}
|
||||
|
||||
@@ -33,30 +17,26 @@
|
||||
}
|
||||
|
||||
.set-new-password-form-gap-large {
|
||||
height: 32px;
|
||||
height: var(--env-var-spacing-3);
|
||||
}
|
||||
|
||||
.set-new-password-form-gap-medium {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.set-new-password-form-gap-small-medium {
|
||||
height: 20px;
|
||||
height: var(--env-var-spacing-2);
|
||||
}
|
||||
|
||||
.set-new-password-form-gap-small {
|
||||
height: 12px;
|
||||
height: var(--env-var-spacing-1);
|
||||
}
|
||||
|
||||
.set-new-password-form-heading {
|
||||
font-size: 16px;
|
||||
color: #101828;
|
||||
font-size: var(--env-var-font-size-large);
|
||||
color: var(--env-var-color-1);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.set-new-password-form-subheading {
|
||||
font-size: 13px;
|
||||
color: var(--set-new-password-color-3);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
color: var(--env-var-color-2);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -68,16 +48,16 @@
|
||||
}
|
||||
|
||||
.set-new-password-back-button-img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: var(--env-var-img-width-1);
|
||||
height: var(--env-var-img-width-1);
|
||||
margin-right: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.set-new-password-back-button-text {
|
||||
height: 20px;
|
||||
font-size: 13px;
|
||||
color: var(--set-new-password-color-3);
|
||||
height: var(--env-var-img-width-1);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
color: var(--env-var-color-2);
|
||||
font-weight: 600;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -33,20 +33,20 @@ const SetNewPassword = () => {
|
||||
placeholder="••••••••"
|
||||
id="register-password-input"
|
||||
/>
|
||||
<div className="set-new-password-form-gap-small-medium"></div>
|
||||
<div className="set-new-password-form-gap-medium"></div>
|
||||
<PasswordTextField
|
||||
label="Confirm password"
|
||||
error={false}
|
||||
placeholder="••••••••"
|
||||
id="register-password-input"
|
||||
/>
|
||||
<div className="set-new-password-form-gap-small-medium"></div>
|
||||
<div className="set-new-password-form-gap-medium"></div>
|
||||
<div className="set-new-password-form-checks">
|
||||
<Check text="Must be at least 8 characters" />
|
||||
<div className="set-new-password-form-gap-small"></div>
|
||||
<Check text="Must contain one special character" />
|
||||
</div>
|
||||
<div className="set-new-password-form-gap-small-medium"></div>
|
||||
<div className="set-new-password-form-gap-medium"></div>
|
||||
<Button
|
||||
level="primary"
|
||||
label="Reset passwprd"
|
||||
|
||||
@@ -13,10 +13,20 @@ const labelPurple = "#6941C6";
|
||||
const labelGreen = "#067647";
|
||||
const labelRed = "#F04438";
|
||||
|
||||
//Section colros
|
||||
// Section colors
|
||||
const sectionBorder = "#D0D5DD";
|
||||
const sectionBg = "#F8F9F8";
|
||||
|
||||
// Other Colors
|
||||
const otherColorsBlackish = "#101828";
|
||||
const otherColorsBluishGray = "#344054";
|
||||
const otherColorsGraishWhite = "#eaecf0";
|
||||
const otherColorsPurple = "#7f56d9";
|
||||
const otherColorsWhite = "#fff";
|
||||
const otherColorsGraishWhiteLight = "#f2f2f2";
|
||||
const otherColorsStrongBlue = "#f2f2f2";
|
||||
|
||||
|
||||
// Global Font Family
|
||||
const fontFamilyDefault = '"Roboto", "Helvetica", "Arial", sans-serif';
|
||||
|
||||
@@ -51,6 +61,15 @@ const theme = createTheme({
|
||||
borderColor: sectionBorder,
|
||||
bgColor: sectionBg,
|
||||
},
|
||||
otherColors: {
|
||||
blackish: otherColorsBlackish,
|
||||
bluishGray: otherColorsBluishGray,
|
||||
graishWhite: otherColorsGraishWhite,
|
||||
purple: otherColorsPurple,
|
||||
white: otherColorsWhite,
|
||||
graishWhiteLight: otherColorsGraishWhiteLight,
|
||||
strongBlue: otherColorsStrongBlue,
|
||||
},
|
||||
},
|
||||
font :{
|
||||
default: {
|
||||
|
||||
@@ -11,6 +11,44 @@
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Generalized Stylings */
|
||||
|
||||
--env-var-color-1: #101828;
|
||||
--env-var-color-2: #475467;
|
||||
--env-var-color-3: #1570ef;
|
||||
|
||||
--env-var-color-4: #d0d5dd;
|
||||
--env-var-color-5: #344054;
|
||||
--env-var-color-6: #eaecf0;
|
||||
--env-var-color-7: #7f56d9;
|
||||
--env-var-color-8: #fff;
|
||||
--env-var-color-9: #f2f2f2;
|
||||
--env-var-color-10: #175cd3;
|
||||
|
||||
--env-var-radius-1: 4px;
|
||||
--env-var-radius-2: 8px;
|
||||
|
||||
--env-var-width-1: 100vw;
|
||||
--env-var-width-2: 360px;
|
||||
|
||||
--env-var-height-1: 100vh;
|
||||
|
||||
--env-var-spacing-1: 12px;
|
||||
--env-var-spacing-2: 24px;
|
||||
--env-var-spacing-3: 32px;
|
||||
--env-var-spacing-4: 40px;
|
||||
|
||||
--env-var-font-size-small: 11px;
|
||||
--env-var-font-size-medium: 13px;
|
||||
--env-var-font-size-medium-plus: 14px;
|
||||
--env-var-font-size-large: 16px;
|
||||
--env-var-font-size-xlarge: 30px;
|
||||
|
||||
--env-var-img-width-1: 20px;
|
||||
|
||||
--env-var-default-1: 24px;
|
||||
--env-var-default-2: 40px;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
Reference in New Issue
Block a user