feat: use black as primary (#4702)

heyxyz · Mar 1, 2024 · 2d14d47 · 2d14d47 · vercel · Mar 1, 2024
2 parents bdf6a4f + 71fcdbf
commit 2d14d47
Show file tree

Hide file tree

Showing 129 changed files with 336 additions and 501 deletions.
diff --git a/apps/web/src/components/Bookmarks/Feed.tsx b/apps/web/src/components/Bookmarks/Feed.tsx
@@ -67,7 +67,7 @@ const Feed: FC<FeedProps> = ({ focus }) => {
   if (publications?.length === 0) {
     return (
       <EmptyState
-        icon={<BookmarkIcon className="text-brand-500 size-8" />}
+        icon={<BookmarkIcon className="size-8" />}
         message="No bookmarks yet!"
       />
     );

diff --git a/apps/web/src/components/Comment/Feed.tsx b/apps/web/src/components/Comment/Feed.tsx
@@ -98,7 +98,7 @@ const Feed: FC<FeedProps> = ({ isHidden, publicationId }) => {
   if (!isHidden && totalComments === 0) {
     return (
       <EmptyState
-        icon={<ChatBubbleLeftRightIcon className="text-brand-500 size-8" />}
+        icon={<ChatBubbleLeftRightIcon className="size-8" />}
         message="Be the first one to comment!"
       />
     );

diff --git a/apps/web/src/components/Composer/Actions/Attachment.tsx b/apps/web/src/components/Composer/Actions/Attachment.tsx
@@ -100,15 +100,15 @@ const Attachment: FC = () => {
       <Menu.Button
         aria-label="More"
         as={motion.button}
-        className="outline-brand-500 rounded-full outline-offset-8"
+        className="rounded-full outline-offset-8 outline-gray-500"
         onClick={() => setShowMenu(!showMenu)}
         whileTap={{ scale: 0.9 }}
       >
         {isUploading ? (
           <Spinner size="sm" />
         ) : (
           <Tooltip content="Media" placement="top">
-            <PhotoIcon className="text-brand-500 size-5" />
+            <PhotoIcon className="size-5" />
           </Tooltip>
         )}
       </Menu.Button>
@@ -129,7 +129,7 @@ const Attachment: FC = () => {
             disabled={disableImageUpload()}
             htmlFor={`image_${id}`}
           >
-            <PhotoIcon className="text-brand-500 size-4" />
+            <PhotoIcon className="size-4" />
             <span className="text-sm">Upload image(s)</span>
             <input
               accept={ImageMimeType.join(',')}
@@ -152,7 +152,7 @@ const Attachment: FC = () => {
             disabled={Boolean(attachments.length)}
             htmlFor={`video_${id}`}
           >
-            <VideoCameraIcon className="text-brand-500 size-4" />
+            <VideoCameraIcon className="size-4" />
             <span className="text-sm">Upload video</span>
             <input
               accept={VideoMimeType.join(',')}
@@ -174,7 +174,7 @@ const Attachment: FC = () => {
             disabled={Boolean(attachments.length)}
             htmlFor={`audio_${id}`}
           >
-            <MusicalNoteIcon className="text-brand-500 size-4" />
+            <MusicalNoteIcon className="size-4" />
             <span className="text-sm">Upload audio</span>
             <input
               accept={AudioMimeType.join(',')}

diff --git a/apps/web/src/components/Composer/Actions/CollectSettings/SplitConfig.tsx b/apps/web/src/components/Composer/Actions/CollectSettings/SplitConfig.tsx
@@ -140,7 +140,7 @@ const SplitConfig: FC<SplitConfigProps> = ({
                   }}
                   type="button"
                 >
-                  <XCircleIcon className="size-5 text-red-500" />
+                  <XCircleIcon className="size-5" />
                 </button>
               </div>
             ))}

diff --git a/apps/web/src/components/Composer/Actions/CollectSettings/index.tsx b/apps/web/src/components/Composer/Actions/CollectSettings/index.tsx
@@ -17,16 +17,16 @@ const CollectSettings: FC = () => {
       <Tooltip content="Collect" placement="top">
         <motion.button
           aria-label="Choose Collect Module"
-          className="outline-brand-500 rounded-full outline-offset-8"
+          className="rounded-full outline-offset-8 outline-gray-500"
           onClick={() => setShowModal(!showModal)}
           type="button"
           whileTap={{ scale: 0.9 }}
         >
-          <RectangleStackIcon className="text-brand-500 size-5" />
+          <RectangleStackIcon className="size-5" />
         </motion.button>
       </Tooltip>
       <Modal
-        icon={<RectangleStackIcon className="text-brand-500 size-5" />}
+        icon={<RectangleStackIcon className="size-5" />}
         onClose={() => {
           setShowModal(false);
           reset();

diff --git a/apps/web/src/components/Composer/Actions/Gif/index.tsx b/apps/web/src/components/Composer/Actions/Gif/index.tsx
@@ -30,7 +30,7 @@ const Gif: FC<GiphyProps> = ({ setGifAttachment }) => {
       <Tooltip content="GIF" placement="top">
         <motion.button
           aria-label="Choose GIFs"
-          className="outline-brand-500 rounded-full outline-offset-8"
+          className="rounded-full outline-offset-8 outline-gray-500"
           disabled={attachments.length >= 4}
           onClick={() => {
             setShowModal(!showModal);
@@ -39,11 +39,11 @@ const Gif: FC<GiphyProps> = ({ setGifAttachment }) => {
           type="button"
           whileTap={{ scale: 0.9 }}
         >
-          <GifIcon className="text-brand-500 size-5" />
+          <GifIcon className="size-5" />
         </motion.button>
       </Tooltip>
       <Modal
-        icon={<PhotoIcon className="text-brand-500 size-5" />}
+        icon={<PhotoIcon className="size-5" />}
         onClose={() => setShowModal(false)}
         show={showModal}
         title="Select GIF"

diff --git a/apps/web/src/components/Composer/Actions/LivestreamSettings/LivestreamEditor.tsx b/apps/web/src/components/Composer/Actions/LivestreamSettings/LivestreamEditor.tsx
@@ -70,7 +70,7 @@ const LivestreamEditor: FC = () => {
     <Card className="m-5 px-5 py-3" forceRounded>
       <div className="flex items-center justify-between">
         <div className="flex items-center space-x-2 text-sm">
-          <VideoCameraIcon className="text-brand-500 size-4" />
+          <VideoCameraIcon className="size-4" />
           <b>Go Live</b>
         </div>
         <div className="flex items-center space-x-3">
@@ -139,7 +139,7 @@ const LivestreamEditor: FC = () => {
             type="button"
           >
             <Wrapper>
-              <SignalIcon className="text-brand-500 size-5" />
+              <SignalIcon className="size-5" />
               <div>Create Live Stream</div>
             </Wrapper>
           </button>
@@ -151,7 +151,7 @@ const LivestreamEditor: FC = () => {
               type="button"
             >
               <Wrapper>
-                <VideoCameraIcon className="text-brand-500 size-5" />
+                <VideoCameraIcon className="size-5" />
                 <div>Record</div>
               </Wrapper>
             </button>
@@ -161,7 +161,7 @@ const LivestreamEditor: FC = () => {
               type="button"
             >
               <Wrapper>
-                <VideoCameraSlashIcon className="text-brand-500 size-5" />
+                <VideoCameraSlashIcon className="size-5" />
                 <div>Don't Record</div>
               </Wrapper>
             </button>

diff --git a/apps/web/src/components/Composer/Actions/LivestreamSettings/index.tsx b/apps/web/src/components/Composer/Actions/LivestreamSettings/index.tsx
@@ -17,19 +17,20 @@ const LivestreamSettings: FC = () => {
   );
 
   return (
-    <Tooltip content="Go Live" placement="top">
-      <motion.button
-        aria-label="Go Live"
-        onClick={() => {
-          resetLiveVideoConfig();
-          setShowLiveVideoEditor(!showLiveVideoEditor);
-        }}
-        type="button"
-        whileTap={{ scale: 0.9 }}
-      >
-        <VideoCameraIcon className="text-brand-500 size-5" />
-      </motion.button>
-    </Tooltip>
+    <motion.button
+      aria-label="Go Live"
+      className="rounded-full outline-offset-8 outline-gray-500"
+      onClick={() => {
+        resetLiveVideoConfig();
+        setShowLiveVideoEditor(!showLiveVideoEditor);
+      }}
+      type="button"
+      whileTap={{ scale: 0.9 }}
+    >
+      <Tooltip content="Go Live" placement="top">
+        <VideoCameraIcon className="size-5" />
+      </Tooltip>
+    </motion.button>
   );
 };
 

diff --git a/apps/web/src/components/Composer/Actions/OpenActionSettings/OpenActionItem.tsx b/apps/web/src/components/Composer/Actions/OpenActionSettings/OpenActionItem.tsx
@@ -38,7 +38,7 @@ const OpenActionItem: FC<OpenActionItemProps> = ({
       onClick={() => onOpenActionSelected(type)}
     >
       <div className="flex items-center space-x-3">
-        <div className="text-brand-500">{icon}</div>
+        {icon}
         <div className="space-y-1">
           <div className="font-bold">{title}</div>
           <div className="text-sm">{description}</div>

diff --git a/apps/web/src/components/Composer/Actions/OpenActionSettings/index.tsx b/apps/web/src/components/Composer/Actions/OpenActionSettings/index.tsx
@@ -26,19 +26,17 @@ const OpenActionSettings: FC = () => {
       <Tooltip content="Open Action" placement="top">
         <motion.button
           aria-label="Choose Open Action"
-          className="outline-brand-500 rounded-full outline-offset-8"
+          className="rounded-full outline-offset-8 outline-gray-500"
           onClick={() => setShowModal(!showModal)}
           type="button"
           whileTap={{ scale: 0.9 }}
         >
-          <SquaresPlusIcon className="text-brand-500 size-5" />
+          <SquaresPlusIcon className="size-5" />
         </motion.button>
       </Tooltip>
       <Modal
         icon={
-          screen === ScreenType.List && (
-            <SquaresPlusIcon className="text-brand-500 size-5" />
-          )
+          screen === ScreenType.List && <SquaresPlusIcon className="size-5" />
         }
         onClose={() => {
           setShowModal(false);

diff --git a/apps/web/src/components/Composer/Actions/PollSettings/PollEditor.tsx b/apps/web/src/components/Composer/Actions/PollSettings/PollEditor.tsx
@@ -22,7 +22,7 @@ const PollEditor: FC = () => {
     <Card className="m-5 px-5 py-3" forceRounded>
       <div className="flex items-center justify-between">
         <div className="flex items-center space-x-2 text-sm">
-          <Bars3BottomLeftIcon className="text-brand-500 size-4" />
+          <Bars3BottomLeftIcon className="size-4" />
           <b>Poll</b>
         </div>
         <div className="flex items-center space-x-3">
@@ -31,12 +31,11 @@ const PollEditor: FC = () => {
             onClick={() => setShowPollLengthModal(true)}
             outline
             size="sm"
-            variant="primary"
           >
             {pollConfig.length} {plur('day', pollConfig.length)}
           </Button>
           <Modal
-            icon={<ClockIcon className="text-brand-500 size-5" />}
+            icon={<ClockIcon className="size-5" />}
             onClose={() => setShowPollLengthModal(false)}
             show={showPollLengthModal}
             title="Poll length"
@@ -70,7 +69,6 @@ const PollEditor: FC = () => {
                 <Button
                   className="ml-auto"
                   onClick={() => setShowPollLengthModal(false)}
-                  variant="primary"
                 >
                   Save
                 </Button>
@@ -122,7 +120,7 @@ const PollEditor: FC = () => {
         ))}
         {pollConfig.options.length !== 10 ? (
           <button
-            className="text-brand-500 mt-2 flex items-center space-x-2 text-sm"
+            className="mt-2 flex items-center space-x-2 text-sm"
             onClick={() => {
               const newOptions = [...pollConfig.options];
               newOptions.push('');

diff --git a/apps/web/src/components/Composer/Actions/PollSettings/index.tsx b/apps/web/src/components/Composer/Actions/PollSettings/index.tsx
@@ -20,15 +20,15 @@ const PollSettings: FC = () => {
     <Tooltip content="Poll" placement="top">
       <motion.button
         aria-label="Poll"
-        className="outline-brand-500 rounded-full outline-offset-8"
+        className="rounded-full outline-offset-8 outline-gray-500"
         onClick={() => {
           resetPollConfig();
           setShowPollEditor(!showPollEditor);
         }}
         type="button"
         whileTap={{ scale: 0.9 }}
       >
-        <Bars3BottomLeftIcon className="text-brand-500 size-5" />
+        <Bars3BottomLeftIcon className="size-5" />
       </motion.button>
     </Tooltip>
   );

diff --git a/apps/web/src/components/Composer/Actions/ReferenceSettings/index.tsx b/apps/web/src/components/Composer/Actions/ReferenceSettings/index.tsx
@@ -66,10 +66,10 @@ const ReferenceSettings: FC = () => {
     >
       <div className="flex items-center justify-between space-x-2">
         <div className="flex items-center space-x-1.5">
-          <div className="text-brand-500">{icon}</div>
+          {icon}
           <div>{title}</div>
         </div>
-        {selected ? <CheckCircleIcon className="w-5 text-green-500" /> : null}
+        {selected ? <CheckCircleIcon className="w-5" /> : null}
       </div>
     </Menu.Item>
   );
@@ -98,15 +98,13 @@ const ReferenceSettings: FC = () => {
       >
         <Menu.Button
           as={motion.button}
-          className="outline-brand-500 rounded-full outline-offset-8"
+          className="rounded-full outline-offset-8 outline-gray-500"
           whileTap={{ scale: 0.9 }}
         >
-          <div className="text-brand-500">
-            {isEveryone ? <GlobeAltIcon className="w-5" /> : null}
-            {isMyFollowers ? <UsersIcon className="w-5" /> : null}
-            {isMyFollows ? <UserPlusIcon className="w-5" /> : null}
-            {isFriendsOfFriends ? <UserGroupIcon className="w-5" /> : null}
-          </div>
+          {isEveryone ? <GlobeAltIcon className="w-5" /> : null}
+          {isMyFollowers ? <UsersIcon className="w-5" /> : null}
+          {isMyFollows ? <UserPlusIcon className="w-5" /> : null}
+          {isFriendsOfFriends ? <UserGroupIcon className="w-5" /> : null}
         </Menu.Button>
       </Tooltip>
       <MenuTransition>

diff --git a/apps/web/src/components/Composer/ChooseThumbnail.tsx b/apps/web/src/components/Composer/ChooseThumbnail.tsx
@@ -177,7 +177,7 @@ const ChooseThumbnail: FC = () => {
               />
               {ipfsUrl && isSelected && isUploaded ? (
                 <div className="absolute inset-0 grid place-items-center rounded-xl bg-gray-100/10">
-                  <CheckCircleIcon className="size-6 text-green-500" />
+                  <CheckCircleIcon className="size-6" />
                 </div>
               ) : null}
               {isUploading && isSelected && (

diff --git a/apps/web/src/components/Composer/Editor/index.tsx b/apps/web/src/components/Composer/Editor/index.tsx
@@ -4,7 +4,6 @@ import MentionsPlugin from '@components/Shared/Lexical/Plugins/AtMentionsPlugin'
 import LexicalAutoLinkPlugin from '@components/Shared/Lexical/Plugins/AutoLinkPlugin';
 import EmojiPickerPlugin from '@components/Shared/Lexical/Plugins/EmojiPicker';
 import ImagesPlugin from '@components/Shared/Lexical/Plugins/ImagesPlugin';
-import ToolbarPlugin from '@components/Shared/Lexical/Plugins/ToolbarPlugin';
 import { Errors } from '@hey/data/errors';
 import {
   $convertToMarkdownString,
@@ -71,14 +70,13 @@ const Editor: FC = () => {
   return (
     <div className="relative">
       <EmojiPickerPlugin />
-      <ToolbarPlugin />
       <RichTextPlugin
         contentEditable={
-          <ContentEditable className="my-4 block min-h-[65px] overflow-auto px-5 leading-6 sm:leading-[26px]" />
+          <ContentEditable className="my-4 block min-h-[75px] overflow-auto px-5 leading-6 sm:leading-[26px]" />
         }
         ErrorBoundary={() => <div>{Errors.SomethingWentWrong}</div>}
         placeholder={
-          <div className="pointer-events-none absolute top-[65px] whitespace-nowrap px-5 text-gray-400">
+          <div className="pointer-events-none absolute top-[1.5px] whitespace-nowrap px-5 text-gray-400">
             {showPollEditor ? 'Ask a question...' : "What's happening?"}
           </div>
         }