Refactor UI, upgrade code strcutures and remove redundant sections fo… by Kushal096 · Pull Request #16 · BIC-DevSphere/routine-app

Kushal096 · 2026-03-09T15:01:41Z

This pull request introduces significant UI and UX improvements to the authentication, home, and settings screens, with a focus on visual consistency, animation, and code organization. It also updates navigation and theming for a more modern and cohesive look across the app. The most important changes are grouped below:

Authentication Screen Refactor:

Replaces manual sign-in/sign-up toggle with a new AuthTabs component and updates styling to use theme-aware colors and custom styles, improving code maintainability and user experience (app/(auth)/index.tsx).

Home Screen Redesign and Animation:

Refactors the day picker to use a new DayButton component, adds animated transitions for day changes and content appearance using react-native-reanimated, and applies a new style system for better theming and layout consistency (app/(tabs)/home.tsx). [1] [2] [3] [4]
Updates error and empty state handling for clarity and visual polish (app/(tabs)/home.tsx).

Settings Screen Modernization:

Refactors the settings screen to use animated section transitions, new SettingItem components, and consistent theme-based styling, while simplifying state management (app/(tabs)/setting.tsx).

Navigation and Tab Bar Updates:

Updates tab bar colors, icon sets, and styles for both dark and light modes; increases tab bar height and label readability; switches to more intuitive icons for each tab (app/(tabs)/_layout.tsx).

Configuration and Architecture Adjustments:

Removes deprecated or experimental flags from app.json to improve compatibility and stability on both iOS and Android (app.json). [1] [2]

These changes collectively enhance the app’s usability, maintainability, and visual appeal.
This pull request introduces significant UI improvements and refactoring to the authentication and main tab screens, focusing on a more modern, consistent design and enhanced user experience. It also introduces animation enhancements and code cleanup, especially in the home and settings tabs, and updates some app configuration settings.

UI/UX Refactoring and Theming:

Refactored the authentication screen (app/(auth)/index.tsx) to use a new AuthTabs component, centralized color scheme logic, and modernized styling with StyleSheet and theme-aware backgrounds.
Updated the tab bar appearance and icons in the main tab layout (app/(tabs)/_layout.tsx), including new color schemes, padding, label styles, and icon choices for a more polished look.

Home Tab Enhancements:

Rewrote the home tab (app/(tabs)/home.tsx) to use animated transitions for day changes, extracted the day picker into a DayButton component, and implemented theme-based styling with StyleSheet. Improved error handling and list rendering, and added animation for content transitions. [1] [2] [3] [4] [5]

Settings Tab Improvements:

Refactored the settings tab (app/(tabs)/setting.tsx) to use animated section transitions, updated theme and color logic, and removed unused imports. Added new style variables for icons and dividers.

App Configuration Updates:

Disabled experimental architecture and edge-to-edge mode in app.json for improved compatibility and stability. [1] [2]

…r improved readability and maintainability

Copilot

Pull request overview

This PR modernizes the app’s UI/UX across authentication and main tab screens by introducing a shared neomorphic style system, reusable animated UI primitives, and refactored screen components for consistency.

Changes:

Added shared neomorphic theme styles (neo-styles) and reusable Reanimated hooks (animations) to standardize visuals/animations.
Refactored Auth/Home/Settings/Support flows to use extracted components (e.g., AuthTabs, DayButton, SettingItem) and theme-aware styling.
Updated navigation/tab bar styling and upgraded Expo/React Native-related dependencies.

Reviewed changes

