From cd632f295d896100207e1b02bfeb574175c07633 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sun, 20 Apr 2025 23:49:24 +0000
Subject: ui(web): Reduce shadows, lighten some fonts, and a smaller editor.
 #1261

---
 .../bookmarks/BookmarkLayoutAdaptingCard.tsx       |  8 ++---
 .../components/dashboard/bookmarks/EditorCard.tsx  | 13 ++++---
 .../web/components/dashboard/bookmarks/TagList.tsx |  4 +--
 .../components/dashboard/search/SearchInput.tsx    |  2 ++
 apps/web/components/dashboard/sidebar/AllLists.tsx |  6 ++--
 apps/web/components/ui/info-tooltip.tsx            |  2 +-
 apps/web/components/ui/input.tsx                   | 42 ++++++++++++++++------
 7 files changed, 53 insertions(+), 24 deletions(-)

(limited to 'apps/web/components')

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>
diff --git a/apps/web/components/ui/info-tooltip.tsx b/apps/web/components/ui/info-tooltip.tsx
index 0254aa80..4dd97199 100644
--- a/apps/web/components/ui/info-tooltip.tsx
+++ b/apps/web/components/ui/info-tooltip.tsx
@@ -23,7 +23,7 @@ export default function InfoTooltip({
         {variant === "tip" ? (
           <Info
             color="#494949"
-            className={cn("cursor-pointer", className)}
+            className={cn("z-10 cursor-pointer", className)}
             size={size}
           />
         ) : (
diff --git a/apps/web/components/ui/input.tsx b/apps/web/components/ui/input.tsx
index 5543446c..09f9def9 100644
--- a/apps/web/components/ui/input.tsx
+++ b/apps/web/components/ui/input.tsx
@@ -1,20 +1,42 @@
 import * as React from "react";
 import { cn } from "@/lib/utils";
+import { LucideIcon } from "lucide-react";
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  startIcon?: LucideIcon;
+  endIcon?: LucideIcon;
+}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
+  ({ className, type, startIcon, endIcon, ...props }, ref) => {
+    const StartIcon = startIcon;
+    const EndIcon = endIcon;
+
     return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className,
+      <div className="relative w-full">
+        {StartIcon && (
+          <div className="absolute left-2 top-1/2 -translate-y-1/2 transform">
+            <StartIcon size={18} className="text-muted-foreground" />
+          </div>
+        )}
+        <input
+          type={type}
+          className={cn(
+            "flex h-10 w-full rounded-md border border-input bg-background px-4 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
+            startIcon ? "pl-8" : "",
+            endIcon ? "pr-8" : "",
+            className,
+          )}
+          ref={ref}
+          {...props}
+        />
+        {EndIcon && (
+          <div className="absolute right-3 top-1/2 -translate-y-1/2 transform">
+            <EndIcon className="text-muted-foreground" size={18} />
+          </div>
         )}
-        ref={ref}
-        {...props}
-      />
+      </div>
     );
   },
 );
-- 
cgit v1.2.3-70-g09d2