ui(web): Reduce shadows, lighten some fonts, and a smaller editor. #1261

5 files changed, 20 insertions, 13 deletions

diff --git a/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx b/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
index be061148..a0437c71 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
@@ -46,7 +46,7 @@ function BottomRow({
 }) {
   return (
     <div className="justify flex w-full shrink-0 justify-between text-gray-500">
-      <div className="flex items-center gap-2 overflow-hidden text-nowrap">
+      <div className="flex items-center gap-2 overflow-hidden text-nowrap font-light">
         {footer && <>{footer}•</>}
         <Link
           href={`/dashboard/preview/${bookmark.id}`}
@@ -122,7 +122,7 @@ function ListView({
   return (
     <div
       className={cn(
-        "relative flex max-h-96 gap-4 overflow-hidden rounded-lg p-2 shadow-md",
+        "relative flex max-h-96 gap-4 overflow-hidden rounded-lg p-2",
         className,
       )}
     >
@@ -167,7 +167,7 @@ function GridView({
   return (
     <div
       className={cn(
-        "relative flex flex-col overflow-hidden rounded-lg shadow-md",
+        "relative flex flex-col overflow-hidden rounded-lg",
         className,
         fitHeight && layout != "grid" ? "max-h-96" : "h-96",
       )}
@@ -200,7 +200,7 @@ function CompactView({ bookmark, title, footer, className }: Props) {
   return (
     <div
       className={cn(
-        "relative flex flex-col overflow-hidden rounded-lg shadow-md",
+        "relative flex flex-col overflow-hidden rounded-lg",
         className,
         "max-h-96",
       )}
diff --git a/apps/web/components/dashboard/bookmarks/EditorCard.tsx b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
index 1938fdec..75745bad 100644
--- a/apps/web/components/dashboard/bookmarks/EditorCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
@@ -148,7 +148,7 @@ export default function EditorCard({ className }: { className?: string }) {
   };
   const cardHeight = useBookmarkLayoutSwitch({
     grid: "h-96",
-    masonry: "h-96",
+    masonry: "h-48",
     list: undefined,
     compact: undefined,
   });
@@ -195,10 +195,10 @@ export default function EditorCard({ className }: { className?: string }) {
               ref={inputRef}
               disabled={isPending}
               className={cn(
-                "h-full w-full border-none p-0 text-lg focus-visible:ring-0",
+                "text-md h-full w-full border-none p-0 font-light focus-visible:ring-0",
                 { "resize-none": bookmarkLayout !== "list" },
               )}
-              placeholder={t("editor.placeholder")}
+              placeholder={t("editor.placeholder_v2")}
               onKeyDown={(e) => {
                 if (demoMode) {
                   return;
@@ -218,7 +218,12 @@ export default function EditorCard({ className }: { className?: string }) {
             />
           </FormControl>
         </FormItem>
-        <ActionButton loading={isPending} type="submit" variant="default">
+        <ActionButton
+          disabled={!form.formState.dirtyFields.text}
+          loading={isPending}
+          type="submit"
+          variant="secondary"
+        >
           {form.formState.dirtyFields.text
             ? demoMode
               ? t("editor.disabled_submissions")
diff --git a/apps/web/components/dashboard/bookmarks/TagList.tsx b/apps/web/components/dashboard/bookmarks/TagList.tsx
index 49a1156c..593a269b 100644
--- a/apps/web/components/dashboard/bookmarks/TagList.tsx
+++ b/apps/web/components/dashboard/bookmarks/TagList.tsx
@@ -29,8 +29,8 @@ export default function TagList({
           <Link
             key={t.id}
             className={cn(
-              badgeVariants({ variant: "outline" }),
-              "text-nowrap font-normal hover:bg-foreground hover:text-secondary",
+              badgeVariants({ variant: "secondary" }),
+              "text-nowrap font-light text-gray-700 hover:bg-foreground hover:text-secondary dark:text-gray-400",
             )}
             href={`/dashboard/tags/${t.id}`}
           >
diff --git a/apps/web/components/dashboard/search/SearchInput.tsx b/apps/web/components/dashboard/search/SearchInput.tsx
index 5e46fc18..c58542bf 100644
--- a/apps/web/components/dashboard/search/SearchInput.tsx
+++ b/apps/web/components/dashboard/search/SearchInput.tsx
@@ -6,6 +6,7 @@ import { Input } from "@/components/ui/input";
 import { useDoBookmarkSearch } from "@/lib/hooks/bookmark-search";
 import { useTranslation } from "@/lib/i18n/client";
 import { cn } from "@/lib/utils";
+import { SearchIcon } from "lucide-react";
 
 import { EditListModal } from "../lists/EditListModal";
 import QueryExplainerTooltip from "./QueryExplainerTooltip";
@@ -99,6 +100,7 @@ const SearchInput = React.forwardRef<
           </Button>
         )}
       <Input
+        startIcon={SearchIcon}
         ref={inputRef}
         value={value}
         onChange={onChange}
diff --git a/apps/web/components/dashboard/sidebar/AllLists.tsx b/apps/web/components/dashboard/sidebar/AllLists.tsx
index 823f439f..8296dafa 100644
--- a/apps/web/components/dashboard/sidebar/AllLists.tsx
+++ b/apps/web/components/dashboard/sidebar/AllLists.tsx
@@ -9,7 +9,7 @@ import { Button } from "@/components/ui/button";
 import { CollapsibleTriggerTriangle } from "@/components/ui/collapsible";
 import { useTranslation } from "@/lib/i18n/client";
 import { cn } from "@/lib/utils";
-import { MoreHorizontal, Plus } from "lucide-react";
+import { CirclePlus, MoreHorizontal } from "lucide-react";
 
 import type { ZBookmarkList } from "@karakeep/shared/types/lists";
 import { ZBookmarkListTreeNode } from "@karakeep/shared/utils/listUtils";
@@ -34,11 +34,11 @@ export default function AllLists({
 
   return (
     <ul className="max-h-full gap-y-2 overflow-auto text-sm">
-      <li className="flex justify-between pb-2 font-bold">
+      <li className="flex justify-between pb-3 font-bold">
         <p>Lists</p>
         <EditListModal>
           <Link href="#">
-            <Plus />
+            <CirclePlus className="mr-4 size-5" strokeWidth={1.5} />
           </Link>
         </EditListModal>
       </li>