Skip to content

Commit 8328dfa

Browse files
shafin-derivshafin-deriv
committed
chore: change scss files to only import variables mixins when necessary
1 parent 54160e5 commit 8328dfa

File tree

61 files changed

+729
-1866
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+729
-1866
lines changed

‎.stylelintrc.cjs

+4
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ module.exports = {
88
'color-no-invalid-hex': true,
99
'declaration-block-no-duplicate-properties': [true, { ignore: ['consecutive-duplicates'] }],
1010
'declaration-block-no-shorthand-property-overrides': true,
11+
'declaration-block-no-redundant-longhand-properties': null,
1112
'font-family-name-quotes': 'always-unless-keyword',
1213
'function-calc-no-unspaced-operator': true,
1314
'function-name-case': 'lower',
@@ -23,6 +24,7 @@ module.exports = {
2324
},
2425
],
2526
'selector-class-pattern': null,
27+
'selector-id-pattern': null,
2628
'selector-pseudo-element-colon-notation': 'single',
2729
'selector-pseudo-element-no-unknown': true,
2830
'selector-type-case': 'lower',
@@ -32,6 +34,8 @@ module.exports = {
3234
'time-min-milliseconds': 100,
3335
'unit-allowed-list': ['fr', 'px', 'em', 'rem', '%', 'svh', 'vw', 'vh', 'deg', 'ms', 's', 'dpcm'],
3436
'value-keyword-case': 'lower',
37+
'scss/at-extend-no-missing-placeholder': null,
38+
'custom-property-pattern': null,
3539
},
3640
extends: ['stylelint-config-standard-scss'],
3741
ignoreFiles: ['packages/*/dist/**/*.css'],

‎package-lock.json

+63-566
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,9 @@
8383
"@commitlint/config-conventional": "^17.1.0",
8484
"@deriv-com/eslint-config-deriv": "^2.1.0-beta.3",
8585
"@jest/globals": "^29.7.0",
86-
"@rsbuild/core": "^1.0.1-beta.0",
87-
"@rsbuild/plugin-react": "^1.0.1-beta.1",
88-
"@rsbuild/plugin-sass": "^1.0.1-beta.1",
86+
"@rsbuild/core": "^1.0.1-beta.4",
87+
"@rsbuild/plugin-react": "^1.0.1-beta.4",
88+
"@rsbuild/plugin-sass": "^1.0.1-beta.4",
8989
"@testing-library/dom": "^10.3.1",
9090
"@testing-library/jest-dom": "^6.4.6",
9191
"@testing-library/react": "^16.0.0",

‎rsbuild.config.ts

