Skip to content

Commit 538d9a9

Browse files
arnautov-antonarnautov-anton
committed
Defined & referenced once within the same file
1 parent e3cfd8d commit 538d9a9

11 files changed

Lines changed: 37 additions & 99 deletions

File tree

‎src/components/Attachment/styling/LinkPreview.scss‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,6 @@
66
var(--str-chat__attachment-max-width) * calc(1 / 1.91)
77
);
88

9-
/* The height of scraped videos, the default value is optimized for 16:9 aspect ratio */
10-
--str-chat__scraped-video-height: calc(
11-
var(--str-chat__attachment-max-width) * calc(9 / 16)
12-
);
13-
149
width: 100%;
1510
display: flex;
1611
gap: var(--spacing-xs);
@@ -45,7 +40,7 @@
4540
}
4641

4742
&.str-chat__message-attachment-card--video .str-chat__message-attachment-card--header {
48-
height: var(--str-chat__scraped-video-height);
43+
height: calc(var(--str-chat__attachment-max-width) * calc(9 / 16));
4944
}
5045

5146
.str-chat__message-attachment-card--content {

‎src/components/Channel/styling/Channel.scss‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,6 @@
4545
$header-bar-height: var(--size-16);
4646
$metadata-bar-height: var(--size-16);
4747
$composer-control-height: var(--size-48);
48-
--str-chat__loading-channel-content-max-width: calc(
49-
var(--str-chat__message-composer-max-width) +
50-
var(--str-chat__message-composer-padding)
51-
);
5248
height: 100%;
5349
display: flex;
5450
flex-direction: column;
@@ -79,7 +75,10 @@
7975
.str-chat__message-list-scroll {
8076
width: 100%;
8177
height: 100%;
82-
max-width: var(--str-chat__loading-channel-content-max-width);
78+
max-width: calc(
79+
var(--str-chat__message-composer-max-width) +
80+
var(--str-chat__message-composer-padding)
81+
);
8382
margin-inline: auto;
8483
}
8584
}

‎src/components/ChatView/styling/ChatView.scss‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
.str-chat {
2-
--str-chat-selector-background-color: var(--background-core-elevation-1);
3-
--str-chat-selector-border-color: var(--border-core-subtle);
42
--str-chat__chat-view-selector-transition-duration: 180ms;
53
--str-chat__chat-view-selector-transition-easing: ease;
64
--str-chat__chat-view-selector-transition-offset: 8px;
@@ -10,8 +8,6 @@
108

119
--str-chat-selector-button-color-default: var(--text-tertiary);
1210
--str-chat-selector-button-color-selected: var(--text-primary);
13-
--str-chat-selector-button-background-color-default: transparent;
14-
--str-chat-selector-button-background-color-selected: var(--background-core-surface);
1511
}
1612

