refactor: standardize shadow properties and background colors across components for improved consistency

nawazdhandala · nawazdhandala · commit 3aab280dcdff · 2026-02-17T22:04:56.000Z
diff --git a/MobileApp/src/App.tsx b/MobileApp/src/App.tsx
@@ -51,7 +51,7 @@ function AppContent(): React.JSX.Element {
           borderRadius: 999,
         }}
       />
-      <StatusBar style={theme.isDark ? "light" : "dark"} />
+      <StatusBar style="light" />
       <RootNavigator />
       <OfflineBanner />
     </View>
diff --git a/MobileApp/src/components/AddNoteModal.tsx b/MobileApp/src/components/AddNoteModal.tsx
@@ -62,9 +62,7 @@ export default function AddNoteModal({
             borderTopRightRadius: 24,
             padding: 20,
             paddingBottom: 36,
-            backgroundColor: theme.isDark
-              ? theme.colors.backgroundElevated
-              : theme.colors.backgroundPrimary,
+            backgroundColor: theme.colors.backgroundElevated,
             borderWidth: 1,
             borderBottomWidth: 0,
             borderColor: theme.colors.borderGlass,
diff --git a/MobileApp/src/components/AlertCard.tsx b/MobileApp/src/components/AlertCard.tsx
@@ -51,8 +51,8 @@ export default function AlertCard({
           backgroundColor: theme.colors.backgroundElevated,
           borderWidth: 1,
           borderColor: theme.colors.borderGlass,
-          shadowColor: theme.isDark ? "#000" : "#111827",
-          shadowOpacity: theme.isDark ? 0.22 : 0.08,
+          shadowColor: "#000",
+          shadowOpacity: 0.22,
           shadowOffset: { width: 0, height: 8 },
           shadowRadius: 14,
           elevation: 5,
diff --git a/MobileApp/src/components/EpisodeCard.tsx b/MobileApp/src/components/EpisodeCard.tsx
@@ -79,8 +79,8 @@ export default function EpisodeCard(
           backgroundColor: theme.colors.backgroundElevated,
           borderWidth: 1,
           borderColor: theme.colors.borderGlass,
-          shadowColor: theme.isDark ? "#000" : "#111827",
-          shadowOpacity: theme.isDark ? 0.22 : 0.08,
+          shadowColor: "#000",
+          shadowOpacity: 0.22,
           shadowOffset: { width: 0, height: 8 },
           shadowRadius: 14,
           elevation: 5,
diff --git a/MobileApp/src/components/GradientButton.tsx b/MobileApp/src/components/GradientButton.tsx
@@ -29,9 +29,7 @@ export default function GradientButton({
   style,
 }: GradientButtonProps): React.JSX.Element {
   const { theme } = useTheme();
-  const primaryContentColor: string = theme.isDark
-    ? theme.colors.backgroundPrimary
-    : "#FFFFFF";
+  const primaryContentColor: string = theme.colors.backgroundPrimary;
 
   const isDisabled: boolean = disabled || loading;
 
diff --git a/MobileApp/src/components/IncidentCard.tsx b/MobileApp/src/components/IncidentCard.tsx
@@ -59,8 +59,8 @@ export default function IncidentCard({
           backgroundColor: theme.colors.backgroundElevated,
           borderWidth: 1,
           borderColor: theme.colors.borderGlass,
-          shadowColor: theme.isDark ? "#000" : "#111827",
-          shadowOpacity: theme.isDark ? 0.22 : 0.08,
+          shadowColor: "#000",
+          shadowOpacity: 0.22,
           shadowOffset: { width: 0, height: 8 },
           shadowRadius: 14,
           elevation: 5,
diff --git a/MobileApp/src/components/NotesSection.tsx b/MobileApp/src/components/NotesSection.tsx
@@ -55,9 +55,7 @@ export default function NotesSection({
               borderRadius: 8,
               paddingHorizontal: 12,
               paddingVertical: 6,
-              backgroundColor: theme.isDark
-                ? theme.colors.accentGradientStart
-                : theme.colors.actionPrimary,
+              backgroundColor: theme.colors.accentGradientStart,
               opacity: pressed ? 0.85 : 1,
             };
           }}
@@ -98,10 +96,8 @@ export default function NotesSection({
                   backgroundColor: theme.colors.backgroundElevated,
                   borderWidth: 1,
                   borderColor: theme.colors.borderGlass,
-                  shadowColor: theme.isDark
-                    ? "#000"
-                    : theme.colors.accentGradientMid,
-                  shadowOpacity: theme.isDark ? 0.16 : 0.06,
+                  shadowColor: "#000",
+                  shadowOpacity: 0.16,
                   shadowOffset: { width: 0, height: 5 },
                   shadowRadius: 10,
                   elevation: 3,
diff --git a/MobileApp/src/components/SegmentedControl.tsx b/MobileApp/src/components/SegmentedControl.tsx
@@ -19,9 +19,7 @@ export default function SegmentedControl<T extends string>({
   onSelect,
 }: SegmentedControlProps<T>): React.JSX.Element {
   const { theme } = useTheme();
-  const activeContentColor: string = theme.isDark
-    ? theme.colors.backgroundPrimary
-    : "#FFFFFF";
+  const activeContentColor: string = theme.colors.backgroundPrimary;
 
   return (
     <View
diff --git a/MobileApp/src/navigation/MainTabNavigator.tsx b/MobileApp/src/navigation/MainTabNavigator.tsx
@@ -77,10 +77,8 @@ export default function MainTabNavigator(): React.JSX.Element {
           height: Platform.OS === "ios" ? 78 : 68,
           paddingBottom: Platform.OS === "ios" ? 18 : 10,
           paddingTop: 10,
-          shadowColor: theme.isDark
-            ? "#000000"
-            : theme.colors.accentGradientMid,
-          shadowOpacity: theme.isDark ? 0.35 : 0.12,
+          shadowColor: "#000000",
+          shadowOpacity: 0.35,
           shadowOffset: { width: 0, height: 8 },
           shadowRadius: 18,
           elevation: 16,
diff --git a/MobileApp/src/navigation/RootNavigator.tsx b/MobileApp/src/navigation/RootNavigator.tsx
@@ -74,7 +74,7 @@ export default function RootNavigator(): React.JSX.Element {
 
   const navigationTheme: Theme = {
     ...DefaultTheme,
-    dark: theme.isDark,
+    dark: true,
     colors: {
       ...DefaultTheme.colors,
       primary: theme.colors.actionPrimary,
diff --git a/MobileApp/src/screens/AlertDetailScreen.tsx b/MobileApp/src/screens/AlertDetailScreen.tsx
@@ -212,8 +212,8 @@ export default function AlertDetailScreen({ route }: Props): React.JSX.Element {
           backgroundColor: theme.colors.backgroundElevated,
           borderWidth: 1,
           borderColor: theme.colors.borderGlass,
-          shadowColor: theme.isDark ? "#000" : stateColor,
-          shadowOpacity: theme.isDark ? 0.28 : 0.12,
+          shadowColor: "#000",
+          shadowOpacity: 0.28,
           shadowOffset: { width: 0, height: 10 },
           shadowRadius: 18,
           elevation: 7,
diff --git a/MobileApp/src/screens/AlertEpisodeDetailScreen.tsx b/MobileApp/src/screens/AlertEpisodeDetailScreen.tsx
@@ -219,8 +219,8 @@ export default function AlertEpisodeDetailScreen({
           backgroundColor: theme.colors.backgroundElevated,
           borderWidth: 1,
           borderColor: theme.colors.borderGlass,
-          shadowColor: theme.isDark ? "#000" : stateColor,
-          shadowOpacity: theme.isDark ? 0.28 : 0.12,
+          shadowColor: "#000",
+          shadowOpacity: 0.28,
           shadowOffset: { width: 0, height: 10 },
           shadowRadius: 18,
           elevation: 7,
diff --git a/MobileApp/src/screens/HomeScreen.tsx b/MobileApp/src/screens/HomeScreen.tsx
@@ -82,8 +82,8 @@ function StatCard({
           borderWidth: 1,
           borderColor: theme.colors.borderGlass,
           borderRadius: 22,
-          shadowColor: theme.isDark ? "#000" : theme.colors.accentGradientMid,
-          shadowOpacity: theme.isDark ? 0.25 : 0.1,
+          shadowColor: "#000",
+          shadowOpacity: 0.25,
           shadowOffset: { width: 0, height: 8 },
           shadowRadius: 16,
           elevation: 6,
@@ -278,8 +278,8 @@ export default function HomeScreen(): React.JSX.Element {
             backgroundColor: theme.colors.backgroundElevated,
             borderWidth: 1,
             borderColor: theme.colors.borderGlass,
-            shadowColor: theme.isDark ? "#000" : theme.colors.accentGradientMid,
-            shadowOpacity: theme.isDark ? 0.3 : 0.12,
+            shadowColor: "#000",
+            shadowOpacity: 0.3,
             shadowOffset: { width: 0, height: 10 },
             shadowRadius: 18,
             elevation: 7,
diff --git a/MobileApp/src/screens/IncidentDetailScreen.tsx b/MobileApp/src/screens/IncidentDetailScreen.tsx
@@ -226,8 +226,8 @@ export default function IncidentDetailScreen({
           backgroundColor: theme.colors.backgroundElevated,
           borderWidth: 1,
           borderColor: theme.colors.borderGlass,
-          shadowColor: theme.isDark ? "#000" : stateColor,
-          shadowOpacity: theme.isDark ? 0.28 : 0.12,
+          shadowColor: "#000",
+          shadowOpacity: 0.28,
           shadowOffset: { width: 0, height: 10 },
           shadowRadius: 18,
           elevation: 7,
diff --git a/MobileApp/src/screens/IncidentEpisodeDetailScreen.tsx b/MobileApp/src/screens/IncidentEpisodeDetailScreen.tsx
@@ -228,8 +228,8 @@ export default function IncidentEpisodeDetailScreen({
           backgroundColor: theme.colors.backgroundElevated,
           borderWidth: 1,
           borderColor: theme.colors.borderGlass,
-          shadowColor: theme.isDark ? "#000" : stateColor,
-          shadowOpacity: theme.isDark ? 0.28 : 0.12,
+          shadowColor: "#000",
+          shadowOpacity: 0.28,
           shadowOffset: { width: 0, height: 10 },
           shadowRadius: 18,
           elevation: 7,
diff --git a/MobileApp/src/screens/SettingsScreen.tsx b/MobileApp/src/screens/SettingsScreen.tsx
@@ -5,11 +5,10 @@ import {
   ScrollView,
   Switch,
   Pressable,
-  TouchableOpacity,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { LinearGradient } from "expo-linear-gradient";
-import { useTheme, ThemeMode } from "../theme";
+import { useTheme } from "../theme";
 import { useAuth } from "../hooks/useAuth";
 import { useBiometric } from "../hooks/useBiometric";
 import { useHaptics } from "../hooks/useHaptics";
@@ -128,26 +127,16 @@ function SettingsRow({
 }
 
 export default function SettingsScreen(): React.JSX.Element {
-  const { theme, themeMode, setThemeMode } = useTheme();
+  const { theme } = useTheme();
   const { logout } = useAuth();
   const biometric: ReturnType<typeof useBiometric> = useBiometric();
   const { selectionFeedback } = useHaptics();
   const [serverUrl, setServerUrlState] = useState("");
-  const activeThemeOptionColor: string = theme.isDark
-    ? theme.colors.backgroundPrimary
-    : "#FFFFFF";
 
   useEffect(() => {
     getServerUrl().then(setServerUrlState);
   }, []);
 
-  const handleThemeChange: (mode: ThemeMode) => void = (
-    mode: ThemeMode,
-  ): void => {
-    selectionFeedback();
-    setThemeMode(mode);
-  };
-
   const handleBiometricToggle: (value: boolean) => Promise<void> = async (
     value: boolean,
   ): Promise<void> => {
@@ -172,8 +161,8 @@ export default function SettingsScreen(): React.JSX.Element {
           backgroundColor: theme.colors.backgroundElevated,
           borderWidth: 1,
           borderColor: theme.colors.borderGlass,
-          shadowColor: theme.isDark ? "#000" : theme.colors.accentGradientMid,
-          shadowOpacity: theme.isDark ? 0.28 : 0.12,
+          shadowColor: "#000",
+          shadowOpacity: 0.28,
           shadowOffset: { width: 0, height: 10 },
           shadowRadius: 18,
           elevation: 7,
@@ -267,89 +256,6 @@ export default function SettingsScreen(): React.JSX.Element {
         </View>
       </View>
 
-      {/* Appearance */}
-      <View style={{ marginBottom: 24 }}>
-        <Text
-          style={{
-            fontSize: 12,
-            fontWeight: "600",
-            textTransform: "uppercase",
-            marginBottom: 8,
-            marginLeft: 4,
-            color: theme.colors.textTertiary,
-            letterSpacing: 0.8,
-          }}
-        >
-          Appearance
-        </Text>
-        <View
-          style={{
-            backgroundColor: theme.colors.backgroundElevated,
-            borderWidth: 1,
-            borderColor: theme.colors.borderGlass,
-            borderRadius: 16,
-            padding: 6,
-            flexDirection: "row",
-          }}
-        >
-          {(["dark", "light", "system"] as ThemeMode[]).map(
-            (mode: ThemeMode, index: number) => {
-              const isActive: boolean = themeMode === mode;
-              return (
-                <TouchableOpacity
-                  key={mode}
-                  activeOpacity={0.7}
-                  onPress={() => {
-                    return handleThemeChange(mode);
-                  }}
-                  style={{
-                    flex: 1,
-                    flexDirection: "row",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    paddingVertical: 10,
-                    borderRadius: 10,
-                    marginLeft: index > 0 ? 4 : 0,
-                    backgroundColor: isActive
-                      ? theme.colors.actionPrimary
-                      : "transparent",
-                  }}
-                >
-                  <Ionicons
-                    name={
-                      mode === "dark"
-                        ? "moon-outline"
-                        : mode === "light"
-                          ? "sunny-outline"
-                          : "phone-portrait-outline"
-                    }
-                    size={15}
-                    color={
-                      isActive
-                        ? activeThemeOptionColor
-                        : theme.colors.textSecondary
-                    }
-                  />
-                  <Text
-                    style={{
-                      fontSize: 13,
-                      fontWeight: "600",
-                      marginLeft: 6,
-                      color: isActive
-                        ? activeThemeOptionColor
-                        : theme.colors.textPrimary,
-                      letterSpacing: 0.2,
-                    }}
-                  >
-                    {mode.charAt(0).toUpperCase() + mode.slice(1)}
-                  </Text>
-                </TouchableOpacity>
-              );
-            },
-          )}
-        </View>
-      </View>
-
       {/* Security */}
       {biometric.isAvailable ? (
         <View style={{ marginBottom: 24 }}>
@@ -527,7 +433,7 @@ export default function SettingsScreen(): React.JSX.Element {
               right: 0,
               height: 3,
               backgroundColor: theme.colors.actionPrimary,
-              opacity: theme.isDark ? 0.45 : 0.85,
+              opacity: 0.45,
             }}
           />
 
diff --git a/MobileApp/src/storage/preferences.ts b/MobileApp/src/storage/preferences.ts
@@ -1,26 +1,11 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import type { ThemeMode } from "../theme";
 
 const KEYS: {
-  readonly THEME_MODE: "oneuptime_theme_mode";
   readonly BIOMETRIC_ENABLED: "oneuptime_biometric_enabled";
 } = {
-  THEME_MODE: "oneuptime_theme_mode",
   BIOMETRIC_ENABLED: "oneuptime_biometric_enabled",
 } as const;
 
-export async function getThemeMode(): Promise<ThemeMode> {
-  const stored: string | null = await AsyncStorage.getItem(KEYS.THEME_MODE);
-  if (stored === "dark" || stored === "light" || stored === "system") {
-    return stored;
-  }
-  return "dark";
-}
-
-export async function setThemeMode(mode: ThemeMode): Promise<void> {
-  await AsyncStorage.setItem(KEYS.THEME_MODE, mode);
-}
-
 export async function getBiometricEnabled(): Promise<boolean> {
   const stored: string | null = await AsyncStorage.getItem(
     KEYS.BIOMETRIC_ENABLED,
diff --git a/MobileApp/src/theme/ThemeContext.tsx b/MobileApp/src/theme/ThemeContext.tsx
diff --git a/MobileApp/src/theme/colors.ts b/MobileApp/src/theme/colors.ts
diff --git a/MobileApp/src/theme/index.ts b/MobileApp/src/theme/index.ts
