update settings app UI

fluid-design-io · Feb 24, 2025 · 98b43d5 · 98b43d5
1 parent 5fede5e
commit 98b43d5
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 36 deletions.
diff --git a/.changeset/fine-singers-drum.md b/.changeset/fine-singers-drum.md
diff --git a/.changeset/happy-tools-accept.md b/.changeset/happy-tools-accept.md
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # vision-pro-ui
 
+## 1.3.2
+
+### Patch Changes
+
+- c4de32a: update photos app, added unsplash images, matched ornament tabs & icons with VisionOS photos app.
+- 61efb6f: minor UI improvements
+- updated settings app to match VisionOS
+
 ## 1.3.1
 
 ### Patch Changes

diff --git a/app/(landing)/settings/page.tsx b/app/(landing)/settings/page.tsx
@@ -10,7 +10,6 @@ import {
   NavigationBarTitle,
 } from "@/components/core/navigation-bar";
 import { SidebarTrigger } from "@/components/core/sidebar";
-import View from "@/components/core/view";
 
 export const dynamic = "force-dynamic";
 
@@ -27,33 +26,44 @@ export default function Settings() {
         <List
           data={[
             {
-              id: "1",
-              title: "Personal Information",
+              id: "about",
+              title: "About",
+            },
+            "",
+            {
+              id: "autofill",
+              title: "AutoFill & Passwords",
+            },
+            {
+              id: "dictionary",
+              title: "Dictionary",
             },
             {
-              id: "2",
-              title: "Sign-in & Security",
+              id: "fonts",
+              title: "Fonts",
             },
             {
-              id: "3",
-              title: "Payment & Shipping",
+              id: "keyboard",
+              title: "Keyboard",
             },
             {
-              id: "4",
-              title: "Subscriptions",
+              id: "language-region",
+              title: "Language & Region",
             },
             "",
             {
-              id: "5",
-              title: "iCloud",
-              rightView: "50 GB",
-              detail: true,
+              id: "vpns",
+              title: "VPN & Device Management",
             },
+            "",
+            {
+              id: "remote-devices",
+              title: "Remote Devices",
+            },
+            "",
             {
-              id: "6",
-              title: "Family",
-              rightView: "Set Up",
-              detail: true,
+              id: "transfer-or-reset",
+              title: "Transfer or Reset Vision Pro",
             },
           ]}
           renderItem={renderItem}
@@ -70,11 +80,7 @@ function renderItem<T extends ListDataItem>(info: ListRenderItemProps<T>) {
   }
   return (
     <ListItem
-      leftView={
-        <div className="flex justify-center px-4">
-          <View className="aspect-square h-8 rounded-full" />
-        </div>
-      }
+      leftView={info.item.leftView}
       rightView={info.item.rightView}
       {...info}
     />

diff --git a/components/core/list.tsx b/components/core/list.tsx
@@ -178,6 +178,7 @@ function ListItem<T extends ListDataItem>({
             },
             "hover:bg-blend-color-dodge hover:[background:linear-gradient(0deg,rgba(94,94,94,0.18)0%,rgba(94,94,94,0.18)100%),rgba(255,255,255,0.07)]",
             "hover:[background-blend-mode:color-dodge,normal]",
+            !leftView && "pl-6",
             className,
           )}
         >
@@ -253,10 +254,10 @@ function ListSectionHeader<T extends ListDataItem>({
     );
   }
   return (
-    <div className={cn("w-full pb-4 pl-4 pt-4", className)}>
+    <div className={cn("w-full pt-4 pb-4 pl-4", className)}>
       <Text
         className={cn(
-          "text-left uppercase text-muted-foreground",
+          "text-muted-foreground text-left uppercase",
           textClassName,
         )}
         size="caption1"

diff --git a/components/core/sidebar.tsx b/components/core/sidebar.tsx
@@ -389,7 +389,7 @@ const sidebarMenuButtonVariants = cva(
       size: {
         default: "h-8 text-sm",
         sm: "h-7 text-xs",
-        lg: "h-14 group-data-[collapsible=icon]:!p-0",
+        lg: "h-14 group-data-[collapsible=icon]:!p-0 before:rounded-xl",
       },
     },
     defaultVariants: {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vision-pro-ui",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "scripts": {
     "build": "next build",
     "dev": "next dev -p 3080",