daangn · tonyfromundefined · Dec 16, 2024 · Dec 4, 2024 · Dec 10, 2024 · Dec 10, 2024
diff --git a/.changeset/fuzzy-cobras-joke.md b/.changeset/fuzzy-cobras-joke.md
@@ -0,0 +1,5 @@
+---
+"@stackflow/plugin-basic-ui": minor
+---
+
+Change to the latest AppBar style
diff --git a/demo/src/activities/Article.tsx b/demo/src/activities/Article.tsx
@@ -24,7 +24,7 @@ const Article: ActivityComponentType<"Article"> = ({ params }) => {
   const { imageUrl, recommenderCards } = useLoaderData<typeof articleLoader>();
 
   return (
-    <Layout appBar={{}}>
+    <Layout appBar={{ title }}>
       <div className={css.container}>
         <div className={css.image}>
           <div className={css.imageInner}>

diff --git a/demo/src/activities/Main.css.ts b/demo/src/activities/Main.css.ts
@@ -9,7 +9,6 @@ export const appBarLeft = style([
   {
     fontSize: "1.125rem",
     fontWeight: 700,
-    marginLeft: ".5rem",
   },
 ]);
 
@@ -25,7 +24,6 @@ export const appBarRight = style([
     display: "grid",
     gridTemplateColumns: "1.5rem 1.5rem",
     gap: "1rem",
-    marginRight: ".5rem",
   },
 ]);
 

diff --git a/extensions/plugin-basic-ui/src/assets/IconBack.tsx b/extensions/plugin-basic-ui/src/assets/IconBack.tsx
@@ -10,7 +10,9 @@ const IconBack: React.FC<{
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M16.66 3.23C16.96 3.53 16.96 4.02 16.66 4.32L8.97999 12L16.66 19.68C16.96 19.98 16.96 20.47 16.66 20.77C16.36 21.07 15.87 21.07 15.57 20.77L7.33999 12.55C7.03999 12.25 7.03999 11.76 7.33999 11.46L15.56 3.23C15.86 2.93 16.35 2.93 16.65 3.23H16.66Z"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16.7241 2.76052C17.105 3.16043 17.0896 3.79341 16.6897 4.17431L8.45 12.0222L16.6896 19.8689C17.0896 20.2498 17.105 20.8827 16.7242 21.2827C16.3433 21.6826 15.7103 21.6981 15.3104 21.3172L6.31037 12.7464C6.11218 12.5576 6.00001 12.2959 6 12.0222C5.99999 11.7486 6.11215 11.4868 6.31032 11.2981L15.3103 2.72608C15.7102 2.34518 16.3432 2.3606 16.7241 2.76052Z"
       fill="currentColor"
     />
   </svg>

diff --git a/extensions/plugin-basic-ui/src/assets/IconClose.tsx b/extensions/plugin-basic-ui/src/assets/IconClose.tsx
@@ -10,11 +10,7 @@ const IconClose: React.FC<{
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z"
-      fill="currentColor"
-    />
-    <path
-      d="M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z"
+      d="M20.7071 4.70711C21.0976 4.31658 21.0976 3.68342 20.7071 3.29289C20.3166 2.90237 19.6834 2.90237 19.2929 3.29289L12 10.5858L4.70711 3.29289C4.31658 2.90237 3.68342 2.90237 3.29289 3.29289C2.90237 3.68342 2.90237 4.31658 3.29289 4.70711L10.5858 12L3.29289 19.2929C2.90237 19.6834 2.90237 20.3166 3.29289 20.7071C3.68342 21.0976 4.31658 21.0976 4.70711 20.7071L12 13.4142L19.2929 20.7071C19.6834 21.0976 20.3166 21.0976 20.7071 20.7071C21.0976 20.3166 21.0976 19.6834 20.7071 19.2929L13.4142 12L20.7071 4.70711Z"
       fill="currentColor"
     />
   </svg>

diff --git a/extensions/plugin-basic-ui/src/components/AppBar.css.ts b/extensions/plugin-basic-ui/src/components/AppBar.css.ts
@@ -138,6 +138,11 @@ export const container = style([
     transition: transitions({
       height: globalVars.appBar.heightTransitionDuration,
     }),
+    selectors: {
+      [`${android} &`]: {
+        padding: "0 1rem",
+      },
+    },
   },
 ]);
 
@@ -146,10 +151,18 @@ export const left = style([
   f.fullHeight,
   appBarMinHeight,
   {
-    padding: "0 0.5rem",
     ":empty": {
       display: "none",
     },
+    selectors: {
+      [`${android} &`]: {
+        paddingRight: "1rem",
+      },
+      [`${cupertino} &`]: {
+        paddingLeft: "1rem",
+        paddingRight: "1rem",
+      },
+    },
   },
 ]);
 
@@ -164,8 +177,8 @@ export const backButton = style([
       opacity: "300ms",
       color: globalVars.appBar.iconColorTransitionDuration,
     }),
-    width: "2.25rem",
-    height: "2.75rem",
+    padding: ".5rem",
+    margin: "-.5rem",
     ":active": {
       opacity: "0.2",
       transition: transitions({
@@ -180,52 +193,38 @@ export const closeButton = style([backButton]);
 
 export const center = style([f.flexAlignCenter, f.flex1, appBarMinHeight]);
 
-export const centerMain = recipe({
-  base: {
-    width: vars.appBar.center.mainWidth,
-    color: globalVars.appBar.textColor,
-    transition: transitions({
-      height: globalVars.appBar.heightTransitionDuration,
-      color: globalVars.appBar.textColorTransitionDuration,
-    }),
-    selectors: {
-      [`${android} &`]: {
-        width: "100%",
-        justifyContent: "flex-start",
-        paddingLeft: "1rem",
-        fontSize: "1.1875rem",
-        lineHeight: "1.5",
-        fontWeight: "bold",
-        boxSizing: "border-box",
-      },
-      [`${cupertino} &`]: {
-        position: "absolute",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        textAlign: "center",
-        fontFamily: "-apple-system, BlinkMacSystemFont",
-        fontWeight: 600,
-        fontSize: "1rem",
-        left: "50%",
-        transform: "translate(-50%)",
-        height: globalVars.appBar.height,
-        top: [
-          `max(${globalVars.appBar.minSafeAreaInsetTop}, constant(safe-area-inset-top))`,
-          `max(${globalVars.appBar.minSafeAreaInsetTop}, env(safe-area-inset-top))`,
-        ],
-      },
+export const centerMain = style({
+  width: vars.appBar.center.mainWidth,
+  color: globalVars.appBar.textColor,
+  transition: transitions({
+    height: globalVars.appBar.heightTransitionDuration,
+    color: globalVars.appBar.textColorTransitionDuration,
+  }),
+  selectors: {
+    [`${android} &`]: {
+      width: "100%",
+      justifyContent: "flex-start",
+      fontSize: "1.125rem",
+      lineHeight: "1.5",
+      fontWeight: "bold",
+      boxSizing: "border-box",
     },
-  },
-  variants: {
-    hasLeft: {
-      true: {
-        selectors: {
-          [`${android} &`]: {
-            paddingLeft: "0.375rem",
-          },
-        },
-      },
+    [`${cupertino} &`]: {
+      position: "absolute",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+      fontFamily: "-apple-system, BlinkMacSystemFont",
+      fontWeight: "bold",
+      fontSize: "1.125rem",
+      left: "50%",
+      transform: "translate(-50%)",
+      height: globalVars.appBar.height,
+      top: [
+        `max(${globalVars.appBar.minSafeAreaInsetTop}, constant(safe-area-inset-top))`,
+        `max(${globalVars.appBar.minSafeAreaInsetTop}, env(safe-area-inset-top))`,
+      ],
     },
   },
 });
@@ -267,14 +266,17 @@ export const right = style([
   f.posRel,
   appBarMinHeight,
   {
-    padding: "0 0.5rem",
     marginLeft: "auto",
     ":empty": {
       display: "none",
     },
     selectors: {
       [`${android} &`]: {
-        padding: "0 0.5rem 0 0",
+        paddingLeft: "1rem",
+      },
+      [`${cupertino} &`]: {
+        paddingLeft: "1rem",
+        paddingRight: "1rem",
       },
     },
   },

diff --git a/extensions/plugin-basic-ui/src/components/AppBar.tsx b/extensions/plugin-basic-ui/src/components/AppBar.tsx
@@ -1,11 +1,10 @@
 import { useActions } from "@stackflow/react";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { forwardRef, useRef } from "react";
-
 import {
   useAppBarTitleMaxWidth,
   useNullableActivity,
 } from "@stackflow/react-ui-core";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { forwardRef, useRef } from "react";
 import { IconBack, IconClose } from "../assets";
 import { useGlobalOptions } from "../basicUIPlugin";
 import type { GlobalVars } from "../basicUIPlugin.css";
@@ -262,12 +261,6 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
       );
     };
 
-    const hasLeft = !!(
-      (closeButtonLocation === "left" && closeButton) ||
-      backButton ||
-      renderLeft
-    );
-
     return (
       <div
         ref={ref}
@@ -308,11 +301,7 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
             {renderLeft?.()}
           </div>
           <div ref={centerRef} className={css.center}>
-            <div
-              className={css.centerMain({
-                hasLeft,
-              })}
-            >
+            <div className={css.centerMain}>
               {typeof title === "string" ? (
                 <div className={css.centerText}>{title}</div>
               ) : (