Skip to content

Commit 87475b0

Browse files
nawazdhandalanawazdhandala
committed
Enhance UI components and improve accessibility across multiple screens
- Added SectionHeader component for consistent section titles in IncidentEpisodeDetailScreen. - Updated styles for various text elements to improve readability and accessibility. - Refined button styles in LoginScreen and ServerUrlScreen for better visual feedback. - Introduced focus states for input fields in LoginScreen and ServerUrlScreen. - Enhanced ProjectSelectionScreen with improved project item display. - Implemented SectionCard component in SettingsScreen for better layout organization. - Updated color tokens in theme for better visual consistency and added new accent colors. - Adjusted Tailwind CSS configuration for improved shadow effects and new color variables.
1 parent d5613cc commit 87475b0

24 files changed

+1392
-653
lines changed

‎MobileApp/global.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77
--color-bg-secondary: #F9FAFB;
88
--color-bg-tertiary: #F3F4F6;
99
--color-bg-elevated: #FFFFFF;
10+
--color-card-accent: rgba(99, 102, 241, 0.10);
11+
--color-bg-glass: rgba(255, 255, 255, 0.60);
12+
--color-icon-bg: rgba(99, 102, 241, 0.10);
1013
--color-border-default: #E5E7EB;
1114
--color-border-subtle: #F3F4F6;
1215
--color-text-primary: #111827;
@@ -47,6 +50,9 @@
4750
--color-bg-secondary: #161B22;
4851
--color-bg-tertiary: #21262D;
4952
--color-bg-elevated: #1C2128;
53+
--color-card-accent: rgba(99, 102, 241, 0.15);
54+
--color-bg-glass: rgba(255, 255, 255, 0.08);
55+
--color-icon-bg: rgba(99, 102, 241, 0.15);
5056
--color-border-default: #30363D;
5157
--color-border-subtle: #21262D;
5258
--color-text-primary: #E6EDF3;

