From 999f49b87fe44692be2afee14eda4c8f3281cc1d Mon Sep 17 00:00:00 2001
From: locphamtran <tranloclqd@gmail.com>
Date: Wed, 9 Sep 2026 18:48:04 +0700
Subject: [PATCH] Center shutter between balanced side clusters; tighten
 flip/preview gap; enlarge active tool tab label

---
 src/components/CameraControls.tsx | 15 +++++++++------
 src/components/ToolRail.tsx       |  4 ++--
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/CameraControls.tsx b/src/components/CameraControls.tsx
index 0ac5f13..a8e0ad2 100644
--- a/src/components/CameraControls.tsx
+++ b/src/components/CameraControls.tsx
@@ -29,10 +29,12 @@ export default function CameraControls({
   return (
     <View
       style={{ paddingBottom: insets.bottom + 10 }}
-      className="flex-row items-center justify-between px-7 pt-2"
+      className="flex-row items-center px-7 pt-2"
     >
-      {/* Left cluster: Pick Image + gear (gear sits between library & shutter) */}
-      <View className="flex-row items-center gap-x-3">
+      {/* Left cluster: Pick Image + gear (gear sits between library & shutter).
+          flex-1 side zones are equal width, so the shutter between them is
+          exactly centered on the screen regardless of button counts. */}
+      <View className="flex-1 flex-row items-center gap-x-3">
         <TouchableOpacity
           onPress={onPickImage}
           className="w-12 h-12 rounded-full bg-black/40 border border-zinc-700/70 flex items-center justify-center"
@@ -73,9 +75,10 @@ export default function CameraControls({
 
       {/* Right cluster: flip camera (between shutter & preview) + preview.
           Preview doubles as "back to camera" while in library mode; the flip
-          control is hidden then. Wider gap than the left cluster keeps the flip
-          button clear of the preview thumbnail (~2 glyph widths toward shutter). */}
-      <View className="flex-row items-center gap-x-8">
+          control is hidden then. Anchored to the right edge inside the flex-1
+          side zone; small gap keeps it clear of the preview thumbnail without
+          drifting toward the shutter. */}
+      <View className="flex-1 flex-row items-center justify-end gap-x-3">
         {!isLibraryMode && onFlipCamera && (
           <TouchableOpacity
             onPress={onFlipCamera}
diff --git a/src/components/ToolRail.tsx b/src/components/ToolRail.tsx
index 0997ce8..55ecc62 100644
--- a/src/components/ToolRail.tsx
+++ b/src/components/ToolRail.tsx
@@ -45,8 +45,8 @@ export default function ToolRail({ activeTab, onToggle }: ToolRailProps) {
             >
               <Icon size={14} color={isActive ? '#f59e0b' : '#e4e4e7'} strokeWidth={1.75} />
               <Text
-                className={`ml-1.5 font-mono text-[10px] font-bold tracking-widest ${
-                  isActive ? 'text-amber-500' : 'text-zinc-300'
+                className={`ml-1.5 font-mono font-bold tracking-widest ${
+                  isActive ? 'text-[13px] text-amber-300' : 'text-[10px] text-zinc-500'
                 }`}
               >
                 {tool.label}