Skip to content

Commit a39654a

Browse files
abhay-keyvalueabhay-keyvalue
authored
refactor: Updated siren inbox ui
1 parent ddcba2d commit a39654a

File tree

10 files changed

+83
-34
lines changed

10 files changed

+83
-34
lines changed

‎README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,7 @@ Here are the available theme options:
152152
headerActionColor?: string;
153153
borderColor?: string;
154154
borderWidth?: string;
155+
titlePadding?: string;
155156
};
156157
windowContainer?: {
157158
background?: string;
@@ -160,8 +161,8 @@ Here are the available theme options:
160161
borderColor?: string;
161162
background?: string;
162163
titleColor?: string;
164+
subTitleColor?: string;
163165
descriptionColor?: string;
164-
dateColor?: string;
165166
};
166167
}
167168
```
@@ -193,6 +194,9 @@ Here are the custom style options for the notification inbox:
193194
avatarSize?: number;
194195
titleFontWeight?: TextStyle['fontWeight'];
195196
titleSize?: number;
197+
subTitleFontWeight?: TextStyle['fontWeight'];
198+
subTitleSize?: number
199+
descriptionFontWeight?: TextStyle['fontWeight'];
196200
descriptionSize?: number;
197201
dateSize?: number;
198202
};

‎src/assets/closeIcon.png‎

-705 Bytes
Binary file not shown.

‎src/components/card.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ const Card = (props: NotificationCardProps): ReactElement => {
139139
)}
140140
</View>
141141
{Boolean(notification.message?.subHeader) && (
142-
<Text numberOfLines={2} style={[style.cardDescription, styles.cardDescription]}>
142+
<Text numberOfLines={2} style={[style.cardSubTitle, styles.cardSubTitle]}>
143143
{notification.message?.subHeader}
144144
</Text>
145145
)}
@@ -162,20 +162,17 @@ const style = StyleSheet.create({
162162
cardWrapper: {
163163
flexDirection: 'row',
164164
alignItems: 'center',
165-
paddingRight: 2
166165
},
167166
cardContainer: {
168167
width: '100%',
169-
flexDirection: 'row'
168+
flexDirection: 'row',
170169
},
171170
cardIconContainer: {
172171
paddingLeft: 6,
173-
paddingRight: 12,
174-
paddingTop: 4
172+
paddingRight: 6,
175173
},
176174
cardTitle: {
177175
paddingBottom: 4,
178-
paddingTop: 4
179176
},
180177
icon: {
181178
width: '100%',
@@ -193,16 +190,19 @@ const style = StyleSheet.create({
193190
cardContentContainer: {
194191
flex: 1,
195192
width: '100%',
196-
paddingRight: 6
193+
paddingRight: 6,
194+
paddingLeft: 6,
197195
},
198196
cardDescription: {
199-
fontWeight: '400',
200-
paddingBottom: 10
197+
paddingBottom: 10,
198+
},
199+
cardSubTitle: {
200+
paddingBottom: 6
201201
},
202202
cardFooterRow: {
203203
flexDirection: 'row',
204204
justifyContent: 'space-between',
205-
alignItems: 'center'
205+
alignItems: 'center',
206206
},
207207
dateStyle: {
208208
paddingLeft: 3
@@ -214,7 +214,9 @@ const style = StyleSheet.create({
214214
},
215215
activeCardMarker: {
216216
width: 4,
217-
height: '100%'
217+
height: '100%',
218+
position: 'absolute',
219+
zIndex: 2
218220
},
219221
transparent: {
220222
backgroundColor: 'transparent'

‎src/components/clearIcon.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,12 @@ const ClearIcon = ({ styles }: { styles: Partial<SirenStyleProps> }): ReactEleme
1616

1717
const style = StyleSheet.create({
1818
clearIcon: {
19-
width: '100%'
19+
width: '100%',
2020
},
2121
clearIconContainer: {
2222
justifyContent: 'center',
23-
alignItems: 'center'
23+
alignItems: 'center',
24+
paddingTop: 0.5
2425
}
2526
});
2627

‎src/components/closeIcon.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,12 @@ const style = StyleSheet.create({
4545
marginVertical: 2,
4646
width: '100%',
4747
borderRadius: 1,
48-
position: 'absolute'
48+
position: 'absolute',
4949
},
5050
closeButton: {
5151
overflow: 'hidden',
5252
justifyContent: 'center',
53-
opacity: 0.8
53+
opacity: 0.8,
5454
}
5555
});
5656

‎src/components/header.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,10 +74,10 @@ const Header = (props: HeaderProps): ReactElement => {
7474
<TouchableOpacity
7575
disabled={clearAllDisabled}
7676
onPress={onPressClearAll}
77-
style={style.clearIconContainer}
77+
style={[style.clearIconContainer, clearAllDisabled && style.lowOpacity]}
7878
>
7979
<ClearIcon styles={styles} />
80-
<Text style={styles.headerAction}>{Constants.CLEAR_ALL_LABEL}</Text>
80+
<Text style={[styles.headerAction, style.headerAction]}>{Constants.CLEAR_ALL_LABEL}</Text>
8181
</TouchableOpacity>
8282
)}
8383
</View>
@@ -91,7 +91,8 @@ const style = StyleSheet.create({
9191
justifyContent: 'space-between',
9292
alignItems: 'center',
9393
paddingVertical: 10,
94-
paddingHorizontal: 15
94+
paddingLeft: 16,
95+
paddingRight: 18
9596
},
9697
clearIconContainer: {
9798
flexDirection: 'row',
@@ -107,6 +108,14 @@ const style = StyleSheet.create({
107108
},
108109
backIcon: {
109110
paddingRight: 2
111+
},
112+
headerAction: {
113+
fontSize: 14,
114+
fontWeight: '500',
115+
paddingLeft: 2
116+
},
117+
lowOpacity: {
118+
opacity: 0.4
110119
}
111120
});
112121

‎src/types.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ export type ThemeProps = {
137137
borderColor?: string;
138138
background?: string;
139139
titleColor?: string;
140+
subTitleColor?: string;
140141
descriptionColor?: string;
141142
dateColor?: string;
142143
timeIconSize?: number;
@@ -168,6 +169,9 @@ export type StyleProps = {
168169
avatarSize?: number;
169170
titleFontWeight?: TextStyle['fontWeight'];
170171
titleSize?: number;
172+
subTitleFontWeight?: TextStyle['fontWeight'];
173+
subTitleSize?: number
174+
descriptionFontWeight?: TextStyle['fontWeight'];
171175
descriptionSize?: number;
172176
dateSize?: number;
173177
};
@@ -226,7 +230,8 @@ export type SirenStyleProps = {
226230
cardContainer: ViewStyle;
227231
cardIconRound: ViewStyle;
228232
cardTitle: TextStyle | object;
229-
cardDescription: TextStyle;
233+
cardSubTitle: TextStyle | object;
234+
cardDescription: TextStyle | object;
230235
dateStyle: TextStyle;
231236
emptyText: TextStyle;
232237
errorText: TextStyle;

‎src/utils/commonUtils.ts‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ export const applyTheme = (
144144
theme.windowHeader?.headerActionColor ||
145145
theme.colors?.clearAllIcon ||
146146
DefaultTheme[mode].windowHeader.headerActionColor,
147-
height: (customStyles.clearAllIcon?.size || defaultStyles.clearAllIcon.size) * 0.1,
147+
height: (customStyles.clearAllIcon?.size || defaultStyles.clearAllIcon.size) * 0.12,
148148
borderRadius: (customStyles.clearAllIcon?.size || defaultStyles.clearAllIcon.size) * 0.12,
149149
marginTop: (customStyles.clearAllIcon?.size || defaultStyles.clearAllIcon.size) * 0.1,
150150
marginBottom: (customStyles.clearAllIcon?.size || defaultStyles.clearAllIcon.size) * 0.05,
@@ -213,7 +213,23 @@ export const applyTheme = (
213213
fontSize: customStyles.notificationCard?.titleSize || defaultStyles.notificationCard.titleSize,
214214
fontWeight:
215215
customStyles.notificationCard?.titleFontWeight ||
216-
defaultStyles.notificationCard.titleFontWeight
216+
defaultStyles.notificationCard.titleFontWeight,
217+
lineHeight:
218+
(customStyles.notificationCard?.titleSize || defaultStyles.notificationCard.titleSize) + 6
219+
},
220+
cardSubTitle: {
221+
color:
222+
theme.notificationCard?.subTitleColor ||
223+
theme.colors?.textColor ||
224+
DefaultTheme[mode].notificationCard.subTitleColor,
225+
fontSize:
226+
customStyles.notificationCard?.subTitleSize || defaultStyles.notificationCard.subTitleSize,
227+
fontWeight:
228+
customStyles.notificationCard?.subTitleFontWeight ||
229+
defaultStyles.notificationCard.subTitleFontWeight,
230+
lineHeight:
231+
(customStyles.notificationCard?.subTitleSize || defaultStyles.notificationCard.subTitleSize) +
232+
8
217233
},
218234
cardDescription: {
219235
color:
@@ -222,7 +238,13 @@ export const applyTheme = (
222238
DefaultTheme[mode].notificationCard.descriptionColor,
223239
fontSize:
224240
customStyles.notificationCard?.descriptionSize ||
225-
defaultStyles.notificationCard.descriptionSize
241+
defaultStyles.notificationCard.descriptionSize,
242+
fontWeight:
243+
customStyles.notificationCard?.descriptionFontWeight ||
244+
defaultStyles.notificationCard.descriptionFontWeight,
245+
lineHeight:
246+
(customStyles.notificationCard?.descriptionSize ||
247+
defaultStyles.notificationCard.descriptionSize) + 8
226248
},
227249
dateStyle: {
228250
color:
@@ -251,8 +273,9 @@ export const applyTheme = (
251273
theme.colors?.highlightedCardColor || DefaultTheme[mode].colors.highlightedCardColor
252274
},
253275
backIcon: {
254-
backgroundColor: theme.windowHeader?.titleColor ||
255-
theme.colors?.textColor ||
256-
DefaultTheme[mode].windowHeader.titleColor,
276+
backgroundColor:
277+
theme.windowHeader?.titleColor ||
278+
theme.colors?.textColor ||
279+
DefaultTheme[mode].windowHeader.titleColor
257280
}
258281
});

‎src/utils/constants.ts‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const COLORS = {
22
light: {
3-
primaryColor: '#F56630',
3+
primaryColor: '#FA9874',
44
highlightedCardColor: '#FFECE5',
55
textColor: '#344054',
66
neutralColor: '#FFFFFF',
@@ -12,7 +12,7 @@ export const COLORS = {
1212
infiniteLoader: '#F56630'
1313
},
1414
dark: {
15-
primaryColor: '#F56630',
15+
primaryColor: '#FA9874',
1616
highlightedCardColor: '#2E2D30',
1717
textColor: '#FFFFFF',
1818
neutralColor: '#232326',
@@ -110,29 +110,32 @@ export const defaultStyles = {
110110
},
111111
windowHeader: {
112112
height: 50,
113-
titleFontWeight: '500',
114-
titleSize: 20,
113+
titleFontWeight: '600',
114+
titleSize: 18,
115115
titlePadding: 0,
116116
borderWidth: 0.6
117117
},
118118
windowContainer: {
119119
padding: 0
120120
},
121121
notificationCard: {
122-
padding: 14,
122+
padding: 12,
123123
borderWidth: 0.6,
124124
avatarSize: 40,
125-
titleFontWeight: '500',
126-
titleSize: 16,
125+
titleFontWeight: '600',
126+
titleSize: 14,
127+
subTitleFontWeight: '500',
128+
subTitleSize: 14,
127129
descriptionSize: 14,
130+
descriptionFontWeight: '400',
128131
dateSize: 12
129132
},
130133
badgeStyle: {
131134
size: 15,
132135
textSize: 10
133136
},
134137
deleteIcon: {
135-
size: 16
138+
size: 14
136139
},
137140
dateIcon: {
138141
size: 12

‎src/utils/defaultTheme.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const defaultTheme = {
2727
borderColor: COLORS[ThemeMode.LIGHT].borderColor,
2828
background: COLORS[ThemeMode.LIGHT].neutralColor,
2929
titleColor: COLORS[ThemeMode.LIGHT].textColor,
30+
subTitleColor: COLORS[ThemeMode.LIGHT].textColor,
3031
descriptionColor: COLORS[ThemeMode.LIGHT].textColor,
3132
dateColor: COLORS[ThemeMode.LIGHT].textColor,
3233
}
@@ -57,6 +58,7 @@ const defaultTheme = {
5758
borderColor: COLORS[ThemeMode.DARK].borderColor,
5859
background: COLORS[ThemeMode.DARK].neutralColor,
5960
titleColor: COLORS[ThemeMode.DARK].textColor,
61+
subTitleColor: COLORS[ThemeMode.DARK].textColor,
6062
descriptionColor: COLORS[ThemeMode.DARK].textColor,
6163
dateColor: COLORS[ThemeMode.DARK].dateColor
6264
}

0 commit comments

Comments
 (0)