+9-7
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,12 @@ export default defineConfig({
99
pluginSass({
1010
sassLoaderOptions: {
1111
sourceMap: true,
12-
additionalData: `
13-
@import "${path.resolve(__dirname, 'src/components/shared/styles/constants.scss')}";
14-
@import "${path.resolve(__dirname, 'src/components/shared/styles/mixins.scss')}";
15-
@import "${path.resolve(__dirname, 'src/components/shared/styles/fonts.scss')}";
16-
@import "${path.resolve(__dirname, 'src/components/shared/styles/inline-icons.scss')}";
17-
@import "${path.resolve(__dirname, 'src/components/shared/styles/devices.scss')}";
18-
`,
12+
sassOptions: {
13+
includePaths: [path.resolve(__dirname, 'src')],
14+
},
15+
// additionalData: `@use "${path.resolve(__dirname, 'src/components/shared/styles')}" as *;`,
1916
},
17+
exclude: /node_modules/,
2018
}),
2119
pluginReact(),
2220
],
@@ -55,6 +53,10 @@ export default defineConfig({
5553
},
5654
server: {
5755
port: 8443,
56+
compress: true,
57+
},
58+
dev: {
59+
hmr: true,
5860
},
5961
tools: {
6062
rspack: {

‎src/components/bot-notification-messages/bot-notification-messages.scss

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use './../shared/styles/mixins' as *;
2+
13
.notifications-container {
24
position: absolute;
35
top: 6.5rem;
@@ -10,6 +12,7 @@
1012
transform 0.3s ease,
1113
opacity 0.25s linear;
1214
}
15+
1316
&__dashboard {
1417
.notification-messages {
1518
transform: translate3d(calc(-42.7rem), 0, 0);
@@ -19,6 +22,7 @@
1922
}
2023
}
2124
}
25+
2226
&--panel-open {
2327
.notification-messages {
2428
transform: translate3d(calc(-36.5rem), 0, 0);

‎src/components/bot-notification/bot-notification.scss

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use 'components/shared/styles/devices' as *;
2+
13
.Toastify {
24
&__toast {
35
background: var(--icon-black-plus);

‎src/components/contract-result-overlay/contract-result-overlay.scss

+9
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1+
@use 'components/shared/styles/constants' as *;
2+
@use 'components/shared/styles/mixins' as *;
3+
14
@keyframes animate-fade-in {
25
0% {
36
opacity: 0;
47
}
8+
59
100% {
610
opacity: 1;
711
}
@@ -22,6 +26,7 @@
2226
z-index: 2;
2327
background-color: var(--overlay-inside-dialog);
2428
animation: animate-fade-in 0.3s;
29+
2530
@include flex-center;
2631

2732
&:hover {
@@ -31,21 +36,25 @@
3136
opacity: 0;
3237
}
3338
}
39+
3440
&-caption {
3541
display: flex;
3642
align-items: center;
3743
transition: opacity 0.25s linear;
3844
}
45+
3946
&-icon {
4047
margin-left: 10px;
4148
}
49+
4250
&--won {
4351
background-image: $COLOR_LIGHT_GREEN_GRADIENT; // TODO: Update when gradients are added.
4452

4553
> #{$contract_result}-caption {
4654
color: var(--text-profit-success);
4755
}
4856
}
57+
4958
&--lost {
5059
background-image: $COLOR_LIGHT_RED_GRADIENT; // TODO: Update when gradients are added.
5160

‎src/components/flyout/flyout.scss

+34-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
@use 'components/shared/styles/constants' as *;
2+
13
@keyframes fade-in {
24
0% {
35
opacity: 0;
46
}
7+
58
100% {
69
opacity: 1;
710
}
@@ -33,13 +36,15 @@
3336
animation: fade-in 0.3s;
3437
}
3538
}
39+
3640
&__content {
3741
overflow: auto;
3842
height: calc(100% - 64px);
3943

4044
.dc-themed-scrollbars {
4145
padding: 5px 25px;
4246
}
47+
4348
&-disclaimer {
4449
display: flex;
4550
justify-content: space-around;
@@ -54,42 +59,49 @@
5459
color: $color-black-1;
5560
width: 324px;
5661
}
62+
5763
&-icon {
5864
padding-top: 0.8rem;
5965
}
6066
}
6167
}
68+
6269
&__block-workspace {
6370
&--top {
6471
margin-bottom: $default-margin;
6572
}
6673

6774
&--center {
6875
margin-top: 0.6em;
76+
6977
.injectionDiv {
7078
height: 100%;
7179
}
7280
}
81+
7382
&__header {
7483
display: flex;
7584
}
7685
}
86+
7787
&__button {
7888
&-new {
7989
width: 20%;
8090
height: 4rem !important;
8191
font-size: var(--text-size-xs);
8292
font-weight: bold;
83-
border-top-left-radius: 0rem !important;
84-
border-bottom-left-radius: 0rem !important;
93+
border-top-left-radius: 0 !important;
94+
border-bottom-left-radius: 0 !important;
8595
}
96+
8697
&-add {
8798
color: var(--general-main-1);
8899

89100
&--hide {
90101
display: none !important;
91102
}
92103
}
104+
93105
&-back {
94106
padding: 0 15px;
95107
align-self: center;
@@ -99,10 +111,12 @@
99111
svg {
100112
vertical-align: middle;
101113
}
114+
102115
&:focus {
103116
outline: none;
104117
}
105118
}
119+
106120
&-next,
107121
&-previous {
108122
margin-inline-start: 1em;
@@ -111,45 +125,53 @@
111125
display: flex;
112126
}
113127
}
128+
114129
&__item {
115130
line-height: 1.3em;
116131
font-size: var(--text-size-xs);
117132

118133
&:not(:last-of-type) {
119134
margin-bottom: 30px;
120135
}
136+
121137
&-header {
122138
display: flex;
123139
margin-top: $default-margin;
124140
margin-bottom: 10px;
125141
}
142+
126143
&-buttons {
127144
margin-inline-start: auto;
128145
align-self: center;
129146
}
147+
130148
&-info {
131149
cursor: pointer;
132150
font-weight: bold;
133151
display: block;
134152
color: $COLOR_RED;
135153
}
154+
136155
&-description {
137156
font-size: var(--text-size-xs);
138157
margin-bottom: 1em;
139158
line-height: 1.3em;
140159
color: var(--text-general);
141160
}
142161
}
162+
143163
&__image {
144164
width: 100%;
145165
height: auto;
146166
border-radius: 0.5em;
147167
}
168+
148169
&__video {
149170
width: 100%;
150171
height: 20vh;
151172
border-radius: 0.5em;
152173
}
174+
153175
&__help {
154176
padding: 0;
155177
height: 100%;
@@ -160,6 +182,7 @@
160182
display: flex;
161183
background-color: var(--general-section-1);
162184
}
185+
163186
&-content {
164187
padding: 1.5em;
165188
font-size: 0.8em;
@@ -170,16 +193,19 @@
170193
margin-bottom: 0.8em;
171194
}
172195
}
196+
173197
&-title {
174198
align-self: center;
175199
}
200+
176201
&-footer {
177202
display: flex;
178203
justify-content: flex-end;
179204
padding: 0.5em 0.8em;
180205
border-top: solid 0.1em var(--general-section-1);
181206
}
182207
}
208+
183209
&__search {
184210
padding: 0;
185211
visibility: visible;
@@ -194,29 +220,33 @@
194220
align-self: center;
195221
}
196222
}
223+
197224
&-empty {
198225
padding: 25px 0;
199226
}
200227
#{$flyout}__help-content {
201228
height: calc(100% - 60px);
202229
}
203230
}
231+
204232
&__normal {
205233
visibility: visible;
206234

207235
&-content {
208236
height: 100%;
209237
}
210238
}
239+
211240
&__input {
212241
width: 80% !important;
213242
height: 4rem;
214-
border-top-right-radius: 0rem !important;
215-
border-bottom-right-radius: 0rem !important;
243+
border-top-right-radius: 0 !important;
244+
border-bottom-right-radius: 0 !important;
216245
border: solid 1px $color-grey-5 !important;
217246
display: inline-block !important;
218247
margin-top: 3.3rem;
219248
}
249+
220250
&__hr {
221251
height: 2px;
222252
width: 100%;

0 commit comments

Comments
 (0)