Merge branch 'dev' into feat/global-refresh-indicator

packages/widgets/src/bookmarks/component.tsx

@@ -56,6 +56,7 @@ export default function BookmarksWidget({ options, itemId }: WidgetComponentProp
           hideIcon={options.hideIcon}
           hideHostname={options.hideHostname}
           openNewTab={options.openNewTab}
+          withBorder={options.withBorder}
           hasIconColor={board.iconColor !== null}
         />
       )}
@@ -67,6 +68,7 @@ export default function BookmarksWidget({ options, itemId }: WidgetComponentProp
           hideIcon={options.hideIcon}
           hideHostname={options.hideHostname}
           openNewTab={options.openNewTab}
+          withBorder={options.withBorder}
           hasIconColor={board.iconColor !== null}
         />
       )}
@@ -81,6 +83,7 @@ interface FlexLayoutProps {
   hideIcon: boolean;
   hideHostname: boolean;
   openNewTab: boolean;
+  withBorder: boolean;
   hasIconColor: boolean;
 }
 
@@ -91,6 +94,7 @@ const FlexLayout = ({
   hideIcon,
   hideHostname,
   openNewTab,
+  withBorder,
   hasIconColor,
 }: FlexLayoutProps) => {
   const board = useRequiredBoard();
@@ -106,7 +110,15 @@ const FlexLayout = ({
             key={app.id}
             w="100%"
           >
-            <Card radius={board.itemRadius} className={classes.card} w="100%" display="flex" p={4} h="100%">
+            <Card
+              radius={board.itemRadius}
+              className={classes.card}
+              w="100%"
+              display="flex"
+              p={4}
+              h="100%"
+              withBorder={withBorder}
+            >
               {direction === "row" ? (
                 <VerticalItem
                   app={app}
@@ -138,6 +150,7 @@ interface GridLayoutProps {
   hideIcon: boolean;
   hideHostname: boolean;
   openNewTab: boolean;
+  withBorder: boolean;
   itemDirection: "horizontal" | "vertical";
   hasIconColor: boolean;
 }
@@ -148,6 +161,7 @@ const GridLayout = ({
   hideIcon,
   hideHostname,
   openNewTab,
+  withBorder,
   itemDirection,
   hasIconColor,
 }: GridLayoutProps) => {
@@ -168,6 +182,7 @@ const GridLayout = ({
             h="100%"
             className={combineClasses(classes.card, classes["card-grid"])}
             radius={board.itemRadius}
+            withBorder={withBorder}
             p="xs"
           >
             {itemDirection === "horizontal" ? (

packages/widgets/src/bookmarks/index.tsx

@@ -24,6 +24,7 @@ export const { definition, componentLoader } = createWidgetDefinition("bookmarks
       hideIcon: factory.switch({ defaultValue: false }),
       hideHostname: factory.switch({ defaultValue: false }),
       openNewTab: factory.switch({ defaultValue: true }),
+      withBorder: factory.switch({ defaultValue: false }),
       items: factory.sortableItemList<RouterOutputs["app"]["all"][number], string>({
         ItemComponent: ({ item, handle: Handle, removeItem, rootAttributes }) => {
           return (

packages/widgets/src/immich/server-stats/component.module.css

@@ -1,20 +1,10 @@
 .statItem {
   padding: 12px;
   border-radius: var(--mantine-radius-md);
-  background-color: var(--mantine-color-gray-0);
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
   transition: all 0.2s ease;
 
   &:hover {
-    background-color: var(--mantine-color-gray-1);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .statItem {
-    background-color: var(--mantine-color-dark-6);
-
-    &:hover {
-      background-color: var(--mantine-color-dark-5);
-    }
+    background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
   }
 }