chore: align colors

usememos · Nov 4, 2024 · 04c6e26 · 04c6e26
1 parent f310207
commit 04c6e26
Show file tree

Hide file tree

Showing 8 changed files with 235 additions and 82 deletions.
diff --git a/proto/gen/apidocs.swagger.yaml b/proto/gen/apidocs.swagger.yaml
diff --git a/web/package.json b/web/package.json
@@ -19,7 +19,7 @@
     "@mui/joy": "5.0.0-beta.48",
     "@radix-ui/react-popover": "^1.1.2",
     "@reduxjs/toolkit": "^2.3.0",
-    "@usememos/mui": "0.0.1-alpha.24",
+    "@usememos/mui": "0.0.1-alpha.25",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",

diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
diff --git a/web/src/components/ActivityCalendar.tsx b/web/src/components/ActivityCalendar.tsx
@@ -21,11 +21,11 @@ const getCellAdditionalStyles = (count: number, maxCount: number) => {
 
   const ratio = count / maxCount;
   if (ratio > 0.7) {
-    return "bg-teal-700 text-gray-100 dark:opacity-80";
+    return "bg-primary-darker text-gray-100 dark:opacity-80";
   } else if (ratio > 0.4) {
-    return "bg-teal-600 text-gray-100 dark:opacity-80";
+    return "bg-primary-dark text-gray-100 dark:opacity-80";
   } else {
-    return "bg-teal-500 text-gray-100 dark:opacity-70";
+    return "bg-primary text-gray-100 dark:opacity-70";
   }
 };
 

diff --git a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
@@ -98,9 +98,7 @@ const LocationSelector = (props: Props) => {
           <MapPinIcon className="w-5 h-5 mx-auto shrink-0" />
           {props.location && (
             <>
-              <span className="font-normal ml-0.5 text-ellipsis whitespace-nowrap overflow-hidden max-w-32">
-                {props.location.placeholder}
-              </span>
+              <span className="ml-0.5 text-sm text-ellipsis whitespace-nowrap overflow-hidden max-w-32">{props.location.placeholder}</span>
               <XIcon className="w-5 h-5 mx-auto shrink-0 hidden group-hover:block opacity-60 hover:opacity-80" onClick={removeLocation} />
             </>
           )}
@@ -111,21 +109,25 @@ const LocationSelector = (props: Props) => {
           <LeafletMap key={JSON.stringify(state.initilized)} latlng={state.position} onChange={onPositionChanged} />
           <div className="mt-2 w-full flex flex-row justify-between items-center gap-2">
             <div className="flex flex-row items-center justify-start gap-2">
-              {state.position && (
-                <span className="text-sm">
-                  [{state.position.lat.toFixed(2)}, {state.position.lng.toFixed(2)}]
-                </span>
-              )}
               <Input
                 placeholder="Choose a position first."
                 value={state.placeholder}
+                size="sm"
+                startDecorator={
+                  state.position && (
+                    <span className="text-xs opacity-60">
+                      [{state.position.lat.toFixed(2)}, {state.position.lng.toFixed(2)}]
+                    </span>
+                  )
+                }
                 disabled={!state.position}
                 onChange={(e) => setState((state) => ({ ...state, placeholder: e.target.value }))}
               />
             </div>
             <Button
               className="shrink-0"
               color="primary"
+              size="sm"
               onClick={() => {
                 props.onChange(
                   Location.fromPartial({

diff --git a/web/src/components/MemoEditor/ActionButton/TagSelector.tsx b/web/src/components/MemoEditor/ActionButton/TagSelector.tsx
@@ -46,15 +46,15 @@ const TagSelector = (props: Props) => {
           <HashIcon className="w-5 h-5 mx-auto" />
         </Button>
       </MenuButton>
-      <Menu className="relative text-sm" component="div" size="sm" placement="bottom-start">
+      <Menu className="relative" component="div" size="sm" placement="bottom-start">
         <div ref={containerRef}>
           {tags.length > 0 ? (
-            <div className="flex-row justify-start items-start flex-wrap px-1 max-w-[12rem] h-auto max-h-48 overflow-y-auto font-mono">
+            <div className="flex flex-row justify-start items-start flex-wrap px-3 py-1 max-w-[12rem] h-auto max-h-48 overflow-y-auto gap-x-2 gap-y-1">
               {tags.map((tag) => {
                 return (
                   <div
                     key={tag}
-                    className="inline-flex w-auto max-w-full cursor-pointer rounded text-sm leading-5 px-1 text-gray-500 dark:text-gray-400 hover:bg-zinc-100 dark:hover:bg-zinc-800"
+                    className="inline-flex w-auto max-w-full cursor-pointer text-base leading-6 text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary-dark"
                     onClick={() => handleTagClick(tag)}
                   >
                     <OverflowTip>#{tag}</OverflowTip>

diff --git a/web/src/components/ReactionView.tsx b/web/src/components/ReactionView.tsx
@@ -66,14 +66,15 @@ const ReactionView = (props: Props) => {
     <Tooltip title={stringifyUsers(users, reactionType)} placement="top">
       <div
         className={clsx(
-          "h-7 border px-2 py-0.5 rounded-full font-memo flex flex-row justify-center items-center gap-1 dark:border-zinc-700",
+          "h-7 border px-2 py-0.5 rounded-full flex flex-row justify-center items-center gap-1 dark:border-zinc-700",
+          "text-sm text-gray-600 dark:text-gray-400",
           currentUser && "cursor-pointer",
           hasReaction && "bg-blue-100 border-blue-200 dark:bg-zinc-900",
         )}
         onClick={handleReactionClick}
       >
         <span>{reactionType}</span>
-        <span className="text-sm text-gray-500 dark:text-gray-400">{users.length}</span>
+        <span className="opacity-60">{users.length}</span>
       </div>
     </Tooltip>
   );

diff --git a/web/tailwind.config.js b/web/tailwind.config.js
@@ -6,6 +6,28 @@ module.exports = {
   prefix: "",
   theme: {
     extend: {
+      colors: {
+        primary: {
+          DEFAULT: "#0d9488", // Teal 600
+          dark: "#0f766e", // Teal 700
+          darker: "#0d5a56", // Teal 800
+        },
+        success: {
+          DEFAULT: "#16a34a", // Green 600
+          dark: "#047857", // Green 700
+          darker: "#03664a", // Green 800
+        },
+        danger: {
+          DEFAULT: "#dc2626", // Red 600
+          dark: "#b91c1c", // Red 700
+          darker: "#991b1b", // Red 800
+        },
+        warning: {
+          DEFAULT: "#ca8a04", // Yellow 600
+          dark: "#b45309", // Yellow 700
+          darker: "#92400e", // Yellow 800
+        },
+      },
       spacing: {
         128: "32rem",
       },