‎MobileApp/src/components/AddNoteModal.tsx‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,24 @@ export default function AddNoteModal({
5252
style={{ backgroundColor: "rgba(0,0,0,0.4)" }}
5353
behavior={Platform.OS === "ios" ? "padding" : "height"}
5454
>
55-
<View className="rounded-t-3xl p-5 pb-9 bg-bg-primary">
56-
<Text className="text-title-md text-text-primary mb-4">
55+
<View className="rounded-t-[28px] p-5 pb-9 bg-bg-primary">
56+
{/* Drag Handle */}
57+
<View className="items-center pt-1 pb-4">
58+
<View
59+
className="w-9 h-1 rounded-full"
60+
style={{ backgroundColor: theme.colors.borderDefault }}
61+
/>
62+
</View>
63+
64+
<Text
65+
className="text-title-md text-text-primary mb-4"
66+
style={{ letterSpacing: -0.3 }}
67+
>
5768
Add Note
5869
</Text>
5970

6071
<TextInput
61-
className="min-h-[120px] rounded-[14px] border p-3 text-[15px] bg-bg-primary text-text-primary border-border-default"
72+
className="min-h-[120px] rounded-xl border p-3 text-[15px] bg-bg-primary text-text-primary border-border-default"
6273
placeholder="Add a note..."
6374
placeholderTextColor={theme.colors.textTertiary}
6475
value={noteText}
@@ -70,7 +81,7 @@ export default function AddNoteModal({
7081

7182
<View className="flex-row gap-3 mt-4">
7283
<TouchableOpacity
73-
className="flex-1 py-3.5 rounded-[14px] items-center justify-center min-h-[48px] bg-bg-tertiary border border-border-subtle"
84+
className="flex-1 py-3.5 rounded-xl items-center justify-center min-h-[48px] bg-bg-tertiary border border-border-subtle"
7485
onPress={handleClose}
7586
disabled={isSubmitting}
7687
>
@@ -80,7 +91,7 @@ export default function AddNoteModal({
8091
</TouchableOpacity>
8192

8293
<TouchableOpacity
83-
className="flex-1 py-3.5 rounded-[14px] items-center justify-center min-h-[48px]"
94+
className="flex-1 py-3.5 rounded-xl items-center justify-center min-h-[48px]"
8495
style={{
8596
backgroundColor:
8697
noteText.trim() && !isSubmitting

‎MobileApp/src/components/AlertCard.tsx‎

Lines changed: 74 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import { View, Text, TouchableOpacity } from "react-native";
3+
import { Ionicons } from "@expo/vector-icons";
34
import { useTheme } from "../theme";
45
import { rgbToHex } from "../utils/color";
56
import { formatRelativeTime } from "../utils/date";
@@ -28,59 +29,90 @@ export default function AlertCard({
2829

2930
return (
3031
<TouchableOpacity
31-
className="p-[18px] rounded-2xl mb-3 bg-bg-elevated shadow-sm"
32+
className="rounded-2xl mb-3 bg-bg-elevated border border-border-subtle overflow-hidden"
33+
style={{
34+
shadowColor: "#000",
35+
shadowOpacity: 0.04,
36+
shadowOffset: { width: 0, height: 2 },
37+
shadowRadius: 8,
38+
elevation: 2,
39+
}}
3240
onPress={onPress}
3341
activeOpacity={0.7}
3442
accessibilityRole="button"
3543
accessibilityLabel={`Alert ${alert.alertNumberWithPrefix || alert.alertNumber}, ${alert.title}. State: ${alert.currentAlertState?.name ?? "unknown"}. Severity: ${alert.alertSeverity?.name ?? "unknown"}.`}
3644
>
37-
<View className="flex-row justify-between items-center mb-1.5">
38-
<Text className="text-[13px] font-semibold text-text-tertiary">
39-
{alert.alertNumberWithPrefix || `#${alert.alertNumber}`}
40-
</Text>
41-
<Text className="text-xs text-text-tertiary">{timeString}</Text>
42-
</View>
43-
44-
<Text
45-
className="text-body-lg text-text-primary font-semibold"
46-
numberOfLines={2}
47-
>
48-
{alert.title}
49-
</Text>
50-
51-
<View className="flex-row flex-wrap gap-2 mt-2.5">
52-
{alert.currentAlertState ? (
53-
<View className="flex-row items-center px-2 py-1 rounded-md bg-bg-tertiary">
45+
<View className="flex-row">
46+
<View
47+
className="w-1"
48+
style={{ backgroundColor: stateColor }}
49+
/>
50+
<View className="flex-1 p-4">
51+
<View className="flex-row justify-between items-center mb-1.5">
5452
<View
55-
className="w-2 h-2 rounded-full mr-1.5"
56-
style={{ backgroundColor: stateColor }}
57-
/>
58-
<Text className="text-xs font-semibold text-text-primary">
59-
{alert.currentAlertState.name}
60-
</Text>
53+
className="px-2 py-0.5 rounded-full"
54+
style={{ backgroundColor: theme.colors.backgroundTertiary }}
55+
>
56+
<Text className="text-[12px] font-semibold text-text-tertiary">
57+
{alert.alertNumberWithPrefix || `#${alert.alertNumber}`}
58+
</Text>
59+
</View>
60+
<Text className="text-[12px] text-text-tertiary">{timeString}</Text>
6161
</View>
62-
) : null}
6362

64-
{alert.alertSeverity ? (
65-
<View
66-
className="flex-row items-center px-2 py-1 rounded-md"
67-
style={{ backgroundColor: severityColor + "26" }}
63+
<Text
64+
className="text-body-lg text-text-primary font-semibold mt-0.5"
65+
numberOfLines={2}
6866
>
69-
<Text
70-
className="text-xs font-semibold"
71-
style={{ color: severityColor }}
72-
>
73-
{alert.alertSeverity.name}
74-
</Text>
67+
{alert.title}
68+
</Text>
69+
70+
<View className="flex-row flex-wrap gap-2 mt-2.5">
71+
{alert.currentAlertState ? (
72+
<View className="flex-row items-center px-2.5 py-0.5 rounded-full bg-bg-tertiary">
73+
<View
74+
className="w-2 h-2 rounded-full mr-1.5"
75+
style={{ backgroundColor: stateColor }}
76+
/>
77+
<Text className="text-[12px] font-semibold text-text-primary">
78+
{alert.currentAlertState.name}
79+
</Text>
80+
</View>
81+
) : null}
82+
83+
{alert.alertSeverity ? (
84+
<View
85+
className="flex-row items-center px-2.5 py-0.5 rounded-full"
86+
style={{ backgroundColor: severityColor + "1A" }}
87+
>
88+
<Text
89+
className="text-[12px] font-semibold"
90+
style={{ color: severityColor }}
91+
>
92+
{alert.alertSeverity.name}
93+
</Text>
94+
</View>
95+
) : null}
7596
</View>
76-
) : null}
77-
</View>
7897

79-
{alert.monitor ? (
80-
<Text className="text-xs text-text-secondary mt-2" numberOfLines={1}>
81-
{alert.monitor.name}
82-
</Text>
83-
) : null}
98+
{alert.monitor ? (
99+
<View className="flex-row items-center mt-2.5">
100+
<Ionicons
101+
name="desktop-outline"
102+
size={12}
103+
color={theme.colors.textTertiary}
104+
style={{ marginRight: 4 }}
105+
/>
106+
<Text
107+
className="text-[12px] text-text-secondary flex-1"
108+
numberOfLines={1}
109+
>
110+
{alert.monitor.name}
111+
</Text>
112+
</View>
113+
) : null}
114+
</View>
115+
</View>
84116
</TouchableOpacity>
85117
);
86118
}

‎MobileApp/src/components/EmptyState.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,19 +27,25 @@ export default function EmptyState({
2727
const { theme } = useTheme();
2828

2929
return (
30-
<View className="flex-1 items-center justify-center px-10 py-20">
31-
<View className="w-16 h-16 items-center justify-center">
30+
<View className="flex-1 items-center justify-center px-10 py-24">
31+
<View
32+
className="w-16 h-16 rounded-2xl items-center justify-center"
33+
style={{ backgroundColor: theme.colors.backgroundTertiary }}
34+
>
3235
<Ionicons
3336
name={iconMap[icon]}
34-
size={40}
37+
size={32}
3538
color={theme.colors.textTertiary}
3639
/>
3740
</View>
38-
<Text className="text-title-sm text-text-primary text-center mt-5">
41+
<Text
42+
className="text-title-md text-text-primary text-center mt-5"
43+
style={{ letterSpacing: -0.3 }}
44+
>
3945
{title}
4046
</Text>
4147
{subtitle ? (
42-
<Text className="text-body-md text-text-secondary text-center mt-2 leading-5">
48+
<Text className="text-body-md text-text-secondary text-center mt-2 leading-6">
4349
{subtitle}
4450
</Text>
4551
) : null}

‎MobileApp/src/components/EpisodeCard.tsx‎

Lines changed: 68 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -56,58 +56,83 @@ export default function EpisodeCard(
5656

5757
return (
5858
<TouchableOpacity
59-
className="p-[18px] rounded-2xl mb-3 bg-bg-elevated shadow-sm"
59+
className="rounded-2xl mb-3 bg-bg-elevated border border-border-subtle overflow-hidden"
60+
style={{
61+
shadowColor: "#000",
62+
shadowOpacity: 0.04,
63+
shadowOffset: { width: 0, height: 2 },
64+
shadowRadius: 8,
65+
elevation: 2,
66+
}}
6067
onPress={onPress}
6168
activeOpacity={0.7}
6269
>
63-
<View className="flex-row justify-between items-center mb-1.5">
64-
<Text className="text-[13px] font-semibold text-text-tertiary">
65-
{episode.episodeNumberWithPrefix || `#${episode.episodeNumber}`}
66-
</Text>
67-
<Text className="text-xs text-text-tertiary">{timeString}</Text>
68-
</View>
69-
70-
<Text
71-
className="text-body-lg text-text-primary font-semibold"
72-
numberOfLines={2}
73-
>
74-
{episode.title}
75-
</Text>
76-
77-
<View className="flex-row flex-wrap gap-2 mt-2.5">
78-
{state ? (
79-
<View className="flex-row items-center px-2 py-1 rounded-md bg-bg-tertiary">
70+
<View className="flex-row">
71+
<View
72+
className="w-1"
73+
style={{ backgroundColor: stateColor }}
74+
/>
75+
<View className="flex-1 p-4">
76+
<View className="flex-row justify-between items-center mb-1.5">
8077
<View
81-
className="w-2 h-2 rounded-full mr-1.5"
82-
style={{ backgroundColor: stateColor }}
83-
/>
84-
<Text className="text-xs font-semibold text-text-primary">
85-
{state.name}
86-
</Text>
78+
className="px-2 py-0.5 rounded-full"
79+
style={{ backgroundColor: theme.colors.backgroundTertiary }}
80+
>
81+
<Text className="text-[12px] font-semibold text-text-tertiary">
82+
{episode.episodeNumberWithPrefix || `#${episode.episodeNumber}`}
83+
</Text>
84+
</View>
85+
<Text className="text-[12px] text-text-tertiary">{timeString}</Text>
8786
</View>
88-
) : null}
8987

90-
{severity ? (
91-
<View
92-
className="flex-row items-center px-2 py-1 rounded-md"
93-
style={{ backgroundColor: severityColor + "26" }}
88+
<Text
89+
className="text-body-lg text-text-primary font-semibold mt-0.5"
90+
numberOfLines={2}
9491
>
95-
<Text
96-
className="text-xs font-semibold"
97-
style={{ color: severityColor }}
98-
>
99-
{severity.name}
100-
</Text>
92+
{episode.title}
93+
</Text>
94+
95+
<View className="flex-row flex-wrap gap-2 mt-2.5">
96+
{state ? (
97+
<View className="flex-row items-center px-2.5 py-0.5 rounded-full bg-bg-tertiary">
98+
<View
99+
className="w-2 h-2 rounded-full mr-1.5"
100+
style={{ backgroundColor: stateColor }}
101+
/>
102+
<Text className="text-[12px] font-semibold text-text-primary">
103+
{state.name}
104+
</Text>
105+
</View>
106+
) : null}
107+
108+
{severity ? (
109+
<View
110+
className="flex-row items-center px-2.5 py-0.5 rounded-full"
111+
style={{ backgroundColor: severityColor + "1A" }}
112+
>
113+
<Text
114+
className="text-[12px] font-semibold"
115+
style={{ color: severityColor }}
116+
>
117+
{severity.name}
118+
</Text>
119+
</View>
120+
) : null}
121+
122+
{childCount > 0 ? (
123+
<View
124+
className="flex-row items-center px-2.5 py-0.5 rounded-full"
125+
style={{ backgroundColor: theme.colors.backgroundTertiary }}
126+
>
127+
<Text className="text-[12px] font-semibold text-text-secondary">
128+
{childCount} {type === "incident" ? "incident" : "alert"}
129+
{childCount !== 1 ? "s" : ""}
130+
</Text>
131+
</View>
132+
) : null}
101133
</View>
102-
) : null}
134+
</View>
103135
</View>
104-
105-
{childCount > 0 ? (
106-
<Text className="text-xs text-text-secondary mt-2">
107-
{childCount} {type === "incident" ? "incident" : "alert"}
108-
{childCount !== 1 ? "s" : ""}
109-
</Text>
110-
) : null}
111136
</TouchableOpacity>
112137
);
113138
}

0 commit comments

Comments
 (0)