Copilot reviewed 25 out of 27 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
package.json	Upgrades Expo/React Native ecosystem versions and adds `expo-network`.
lib/neo-styles.ts	Introduces shared neomorphic color tokens and style presets.
lib/constants.ts	Updates navigation theme colors to match new palette.
lib/animations.ts	Adds reusable animation hooks (mount/focus fades, press scale, etc.).
global.css	Updates CSS variables and component utility classes for new theme.
components/theme-toggle.tsx	Refactors theme toggle UI to neo-styled card + pill control.
components/tabbar-icon.tsx	Adds focused-state animation to tab icons.
components/sign-up.tsx	Refactors sign-up form styling and adds mount/press animations.
components/sign-in.tsx	Refactors sign-in form styling and adds mount/press animations.
components/setting-item.tsx	New reusable settings row component with consistent visuals.
components/routine-card.tsx	Neo-styled routine card with “Live” indicator and animations.
components/reset-password.tsx	Neo-styled reset password screen layout and inputs.
components/profile-edit.tsx	Neo-styled profile edit bottom sheet UI refinements.
components/profile-display.tsx	Neo-styled profile header card with press animation.
components/need-help.tsx	Neo-styled help modal with simplified UI structure.
components/logout-button.tsx	Updates logout action styling to match neo destructive pattern.
components/header.tsx	Refactors header UI with focus-based animations and neo stat cards.
components/day-button.tsx	New extracted day selector button with animated active state.
components/auth-tabs.tsx	New auth tab switcher with animated indicator and content transitions.
app/(tabs)/support.tsx	Refactors support form with neo styling + focus animations.
app/(tabs)/setting.tsx	Refactors settings screen into animated sections using `SettingItem`.
app/(tabs)/home.tsx	Refactors home day picker + adds animated routine transitions.
app/(tabs)/_layout.tsx	Updates tab bar colors, sizes, icons, and passes focused state.
app/(auth)/index.tsx	Replaces manual auth toggle with `AuthTabs`.
app.json	Removes experimental flags for improved platform compatibility.

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

Copilot · 2026-03-09T15:09:04Z

components/logout-button.tsx

  const logout = () => authClient.signOut();
+  const { isDarkColorScheme } = useColorScheme();
+  const neo = getNeoStyles(isDarkColorScheme);
+  const colors = isDarkColorScheme ? NEO_COLORS.dark : NEO_COLORS.light;



colors is computed but never used, which will fail TypeScript compilation under noUnusedLocals. Remove the colors constant (and NEO_COLORS import if it becomes unused) or apply it to the button styling.

Copilot · 2026-03-09T15:09:04Z

app/(tabs)/support.tsx

  const [description, setDescription] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
+  const neo = getNeoStyles(isDarkColorScheme);
+  const colors = isDarkColorScheme ? NEO_COLORS.dark : NEO_COLORS.light;



colors is declared but never used, and with noUnusedLocals this will break the TypeScript build. Remove the colors constant (and NEO_COLORS import if it becomes unused), or use it for background/accent styling in this screen.

Copilot · 2026-03-09T15:09:05Z

components/sign-in.tsx

  const { isDarkColorScheme } = useColorScheme();
+  const neo = getNeoStyles(isDarkColorScheme);
+  const colors = isDarkColorScheme ? NEO_COLORS.dark : NEO_COLORS.light;

-  const placeholderColor = isDarkColorScheme ? "#9CA3AF" : "#6B7280";
+  const placeholderColor = isDarkColorScheme ? "#A3A3A3" : "#737373";


colors is declared but never used, which will fail TypeScript compilation with noUnusedLocals: true. Remove the colors constant (and NEO_COLORS import if it becomes unused), or use it in styling.

Copilot · 2026-03-09T15:09:05Z

app/(tabs)/home.tsx

+  const { isDarkColorScheme } = useColorScheme();
+  const neo = getNeoStyles(isDarkColorScheme);
+  const colors = isDarkColorScheme ? NEO_COLORS.dark : NEO_COLORS.light;


NEO_COLORS/colors are imported/computed but never used. With noUnusedLocals: true, this will fail TypeScript compilation. Remove the unused import/constant or use colors in styling.

Copilot · 2026-03-09T15:09:05Z

app/(tabs)/setting.tsx

 import { useColorScheme } from "@/lib/use-color-scheme";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import { useProfile } from "@/lib/api/profile";
 import { useRouter } from "expo-router";
+import { getNeoStyles, NEO_COLORS } from "@/lib/neo-styles";


Ionicons is imported but no longer used in this file. With noUnusedLocals: true, the unused import will fail TypeScript compilation; remove it.

Copilot · 2026-03-09T15:09:05Z

lib/animations.ts

