Skip to content

Commit 1b1ce8b

Browse files
fadi-georgefadi-george
committed
ui tweaks
1 parent e64b934 commit 1b1ce8b

10 files changed

Lines changed: 49 additions & 57 deletions

‎examples/build.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -432,7 +432,7 @@ Aliases Section (placed after Send In-App Message):
432432
- Each item shows: Label | ID
433433
- Filter out "external_id" and "onesignal_id" from display (these are special)
434434
- "No Aliases Added" text when empty
435-
- ADD button -> PairInputModal with empty Label and ID fields (single add)
435+
- ADD button -> PairInputModal with empty Label and ID fields on the same row (single add)
436436
- ADD MULTIPLE button -> MultiPairInputModal (dynamic rows, add/remove)
437437
- No remove/delete functionality (aliases are add-only from the UI)
438438
```
@@ -867,7 +867,7 @@ LogView.tsx:
867867
Modals (src/components/modals/):
868868
- All modals use a full-width Modal component with padding: 16 and width: '100%' inner container
869869
- SingleInputModal (one TextInput)
870-
- PairInputModal (key-value TextInputs, single pair)
870+
- PairInputModal (key-value TextInputs on the same row, single pair)
871871
- MultiPairInputModal (dynamic rows with dividers, X icon to delete a row, full-width, batch submit)
872872
- MultiSelectRemoveModal (Checkbox per item for batch remove)
873873
- LoginModal, OutcomeModal, TrackEventModal

‎examples/demo/src/components/modals/CustomNotificationModal.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -124,15 +124,13 @@ const styles = StyleSheet.create({
124124
color: Colors.textSecondary,
125125
},
126126
confirmBtn: {
127-
backgroundColor: Colors.oneSignalRed,
128-
borderRadius: 8,
129127
paddingVertical: 10,
130-
paddingHorizontal: 20,
128+
paddingHorizontal: 16,
131129
},
132130
confirmText: {
133131
fontSize: 13,
134132
fontWeight: '600',
135-
color: '#fff',
133+
color: Colors.oneSignalRed,
136134
},
137135
disabled: {
138136
opacity: 0.5,

‎examples/demo/src/components/modals/LoginModal.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -120,15 +120,13 @@ const styles = StyleSheet.create({
120120
color: Colors.textSecondary,
121121
},
122122
confirmBtn: {
123-
backgroundColor: Colors.oneSignalRed,
124-
borderRadius: 8,
125123
paddingVertical: 10,
126-
paddingHorizontal: 20,
124+
paddingHorizontal: 16,
127125
},
128126
confirmText: {
129127
fontSize: 13,
130128
fontWeight: '600',
131-
color: '#fff',
129+
color: Colors.oneSignalRed,
132130
},
133131
disabled: {
134132
opacity: 0.5,

‎examples/demo/src/components/modals/MultiPairInputModal.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -210,15 +210,13 @@ const styles = StyleSheet.create({
210210
color: Colors.textSecondary,
211211
},
212212
confirmBtn: {
213-
backgroundColor: Colors.oneSignalRed,
214-
borderRadius: 8,
215213
paddingVertical: 10,
216-
paddingHorizontal: 20,
214+
paddingHorizontal: 16,
217215
},
218216
confirmText: {
219217
fontSize: 13,
220218
fontWeight: '600',
221-
color: '#fff',
219+
color: Colors.oneSignalRed,
222220
},
223221
disabled: {
224222
opacity: 0.5,

‎examples/demo/src/components/modals/MultiSelectRemoveModal.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -146,15 +146,13 @@ const styles = StyleSheet.create({
146146
color: Colors.textSecondary,
147147
},
148148
confirmBtn: {
149-
backgroundColor: Colors.oneSignalRed,
150-
borderRadius: 8,
151149
paddingVertical: 10,
152-
paddingHorizontal: 20,
150+
paddingHorizontal: 16,
153151
},
154152
confirmText: {
155153
fontSize: 13,
156154
fontWeight: '600',
157-
color: '#fff',
155+
color: Colors.oneSignalRed,
158156
},
159157
disabled: {
160158
opacity: 0.5,

‎examples/demo/src/components/modals/OutcomeModal.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -197,15 +197,13 @@ const styles = StyleSheet.create({
197197
color: Colors.textSecondary,
198198
},
199199
confirmBtn: {
200-
backgroundColor: Colors.oneSignalRed,
201-
borderRadius: 8,
202200
paddingVertical: 10,
203-
paddingHorizontal: 20,
201+
paddingHorizontal: 16,
204202
},
205203
confirmText: {
206204
fontSize: 13,
207205
fontWeight: '600',
208-
color: '#fff',
206+
color: Colors.oneSignalRed,
209207
},
210208
disabled: {
211209
opacity: 0.5,

‎examples/demo/src/components/modals/PairInputModal.tsx‎

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -61,23 +61,25 @@ export default function PairInputModal({
6161
>
6262
<View style={styles.container}>
6363
<Text style={styles.title}>{title}</Text>
64-
<TextInput
65-
style={styles.input}
66-
placeholder={keyPlaceholder}
67-
placeholderTextColor="#9E9E9E"
68-
value={keyValue}
69-
onChangeText={setKeyValue}
70-
autoFocus
71-
testID={keyTestID}
72-
/>
73-
<TextInput
74-
style={styles.input}
75-
placeholder={valuePlaceholder}
76-
placeholderTextColor="#9E9E9E"
77-
value={val}
78-
onChangeText={setVal}
79-
testID={valueTestID}
80-
/>
64+
<View style={styles.row}>
65+
<TextInput
66+
style={[styles.input, styles.halfInput]}
67+
placeholder={keyPlaceholder}
68+
placeholderTextColor="#9E9E9E"
69+
value={keyValue}
70+
onChangeText={setKeyValue}
71+
autoFocus
72+
testID={keyTestID}
73+
/>
74+
<TextInput
75+
style={[styles.input, styles.halfInput]}
76+
placeholder={valuePlaceholder}
77+
placeholderTextColor="#9E9E9E"
78+
value={val}
79+
onChangeText={setVal}
80+
testID={valueTestID}
81+
/>
82+
</View>
8183
<View style={styles.buttons}>
8284
<TouchableOpacity style={styles.cancelBtn} onPress={handleClose}>
8385
<Text style={styles.cancelText}>CANCEL</Text>
@@ -124,6 +126,13 @@ const styles = StyleSheet.create({
124126
color: '#212121',
125127
marginBottom: 12,
126128
},
129+
row: {
130+
flexDirection: 'row',
131+
gap: 8,
132+
},
133+
halfInput: {
134+
flex: 1,
135+
},
127136
buttons: {
128137
flexDirection: 'row',
129138
justifyContent: 'flex-end',
@@ -140,15 +149,13 @@ const styles = StyleSheet.create({
140149
color: Colors.textSecondary,
141150
},
142151
confirmBtn: {
143-
backgroundColor: Colors.oneSignalRed,
144-
borderRadius: 8,
145152
paddingVertical: 10,
146-
paddingHorizontal: 20,
153+
paddingHorizontal: 16,
147154
},
148155
confirmText: {
149156
fontSize: 13,
150157
fontWeight: '600',
151-
color: '#fff',
158+
color: Colors.oneSignalRed,
152159
},
153160
disabled: {
154161
opacity: 0.5,

‎examples/demo/src/components/modals/SingleInputModal.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -125,15 +125,13 @@ const styles = StyleSheet.create({
125125
color: Colors.textSecondary,
126126
},
127127
confirmBtn: {
128-
backgroundColor: Colors.oneSignalRed,
129-
borderRadius: 8,
130128
paddingVertical: 10,
131-
paddingHorizontal: 20,
129+
paddingHorizontal: 16,
132130
},
133131
confirmText: {
134132
fontSize: 13,
135133
fontWeight: '600',
136-
color: '#fff',
134+
color: Colors.oneSignalRed,
137135
},
138136
disabled: {
139137
opacity: 0.5,

‎examples/demo/src/components/modals/TooltipModal.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default function TooltipModal({ visible, tooltip, onClose }: Props) {
3535
))}
3636
</ScrollView>
3737
<TouchableOpacity style={styles.closeBtn} onPress={onClose}>
38-
<Text style={styles.closeBtnText}>CLOSE</Text>
38+
<Text style={styles.closeBtnText}>OK</Text>
3939
</TouchableOpacity>
4040
</View>
4141
</TouchableOpacity>
@@ -84,15 +84,14 @@ const styles = StyleSheet.create({
8484
},
8585
closeBtn: {
8686
marginTop: 16,
87-
backgroundColor: Colors.oneSignalRed,
88-
borderRadius: 8,
89-
paddingVertical: 12,
90-
alignItems: 'center',
87+
alignSelf: 'flex-end',
88+
paddingVertical: 8,
89+
paddingHorizontal: 4,
9190
},
9291
closeBtnText: {
9392
fontSize: 13,
9493
fontWeight: '600',
95-
color: '#fff',
94+
color: Colors.oneSignalRed,
9695
letterSpacing: 0.5,
9796
},
9897
});

‎examples/demo/src/components/modals/TrackEventModal.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -177,15 +177,13 @@ const styles = StyleSheet.create({
177177
color: Colors.textSecondary,
178178
},
179179
confirmBtn: {
180-
backgroundColor: Colors.oneSignalRed,
181-
borderRadius: 8,
182180
paddingVertical: 10,
183-
paddingHorizontal: 20,
181+
paddingHorizontal: 16,
184182
},
185183
confirmText: {
186184
fontSize: 13,
187185
fontWeight: '600',
188-
color: '#fff',
186+
color: Colors.oneSignalRed,
189187
},
190188
disabled: {
191189
opacity: 0.5,

0 commit comments

Comments
 (0)