@checkstack/theme-frontend 0.1.28 → 0.1.30

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @checkstack/theme-frontend
 
+## 0.1.30
+
+### Patch Changes
+
+- Updated dependencies [bb1fea0]
+- Updated dependencies [bb1fea0]
+  - @checkstack/ui@1.4.0
+  - @checkstack/auth-frontend@0.5.26
+
+## 0.1.29
+
+### Patch Changes
+
+- 4b0934d: Refactored UserMenu to use a responsive grid layout, improved menu item alignment, and implemented a full-screen scrollable portal for mobile devices. Fixed an issue where the UserMenu would instantly close and reopen when clicking the trigger while the menu was open.
+- Updated dependencies [4b0934d]
+  - @checkstack/ui@1.3.6
+  - @checkstack/auth-frontend@0.5.25
+
 ## 0.1.28
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/theme-frontend",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
@@ -14,9 +14,9 @@
   "dependencies": {
     "@checkstack/theme-common": "0.1.8",
     "@checkstack/frontend-api": "0.3.9",
-    "@checkstack/auth-frontend": "0.5.18",
+    "@checkstack/auth-frontend": "0.5.25",
     "@checkstack/common": "0.6.5",
-    "@checkstack/ui": "1.2.1",
+    "@checkstack/ui": "1.3.6",
     "react": "^18.2.0",
     "lucide-react": "^0.344.0"
   },

package/src/components/PerformanceToggleMenuItem.tsx

@@ -9,25 +9,27 @@ export const PerformanceToggleMenuItem = () => {
   const { manualLowPower, toggleManualLowPower } = usePerformance();
 
   return (
-    <div className="flex items-center justify-between w-full px-4 py-2 text-sm text-popover-foreground">
-      <div className="flex items-center gap-2">
-        {manualLowPower ? (
-          <ZapOff className="h-4 w-4 text-muted-foreground" />
-        ) : (
-          <Zap className="h-4 w-4 text-primary" />
-        )}
-        <div className="flex flex-col">
-          <span>Low Power Mode</span>
-          <span className="text-[10px] text-muted-foreground leading-tight">
-            Disables blurs & animations
-          </span>
+    <div className="flex items-center justify-between w-full px-4 py-2 text-sm text-popover-foreground hover:bg-accent hover:text-accent-foreground rounded-sm transition-colors">
+      <div className="flex flex-col flex-1 items-start">
+        <div className="flex items-center w-full">
+          {manualLowPower ? (
+            <ZapOff className="h-4 w-4 text-muted-foreground shrink-0 mr-3" />
+          ) : (
+            <Zap className="h-4 w-4 text-primary shrink-0 mr-3" />
+          )}
+          <span className="flex-1 text-left">Low Power Mode</span>
         </div>
+        <span className="text-[10px] text-muted-foreground mt-1 leading-tight text-left pl-7">
+          Disables blurs & animations
+        </span>
+      </div>
+      <div className="ml-2 shrink-0 flex items-center">
+        <Toggle
+          checked={manualLowPower}
+          onCheckedChange={toggleManualLowPower}
+          aria-label="Toggle low performance mode"
+        />
       </div>
-      <Toggle
-        checked={manualLowPower}
-        onCheckedChange={toggleManualLowPower}
-        aria-label="Toggle low performance mode"
-      />
     </div>
   );
 };

package/src/components/ThemeToggleMenuItem.tsx

@@ -47,17 +47,25 @@ export const ThemeToggleMenuItem = () => {
   };
 
   return (
-    <div className="flex items-center justify-between w-full px-4 py-2 text-sm text-popover-foreground">
-      <div className="flex items-center gap-2">
-        {isDark ? <Moon className="h-4 w-4" /> : <Sun className="h-4 w-4" />}
-        <span>Dark Mode</span>
+    <div className="flex items-center justify-between w-full px-4 py-2 text-sm text-popover-foreground hover:bg-accent hover:text-accent-foreground rounded-sm transition-colors">
+      <div className="flex flex-col flex-1 items-start">
+        <div className="flex items-center w-full">
+          {isDark ? (
+            <Moon className="h-4 w-4 text-muted-foreground shrink-0 mr-3" />
+          ) : (
+            <Sun className="h-4 w-4 text-muted-foreground shrink-0 mr-3" />
+          )}
+          <span className="flex-1 text-left">Dark Mode</span>
+        </div>
+      </div>
+      <div className="ml-2 shrink-0 flex items-center">
+        <Toggle
+          checked={isDark}
+          onCheckedChange={handleToggle}
+          disabled={setThemeMutation.isPending}
+          aria-label="Toggle dark mode"
+        />
       </div>
-      <Toggle
-        checked={isDark}
-        onCheckedChange={handleToggle}
-        disabled={setThemeMutation.isPending}
-        aria-label="Toggle dark mode"
-      />
     </div>
   );
 };