FIX: dark mode theme, update alert dialogs, and UI consistency improvements by chaitika · Pull Request #72 · CypherCommons/shroud

chaitika · 2026-03-11T09:13:24Z

This PR:

restores dynamic dark/light theme switching based on device setting
add custom alert modal
updates dark mode theme as per brand aesthetic
migrates DeleteWallet from raw Alert.alert() to presentAlert wrapper
updates loading spinner color as per brand aesthetic
fixs ImportWallet screen's half-black background in dark mode

View Screenshots at Image log for PR #72

…and import screen layout

Copilot

Pull request overview

This PR focuses on dark-mode/light-mode behavior and UI consistency by updating theme selection at the app level, introducing a custom alert modal, and aligning several UI elements with updated brand colors.

Changes:

Switch NavigationContainer theme dynamically based on device color scheme.
Add a CustomAlert modal and wire it into the existing presentAlert wrapper (Android path).
Update wallet deletion confirmation copy and a few UI elements (spinners, ImportWallet layout).

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
`App.tsx`	Uses `useColorScheme()` to select dark/light theme; wires `CustomAlert` ref into `presentAlert`.
`components/Alert.ts`	Adds a global `customAlertRef` and routes Android alerts through `CustomAlert` when available.
`components/CustomAlert.tsx`	New custom modal implementation that renders title/message/buttons styled by theme.
`components/themes.ts`	Updates dark theme button color and adds brand color entries.
`loc/en.json`	Updates wallet deletion-related strings.
`screen/settings/DeleteWallet.tsx`	Migrates deletion prompts from `Alert.alert()` to `presentAlert`.
`screen/wallets/ImportWallet.tsx`	Adjusts layout styling to fix dark-mode background issue.
`screen/UnlockWith.tsx`	Updates spinner color to match brand color.
`navigation/LazyLoadingIndicator.tsx`	Updates spinner color to match brand color.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

notTanveer · 2026-03-24T08:05:35Z

 export const LazyLoadingIndicator = () => (
  <View style={styles.root}>
-    <ActivityIndicator size="large" />
+    <ActivityIndicator size="large" color="#754CE8" />


we shouldn't hard-code colors

notTanveer · 2026-03-24T08:18:41Z

    "details_del_wb_q": "This wallet has a balance. Before proceeding, please be aware that you will not be able to recover the funds without this wallet’s seed phrase. In order to avoid accidental removal, please enter your wallet’s balance of {balance} satoshis.",
    "details_delete": "Delete",
-    "details_delete_wallet": "Delete Wallet",
+    "details_delete_wallet": "⚠️ Delete Wallet?",


get rid of the emoji here. localization files carry text context

notTanveer · 2026-03-24T08:23:58Z

+  const isDark = Appearance.getColorScheme() === 'dark';
+  const colors = isDark ? BlueDarkTheme.colors : BlueDefaultTheme.colors;


instead of Appearance.getColorScheme - which just takes a snapshot, we should use useColorScheme.

Suggested change

const isDark = Appearance.getColorScheme() === 'dark';

const colors = isDark ? BlueDarkTheme.colors : BlueDefaultTheme.colors;

const colorScheme = useColorScheme();

const colors = colorScheme === 'dark' ? BlueDarkTheme.colors : BlueDefaultTheme.colors;

notTanveer · 2026-03-24T08:31:34Z

+  const customAlertRef = React.useRef<CustomAlertHandle>(null);
+
+  React.useEffect(() => {
+    setCustomAlertRef(customAlertRef.current);
+    initializeIndexer({
+      baseUrl: 'https://cushionlike-isabel-retrievable.ngrok-free.dev/',
+      timeout: 100000, // 100 seconds for blockchain scanning operations (increased for slower connections)
+    });
+    return () => setCustomAlertRef(null);
+  }, []);


i dont like the approach of using useRef inside a useEffect

notTanveer · 2026-03-24T08:32:49Z

+  const customAlertRef = React.useRef<CustomAlertHandle>(null);
+
+  React.useEffect(() => {
+    setCustomAlertRef(customAlertRef.current);
+    initializeIndexer({
+      baseUrl: 'https://cushionlike-isabel-retrievable.ngrok-free.dev/',
+      timeout: 100000, // 100 seconds for blockchain scanning operations (increased for slower connections)
+    });
+    return () => setCustomAlertRef(null);
+  }, []);


Suggested change

const customAlertRef = React.useRef<CustomAlertHandle>(null);

React.useEffect(() => {

setCustomAlertRef(customAlertRef.current);

initializeIndexer({

baseUrl: 'https://cushionlike-isabel-retrievable.ngrok-free.dev/',

timeout: 100000, // 100 seconds for blockchain scanning operations (increased for slower connections)

});

return () => setCustomAlertRef(null);

}, []);

const handleCustomAlertRef = React.useCallback((ref: CustomAlertHandle | null) => {

setCustomAlertRef(ref);

}, []);

React.useEffect(() => {

initializeIndexer({

baseUrl: 'https://cushionlike-isabel-retrievable.ngrok-free.dev/',

timeout: 100000, // 100 seconds for blockchain scanning operations (increased for slower connections)

});

}, []);

notTanveer · 2026-03-24T08:34:02Z

+  React.useEffect(() => {
+    BlueCurrentTheme.updateColorScheme();
+  }, [colorScheme]);


notTanveer · 2026-03-24T08:36:36Z

          </StorageProvider>
        </SafeAreaProvider>
      </NavigationContainer>
+      <CustomAlert ref={customAlertRef} />


this should be mounted once at the app root level and can work globally across screens, please move this to just below <MasterView />

notTanveer · 2026-03-24T08:41:34Z

+    [dismiss],
+  );
+
+  const getButtonTextStyle = (style?: string) => {


Suggested change

const getButtonTextStyle = (style?: string) => {

const getButtonTextStyle = (style?: AlertButton['style']) => {

notTanveer · 2026-03-24T08:50:50Z

-      [
+    presentAlert({
+      title: loc.wallets.details_delete_wallet,
+      message: loc.wallets.delete_wallet_warning,


i think the message should be a combination of both, are you sure + you will need your seed phrase

UI fixes: for dark mode theme, custom alert styling, spinner colors, …

5b1195b

…and import screen layout

Copilot AI review requested due to automatic review settings March 11, 2026 09:13

Copilot started reviewing on behalf of chaitika March 11, 2026 09:13 View session

Copilot AI reviewed Mar 11, 2026

View reviewed changes

address copilot reviews on PR

0dde546

notTanveer reviewed Mar 24, 2026

View reviewed changes

		const isDark = Appearance.getColorScheme() === 'dark';
		const colors = isDark ? BlueDarkTheme.colors : BlueDefaultTheme.colors;

	const getButtonTextStyle = (style?: string) => {
	const getButtonTextStyle = (style?: AlertButton['style']) => {

Conversation

chaitika commented Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

chaitika commented Mar 11, 2026 •

edited

Loading