TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

polishing .css files and reducing the code size as much as possible. Adding some new colors to the Theme

Browse Source
This commit is contained in:
MuhammadKhalilzadeh committed 2024-06-02 12:08:35 +03:30
1 parent a1bef124c6
commit c2f3d670c3
24 files changed
+483 -402
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/src/Components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css
+22 -39
View File
@@ -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 {
Client/src/Components/Announcements/AnnouncementsDualButton/announcementsDualButton.css
+8 -21
View File
@@ -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);
}
Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css
+19 -32
View File
@@ -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);
}
Client/src/Components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css
+3 -9
View File
@@ -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;
Client/src/Components/Check/check.css
+4 -4
View File
@@ -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);
}
Client/src/Components/Checkbox/Checkbox.css
+5 -5
View File
@@ -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;
}
Client/src/Components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css
+11 -19
View File
@@ -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);
}
Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css
+8 -14
View File
@@ -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);
}
Client/src/Components/TextFields/Description/descriptionTextField.css
+43 -11
View File
@@ -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);
}
Client/src/Components/TextFields/Email/emailTextField.css
+40 -7
View File
@@ -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 {
Client/src/Components/TextFields/Password/passwordTextField.css
+39 -5
View File
@@ -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 {
Client/src/Components/TextFields/Text/textField.css
+37
View File
@@ -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;
}
Client/src/Components/TextFields/Website/websiteTextField.css
+44 -15
View File
@@ -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;
}
Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css
+40 -8
View File
@@ -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;
}