+  useEffect(() => {
+    translateX.value = direction * distance;
+    opacity.value    = 0;
+    translateX.value = withSpring(0, SPRINGS.gentle);
+    opacity.value    = withTiming(1, { duration: 300, easing: Easing.out(Easing.ease) });


This effect only depends on key, but it also uses direction and distance to set initial values. If direction/distance change while key stays the same, the animation won’t reflect the new inputs. Include direction and distance in the dependency array (or document they must be constant).

Copilot · 2026-03-09T15:09:06Z

components/day-button.tsx

+import { SPRINGS, useScalePress } from "@/lib/animations";
+import type { getNeoStyles } from "@/lib/neo-styles";
+


getNeoStyles is imported with import type, but it’s used in a type query (ReturnType<typeof getNeoStyles>). Type queries need a value symbol, so this will fail with verbatimModuleSyntax. Import getNeoStyles normally, or export/import a dedicated NeoStyles type instead.

Copilot · 2026-03-09T15:09:06Z

components/theme-toggle.tsx

+          style={[
+            styles.pill,
+            { backgroundColor: isDark ? colors.primaryColor : colors.shadowDark },
+            neo.inset,
+          ]}


neo.inset includes a backgroundColor (inputBg). Because it’s applied after the explicit { backgroundColor: ... } in this style array, it will override the pill’s intended active/inactive color. Apply neo.inset earlier in the array (and keep the desired backgroundColor last), or split inset border styling from its background color.

Copilot · 2026-03-09T15:09:06Z

components/sign-up.tsx

  const { isDarkColorScheme } = useColorScheme();
+  const neo = getNeoStyles(isDarkColorScheme);
+  const colors = isDarkColorScheme ? NEO_COLORS.dark : NEO_COLORS.light;

-  const placeholderColor = isDarkColorScheme ? "#9CA3AF" : "#6B7280";
+  const placeholderColor = isDarkColorScheme ? "#A3A3A3" : "#737373";


colors is declared but never used, which will fail TypeScript compilation with noUnusedLocals: true. Remove the colors constant (and NEO_COLORS import if it becomes unused), or use it in styling.

Copilot · 2026-03-09T15:09:07Z

lib/animations.ts

+  useEffect(() => {
+    const run = () => {
+      opacity.value    = withTiming(1, { duration: 380, easing: Easing.out(Easing.cubic) });
+      translateY.value = withSpring(0, SPRINGS.gentle);
+    };


In useMountFade, the effect depends on delay and fromY (they influence the timeout and initial translate), but the hook is set up to run only once. If callers pass values that can change across renders (e.g., computed from props), the animation won’t match the latest inputs. Add these parameters to the dependency array (or document/enforce they are stable and intentionally suppress exhaustive-deps).

Refactor UI, upgrade code strcutures and remove redundant sections fo…

315701d

…r improved readability and maintainability

Copilot AI review requested due to automatic review settings March 9, 2026 15:01

Copilot started reviewing on behalf of Kushal096 March 9, 2026 15:02 View session

Copilot AI reviewed Mar 9, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor UI, upgrade code strcutures and remove redundant sections fo…#16

Refactor UI, upgrade code strcutures and remove redundant sections fo…#16
Kushal096 wants to merge 1 commit intoBIC-DevSphere:mainfrom
Kushal096:feat/ui

Kushal096 commented Mar 9, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 9, 2026

Uh oh!

Copilot AI Mar 9, 2026

Uh oh!

Copilot AI Mar 9, 2026

Uh oh!

Copilot AI Mar 9, 2026

Uh oh!

Copilot AI Mar 9, 2026

Uh oh!

Copilot AI Mar 9, 2026

Uh oh!

Copilot AI Mar 9, 2026

Uh oh!

adgator101 Mar 9, 2026

Uh oh!

Copilot AI Mar 9, 2026

Uh oh!

Copilot AI Mar 9, 2026

Uh oh!

Copilot AI Mar 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		import { SPRINGS, useScalePress } from "@/lib/animations";
		import type { getNeoStyles } from "@/lib/neo-styles";

Conversation

Kushal096 commented Mar 9, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

adgator101 Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants