From af80b81cb2b6e1fe8b4ac06d98b7a0a2a38dd337 Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 13:01:40 +0800 Subject: [PATCH 01/33] chore: added prefix to tryphography class Signed-off-by: hasan-deriv --- src/features/styles/theme/typography.scss | 100 +++++++++++----------- 1 file changed, 50 insertions(+), 50 deletions(-) diff --git a/src/features/styles/theme/typography.scss b/src/features/styles/theme/typography.scss index 34c4034105e..57640064e83 100644 --- a/src/features/styles/theme/typography.scss +++ b/src/features/styles/theme/typography.scss @@ -1,21 +1,21 @@ @use './theme-mixins' as *; @import './variables'; -.typography { +.at-typography { line-height: calc(2px + 2.5ex + 2px); color: $color-black-9; word-break: break-word; } -[dir='ltr'] .typography-font-IBM { +[dir='ltr'] .at-typography-font-IBM { font-family: 'IBM Plex Sans', sans-serif; } -[dir='ltr'] .typography-font-UBUNTU { +[dir='ltr'] .at-typography-font-UBUNTU { font-family: Ubuntu, sans-serif; } -.typography-link { +.at-typography-link { cursor: pointer; text-decoration: none; transition: text-shadow 0.25s; @@ -29,167 +29,167 @@ opacity: 0.32; } } -.typography-hover { +.at-typography-hover { &:hover { color: $color-red; text-decoration: underline; } } -.typography-align-center { +.at-typography-align-center { text-align: center; } -.typography-align-left { +.at-typography-align-left { text-align: start; } -.typography-align-right { +.at-typography-align-right { text-align: end; } -.typography-align-justify { +.at-typography-align-justify { text-align: justify; } -.typography-color-brand { +.at-typography-color-brand { color: $color-brand; } -.typography-color-primary { +.at-typography-color-primary { color: $color-black-9; } -.typography-color-secondary { +.at-typography-color-secondary { color: #414652b2; } -.typography-color-tertiary { +.at-typography-color-tertiary { color: #425651; } -.typography-color-inverted { +.at-typography-color-inverted { color: $color-white; } -.typography-color-white { +.at-typography-color-white { color: $color-white; } -.typography-color-black { +.at-typography-color-black { color: $color-black-9; } -.typography-color-light { +.at-typography-color-light { color: $color-grey-5; } -.typography-color-light-grey { +.at-typography-color-light-grey { color: $color-grey-19; } -.typography-color-light-black { +.at-typography-color-light-black { color: #000000b8; } -.typography-color-profit { +.at-typography-color-profit { color: $color-blue-7; } -.typography-color-gray-shade { +.at-typography-color-gray-shade { color: $color-grey-46; } -.typography-break-word { +.at-typography-break-word { word-break: break-word; } -.typography-break-normal { +.at-typography-break-normal { word-break: normal; } -.typography-weight-normal { +.at-typography-weight-normal { font-weight: normal; } -.typography-weight-bold { +.at-typography-weight-bold { font-weight: bold; } -.typography-weight-bolder { +.at-typography-weight-bolder { font-weight: 700; } *[dir='ltr'] { - .heading { + .at-heading { font-family: Ubuntu, sans-serif; } } -.heading-xxxl { +.at-heading-xxxl { @include font-size($font-size-1300); } -.heading-xxl { +.at-heading-xxl { @include font-size($font-size-1200); } -.heading-xlarge { +.at-heading-xlarge { @include font-size($font-size-1100); } -.heading-large { +.at-heading-large { @include font-size($font-size-1000); } -.heading-medium { +.at-heading-medium { @include font-size($font-size-900); } -.heading-small { +.at-heading-small { @include font-size($font-size-800); } -.heading-xs { +.at-heading-xs { @include font-size($font-size-700); } -.heading-xxs { +.at-heading-xxs { @include font-size($font-size-600); } -.text-xxxl { +.at-text-xxxl { @include font-size($font-size-900); } -.text-xxl { +.at-text-xxl { @include font-size($font-size-800); } -.text-xlarge { +.at-text-xlarge { @include font-size($font-size-700); } -.text-large { +.at-text-large { @include font-size($font-size-600); } -.text-medium { +.at-text-medium { @include font-size($font-size-500); } -.text-small { +.at-text-small { @include font-size($font-size-400); } -.text-xs { +.at-text-xs { @include font-size($font-size-300); } -.text-xxs { +.at-text-xxs { @include font-size($font-size-200); } @mixin typography-align($media-name) { - .#{$media-name + #{'-'}}typography-align-center { + .#{$media-name + #{'-'}}at-typography-align-center { @include media($media-name) { text-align: center; } } - .#{$media-name + #{'-'}}typography-align-left { + .#{$media-name + #{'-'}}at-typography-align-left { @include media($media-name) { text-align: start; } } - .#{$media-name + #{'-'}}typography-align-right { + .#{$media-name + #{'-'}}at-typography-align-right { @include media($media-name) { text-align: end; } } - .#{$media-name + #{'-'}}typography-align-justify { + .#{$media-name + #{'-'}}at-typography-align-justify { @include media($media-name) { text-align: justify; } @@ -197,17 +197,17 @@ } @mixin typography-weight($media-name) { - .#{$media-name + #{'-'}}typography-weight-normal { + .#{$media-name + #{'-'}}at-typography-weight-normal { @include media($media-name) { font-weight: normal; } } - .#{$media-name + #{'-'}}typography-weight-bold { + .#{$media-name + #{'-'}}at-typography-weight-bold { @include media($media-name) { font-weight: bold; } } - .#{$media-name + #{'-'}}typography-weight-bolder { + .#{$media-name + #{'-'}}at-typography-weight-bolder { @include media($media-name) { font-weight: 700; } From eeed4a047d5536d2889cbd34bef98d81611522bb Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 13:03:13 +0800 Subject: [PATCH 02/33] chore: added prefix to radius classes Signed-off-by: hasan-deriv --- src/features/styles/theme/radius.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/styles/theme/radius.scss b/src/features/styles/theme/radius.scss index 45e7ab4bf9d..6082133ea66 100644 --- a/src/features/styles/theme/radius.scss +++ b/src/features/styles/theme/radius.scss @@ -3,7 +3,7 @@ $sm-base-spacing: 0.2rem; @for $i from 0 through 10 { $sm-value: $i * $sm-base-spacing; - .border-radius-#{$i}x { + .at-border-radius-#{$i}x { border-radius: $sm-value } } \ No newline at end of file From 9ecc297877b5e6a3fd4787b0348e4d59f98dd29f Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 13:04:54 +0800 Subject: [PATCH 03/33] chore: added prefix to spacing classes Signed-off-by: hasan-deriv --- src/features/styles/theme/spacing.scss | 60 +++++++++++++------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/src/features/styles/theme/spacing.scss b/src/features/styles/theme/spacing.scss index d5794d61605..89f905a1c7f 100644 --- a/src/features/styles/theme/spacing.scss +++ b/src/features/styles/theme/spacing.scss @@ -6,49 +6,49 @@ $space-medias: (md, lg); @for $i from 0 through 40 { $sm-value: $i * $sm-base-spacing; - .gap-#{$i}x { + .at-gap-#{$i}x { gap: $sm-value; } - .margin-#{$i}x { + .at-margin-#{$i}x { margin: $sm-value; } - .margin-top-#{$i}x { + .at-margin-top-#{$i}x { margin-block-start: $sm-value; } - .margin-bottom-#{$i}x { + .at-margin-bottom-#{$i}x { margin-block-end: $sm-value; } - .margin-left-#{$i}x { + .at-margin-left-#{$i}x { margin-inline-start: $sm-value; } - .margin-right-#{$i}x { + .at-margin-right-#{$i}x { margin-inline-end: $sm-value; } - .margin-block-#{$i}x { + .at-margin-block-#{$i}x { margin-block: $sm-value; } - .margin-inline-#{$i}x { + .at-margin-inline-#{$i}x { margin-inline: $sm-value; } - .padding-#{$i}x { + .at-padding-#{$i}x { padding: $sm-value; } - .padding-top-#{$i}x { + .at-padding-top-#{$i}x { padding-block-start: $sm-value; } - .padding-bottom-#{$i}x { + .at-padding-bottom-#{$i}x { padding-block-end: $sm-value; } - .padding-left-#{$i}x { + .at-padding-left-#{$i}x { padding-inline-start: $sm-value; } - .padding-right-#{$i}x { + .at-padding-right-#{$i}x { padding-inline-end: $sm-value; } - .padding-block-#{$i}x { + .at-padding-block-#{$i}x { padding-block: $sm-value; } - .padding-inline-#{$i}x { + .at-padding-inline-#{$i}x { padding-inline: $sm-value; } } @@ -56,77 +56,77 @@ $space-medias: (md, lg); @mixin margins($media-name) { @for $i from 0 through 40 { $sm-value: $i * $sm-base-spacing; - .#{$media-name + #{'-'}}gap-#{$i}x { + .#{$media-name + #{'-'}}at-gap-#{$i}x { @include media($media-name) { gap: $sm-value; } } - .#{$media-name + #{'-'}}margin-#{$i}x { + .#{$media-name + #{'-'}}at-margin-#{$i}x { @include media($media-name) { margin: $sm-value; } } - .#{$media-name + #{'-'}}margin-top-#{$i}x { + .#{$media-name + #{'-'}}at-margin-top-#{$i}x { @include media($media-name) { margin-block-start: $sm-value; } } - .#{$media-name + #{'-'}}margin-bottom-#{$i}x { + .#{$media-name + #{'-'}}at-margin-bottom-#{$i}x { @include media($media-name) { margin-block-end: $sm-value; } } - .#{$media-name + #{'-'}}margin-left-#{$i}x { + .#{$media-name + #{'-'}}at-margin-left-#{$i}x { @include media($media-name) { margin-inline-start: $sm-value; } } - .#{$media-name + #{'-'}}margin-right-#{$i}x { + .#{$media-name + #{'-'}}at-margin-right-#{$i}x { @include media($media-name) { margin-inline-end: $sm-value; } } - .#{$media-name + #{'-'}}margin-block-#{$i}x { + .#{$media-name + #{'-'}}at-margin-block-#{$i}x { @include media($media-name) { margin-block: $sm-value; } } - .#{$media-name + #{'-'}}margin-inline-#{$i}x { + .#{$media-name + #{'-'}}at-margin-inline-#{$i}x { @include media($media-name) { margin-inline: $sm-value; } } - .#{$media-name + #{'-'}}padding-#{$i}x { + .#{$media-name + #{'-'}}at-padding-#{$i}x { @include media($media-name) { padding: $sm-value; } } - .#{$media-name + #{'-'}}padding-top-#{$i}x { + .#{$media-name + #{'-'}}at-padding-top-#{$i}x { @include media($media-name) { padding-block-start: $sm-value; } } - .#{$media-name + #{'-'}}padding-bottom-#{$i}x { + .#{$media-name + #{'-'}}at-padding-bottom-#{$i}x { @include media($media-name) { padding-block-end: $sm-value; } } - .#{$media-name + #{'-'}}padding-left-#{$i}x { + .#{$media-name + #{'-'}}at-padding-left-#{$i}x { @include media($media-name) { padding-inline-start: $sm-value; } } - .#{$media-name + #{'-'}}padding-right-#{$i}x { + .#{$media-name + #{'-'}}at-padding-right-#{$i}x { @include media($media-name) { padding-inline-end: $sm-value; } } - .#{$media-name + #{'-'}}padding-block-#{$i}x { + .#{$media-name + #{'-'}}at-padding-block-#{$i}x { @include media($media-name) { padding-block: $sm-value; } } - .#{$media-name + #{'-'}}padding-inline-#{$i}x { + .#{$media-name + #{'-'}}at-padding-inline-#{$i}x { @include media($media-name) { padding-inline: $sm-value; } From 0926fd046cdbdb2d5d72d80497a46baff33b2f94 Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 13:05:29 +0800 Subject: [PATCH 04/33] chore: added prefix to color classes Signed-off-by: hasan-deriv --- src/features/styles/theme/colors.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/features/styles/theme/colors.scss b/src/features/styles/theme/colors.scss index d45375f4c27..18f7b2828be 100644 --- a/src/features/styles/theme/colors.scss +++ b/src/features/styles/theme/colors.scss @@ -1,26 +1,26 @@ @import './variables'; -.bg-color-brand { +.at-bg-color-brand { background-color: $color-brand; } -.bg-color-primary { +.at-bg-color-primary { background-color: $color-white; } -.bg-color-secondary { +.at-bg-color-secondary { background-color: $color-white-1; } -.bg-color-tertiary { +.at-bg-color-tertiary { background-color: $color-grey-44; } -.bg-color-inverted { +.at-bg-color-inverted { background-color: $color-black-9; } -.bg-color-white { +.at-bg-color-white { background-color: $color-white; } -.bg-color-black { +.at-bg-color-black { background-color: $color-black-9; } -.bg-color-blue { +.at-bg-color-blue { background-color: $color-blue-15; } From 5cd76235d48e8a505f265cd0756ad0a3e588a12b Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 13:08:39 +0800 Subject: [PATCH 05/33] chore: added prefix to flex classes Signed-off-by: hasan-deriv --- src/features/styles/theme/flex.scss | 226 ++++++++++++++-------------- 1 file changed, 113 insertions(+), 113 deletions(-) diff --git a/src/features/styles/theme/flex.scss b/src/features/styles/theme/flex.scss index dbd112f5746..f75413f60d7 100644 --- a/src/features/styles/theme/flex.scss +++ b/src/features/styles/theme/flex.scss @@ -2,510 +2,510 @@ $flex-medias: (md, lg); -.flex { +.at-flex { display: flex; } -.align-self-start { +.at-align-self-start { align-self: flex-start; } -.align-self-end { +.at-align-self-end { align-self: flex-end; } -.align-self-center { +.at-align-self-center { align-self: center; } -.align-self-baseline { +.at-align-self-baseline { align-self: baseline; } -.align-self-stretch { +.at-align-self-stretch { align-self: stretch; } -.align-items-start { +.at-align-items-start { align-items: flex-start; } -.align-items-end { +.at-align-items-end { align-items: flex-end; } -.align-items-center { +.at-align-items-center { align-items: center; } -.align-items-baseline { +.at-align-items-baseline { align-items: baseline; } -.align-items-stretch { +.at-align-items-stretch { align-items: stretch; } -.justify-start { +.at-justify-start { justify-content: flex-start; } -.justify-end { +.at-justify-end { justify-content: flex-end; } -.justify-center { +.at-justify-center { justify-content: center; } -.justify-between { +.at-justify-between { justify-content: space-between; } -.justify-around { +.at-justify-around { justify-content: space-around; } -.justify-evenly { +.at-justify-evenly { justify-content: space-evenly; } -.flex-grow-1 { +.at-flex-grow-1 { flex-grow: 1; } -.flex-grow-0 { +.at-flex-grow-0 { flex-grow: 0; } -.flex-shrink-1 { +.at-flex-shrink-1 { flex-shrink: 1; } -.flex-shrink-0 { +.at-flex-shrink-0 { flex-shrink: 0; } -.flex-wrap-wrap { +.at-flex-wrap-wrap { flex-wrap: wrap; } -.flex-wrap-reverse { +.at-flex-wrap-reverse { flex-wrap: wrap-reverse; } -.flex-wrap-nowrap { +.at-flex-wrap-nowrap { flex-wrap: nowrap; } -.flex-dir-row { +.at-flex-dir-row { flex-direction: row; } -.flex-dir-row-reverse { +.at-flex-dir-row-reverse { flex-direction: row-reverse; } -.flex-dir-col { +.at-flex-dir-col { flex-direction: column; } -.flex-dir-col-reverse { +.at-flex-dir-col-reverse { flex-direction: column-reverse; } -.flex-basis-0 { +.at-flex-basis-0 { flex-basis: 0%; } -.flex-basis-1-2 { +.at-flex-basis-1-2 { flex-basis: 50%; } -.flex-basis-1-3 { +.at-flex-basis-1-3 { flex-basis: 33.333333%; } -.flex-basis-2-3 { +.at-flex-basis-2-3 { flex-basis: 66.666667%; } -.flex-basis-1-4 { +.at-flex-basis-1-4 { flex-basis: 25%; } -.flex-basis-2-4 { +.at-flex-basis-2-4 { flex-basis: 50%; } -.flex-basis-3-4 { +.at-flex-basis-3-4 { flex-basis: 75%; } -.flex-basis-1-5 { +.at-flex-basis-1-5 { flex-basis: 20%; } -.flex-basis-2-5 { +.at-flex-basis-2-5 { flex-basis: 40%; } -.flex-basis-3-5 { +.at-flex-basis-3-5 { flex-basis: 60%; } -.flex-basis-4-5 { +.at-flex-basis-4-5 { flex-basis: 80%; } -.flex-basis-1-6 { +.at-flex-basis-1-6 { flex-basis: 16.666667%; } -.flex-basis-2-6 { +.at-flex-basis-2-6 { flex-basis: 33.333333%; } -.flex-basis-3-6 { +.at-flex-basis-3-6 { flex-basis: 50%; } -.flex-basis-4-6 { +.at-flex-basis-4-6 { flex-basis: 66.666667%; } -.flex-basis-5-6 { +.at-flex-basis-5-6 { flex-basis: 83.333333%; } -.flex-basis-1-12 { +.at-flex-basis-1-12 { flex-basis: 8.333333%; } -.flex-basis-2-12 { +.at-flex-basis-2-12 { flex-basis: 16.666667%; } -.flex-basis-3-12 { +.at-flex-basis-3-12 { flex-basis: 25%; } -.flex-basis-4-12 { +.at-flex-basis-4-12 { flex-basis: 33.333333%; } -.flex-basis-5-12 { +.at-flex-basis-5-12 { flex-basis: 41.666667%; } -.flex-basis-6-12 { +.at-flex-basis-6-12 { flex-basis: 50%; } -.flex-basis-7-12 { +.at-flex-basis-7-12 { flex-basis: 58.333333%; } -.flex-basis-8-12 { +.at-flex-basis-8-12 { flex-basis: 66.666667%; } -.flex-basis-9-12 { +.at-flex-basis-9-12 { flex-basis: 75%; } -.flex-basis-10-12 { +.at-flex-basis-10-12 { flex-basis: 83.333333%; } -.flex-basis-11-12 { +.at-flex-basis-11-12 { flex-basis: 91.666667%; } -.flex-basis-full { +.at-flex-basis-full { flex-basis: 100%; } -.flex-basis-auto { +.at-flex-basis-auto { flex-basis: auto; } @mixin flex($media-name) { - .#{$media-name + #{'-'}}align-self-start { + .#{$media-name + #{'-'}}at-align-self-start { @include media($media-name) { align-self: flex-start; } } - .#{$media-name + #{'-'}}align-self-end { + .#{$media-name + #{'-'}}at-align-self-end { @include media($media-name) { align-self: flex-end; } } - .#{$media-name + #{'-'}}align-self-center { + .#{$media-name + #{'-'}}at-align-self-center { @include media($media-name) { align-self: center; } } - .#{$media-name + #{'-'}}align-self-baseline { + .#{$media-name + #{'-'}}at-align-self-baseline { @include media($media-name) { align-self: baseline; } } - .#{$media-name + #{'-'}}align-self-stretch { + .#{$media-name + #{'-'}}at-align-self-stretch { @include media($media-name) { align-self: stretch; } } - .#{$media-name + #{'-'}}align-items-start { + .#{$media-name + #{'-'}}at-align-items-start { @include media($media-name) { align-items: flex-start; } } - .#{$media-name + #{'-'}}align-items-end { + .#{$media-name + #{'-'}}at-align-items-end { @include media($media-name) { align-items: flex-end; } } - .#{$media-name + #{'-'}}align-items-center { + .#{$media-name + #{'-'}}at-align-items-center { @include media($media-name) { align-items: center; } } - .#{$media-name + #{'-'}}align-items-baseline { + .#{$media-name + #{'-'}}at-align-items-baseline { @include media($media-name) { align-items: baseline; } } - .#{$media-name + #{'-'}}align-items-stretch { + .#{$media-name + #{'-'}}at-align-items-stretch { @include media($media-name) { align-items: stretch; } } - .#{$media-name + #{'-'}}justify-start { + .#{$media-name + #{'-'}}at-justify-start { @include media($media-name) { justify-content: flex-start; } } - .#{$media-name + #{'-'}}justify-end { + .#{$media-name + #{'-'}}at-justify-end { @include media($media-name) { justify-content: flex-end; } } - .#{$media-name + #{'-'}}justify-center { + .#{$media-name + #{'-'}}at-justify-center { @include media($media-name) { justify-content: center; } } - .#{$media-name + #{'-'}}justify-between { + .#{$media-name + #{'-'}}at-justify-between { @include media($media-name) { justify-content: space-between; } } - .#{$media-name + #{'-'}}justify-around { + .#{$media-name + #{'-'}}at-justify-around { @include media($media-name) { justify-content: space-around; } } - .#{$media-name + #{'-'}}justify-evenly { + .#{$media-name + #{'-'}}at-justify-evenly { @include media($media-name) { justify-content: space-evenly; } } - .#{$media-name + #{'-'}}flex-grow-1 { + .#{$media-name + #{'-'}}at-flex-grow-1 { @include media($media-name) { flex-grow: 1; } } - .#{$media-name + #{'-'}}flex-grow-0 { + .#{$media-name + #{'-'}}at-flex-grow-0 { @include media($media-name) { flex-grow: 0; } } - .#{$media-name + #{'-'}}flex-shrink-1 { + .#{$media-name + #{'-'}}at-flex-shrink-1 { @include media($media-name) { flex-shrink: 1; } } - .#{$media-name + #{'-'}}flex-shrink-0 { + .#{$media-name + #{'-'}}at-flex-shrink-0 { @include media($media-name) { flex-shrink: 0; } } - .#{$media-name + #{'-'}}flex-wrap-wrap { + .#{$media-name + #{'-'}}at-flex-wrap-wrap { @include media($media-name) { flex-wrap: wrap; } } - .#{$media-name + #{'-'}}flex-wrap-reverse { + .#{$media-name + #{'-'}}at-flex-wrap-reverse { @include media($media-name) { flex-wrap: wrap-reverse; } } - .#{$media-name + #{'-'}}flex-wrap-nowrap { + .#{$media-name + #{'-'}}at-flex-wrap-nowrap { @include media($media-name) { flex-wrap: nowrap; } } - .#{$media-name + #{'-'}}flex-dir-row { + .#{$media-name + #{'-'}}at-flex-dir-row { @include media($media-name) { flex-direction: row; } } - .#{$media-name + #{'-'}}flex-dir-row-reverse { + .#{$media-name + #{'-'}}at-flex-dir-row-reverse { @include media($media-name) { flex-direction: row-reverse; } } - .#{$media-name + #{'-'}}flex-dir-col { + .#{$media-name + #{'-'}}at-flex-dir-col { @include media($media-name) { flex-direction: column; } } - .#{$media-name + #{'-'}}flex-dir-col-reverse { + .#{$media-name + #{'-'}}at-flex-dir-col-reverse { @include media($media-name) { flex-direction: column-reverse; } } - .#{$media-name + #{'-'}}flex-basis-0 { + .#{$media-name + #{'-'}}at-flex-basis-0 { @include media($media-name) { flex-basis: 0%; } } - .#{$media-name + #{'-'}}flex-basis-1-2 { + .#{$media-name + #{'-'}}at-flex-basis-1-2 { @include media($media-name) { flex-basis: 50%; } } - .#{$media-name + #{'-'}}flex-basis-1-3 { + .#{$media-name + #{'-'}}at-flex-basis-1-3 { @include media($media-name) { flex-basis: 33.333333%; } } - .#{$media-name + #{'-'}}flex-basis-2-3 { + .#{$media-name + #{'-'}}at-flex-basis-2-3 { @include media($media-name) { flex-basis: 66.666667%; } } - .#{$media-name + #{'-'}}flex-basis-1-4 { + .#{$media-name + #{'-'}}at-flex-basis-1-4 { @include media($media-name) { flex-basis: 25%; } } - .#{$media-name + #{'-'}}flex-basis-2-4 { + .#{$media-name + #{'-'}}at-flex-basis-2-4 { @include media($media-name) { flex-basis: 50%; } } - .#{$media-name + #{'-'}}flex-basis-3-4 { + .#{$media-name + #{'-'}}at-flex-basis-3-4 { @include media($media-name) { flex-basis: 75%; } } - .#{$media-name + #{'-'}}flex-basis-1-5 { + .#{$media-name + #{'-'}}at-flex-basis-1-5 { @include media($media-name) { flex-basis: 20%; } } - .#{$media-name + #{'-'}}flex-basis-2-5 { + .#{$media-name + #{'-'}}at-flex-basis-2-5 { @include media($media-name) { flex-basis: 40%; } } - .#{$media-name + #{'-'}}flex-basis-3-5 { + .#{$media-name + #{'-'}}at-flex-basis-3-5 { @include media($media-name) { flex-basis: 60%; } } - .#{$media-name + #{'-'}}flex-basis-4-5 { + .#{$media-name + #{'-'}}at-flex-basis-4-5 { @include media($media-name) { flex-basis: 80%; } } - .#{$media-name + #{'-'}}flex-basis-1-6 { + .#{$media-name + #{'-'}}at-flex-basis-1-6 { @include media($media-name) { flex-basis: 16.666667%; } } - .#{$media-name + #{'-'}}flex-basis-2-6 { + .#{$media-name + #{'-'}}at-flex-basis-2-6 { @include media($media-name) { flex-basis: 33.333333%; } } - .#{$media-name + #{'-'}}flex-basis-3-6 { + .#{$media-name + #{'-'}}at-flex-basis-3-6 { @include media($media-name) { flex-basis: 50%; } } - .#{$media-name + #{'-'}}flex-basis-4-6 { + .#{$media-name + #{'-'}}at-flex-basis-4-6 { @include media($media-name) { flex-basis: 66.666667%; } } - .#{$media-name + #{'-'}}flex-basis-5-6 { + .#{$media-name + #{'-'}}at-flex-basis-5-6 { @include media($media-name) { flex-basis: 83.333333%; } } - .#{$media-name + #{'-'}}flex-basis-1-12 { + .#{$media-name + #{'-'}}at-flex-basis-1-12 { @include media($media-name) { flex-basis: 8.333333%; } } - .#{$media-name + #{'-'}}flex-basis-2-12 { + .#{$media-name + #{'-'}}at-flex-basis-2-12 { @include media($media-name) { flex-basis: 16.666667%; } } - .#{$media-name + #{'-'}}flex-basis-3-12 { + .#{$media-name + #{'-'}}at-flex-basis-3-12 { @include media($media-name) { flex-basis: 25%; } } - .#{$media-name + #{'-'}}flex-basis-4-12 { + .#{$media-name + #{'-'}}at-flex-basis-4-12 { @include media($media-name) { flex-basis: 33.333333%; } } - .#{$media-name + #{'-'}}flex-basis-5-12 { + .#{$media-name + #{'-'}}at-flex-basis-5-12 { @include media($media-name) { flex-basis: 41.666667%; } } - .#{$media-name + #{'-'}}flex-basis-6-12 { + .#{$media-name + #{'-'}}at-flex-basis-6-12 { @include media($media-name) { flex-basis: 50%; } } - .#{$media-name + #{'-'}}flex-basis-7-12 { + .#{$media-name + #{'-'}}at-flex-basis-7-12 { @include media($media-name) { flex-basis: 58.333333%; } } - .#{$media-name + #{'-'}}flex-basis-8-12 { + .#{$media-name + #{'-'}}at-flex-basis-8-12 { @include media($media-name) { flex-basis: 66.666667%; } } - .#{$media-name + #{'-'}}flex-basis-9-12 { + .#{$media-name + #{'-'}}at-flex-basis-9-12 { @include media($media-name) { flex-basis: 75%; } } - .#{$media-name + #{'-'}}flex-basis-10-12 { + .#{$media-name + #{'-'}}at-flex-basis-10-12 { @include media($media-name) { flex-basis: 83.333333%; } } - .#{$media-name + #{'-'}}flex-basis-11-12 { + .#{$media-name + #{'-'}}at-flex-basis-11-12 { @include media($media-name) { flex-basis: 91.666667%; } } - .#{$media-name + #{'-'}}flex-basis-full { + .#{$media-name + #{'-'}}at-flex-basis-full { @include media($media-name) { flex-basis: 100%; } } - .#{$media-name + #{'-'}}flex-basis-auto { + .#{$media-name + #{'-'}}at-flex-basis-auto { @include media($media-name) { flex-basis: auto; } From 402fc651b1c3ecfbb55e17a23b666967218dba5e Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 13:09:05 +0800 Subject: [PATCH 06/33] chore: added prefix to container classes Signed-off-by: hasan-deriv --- src/features/styles/theme/containers.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/features/styles/theme/containers.scss b/src/features/styles/theme/containers.scss index 1aad55736ba..57d0d77cf62 100644 --- a/src/features/styles/theme/containers.scss +++ b/src/features/styles/theme/containers.scss @@ -1,6 +1,6 @@ @use 'features/styles/theme/theme-mixins' as *; -.container-fluid { +.at-container-fluid { margin-inline: auto; inline-size: 95%; @@ -18,6 +18,6 @@ } } -.container-fixed { +.at-container-fixed { inline-size: 100%; } From 2cb99b642dd1d9ca5cfecf177adaa71658d28623 Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 13:10:38 +0800 Subject: [PATCH 07/33] chore: added prefix to table classes Signed-off-by: hasan-deriv --- src/features/styles/theme/table.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/features/styles/theme/table.scss b/src/features/styles/theme/table.scss index ce7d9401f4b..073abf1840f 100644 --- a/src/features/styles/theme/table.scss +++ b/src/features/styles/theme/table.scss @@ -1,25 +1,25 @@ @import 'features/styles/theme/variables'; -.table-responsive { +.at-table-responsive { display: block; inline-size: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } -.table { +.at-table { inline-size: 100%; background-color: transparent; th, td { line-height: 1.8; } } -.table-layout-fixed { +.at-table-layout-fixed { table-layout: fixed; } -.table-shadow { +.at-table-shadow { box-shadow: 0px 24px 48px 0px rgba(14, 14, 14, 0.18); } -.table-striped { +.at-table-striped { background-color: $color-white; thead { tr { From 1ba1d2858c1a4426899f576b62b85f4a31ae596a Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 13:12:57 +0800 Subject: [PATCH 08/33] chore: added prefix to alert classes Signed-off-by: hasan-deriv --- src/features/styles/theme/alert.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/styles/theme/alert.scss b/src/features/styles/theme/alert.scss index 595cc20027b..40675958bda 100644 --- a/src/features/styles/theme/alert.scss +++ b/src/features/styles/theme/alert.scss @@ -22,7 +22,7 @@ } } -.alert { +.at-alert { &-overlay { background-color: rgba(0, 0, 0, 0.126); position: fixed; From cc6231332ce066000d278562b7ca6dc65dffc49b Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 13:13:10 +0800 Subject: [PATCH 09/33] chore: added prefix to tabs classes Signed-off-by: hasan-deriv --- src/features/styles/theme/tabs.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/features/styles/theme/tabs.scss b/src/features/styles/theme/tabs.scss index f9ebbd5f3c0..16613a10f5d 100644 --- a/src/features/styles/theme/tabs.scss +++ b/src/features/styles/theme/tabs.scss @@ -1,7 +1,7 @@ @use 'features/styles/theme/theme-mixins' as *; @import 'features/styles/theme/variables'; -.tab { +.at-tab { cursor: pointer; border-color: transparent; background-color: transparent; @@ -18,14 +18,14 @@ } } -.tab.menu-item { +.at-tab.at-menu-item { color: $color-grey-5; border-bottom: 2px solid $color-grey-8; &.navigation-tabs { border-bottom: none; } } -.tab.menu-item.selected { +.at-tab.at-menu-item.at-selected { color: $color-red; border-bottom: 2px solid $color-red; &.navigation-tabs { From 0d1aae5b3b0a35ca766f92fdb8f2317f8811b1ae Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 13:15:21 +0800 Subject: [PATCH 10/33] chore: added prefix to accordion classes Signed-off-by: hasan-deriv --- src/features/styles/theme/accordion/styles.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/features/styles/theme/accordion/styles.scss b/src/features/styles/theme/accordion/styles.scss index d046653e4f6..062b53c1339 100644 --- a/src/features/styles/theme/accordion/styles.scss +++ b/src/features/styles/theme/accordion/styles.scss @@ -1,11 +1,11 @@ @use 'features/styles/theme/theme-mixins' as *; @import 'features/styles/theme/variables'; -.accordion_root { +.at-accordion_root { inline-size: 100%; } -.accordion { +.at-accordion { @keyframes slideDown { from { block-size: 0; @@ -57,11 +57,11 @@ padding-inline: 1.6rem; min-block-size: 5rem; - .accordion_icon { + .at-accordion_icon { transition: transform 0.25s linear; transform: rotate(-180deg); } - .plus_icon { + .at-plus_icon { inline-size: 1.6rem; block-size: 1.6rem; background: url(images/svg/elements/plus.svg) no-repeat top left; @@ -74,7 +74,7 @@ } } - &[data-state='open'] .plus_icon { + &[data-state='open'] .at-plus_icon { background: url(images/svg/elements/minus.svg) no-repeat top left; background-size: contain; } From ffb0ae60eab013bb6ee133d73afbd7bca177f1de Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 13:15:40 +0800 Subject: [PATCH 11/33] chore: added prefix to icon classes Signed-off-by: hasan-deriv --- src/features/styles/theme/icon.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/features/styles/theme/icon.scss b/src/features/styles/theme/icon.scss index 620e6f80aeb..d9ba5057d12 100644 --- a/src/features/styles/theme/icon.scss +++ b/src/features/styles/theme/icon.scss @@ -1,12 +1,12 @@ @use 'features/styles/theme/theme-mixins' as *; -.icon-rtl { +.at-icon-rtl { @include rtl() { transform: scaleX(-1); } } -.icon-small { +.at-icon-small { inline-size: 12px; block-size: 12px; @@ -16,7 +16,7 @@ } } -.icon-medium { +.at-icon-medium { inline-size: 16px; block-size: 16px; @@ -26,7 +26,7 @@ } } -.icon-large { +.at-icon-large { inline-size: 24px; block-size: 24px; @@ -36,7 +36,7 @@ } } -.icon-xlarge { +.at-icon-xlarge { inline-size: 32px; block-size: 32px; From bd5f419323ef7ca2c96c0a33b01b8ebe7cbc14ef Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 13:16:54 +0800 Subject: [PATCH 12/33] chore: added prefix to input classes Signed-off-by: hasan-deriv --- src/features/styles/theme/inputs/text.styles.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/features/styles/theme/inputs/text.styles.scss b/src/features/styles/theme/inputs/text.styles.scss index 085f9d77593..b95deb9dd9b 100644 --- a/src/features/styles/theme/inputs/text.styles.scss +++ b/src/features/styles/theme/inputs/text.styles.scss @@ -1,6 +1,6 @@ @import 'features/styles/theme/variables'; -.text_input { +.at-text_input { &_container { position: relative; &.error { @@ -29,19 +29,19 @@ &:focus { outline: none; - ~ .text_input_label { + ~ .at-text_input_label { inset-block-start: -8px; color: $color-black; inline-size: auto; } } - &:not(:placeholder-shown) ~ .text_input_label { + &:not(:placeholder-shown) ~ .at-text_input_label { inset-block-start: -12px; inline-size: auto; color: $color-black; } } - .cross_icon { + .at-cross_icon { position: absolute; inset-inline-end: 0.8rem; inset-block-start: 1.2rem; From b605b06c5afa908d0a388ff57880ec24e2497998 Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 13:17:15 +0800 Subject: [PATCH 13/33] chore: added prefix to checkbox classes Signed-off-by: hasan-deriv --- src/features/styles/theme/inputs/checkbox.styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/styles/theme/inputs/checkbox.styles.scss b/src/features/styles/theme/inputs/checkbox.styles.scss index 4652e9be922..84041155d57 100644 --- a/src/features/styles/theme/inputs/checkbox.styles.scss +++ b/src/features/styles/theme/inputs/checkbox.styles.scss @@ -1,6 +1,6 @@ @import 'features/styles/theme/variables'; -.checkbox_input_container { +.at-checkbox_input_container { cursor: pointer; user-select: none; & input[type='checkbox'] { From 2ec1dfcdd44803e9b00ada23e080f42e1142c4d5 Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 13:17:46 +0800 Subject: [PATCH 14/33] chore: added prefix to visibility classes Signed-off-by: hasan-deriv --- src/features/styles/theme/visibility.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/features/styles/theme/visibility.scss b/src/features/styles/theme/visibility.scss index 59b131d1742..4b8327cad8e 100644 --- a/src/features/styles/theme/visibility.scss +++ b/src/features/styles/theme/visibility.scss @@ -1,33 +1,33 @@ @use './theme-mixins.scss' as *; -.visible-phone-only { +.at-visible-phone-only { // 0 - 600px @include breakpoints(phone) { display: none; } } -.visible-phone-and-tablet { +.at-visible-phone-and-tablet { // 0px - 992px @include breakpoints(tablet) { display: none; } } -.visible-larger-than-tablet { +.at-visible-larger-than-tablet { // 992px - .... @include breakpoints(tablet, max) { display: none; } } -.visible-larger-than-laptop { +.at-visible-larger-than-laptop { // 1280px - .... @include breakpoints(laptop, max) { display: none; } } -.visible-larger-than-phone { +.at-visible-larger-than-phone { // 600 - .... @include breakpoints(phone, max) { display: none; From 9d4cea84b5e99901e9cde62d71ab296ac2a1eb07 Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 13:18:24 +0800 Subject: [PATCH 15/33] chore: added prefix to utility classes Signed-off-by: hasan-deriv --- src/features/styles/theme/utility.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/styles/theme/utility.scss b/src/features/styles/theme/utility.scss index 52463fd2ef7..208dae67ca8 100644 --- a/src/features/styles/theme/utility.scss +++ b/src/features/styles/theme/utility.scss @@ -1,4 +1,4 @@ -.sr-only { +.at-sr-only { width: 1px; height: 1px; padding: 0; From eb965d84da664203942211b5cdc884831766d25d Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 13:26:25 +0800 Subject: [PATCH 16/33] chore: updated utils functions Signed-off-by: hasan-deriv --- src/features/styles/utils/index.ts | 50 +++++++++++++++--------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/src/features/styles/utils/index.ts b/src/features/styles/utils/index.ts index efc67215fb1..32c318b78d7 100644 --- a/src/features/styles/utils/index.ts +++ b/src/features/styles/utils/index.ts @@ -31,7 +31,7 @@ type SpacingClasses = { export const generateVisibleClasses = (visible: TVisible) => { return dclsx({ - [`visible-${visible}`]: visible, + [`at-visible-${visible}`]: visible, }) } @@ -54,66 +54,66 @@ export const generateSpacingClasses = (options: SpacingClasses, prefix = '') => padding_block, } = options return dclsx({ - [`${classPrefix}margin-${margin}`]: margin, - [`${classPrefix}margin-left-${ml}`]: ml, - [`${classPrefix}margin-right-${mr}`]: mr, - [`${classPrefix}margin-top-${mt}`]: mt, - [`${classPrefix}margin-bottom-${mb}`]: mb, - [`${classPrefix}margin-inline-${margin_inline}`]: margin_inline, - [`${classPrefix}margin-block-${margin_block}`]: margin_block, - [`${classPrefix}padding-${padding}`]: padding, - [`${classPrefix}padding-left-${pl}`]: pl, - [`${classPrefix}padding-right-${pr}`]: pr, - [`${classPrefix}padding-top-${pt}`]: pt, - [`${classPrefix}padding-bottom-${pb}`]: pb, - [`${classPrefix}padding-inline-${padding_inline}`]: padding_inline, - [`${classPrefix}padding-block-${padding_block}`]: padding_block, + [`${classPrefix}at-margin-${margin}`]: margin, + [`${classPrefix}at-margin-left-${ml}`]: ml, + [`${classPrefix}at-margin-right-${mr}`]: mr, + [`${classPrefix}at-margin-top-${mt}`]: mt, + [`${classPrefix}at-margin-bottom-${mb}`]: mb, + [`${classPrefix}at-margin-inline-${margin_inline}`]: margin_inline, + [`${classPrefix}at-margin-block-${margin_block}`]: margin_block, + [`${classPrefix}at-padding-${padding}`]: padding, + [`${classPrefix}at-padding-left-${pl}`]: pl, + [`${classPrefix}at-padding-right-${pr}`]: pr, + [`${classPrefix}at-padding-top-${pt}`]: pt, + [`${classPrefix}at-padding-bottom-${pb}`]: pb, + [`${classPrefix}at-padding-inline-${padding_inline}`]: padding_inline, + [`${classPrefix}at-padding-block-${padding_block}`]: padding_block, }) } export const generateGapClasses = (gap?: TSpacingSize) => { - return dclsx({ [`gap-${gap}`]: gap }) + return dclsx({ [`at-gap-${gap}`]: gap }) } export const generateBackgroundColor = (bgColor?: TBGColor) => { return dclsx({ - [`bg-color-${bgColor}`]: bgColor, + [`at-bg-color-${bgColor}`]: bgColor, }) } export const generateHeadingSize = (size?: THeadingSize) => { return dclsx({ - [`heading-${size}`]: size, + [`at-heading-${size}`]: size, }) } export const generateBorderRadius = (radius?: TBorderRadius) => { return dclsx({ - [`border-radius-${radius}`]: radius, + [`at-border-radius-${radius}`]: radius, }) } export const generateTextSize = (size?: THeadingSize) => { return dclsx({ - [`text-${size}`]: size, + [`at-text-${size}`]: size, }) } export const generateTextColor = (color?: TTypographyColor) => { return dclsx({ - [`typography-color-${color}`]: color, + [`at-typography-color-${color}`]: color, }) } export const generateTypographyWeightClasses = (weight?: TTypographyWeight, prefix = '') => { const classPrefix = prefix !== '' ? `${prefix}-` : '' return dclsx({ - [`${classPrefix}typography-weight-${weight}`]: weight, + [`${classPrefix}at-typography-weight-${weight}`]: weight, }) } export const generateTypographyFontClasses = (font_family?: TTypographyFont) => { return dclsx({ - [`typography-font-${font_family}`]: font_family, + [`at-typography-font-${font_family}`]: font_family, }) } @@ -121,7 +121,7 @@ export const generateTypographyAlignClasses = (align?: TTypographyAlign, prefix const classPrefix = prefix !== '' ? `${prefix}-` : '' return dclsx({ - [`${classPrefix}typography-align-${align}`]: align, + [`${classPrefix}at-typography-align-${align}`]: align, }) } @@ -134,7 +134,7 @@ export const generateTypographyClasses = ({ }) => { return dclsx( { - [`typography-break-${break_word}`]: break_word, + [`at-typography-break-${break_word}`]: break_word, }, generateTextColor(textcolor), ) From 79922e6d27de509de64222142a0fc3b0e99a8f87 Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 14:07:40 +0800 Subject: [PATCH 17/33] chore: updated quill icons package Signed-off-by: hasan-deriv --- package-lock.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 533f0a27b16..7c1e8ae04ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,6 @@ "@hookform/resolvers": "^3.3.2", "@livechat/customer-sdk": "^3.1.5", "@loadable/component": "^5.15.3", - "@parcel/watcher-linux-x64-glibc": "*", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", From 8ddd4b71cf0e03a9a6664e16669a8c1049db46c7 Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 14:07:59 +0800 Subject: [PATCH 18/33] chore: updated classname types Signed-off-by: hasan-deriv --- src/features/types/index.ts | 40 ++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/features/types/index.ts b/src/features/types/index.ts index c1c8b83e7f3..d5f672ce8bc 100644 --- a/src/features/types/index.ts +++ b/src/features/types/index.ts @@ -107,30 +107,30 @@ export type LinkUrlType = InternalLinkType | ExternalLinkType type InferSide = T extends `${K}-${infer R}` ? R : never // Typography Classes -export type TTypographyAlign = InferSide -export type TTypographyBreakWord = InferSide -export type TTypographyWeight = InferSide -export type THeadingSize = InferSide -export type TTextSize = InferSide -export type TBorderRadius = InferSide -export type TSpacingSize = InferSide -export type TTypographyColor = InferSide -export type TTypographyFont = InferSide +export type TTypographyAlign = InferSide +export type TTypographyBreakWord = InferSide +export type TTypographyWeight = InferSide +export type THeadingSize = InferSide +export type TTextSize = InferSide +export type TBorderRadius = InferSide +export type TSpacingSize = InferSide +export type TTypographyColor = InferSide +export type TTypographyFont = InferSide // Background Classes -export type TBGColor = InferSide +export type TBGColor = InferSide // FlexBox Classes -export type TAlignItems = InferSide -export type TAlignSelf = InferSide -export type TJustifyContent = InferSide -export type TFlexGrow = InferSide -export type TFlexShrink = InferSide -export type TFlexWrap = InferSide -export type TFlexDirection = InferSide -export type TFlexBasis = InferSide -export type TContainerType = InferSide -export type TVisible = InferSide +export type TAlignItems = InferSide +export type TAlignSelf = InferSide +export type TJustifyContent = InferSide +export type TFlexGrow = InferSide +export type TFlexShrink = InferSide +export type TFlexWrap = InferSide +export type TFlexDirection = InferSide +export type TFlexBasis = InferSide +export type TContainerType = InferSide +export type TVisible = InferSide export interface ClassProps { margin?: TSpacingSize From 5b8c915cf97c9ea28b91d1c4f6f1a6885db4ae80 Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 14:12:29 +0800 Subject: [PATCH 19/33] chore: updated class names in accordion component Signed-off-by: hasan-deriv --- .../atoms/accordion/accordion-item/index.tsx | 8 +++---- .../atoms/accordion/accordion-root/index.tsx | 2 +- .../accordion/accordion-shadow-item/index.tsx | 23 ++++++++++++------- 3 files changed, 20 insertions(+), 13 deletions(-) diff --git a/src/features/components/atoms/accordion/accordion-item/index.tsx b/src/features/components/atoms/accordion/accordion-item/index.tsx index 1e4525a013c..2877090934a 100644 --- a/src/features/components/atoms/accordion/accordion-item/index.tsx +++ b/src/features/components/atoms/accordion/accordion-item/index.tsx @@ -29,21 +29,21 @@ const icons: AccordionIcons = { const AccordionItem = React.forwardRef( ({ children, className, item_title, icon_type = 'chevron', ...props }, ref) => ( - + - + - +
{children}
 diff --git a/src/features/components/atoms/accordion/accordion-root/index.tsx b/src/features/components/atoms/accordion/accordion-root/index.tsx index 5aeff879560..1369b491e98 100644 --- a/src/features/components/atoms/accordion/accordion-root/index.tsx +++ b/src/features/components/atoms/accordion/accordion-root/index.tsx @@ -9,7 +9,7 @@ const AccordionRoot = React.forwardRef< >(({ className, ...rest }, ref) => { return ( diff --git a/src/features/components/atoms/accordion/accordion-shadow-item/index.tsx b/src/features/components/atoms/accordion/accordion-shadow-item/index.tsx index 3bac18326b6..52f1b8fc5e1 100644 --- a/src/features/components/atoms/accordion/accordion-shadow-item/index.tsx +++ b/src/features/components/atoms/accordion/accordion-shadow-item/index.tsx @@ -16,14 +16,18 @@ interface TAccordionItem extends AccordionItemProps { const AccordionShadowItem = React.forwardRef( ({ children, className, renderHeader, item_title, icon_type = 'chevron', ...props }, ref) => ( - + {renderHeader ? ( @@ -36,17 +40,20 @@ const AccordionShadowItem = React.forwardRef( {icon_type === 'chevron' ? ( ) : ( - + )}
{children}
 From b7962347dd1928c49f1b4b6960c25bb3d57f9da6 Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 14:13:34 +0800 Subject: [PATCH 20/33] chore: updated class names in alert component Signed-off-by: hasan-deriv --- src/features/components/atoms/alert/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/features/components/atoms/alert/index.tsx b/src/features/components/atoms/alert/index.tsx index cce7d30f84e..9df9cfd1841 100644 --- a/src/features/components/atoms/alert/index.tsx +++ b/src/features/components/atoms/alert/index.tsx @@ -27,8 +27,8 @@ const Alert = ({ return ( - - + +
From 0b56af62282a84552f1595696e640d0f85ae561f Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 14:17:17 +0800 Subject: [PATCH 21/33] chore: updated class names in card component Signed-off-by: hasan-deriv --- src/features/components/atoms/card/card-primary/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/components/atoms/card/card-primary/index.tsx b/src/features/components/atoms/card/card-primary/index.tsx index 0595eac0826..ed7246c196d 100644 --- a/src/features/components/atoms/card/card-primary/index.tsx +++ b/src/features/components/atoms/card/card-primary/index.tsx @@ -52,7 +52,7 @@ const CardPrimary = ({ )} From 0addd1a95c1dc8b7adccfdb0d9e8581e164007f3 Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 14:17:33 +0800 Subject: [PATCH 22/33] chore: updated class names in container component Signed-off-by: hasan-deriv --- src/features/components/atoms/container/fixed/index.tsx | 2 +- src/features/components/atoms/container/fluid/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/features/components/atoms/container/fixed/index.tsx b/src/features/components/atoms/container/fixed/index.tsx index 02af5dbe067..f2ced6fa500 100644 --- a/src/features/components/atoms/container/fixed/index.tsx +++ b/src/features/components/atoms/container/fixed/index.tsx @@ -4,7 +4,7 @@ import { ContentSectionTagOptions } from 'features/types' import dclsx from 'features/utils/dclsx' const FixedContainer = ({ className, ...rest }: BoxProps) => { - const classnames = dclsx(className, 'container-fixed') + const classnames = dclsx(className, 'at-container-fixed') return } diff --git a/src/features/components/atoms/container/fluid/index.tsx b/src/features/components/atoms/container/fluid/index.tsx index ae36a8c01e5..40e7a9a4806 100644 --- a/src/features/components/atoms/container/fluid/index.tsx +++ b/src/features/components/atoms/container/fluid/index.tsx @@ -4,7 +4,7 @@ import { ContentSectionTagOptions } from 'features/types' import dclsx from 'features/utils/dclsx' const FluidContainer = ({ className, ...rest }: BoxProps) => { - const classnames = dclsx(className, 'container-fluid') + const classnames = dclsx(className, 'at-container-fluid') return } From e5d4e184996516505813f37081251d4fcbe474f0 Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 14:18:46 +0800 Subject: [PATCH 23/33] chore: updated class names in flex component Signed-off-by: hasan-deriv --- .../components/atoms/flex-box/box/index.tsx | 14 +++++++------- .../components/atoms/flex-box/item/index.tsx | 8 ++++---- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/features/components/atoms/flex-box/box/index.tsx b/src/features/components/atoms/flex-box/box/index.tsx index a067a747d1d..f552113c978 100644 --- a/src/features/components/atoms/flex-box/box/index.tsx +++ b/src/features/components/atoms/flex-box/box/index.tsx @@ -34,11 +34,11 @@ const generateFlexClasses = (options: FlexBoxClasses, prefix?: string) => { const classPrefix = prefix ? `${prefix}-` : '' return dclsx({ - [`${classPrefix}gap-${gap}`]: gap, - [`${classPrefix}align-items-${align}`]: align, - [`${classPrefix}justify-${justify}`]: justify, - [`${classPrefix}flex-wrap-${wrap}`]: wrap, - [`${classPrefix}flex-dir-${direction}`]: direction, + [`${classPrefix}at-gap-${gap}`]: gap, + [`${classPrefix}at-align-items-${align}`]: align, + [`${classPrefix}at-justify-${justify}`]: justify, + [`${classPrefix}at-flex-wrap-${wrap}`]: wrap, + [`${classPrefix}at-flex-dir-${direction}`]: direction, }) } @@ -59,10 +59,10 @@ const FlexBoxContainer = ({ ...rest }: FlexBoxProps) => { const classnames = dclsx( - 'flex', + 'at-flex', className, { - [`container-${container}`]: container, + [`at-container-${container}`]: container, }, generateFlexItemClasses({ align_self, grow, shrink, basis }), generateFlexItemClasses(md ?? {}, 'md'), diff --git a/src/features/components/atoms/flex-box/item/index.tsx b/src/features/components/atoms/flex-box/item/index.tsx index e4b9827abb6..bdc6436aae4 100644 --- a/src/features/components/atoms/flex-box/item/index.tsx +++ b/src/features/components/atoms/flex-box/item/index.tsx @@ -29,10 +29,10 @@ export const generateFlexItemClasses = (options: FlexItemClasses, prefix = '') = const classPrefix = prefix ? `${prefix}-` : '' const { align_self, grow, shrink, basis } = options return dclsx({ - [`${classPrefix}align-self-${align_self}`]: align_self, - [`${classPrefix}flex-grow-${grow}`]: grow, - [`${classPrefix}flex-shrink-${shrink}`]: shrink, - [`${classPrefix}flex-basis-${basis}`]: basis, + [`${classPrefix}at-align-self-${align_self}`]: align_self, + [`${classPrefix}at-flex-grow-${grow}`]: grow, + [`${classPrefix}at-flex-shrink-${shrink}`]: shrink, + [`${classPrefix}at-flex-basis-${basis}`]: basis, }) } From 72bb2074b391c2f1d513781f13ead96ee3526518 Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 14:19:28 +0800 Subject: [PATCH 24/33] chore: updated class names in icon component Signed-off-by: hasan-deriv --- src/features/components/atoms/icon/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/features/components/atoms/icon/index.tsx b/src/features/components/atoms/icon/index.tsx index 36319a9dcfe..afb5a3b4416 100644 --- a/src/features/components/atoms/icon/index.tsx +++ b/src/features/components/atoms/icon/index.tsx @@ -9,8 +9,8 @@ interface IconProps extends ImgHTMLAttributes<'img'>, ClassProps { } const Icon = ({ size = 'small', has_rtl, className, ...rest }: IconProps) => { - const classnames = dclsx(className, `icon-${size}`, 'icon', { - 'icon-rtl': has_rtl, + const classnames = dclsx(className, `at-icon-${size}`, 'at-icon', { + 'at-icon-rtl': has_rtl, }) return From 35cf056518947710afefa4a2327e5c86bb56cc52 Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 14:27:08 +0800 Subject: [PATCH 25/33] chore: updated class names in input and checkbox component Signed-off-by: hasan-deriv --- src/features/components/atoms/input/checkbox/index.tsx | 2 +- src/features/components/atoms/input/text/index.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/features/components/atoms/input/checkbox/index.tsx b/src/features/components/atoms/input/checkbox/index.tsx index 42e65b46c06..7f032e11977 100644 --- a/src/features/components/atoms/input/checkbox/index.tsx +++ b/src/features/components/atoms/input/checkbox/index.tsx @@ -7,7 +7,7 @@ const CheckboxInput = forwardRef {children} diff --git a/src/features/components/atoms/input/text/index.tsx b/src/features/components/atoms/input/text/index.tsx index f631fe63a2e..3ddcdad177c 100644 --- a/src/features/components/atoms/input/text/index.tsx +++ b/src/features/components/atoms/input/text/index.tsx @@ -18,13 +18,13 @@ const TextInput = forwardRef( ({ formId, error, className, label, clearErrors, setValue, ...rest }, ref) => { const notValid = error && error.length ? 'error' : 'valid' return ( -
+
{error && ( error icon { setValue(formId, '') clearErrors() @@ -36,7 +36,7 @@ const TextInput = forwardRef( @@ -47,7 +47,7 @@ const TextInput = forwardRef( From 5067d244187f7bf7bd3c260786f12c436370587a Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 14:29:43 +0800 Subject: [PATCH 26/33] chore: updated class names in link component Signed-off-by: hasan-deriv --- src/features/components/atoms/link/internal.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/features/components/atoms/link/internal.tsx b/src/features/components/atoms/link/internal.tsx index 2d8f10a9898..8517810437d 100644 --- a/src/features/components/atoms/link/internal.tsx +++ b/src/features/components/atoms/link/internal.tsx @@ -93,8 +93,8 @@ const Internal = ({ rel={link_rel} className={dclsx( className, - 'typography-link', - 'typography', + 'at-typography-link', + 'at-typography', generateSpacingClasses({ margin, padding, @@ -125,8 +125,8 @@ const Internal = ({ textcolor, }), { - 'typography-hover': !no_hover, - 'typography-color-brand': is_active, + 'at-typography-hover': !no_hover, + 'at-typography-color-brand': is_active, }, )} > From 56cb6ff8469717c6ed2cda14fc5d933b3193a797 Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 14:32:47 +0800 Subject: [PATCH 27/33] chore: updated class names in tab component Signed-off-by: hasan-deriv --- src/features/components/atoms/tab/base/index.tsx | 2 +- src/features/components/atoms/tab/tab-menu-item/index.tsx | 6 +++--- src/features/styles/theme/tabs.scss | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/features/components/atoms/tab/base/index.tsx b/src/features/components/atoms/tab/base/index.tsx index 3c36c2f9238..d82cb44d468 100644 --- a/src/features/components/atoms/tab/base/index.tsx +++ b/src/features/components/atoms/tab/base/index.tsx @@ -32,7 +32,7 @@ const TabBase = ({ return ( diff --git a/src/features/styles/theme/tabs.scss b/src/features/styles/theme/tabs.scss index 16613a10f5d..22b46edfe28 100644 --- a/src/features/styles/theme/tabs.scss +++ b/src/features/styles/theme/tabs.scss @@ -12,7 +12,7 @@ white-space: nowrap; @include breakpoints(tablet) { font-size: 2rem; - &.navigation-tabs { + &.at-navigation-tabs { min-inline-size: 14rem; } } @@ -21,14 +21,14 @@ .at-tab.at-menu-item { color: $color-grey-5; border-bottom: 2px solid $color-grey-8; - &.navigation-tabs { + &.at-navigation-tabs { border-bottom: none; } } .at-tab.at-menu-item.at-selected { color: $color-red; border-bottom: 2px solid $color-red; - &.navigation-tabs { + &.at-navigation-tabs { border-bottom: none; } } From 6bed03dbcb60fe3412fd092964b5d8e3ff63bcf6 Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 14:34:36 +0800 Subject: [PATCH 28/33] chore: updated class names in table component Signed-off-by: hasan-deriv --- .../components/atoms/table/base/index.tsx | 4 ++-- .../components/atoms/table/base/table-header.tsx | 16 ++++++++-------- .../components/atoms/table/base/table-row.tsx | 14 +++++++------- .../atoms/table/shadow-table/index.tsx | 2 +- 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/features/components/atoms/table/base/index.tsx b/src/features/components/atoms/table/base/index.tsx index 7a5a4fd6b32..f02767dc463 100644 --- a/src/features/components/atoms/table/base/index.tsx +++ b/src/features/components/atoms/table/base/index.tsx @@ -23,10 +23,10 @@ function BaseTable({ }: TableProps) { return ( - +
diff --git a/src/features/components/atoms/table/base/table-header.tsx b/src/features/components/atoms/table/base/table-header.tsx index 2ea8adbe608..0d77ad77cc9 100644 --- a/src/features/components/atoms/table/base/table-header.tsx +++ b/src/features/components/atoms/table/base/table-header.tsx @@ -14,14 +14,14 @@ const TableHeader = ({ columns }: TableHeaderProps) {col.header} diff --git a/src/features/components/atoms/table/base/table-row.tsx b/src/features/components/atoms/table/base/table-row.tsx index edc22bd5d39..efc7ac4f955 100644 --- a/src/features/components/atoms/table/base/table-row.tsx +++ b/src/features/components/atoms/table/base/table-row.tsx @@ -16,13 +16,13 @@ const TableRow = ({ data, columns }: TableRowProps) {row[col.accessor]} diff --git a/src/features/components/atoms/table/shadow-table/index.tsx b/src/features/components/atoms/table/shadow-table/index.tsx index a9a8f51dae8..082e76a1094 100644 --- a/src/features/components/atoms/table/shadow-table/index.tsx +++ b/src/features/components/atoms/table/shadow-table/index.tsx @@ -3,7 +3,7 @@ import BaseTable, { TableProps } from '../base' import dclsx from 'features/utils/dclsx' function ShadowTable({ className, ...rest }: TableProps) { - return + return } export default ShadowTable From a4034d222a0ef132eb030ae44b3b5a89bfba9d82 Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 14:35:33 +0800 Subject: [PATCH 29/33] chore: updated class names in typography component Signed-off-by: hasan-deriv --- src/features/components/atoms/typography/base/index.tsx | 2 +- src/features/components/atoms/typography/heading/index.tsx | 2 +- src/features/components/atoms/typography/hero/index.tsx | 2 +- src/features/components/atoms/typography/link/index.tsx | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/features/components/atoms/typography/base/index.tsx b/src/features/components/atoms/typography/base/index.tsx index 50db3f8d576..5bcbb023327 100644 --- a/src/features/components/atoms/typography/base/index.tsx +++ b/src/features/components/atoms/typography/base/index.tsx @@ -48,7 +48,7 @@ const BaseTypography = ({ }: BaseTypographyProps) => { const classnames = dclsx( className, - 'typography', + 'at-typography', generateTypographyAlignClasses(align), generateTypographyAlignClasses(md?.align, 'md'), generateTypographyAlignClasses(lg?.align, 'lg'), diff --git a/src/features/components/atoms/typography/heading/index.tsx b/src/features/components/atoms/typography/heading/index.tsx index 20e0b49c9f0..0a278308581 100644 --- a/src/features/components/atoms/typography/heading/index.tsx +++ b/src/features/components/atoms/typography/heading/index.tsx @@ -9,7 +9,7 @@ interface HeadingProps extends BaseTypographyProps { } const Heading = ({ size = 'medium', weight, className, as = 'h1', ...rest }: HeadingProps) => { - const classnames = dclsx(className, 'heading', generateHeadingSize(size)) + const classnames = dclsx(className, 'at-heading', generateHeadingSize(size)) return } diff --git a/src/features/components/atoms/typography/hero/index.tsx b/src/features/components/atoms/typography/hero/index.tsx index c5c71021bc2..d5f8741836f 100644 --- a/src/features/components/atoms/typography/hero/index.tsx +++ b/src/features/components/atoms/typography/hero/index.tsx @@ -6,7 +6,7 @@ import dclsx from 'features/utils/dclsx' type HeroTextProps = BaseTypographyProps const HeroText = ({ className, ...rest }: HeroTextProps) => { - const classnames = dclsx(className, 'heading-xxxl') + const classnames = dclsx(className, 'at-heading-xxxl') return } diff --git a/src/features/components/atoms/typography/link/index.tsx b/src/features/components/atoms/typography/link/index.tsx index 1b6bd17e9e0..e1714ceab00 100644 --- a/src/features/components/atoms/typography/link/index.tsx +++ b/src/features/components/atoms/typography/link/index.tsx @@ -17,8 +17,8 @@ const TypographyLink = ({ className, size, no_hover, ...rest }: TypographyLinkPr return ( From df8b89d125afd0bf6291ad35f86ce1bb764d6c2b Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 14:47:33 +0800 Subject: [PATCH 30/33] chore: updated class names in molecules components Signed-off-by: hasan-deriv --- src/features/components/molecules/timeline-item/index.tsx | 2 +- src/features/components/molecules/trade-item/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/features/components/molecules/timeline-item/index.tsx b/src/features/components/molecules/timeline-item/index.tsx index aa101390078..32cf99a1136 100644 --- a/src/features/components/molecules/timeline-item/index.tsx +++ b/src/features/components/molecules/timeline-item/index.tsx @@ -32,7 +32,7 @@ const TimelineItem = ({ data, isLastItem, ...rest }: TimelineItemProps) => { alt="check icon" width={24} height={24} - className={dclsx('lg-margin-top-3x')} + className={dclsx('lg-at-margin-top-3x')} />
diff --git a/src/features/components/molecules/trade-item/index.tsx b/src/features/components/molecules/trade-item/index.tsx index 3fbb2caa290..7d954b14f96 100644 --- a/src/features/components/molecules/trade-item/index.tsx +++ b/src/features/components/molecules/trade-item/index.tsx @@ -37,7 +37,7 @@ const TradeItem = ({ data, ...rest }: TradeItemProps) => { textcolor="inverted" mt="8x" mb="4x" - className={dclsx('text-medium')} + className={dclsx('at-text-medium')} > From 1525984213d75b6abbe762bbf450e7eb281691d8 Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 14:52:15 +0800 Subject: [PATCH 31/33] chore: updated class names in organisms components Signed-off-by: hasan-deriv --- .../organisms/available-options/tab-items.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/features/components/organisms/available-options/tab-items.tsx b/src/features/components/organisms/available-options/tab-items.tsx index 585350e3608..f018c8d6e2c 100644 --- a/src/features/components/organisms/available-options/tab-items.tsx +++ b/src/features/components/organisms/available-options/tab-items.tsx @@ -73,10 +73,10 @@ const OptionsTab = ({ options_tabs }: OptionsTabType) => { return ( -
+
{options_tabs.map((option_item, index) => (
{ >
{
side_scroll(content_wrapper.current!, 25, 100, -10)} @@ -141,7 +141,7 @@ const OptionsTab = ({ options_tabs }: OptionsTabType) => {
side_scroll(content_wrapper.current!, 25, 100, 10)} From c74a287bf15e5c100c44c760295ac60d0fc479f0 Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Mon, 25 Dec 2023 15:13:39 +0800 Subject: [PATCH 32/33] chore: updated class names in templates components Signed-off-by: hasan-deriv --- .../banners/deriv-products-hero/products-heading.tsx | 4 ++-- .../templates/navigation/template/desktop-menu/index.tsx | 4 ++-- .../options-content/section-content-option.item.tsx | 4 ++-- .../options-content/single-content-option.item.tsx | 2 +- .../templates/trade-platform/other-platforms/index.tsx | 8 ++++---- .../other-platforms/platform-card/index.tsx | 9 +++++++-- .../components/templates/why-trade-options/index.tsx | 2 +- 7 files changed, 19 insertions(+), 14 deletions(-) diff --git a/src/features/components/templates/banners/deriv-products-hero/products-heading.tsx b/src/features/components/templates/banners/deriv-products-hero/products-heading.tsx index fd39e81a23a..b972f949d0a 100644 --- a/src/features/components/templates/banners/deriv-products-hero/products-heading.tsx +++ b/src/features/components/templates/banners/deriv-products-hero/products-heading.tsx @@ -17,7 +17,7 @@ const ProductsHeading = ({ title }: ProductsHeadingProps) => { align={'left'} pt={'4x'} md={{ pt: '8x' }} - className="visible-larger-than-tablet" + className="at-visible-larger-than-tablet" > {title.map((text, index) => ( @@ -32,7 +32,7 @@ const ProductsHeading = ({ title }: ProductsHeadingProps) => { align={'left'} pt={'4x'} md={{ pt: '8x' }} - className="visible-phone-and-tablet" + className="at-visible-phone-and-tablet" > {title.map((text, index) => ( diff --git a/src/features/components/templates/navigation/template/desktop-menu/index.tsx b/src/features/components/templates/navigation/template/desktop-menu/index.tsx index 2df5aef28d1..7587b71e8b2 100644 --- a/src/features/components/templates/navigation/template/desktop-menu/index.tsx +++ b/src/features/components/templates/navigation/template/desktop-menu/index.tsx @@ -22,8 +22,8 @@ const DesktopMenu = ({ has_centered_items }: IDesktopNavbarProps) => { onValueChange={setActive} className={dclsx( 'navigation_root', - has_centered_items ? 'justify-center' : 'justify-end', - has_centered_items ? undefined : 'margin-right-40x', + has_centered_items ? 'at-justify-center' : 'at-justify-end', + has_centered_items ? undefined : 'at-margin-right-40x', )} > diff --git a/src/features/components/templates/options-content/section-content-option.item.tsx b/src/features/components/templates/options-content/section-content-option.item.tsx index 92c3b83c970..35b496dbad8 100644 --- a/src/features/components/templates/options-content/section-content-option.item.tsx +++ b/src/features/components/templates/options-content/section-content-option.item.tsx @@ -12,14 +12,14 @@ const SectionOptionContentItem = ({ item }: { item: OptionContentSectionItemData {item.icon.src && {localize(item.icon.alt)}} {item.title && ( -

+

)} {item.sections.map((sectionItem) => ( -
+
diff --git a/src/features/components/templates/options-content/single-content-option.item.tsx b/src/features/components/templates/options-content/single-content-option.item.tsx index 9f7ded0c691..38a06a2637c 100644 --- a/src/features/components/templates/options-content/single-content-option.item.tsx +++ b/src/features/components/templates/options-content/single-content-option.item.tsx @@ -12,7 +12,7 @@ const SingleOptionContentItem = ({ item }: { item: OptionContentSingleItemData } {item.icon && {localize(item.icon.alt)}} {item.title && ( -

+

)} diff --git a/src/features/components/templates/trade-platform/other-platforms/index.tsx b/src/features/components/templates/trade-platform/other-platforms/index.tsx index 5a3f0ba2e96..d64511e1421 100644 --- a/src/features/components/templates/trade-platform/other-platforms/index.tsx +++ b/src/features/components/templates/trade-platform/other-platforms/index.tsx @@ -32,7 +32,7 @@ const PlatformsCarousel = ({ heading, data, ...rest }: PropsType) => { -
+
{ }, }} className={dclsx( - 'padding-inline-5x padding-bottom-20x md-padding-bottom-10x', + 'at-padding-inline-5x at-padding-bottom-20x md-at-padding-bottom-10x', )} > {data.map((slide) => ( @@ -69,7 +69,7 @@ const PlatformsCarousel = ({ heading, data, ...rest }: PropsType) => {