1713
.str-chat__chat-view {
@@ -27,8 +23,8 @@
2723
flex-direction: column;
2824
padding: var(--spacing-md);
2925
gap: var(--spacing-xs);
30-
border-inline-end: 1px solid var(--str-chat-selector-border-color);
31-
background-color: var(--str-chat-selector-background-color);
26+
border-inline-end: 1px solid var(--border-core-subtle);
27+
background-color: var(--background-core-elevation-1);
3228

3329
.str-chat__chat-view__selector-button-container {
3430
display: flex;
@@ -55,13 +51,13 @@
5551
line-height: 1;
5652
position: relative;
5753

58-
background: var(--str-chat-selector-button-background-color-default);
54+
background: transparent;
5955
color: var(--str-chat-selector-button-color-default);
6056

6157
&[aria-selected='true'] {
6258
--str-chat-icon-color: var(--str-chat-selector-button-color-selected);
6359
color: var(--str-chat-selector-button-color-selected);
64-
background: var(--str-chat-selector-button-background-color-selected);
60+
background: var(--background-core-surface);
6561
}
6662

6763
svg {

‎src/components/DragAndDrop/styling/DragAndDropContainer.scss‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,6 @@
77
/* Bottom border of the component */
88
--str-chat__drag-and-drop-container-border-block-end: 2px solid transparent;
99

10-
/* Top border of the component on dragover */
11-
--str-chat__drag-and-drop-container-on-dragover-border-block-start: 2px solid
12-
var(--accent-primary);
13-
14-
/* Bottom border of the component on dragover */
15-
--str-chat__drag-and-drop-container-on-dragover-border-block-end: 2px solid
16-
var(--accent-primary);
17-
1810
/* Left (right in RTL layout) border of the component on dragover */
1911
--str-chat__drag-and-drop-container-on-dragover-border-inline-start: none;
2012

@@ -42,10 +34,10 @@
4234
border-top: var(--str-chat__drag-and-drop-container-border-block-start);
4335

4436
&.str-chat__drag-and-drop-container__item--dragged-over-from-top {
45-
border-bottom: var(--str-chat__drag-and-drop-container-on-dragover-border-block-end);
37+
border-bottom: 2px solid var(--accent-primary);
4638
}
4739

4840
&.str-chat__drag-and-drop-container__item--dragged-over-from-bottom {
49-
border-top: var(--str-chat__drag-and-drop-container-on-dragover-border-block-start);
41+
border-top: 2px solid var(--accent-primary);
5042
}
5143
}

‎src/components/Form/styling/SwitchField.scss‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,6 @@
55
.str-chat {
66
--str-chat__switch-field-background-color: var(--background-core-surface-card);
77
--str-chat__switch-field-border-radius: var(--radius-md);
8-
--str-chat__switch-field__track-off-bg: var(
9-
--control-toggle-switch-bg,
10-
var(--border-core-on-surface, #a3acba)
11-
);
12-
--str-chat__switch-field__track-on-bg: var(
13-
--control-toggle-switch-bg-selected,
14-
#005fff
15-
);
168
--str-chat__switch-field__track-thumb-bg: var(--base-white, #ffffff);
179
--str-chat__switch-field__track-height: 24px;
1810
--str-chat__switch-field__track-radius: var(--button-radius-full, 9999px);
@@ -61,7 +53,7 @@
6153
height: var(--str-chat__switch-field__track-height);
6254
padding: var(--spacing-xxs);
6355
cursor: pointer;
64-
background-color: var(--str-chat__switch-field__track-off-bg);
56+
background-color: var(--control-toggle-switch-bg);
6557
border-radius: var(--str-chat__switch-field__track-radius);
6658
transition: background-color 0.2s ease;
6759

@@ -74,7 +66,7 @@
7466
}
7567

7668
&--on {
77-
background-color: var(--str-chat__switch-field__track-on-bg);
69+
background-color: var(--control-toggle-switch-bg-selected);
7870
justify-content: flex-end;
7971

8072
.str-chat__form__switch-field__switch-handle {

‎src/components/Gallery/styling/Gallery.scss‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,7 @@
2222
}
2323

2424
.str-chat__gallery {
25-
--str-chat__gallery-action-button-color: rgba(255, 255, 255, 0.88);
26-
--str-chat__gallery-action-button-hover-color: #ffffff;
27-
--str-chat__gallery-action-button-hover-background: rgba(255, 255, 255, 0.14);
28-
--str-chat__gallery-action-button-active-background: rgba(255, 255, 255, 0.2);
2925
--str-chat__gallery-foreground: var(--text-on-accent);
30-
--str-chat__gallery-muted-foreground: rgba(255, 255, 255, 0.72);
3126
--str-chat__gallery-nav-border: none;
3227
--str-chat__gallery-nav-background: rgba(255, 255, 255, 0.92);
3328
--str-chat__gallery-nav-color: #101828;
@@ -82,7 +77,7 @@
8277
.str-chat__gallery__timestamp {
8378
display: block;
8479
margin-top: 2px;
85-
color: var(--str-chat__gallery-muted-foreground);
80+
color: rgba(255, 255, 255, 0.72);
8681
font: var(--str-chat__font-metadata-default);
8782
}
8883

@@ -105,7 +100,7 @@
105100
border-radius: var(--radius-max);
106101
border: 0;
107102
background-color: transparent;
108-
color: var(--str-chat__gallery-action-button-color);
103+
color: rgba(255, 255, 255, 0.88);
109104
text-decoration: none;
110105
opacity: 0.92;
111106

@@ -117,13 +112,13 @@
117112
}
118113

119114
&:hover {
120-
background-color: var(--str-chat__gallery-action-button-hover-background);
121-
color: var(--str-chat__gallery-action-button-hover-color);
115+
background-color: rgba(255, 255, 255, 0.14);
116+
color: #ffffff;
122117
opacity: 1;
123118
}
124119

125120
&:active {
126-
background-color: var(--str-chat__gallery-action-button-active-background);
121+
background-color: rgba(255, 255, 255, 0.2);
127122
}
128123

129124
&:focus-visible {

‎src/components/Loading/styling/LoadingChannels.scss‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@mixin channel-list-item-shimmer {
2-
background-color: var(--str-chat__channel-list-item-loading-state-color);
2+
background-color: var(--background-core-surface);
33
background-image: linear-gradient(
44
90deg,
55
var(--skeleton-loading-base) 0%,
@@ -11,11 +11,6 @@
1111
animation: loading-channels-shimmer 1.2s linear infinite;
1212
}
1313

14-
.str-chat {
15-
/* The base surface color behind the channel list loading shimmer */
16-
--str-chat__channel-list-item-loading-state-color: var(--background-core-surface);
17-
}
18-
1914
.str-chat__loading-channels {
2015
display: flex;
2116
flex-direction: column;

‎src/components/MessageComposer/styling/AttachmentPreview.scss‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,10 @@
2525
--background-utility-pressed
2626
);
2727

28-
--str-chat__attachment-preview-media-uploading-overlay-background: linear-gradient(
29-
180deg,
30-
var(--base-white) 0%,
31-
var(--slate-100) 100%
32-
);
3328
--str-chat__attachment-preview-media-upload-error-overlay-background-color: var(
3429
--background-core-overlay
3530
);
3631

37-
--str-chat__attachment-preview-file-fatal-error-color: var(--color-accent-error);
38-
3932
.str-chat__message-composer-voice-preview-slot {
4033
display: flex;
4134
align-items: center;
@@ -196,7 +189,11 @@
196189

197190
.str-chat__attachment-preview-media--uploading {
198191
.str-chat__attachment-preview-media__overlay {
199-
background: var(--str-chat__attachment-preview-media-uploading-overlay-background);
192+
background: linear-gradient(
193+
180deg,
194+
var(--base-white) 0%,
195+
var(--slate-100) 100%
196+
);
200197
}
201198
}
202199

@@ -244,7 +241,7 @@
244241
display: flex;
245242
align-items: center;
246243
gap: var(--spacing-xxs);
247-
color: var(--str-chat__attachment-preview-file-fatal-error-color);
244+
color: var(--color-accent-error);
248245
}
249246

250247
.str-chat__attachment-preview-file__retriable-error {

‎src/components/MessageComposer/styling/DropzoneContainer.scss‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,3 @@
1-
.str-chat {
2-
/* The text/icon color of the dropzone container */
3-
--str-chat__dropzone-container-color: var(--text-primary);
4-
5-
/* The background color of the dropzone container */
6-
--str-chat__dropzone-container-background-color: var(--background-core-overlay-light);
7-
8-
/* The backdrop filter applied to the dropzone container */
9-
--str-chat__dropzone-container-backdrop-filter: blur(3.5px);
10-
}
11-
121
.str-chat__dropzone-root {
132
position: relative;
143
min-height: 0;
@@ -30,9 +19,9 @@
3019
position: absolute;
3120
inset: 0;
3221
z-index: 5;
33-
background-color: var(--str-chat__dropzone-container-background-color);
34-
color: var(--str-chat__dropzone-container-color);
35-
backdrop-filter: var(--str-chat__dropzone-container-backdrop-filter);
22+
background-color: var(--background-core-overlay-light);
23+
color: var(--text-primary);
24+
backdrop-filter: blur(3.5px);
3625
font: var(--str-chat__font-heading-sm);
3726

3827
.str-chat__dropzone-container__content {
@@ -56,9 +45,5 @@
5645
@supports not (backdrop-filter: blur(1px)) {
5746
.str-chat__dropzone-container {
5847
backdrop-filter: none;
59-
background-color: var(
60-
--str-chat__dropzone-container-background-color-fallback,
61-
rgba(0, 0, 0, 0.4)
62-
);
6348
}
6449
}

‎src/components/Notifications/styling/NotificationList.scss‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,20 @@
11
.str-chat__notification-list {
22
--str-chat__notification-list-inset: 16px;
33
--str-chat__notification-list-gap: 8px;
4-
--str-chat__notification-list-max-height: calc(
5-
100% - (var(--str-chat__notification-list-inset) * 2)
6-
);
7-
--str-chat__notification-list-width: min(
8-
100%,
9-
calc(100% - (var(--str-chat__notification-list-inset) * 2))
10-
);
11-
124
background: transparent;
135
display: flex;
146
flex-direction: column;
157
align-items: center;
168
justify-content: flex-start;
17-
inline-size: var(--str-chat__notification-list-width);
9+
inline-size: min(
10+
100%,
11+
calc(100% - (var(--str-chat__notification-list-inset) * 2))
12+
);
1813
max-width: 100%;
1914
min-width: 0;
20-
max-height: var(--str-chat__notification-list-max-height);
15+
max-height: calc(
16+
100% - (var(--str-chat__notification-list-inset) * 2)
17+
);
2118
padding-inline: var(--spacing-xs);
2219
pointer-events: none;
2320
position: absolute;

0 commit comments

Comments
 (0)