From 3cddfdf39fce47ce9d8a34e0430d56b16eea8acd Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Mon, 10 Nov 2025 19:55:31 +0000
Subject: [PATCH] completionId: cgen-8e0e7e83d50542ce9b173c37f25a10f8

cgen-8e0e7e83d50542ce9b173c37f25a10f8
---
 client/components/Layout.tsx | 38 ++++++++++++++++++++----------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/client/components/Layout.tsx b/client/components/Layout.tsx
index dcda3121..6a9a1228 100644
--- a/client/components/Layout.tsx
+++ b/client/components/Layout.tsx
@@ -152,30 +152,34 @@ export default function CodeLayout({ children, hideFooter }: LayoutProps) {
             <button
               type="button"
               onClick={() => setIsArmModalOpen(true)}
-              className={`sm:hidden relative h-12 w-12 flex items-center justify-center rounded-xl transition-all duration-300 cursor-pointer ${
+              className={`sm:hidden relative h-12 w-12 flex items-center justify-center rounded-xl transition-all duration-300 cursor-pointer focus:outline-none focus:ring-2 focus:ring-aethex-400 ${
                 isArmModalOpen
-                  ? "bg-gradient-to-r from-yellow-500/30 via-green-500/30 to-blue-500/30 scale-110 shadow-lg shadow-purple-500/30"
-                  : "bg-gray-700/40 hover:bg-gray-600/60 shadow-lg"
+                  ? "bg-gradient-to-r from-yellow-500/40 via-green-500/40 to-blue-500/40 scale-110 shadow-lg shadow-purple-500/50 border-2 border-purple-400/80"
+                  : "bg-gradient-to-br from-aethex-600 to-purple-700 hover:from-aethex-500 hover:to-purple-600 shadow-lg shadow-aethex-500/30 border-2 border-aethex-400/40"
               }`}
               title="Select Arm"
             >
-              <div
-                className={`absolute inset-0 rounded-xl border-2 transition-all duration-300 ${
-                  isArmModalOpen
-                    ? "border-purple-400/80 animate-spin"
-                    : "border-gray-600/40"
-                }`}
-                style={{
-                  animation: isArmModalOpen
-                    ? "spin 3s linear infinite"
-                    : "none",
-                }}
-              />
+              {!isArmModalOpen && (
+                <div
+                  className="absolute inset-0 rounded-xl border-2 border-aethex-400/60 opacity-60 group-hover:opacity-100"
+                  style={{
+                    animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+                  }}
+                />
+              )}
+              {isArmModalOpen && (
+                <div
+                  className="absolute inset-0 rounded-xl border-2 border-purple-400/80 animate-spin"
+                  style={{
+                    animation: "spin 3s linear infinite",
+                  }}
+                />
+              )}
               <img
                 src="https://docs.aethex.tech/~gitbook/image?url=https%3A%2F%2F1143808467-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Forganizations%252FDhUg3jal6kdpG645FzIl%252Fsites%252Fsite_HeOmR%252Flogo%252FqxDYz8Oj2SnwUTa8t3UB%252FAeThex%2520Origin%2520logo.png%3Falt%3Dmedia%26token%3D200e8ea2-0129-4cbe-b516-4a53f60c512b&width=256&dpr=1&quality=100&sign=6c7576ce&sv=2"
                 alt="AeThex Logo"
-                className={`relative h-9 w-9 transition-all duration-300 ${
-                  isArmModalOpen ? "rotate-180 scale-85" : "rotate-0"
+                className={`relative h-8 w-8 transition-all duration-300 z-10 ${
+                  isArmModalOpen ? "rotate-180 scale-75" : "rotate-0"
                 }`}
               />
             </button>