Skip to content

Commit e261d00

Browse files
isekovanicisekovanic
authored
fix: design token and icon changes (#3530)
## 🎯 Goal This should be the final batch of design token and icon changes before we freeze them before the V9 release. ## 🛠 Implementation details <!-- Provide a description of the implementation --> ## 🎨 UI Changes <!-- Add relevant screenshots --> <details> <summary>iOS</summary> <table> <thead> <tr> <td>Before</td> <td>After</td> </tr> </thead> <tbody> <tr> <td> <!--<img src="" /> --> </td> <td> <!--<img src="" /> --> </td> </tr> </tbody> </table> </details> <details> <summary>Android</summary> <table> <thead> <tr> <td>Before</td> <td>After</td> </tr> </thead> <tbody> <tr> <td> <!--<img src="" /> --> </td> <td> <!--<img src="" /> --> </td> </tr> </tbody> </table> </details> ## 🧪 Testing <!-- Explain how this change can be tested (or why it can't be tested) --> ## ☑️ Checklist - [ ] I have signed the [Stream CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform) (required) - [ ] PR targets the `develop` branch - [ ] Documentation is updated - [ ] New code is tested in main example apps, including all possible scenarios - [ ] SampleApp iOS and Android - [ ] Expo iOS and Android
1 parent d4ca94a commit e261d00

34 files changed

+283
-237
lines changed

‎examples/SampleApp/ios/Podfile.lock‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1948,7 +1948,7 @@ PODS:
19481948
- ReactCommon/turbomodule/core
19491949
- SocketRocket
19501950
- Yoga
1951-
- react-native-cameraroll (7.10.0):
1951+
- react-native-cameraroll (7.10.2):
19521952
- boost
19531953
- DoubleConversion
19541954
- fast_float
@@ -3680,7 +3680,7 @@ SPEC CHECKSUMS:
36803680
React-microtasksnativemodule: dcf5321c9a41659a6718df8a5f202af1577c6825
36813681
react-native-blob-util: a511afccff6511544ebf56928e6afdf837b037a7
36823682
react-native-blur: ecdc987ab8d8fba95abef14551f033376872d0a6
3683-
react-native-cameraroll: 8c3ba9b6f511cf645778de19d5039b61d922fdfb
3683+
react-native-cameraroll: 5c5fb716af11f6178dca48271ae065cd786a0a02
36843684
react-native-document-picker: b37cf6660ad9087b782faa78a1e67687fac15bfd
36853685
react-native-geolocation: b7f68b8c04e36ee669c630dbc48dd42cf93a0a41
36863686
react-native-image-picker: 9bceb747cd6cde22a3416ffdc819d11b5b11f156

‎examples/SampleApp/src/theme/useLegacyColors.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@ export const useLegacyColors = () => {
1010
() => ({
1111
accent_blue: semantics.accentPrimary,
1212
accent_red: semantics.accentError,
13-
bg_gradient_end: semantics.backgroundCoreSurface,
13+
bg_gradient_end: semantics.backgroundCoreSurfaceDefault,
1414
bg_gradient_start: semantics.backgroundCoreSurfaceSubtle,
1515
black: semantics.textPrimary,
1616
button_background: semantics.buttonPrimaryBg,
1717
button_text: semantics.buttonPrimaryTextOnAccent,
1818
grey: semantics.textSecondary,
1919
grey_gainsboro: semantics.borderCoreDefault,
20-
grey_whisper: semantics.backgroundCoreSurface,
20+
grey_whisper: semantics.backgroundCoreSurfaceDefault,
2121
icon_background: semantics.backgroundCoreApp,
2222
overlay: semantics.badgeBgOverlay,
2323
white: semantics.backgroundCoreApp,

‎package/src/components/AITypingIndicatorView/AITypingIndicatorView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const useStyles = () => {
4646
return useMemo(() => {
4747
return StyleSheet.create({
4848
container: {
49-
backgroundColor: semantics.backgroundCoreSurface,
49+
backgroundColor: semantics.backgroundCoreSurfaceDefault,
5050
paddingHorizontal: primitives.spacingMd,
5151
paddingVertical: primitives.spacingLg,
5252
...container,

‎package/src/components/ChannelList/ChannelListHeaderErrorIndicator.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const useStyles = () => {
3838
alignItems: 'center',
3939
justifyContent: 'center',
4040
width: '100%',
41-
backgroundColor: semantics.backgroundCoreSurface,
41+
backgroundColor: semantics.backgroundCoreSurfaceDefault,
4242
paddingVertical: primitives.spacingXs,
4343
paddingHorizontal: primitives.spacingSm,
4444
...container,

‎package/src/components/ChannelList/ChannelListHeaderNetworkDownIndicator.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const useStyles = () => {
3232
alignItems: 'center',
3333
justifyContent: 'center',
3434
width: '100%',
35-
backgroundColor: semantics.backgroundCoreSurface,
35+
backgroundColor: semantics.backgroundCoreSurfaceDefault,
3636
paddingVertical: primitives.spacingXs,
3737
paddingHorizontal: primitives.spacingSm,
3838
...container,

‎package/src/components/ChannelList/Skeleton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const SkeletonBlock = ({ style }: { style: React.ComponentProps<typeof View>['st
1616
return (
1717
<View style={style}>
1818
<NativeShimmerView
19-
baseColor={semantics.backgroundCoreSurface}
19+
baseColor={semantics.backgroundCoreSurfaceDefault}
2020
duration={animationTime}
2121
gradientColor={semantics.skeletonLoadingHighlight}
2222
style={StyleSheet.absoluteFillObject}

‎package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,12 +143,12 @@ const useStyles = () => {
143143
justifyContent: 'center',
144144
},
145145
elipsis: {
146-
backgroundColor: semantics.backgroundCoreSurface,
146+
backgroundColor: semantics.backgroundCoreSurfaceDefault,
147147
},
148148
standard: {
149149
backgroundColor: semantics.accentPrimary,
150150
},
151151
}),
152-
[semantics.accentPrimary, semantics.backgroundCoreSurface],
152+
[semantics.accentPrimary, semantics.backgroundCoreSurfaceDefault],
153153
);
154154
};

‎package/src/components/ChannelPreview/__tests__/ChannelSwipableWrapper.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ jest.mock('../../../contexts', () => ({
3636
theme: {
3737
semantics: {
3838
accentPrimary: '#00f',
39-
backgroundCoreSurface: '#fff',
39+
backgroundCoreSurfaceDefault: '#fff',
4040
textOnAccent: '#000',
4141
textPrimary: '#111',
4242
},

‎package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
8787
align="xMidYMid"
8888
bbHeight={20}
8989
bbWidth={20}
90+
fill="none"
9091
focusable={false}
9192
height={20}
9293
meetOrSlice={0}
@@ -112,14 +113,10 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
112113
width={20}
113114
>
114115
<RNSVGGroup
115-
fill={
116-
{
117-
"payload": 4278190080,
118-
"type": 0,
119-
}
120-
}
116+
fill={null}
121117
propList={
122118
[
119+
"fill",
123120
"stroke",
124121
"strokeWidth",
125122
]
@@ -144,6 +141,8 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
144141
[
145142
"stroke",
146143
"strokeWidth",
144+
"strokeLinecap",
145+
"strokeLinejoin",
147146
]
148147
}
149148
stroke={
@@ -152,6 +151,8 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
152151
"type": 0,
153152
}
154153
}
154+
strokeLinecap={1}
155+
strokeLinejoin={1}
155156
strokeWidth={1.5}
156157
/>
157158
</RNSVGGroup>
@@ -613,7 +614,7 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
613614
}
614615
strokeLinecap={1}
615616
strokeLinejoin={1}
616-
strokeWidth={1.2}
617+
strokeWidth={1.5}
617618
/>
618619
</RNSVGGroup>
619620
</RNSVGSvgView>
@@ -748,6 +749,7 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
748749
[
749750
"stroke",
750751
"strokeWidth",
752+
"strokeLinecap",
751753
"strokeLinejoin",
752754
]
753755
}
@@ -757,6 +759,7 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
757759
"type": 0,
758760
}
759761
}
762+
strokeLinecap={1}
760763
strokeLinejoin={1}
761764
strokeWidth={1.5}
762765
/>
@@ -982,6 +985,7 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
982985
align="xMidYMid"
983986
bbHeight={20}
984987
bbWidth={20}
988+
fill="none"
985989
focusable={false}
986990
height={20}
987991
meetOrSlice={0}
@@ -1007,14 +1011,10 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
10071011
width={20}
10081012
>
10091013
<RNSVGGroup
1010-
fill={
1011-
{
1012-
"payload": 4278190080,
1013-
"type": 0,
1014-
}
1015-
}
1014+
fill={null}
10161015
propList={
10171016
[
1017+
"fill",
10181018
"stroke",
10191019
"strokeWidth",
10201020
]
@@ -1039,6 +1039,8 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
10391039
[
10401040
"stroke",
10411041
"strokeWidth",
1042+
"strokeLinecap",
1043+
"strokeLinejoin",
10421044
]
10431045
}
10441046
stroke={
@@ -1047,6 +1049,8 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
10471049
"type": 0,
10481050
}
10491051
}
1052+
strokeLinecap={1}
1053+
strokeLinejoin={1}
10501054
strokeWidth={1.5}
10511055
/>
10521056
</RNSVGGroup>
@@ -1508,7 +1512,7 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
15081512
}
15091513
strokeLinecap={1}
15101514
strokeLinejoin={1}
1511-
strokeWidth={1.2}
1515+
strokeWidth={1.5}
15121516
/>
15131517
</RNSVGGroup>
15141518
</RNSVGSvgView>
@@ -1643,6 +1647,7 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
16431647
[
16441648
"stroke",
16451649
"strokeWidth",
1650+
"strokeLinecap",
16461651
"strokeLinejoin",
16471652
]
16481653
}
@@ -1652,6 +1657,7 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
16521657
"type": 0,
16531658
}
16541659
}
1660+
strokeLinecap={1}
16551661
strokeLinejoin={1}
16561662
strokeWidth={1.5}
16571663
/>
@@ -1877,6 +1883,7 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
18771883
align="xMidYMid"
18781884
bbHeight={20}
18791885
bbWidth={20}
1886+
fill="none"
18801887
focusable={false}
18811888
height={20}
18821889
meetOrSlice={0}
@@ -1902,14 +1909,10 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
19021909
width={20}
19031910
>
19041911
<RNSVGGroup
1905-
fill={
1906-
{
1907-
"payload": 4278190080,
1908-
"type": 0,
1909-
}
1910-
}
1912+
fill={null}
19111913
propList={
19121914
[
1915+
"fill",
19131916
"stroke",
19141917
"strokeWidth",
19151918
]
@@ -1934,6 +1937,8 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
19341937
[
19351938
"stroke",
19361939
"strokeWidth",
1940+
"strokeLinecap",
1941+
"strokeLinejoin",
19371942
]
19381943
}
19391944
stroke={
@@ -1942,6 +1947,8 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
19421947
"type": 0,
19431948
}
19441949
}
1950+
strokeLinecap={1}
1951+
strokeLinejoin={1}
19451952
strokeWidth={1.5}
19461953
/>
19471954
</RNSVGGroup>
@@ -2403,7 +2410,7 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
24032410
}
24042411
strokeLinecap={1}
24052412
strokeLinejoin={1}
2406-
strokeWidth={1.2}
2413+
strokeWidth={1.5}
24072414
/>
24082415
</RNSVGGroup>
24092416
</RNSVGSvgView>
@@ -2538,6 +2545,7 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
25382545
[
25392546
"stroke",
25402547
"strokeWidth",
2548+
"strokeLinecap",
25412549
"strokeLinejoin",
25422550
]
25432551
}
@@ -2547,6 +2555,7 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
25472555
"type": 0,
25482556
}
25492557
}
2558+
strokeLinecap={1}
25502559
strokeLinejoin={1}
25512560
strokeWidth={1.5}
25522561
/>

‎package/src/components/MessageInput/__tests__/__snapshots__/SendButton.test.js.snap‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -603,7 +603,7 @@ exports[`SendButton should render a SendButton 1`] = `
603603
}
604604
strokeLinecap={1}
605605
strokeLinejoin={1}
606-
strokeWidth={1.2}
606+
strokeWidth={1.5}
607607
/>
608608
</RNSVGGroup>
609609
</RNSVGSvgView>
@@ -738,6 +738,7 @@ exports[`SendButton should render a SendButton 1`] = `
738738
[
739739
"stroke",
740740
"strokeWidth",
741+
"strokeLinecap",
741742
"strokeLinejoin",
742743
]
743744
}
@@ -747,6 +748,7 @@ exports[`SendButton should render a SendButton 1`] = `
747748
"type": 0,
748749
}
749750
}
751+
strokeLinecap={1}
750752
strokeLinejoin={1}
751753
strokeWidth={1.5}
752754
/>
@@ -1488,7 +1490,7 @@ exports[`SendButton should render a disabled SendButton 1`] = `
14881490
}
14891491
strokeLinecap={1}
14901492
strokeLinejoin={1}
1491-
strokeWidth={1.2}
1493+
strokeWidth={1.5}
14921494
/>
14931495
</RNSVGGroup>
14941496
</RNSVGSvgView>
@@ -1623,6 +1625,7 @@ exports[`SendButton should render a disabled SendButton 1`] = `
16231625
[
16241626
"stroke",
16251627
"strokeWidth",
1628+
"strokeLinecap",
16261629
"strokeLinejoin",
16271630
]
16281631
}
@@ -1632,6 +1635,7 @@ exports[`SendButton should render a disabled SendButton 1`] = `
16321635
"type": 0,
16331636
}
16341637
}
1638+
strokeLinecap={1}
16351639
strokeLinejoin={1}
16361640
strokeWidth={1.5}
16371641
/>

0 commit comments

Comments
 (0)