chore(dashboard): centering, color, style changes to version updating

Author: awisniew207

packages/apps/app-dashboard/src/components/user-dashboard/connect/ReturningUserConnect.tsx

@@ -197,19 +197,19 @@ export function ReturningUserConnect({
                 {/* Show Update Version button when version update is available */}
                 {version !== appData.activeVersion && (
                   <ActionCard
-                    icon={<RefreshCw className="w-4 h-4 text-orange-500" />}
+                    icon={<RefreshCw className="w-4 h-4" style={{ color: theme.brandOrange }} />}
                     iconBg="bg-orange-500/20"
                     title="Update to Latest Version"
-                    description=""
+                    description="Recommended - Get access to the latest features and improvements"
                     onClick={handleUpdateVersion}
                   />
                 )}
                 {/* Edit Parameters Option - Show when version is enabled */}
                 <ActionCard
-                  icon={<Settings className="w-4 h-4 text-gray-500" />}
-                  iconBg="bg-gray-500/20"
+                  icon={<Settings className="w-4 h-4" style={{ color: theme.brandOrange }} />}
+                  iconBg="bg-orange-500/20"
                   title="Edit Permissions"
-                  description=""
+                  description="Review or modify app permissions and settings"
                   onClick={handleEditParameters}
                 />
               </>
@@ -218,10 +218,10 @@ export function ReturningUserConnect({
             {/* Continue Option - Only show if version is enabled and not both versions disabled */}
             {!(versionData && !versionData.enabled) && (
               <ActionCard
-                icon={<ArrowRight className="w-4 h-4 text-orange-500" />}
+                icon={<ArrowRight className="w-4 h-4" style={{ color: theme.brandOrange }} />}
                 iconBg="bg-orange-500/20"
                 title={`Continue to ${appData.name}`}
-                description=""
+                description="Proceed with your current permissions"
                 onClick={handleContinue}
                 isLoading={isContinueLoading || isLoading || !!localSuccess}
                 loadingStatus={localSuccess || loadingStatus}

packages/apps/app-dashboard/src/components/user-dashboard/dashboard/UpdateVersionPage.tsx

@@ -163,7 +163,7 @@ export function UpdateVersionPage({
   const error = jwtError || actionsError;
 
   return (
-    <>
+    <div className="w-full flex flex-col">
       <Breadcrumb
         items={[
           {
@@ -174,7 +174,7 @@ export function UpdateVersionPage({
         ]}
       />
 
-      <div className="w-full max-w-md mx-auto relative z-10 flex items-center min-h-[calc(100vh-4rem)] -mt-32">
+      <div className="w-full max-w-md mx-auto relative z-10 flex items-center justify-center flex-1 py-8">
         <div
           className={`w-full ${theme.mainCard} border ${theme.mainCardBorder} rounded-2xl shadow-2xl overflow-hidden relative z-10 origin-center`}
         >
@@ -236,6 +236,6 @@ export function UpdateVersionPage({
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 }

packages/apps/app-dashboard/src/components/user-dashboard/dashboard/ui/AppPermissionDashboardHeader.tsx

@@ -145,23 +145,30 @@ export function AppPermissionDashboardHeader({
         {versionStatus.warningType === 'yellow' ? (
           <button
             onClick={() => navigate(`/user/appId/${app.appId}/update-version`)}
-            className={`backdrop-blur-xl ${theme.itemBg} border ${theme.cardBorder} hover:border-orange-500 rounded-lg p-2.5 sm:p-3 lg:p-4 hover:${theme.itemHoverBg} transition-all w-full text-left`}
+            className={`backdrop-blur-xl ${theme.itemBg} border-2 rounded-lg p-2.5 sm:p-3 lg:p-4 hover:${theme.itemHoverBg} transition-all w-full text-left animate-pulse hover:animate-none`}
+            style={{ borderColor: theme.brandOrange }}
           >
             <div className="flex items-center gap-2 sm:gap-3">
-              <div className={`p-1.5 sm:p-2 rounded-lg ${versionStatus.bgColor} flex-shrink-0`}>
-                <TriangleAlert className={`w-4 h-4 sm:w-5 sm:h-5 ${versionStatus.statusColor}`} />
+              <div
+                className={`p-1.5 sm:p-2 rounded-lg flex-shrink-0`}
+                style={{ backgroundColor: 'rgba(255, 66, 5, 0.2)' }}
+              >
+                <TriangleAlert
+                  className={`w-4 h-4 sm:w-5 sm:h-5`}
+                  style={{ color: theme.brandOrange }}
+                />
               </div>
               <div className="flex-1 min-w-0">
                 <p
-                  className={`text-sm font-semibold ${versionStatus.statusColor} leading-tight flex items-center gap-1.5`}
-                  style={fonts.heading}
+                  className={`text-sm font-semibold leading-tight flex items-center gap-1.5`}
+                  style={{ ...fonts.heading, color: theme.brandOrange }}
                 >
                   {versionStatus.statusText}
                   <span className="text-lg relative -top-1">→</span>
                 </p>
                 <p
-                  className={`text-[10px] sm:text-xs ${theme.textMuted} mt-0.5 leading-tight line-clamp-2`}
-                  style={fonts.body}
+                  className={`text-[10px] sm:text-xs mt-0.5 leading-tight line-clamp-2`}
+                  style={{ ...fonts.body, color: theme.brandOrange, opacity: 0.8 }}
                   title={versionStatus.detailText}
                 >
                   {versionStatus.detailText}