chore: align colors

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",

web/pnpm-lock.yaml

@@ -39,8 +39,8 @@ importers:
         specifier: ^2.3.0
         version: 2.3.0(react-redux@9.1.2(@types/react@18.3.12)(react@18.3.1)(redux@5.0.1))(react@18.3.1)
       '@usememos/mui':
-        specifier: 0.0.1-alpha.24
-        version: 0.0.1-alpha.24(lucide-react@0.453.0(react@18.3.1))(postcss@8.4.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwind-merge@2.5.4)(tailwindcss@3.4.14)
+        specifier: 0.0.1-alpha.25
+        version: 0.0.1-alpha.25(lucide-react@0.453.0(react@18.3.1))(postcss@8.4.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwind-merge@2.5.4)(tailwindcss@3.4.14)
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.0
@@ -1409,8 +1409,8 @@ packages:
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
-  '@usememos/mui@0.0.1-alpha.24':
-    resolution: {integrity: sha512-4UAlapAs7UfgG3OkdvolgNBo1BCcaXhs3TeWw1UvEA7pwj6txzbIjqN8c6IHl+gYeMzoXBO2Ou7gnYD9OOtj5Q==}
+  '@usememos/mui@0.0.1-alpha.25':
+    resolution: {integrity: sha512-TjvhSgKRqXrDBPGJuojwjbBGLysiycvE+05UJlzmJ1OOQLO3UBYFc5F+iPHg5ok+7PEjWrt3tTubU76/kWsgBQ==}
     peerDependencies:
       lucide-react: ^0.453.0
       postcss: ^8.4.47
@@ -4645,7 +4645,7 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@usememos/mui@0.0.1-alpha.24(lucide-react@0.453.0(react@18.3.1))(postcss@8.4.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwind-merge@2.5.4)(tailwindcss@3.4.14)':
+  '@usememos/mui@0.0.1-alpha.25(lucide-react@0.453.0(react@18.3.1))(postcss@8.4.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwind-merge@2.5.4)(tailwindcss@3.4.14)':
     dependencies:
       lucide-react: 0.453.0(react@18.3.1)
       postcss: 8.4.47

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";
   }
 };
 

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,14 +109,17 @@ 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 }))}
               />
@@ -126,6 +127,7 @@ const LocationSelector = (props: Props) => {
             <Button
               className="shrink-0"
               color="primary"
+              size="sm"
               onClick={() => {
                 props.onChange(
                   Location.fromPartial({

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>

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>
   );

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",
       },