From 37afa42255fb82b237a73b69ae34c79b246d834f Mon Sep 17 00:00:00 2001
From: bigint <69431456+bigint@users.noreply.github.com>
Date: Fri, 1 Mar 2024 16:26:11 +0530
Subject: [PATCH] feat: use black as primary

---
 .../Composer/Actions/PollSettings/PollEditor.tsx  |  2 --
 .../src/components/Composer/ChooseThumbnail.tsx   |  2 +-
 apps/web/src/components/Notification/Profile.tsx  |  2 +-
 apps/web/src/components/Pages/Privacy.tsx         |  2 +-
 apps/web/src/components/Pages/Rules.tsx           |  2 +-
 apps/web/src/components/Pages/Terms.tsx           |  2 +-
 apps/web/src/components/Pages/Thanks.tsx          |  2 +-
 apps/web/src/components/Profile/Details.tsx       |  2 +-
 .../components/Publication/PublicationProfile.tsx |  2 +-
 .../components/Settings/Account/RateLimits.tsx    |  2 +-
 .../src/components/Settings/Export/Followers.tsx  |  6 ++++--
 .../src/components/Settings/Export/Following.tsx  |  6 ++++--
 .../components/Settings/Export/Notifications.tsx  |  6 ++++--
 .../src/components/Settings/Export/Profile.tsx    |  6 ++++--
 .../components/Settings/Export/Publications.tsx   |  6 ++++--
 .../web/src/components/Settings/Export/Tokens.tsx | 12 ++++++------
 apps/web/src/components/Shared/Audio/index.tsx    |  6 ++----
 apps/web/src/styles.css                           | 15 ---------------
 packages/ui/src/Button.tsx                        | 10 ++--------
 19 files changed, 39 insertions(+), 54 deletions(-)

diff --git a/apps/web/src/components/Composer/Actions/PollSettings/PollEditor.tsx b/apps/web/src/components/Composer/Actions/PollSettings/PollEditor.tsx
index f201f989e6a8..c8bb4a09243f 100644
--- a/apps/web/src/components/Composer/Actions/PollSettings/PollEditor.tsx
+++ b/apps/web/src/components/Composer/Actions/PollSettings/PollEditor.tsx
@@ -31,7 +31,6 @@ const PollEditor: FC = () => {
             onClick={() => setShowPollLengthModal(true)}
             outline
             size="sm"
-            variant="primary"
           >
             {pollConfig.length} {plur('day', pollConfig.length)}
           </Button>
@@ -70,7 +69,6 @@ const PollEditor: FC = () => {
                 <Button
                   className="ml-auto"
                   onClick={() => setShowPollLengthModal(false)}
-                  variant="primary"
                 >
                   Save
                 </Button>
diff --git a/apps/web/src/components/Composer/ChooseThumbnail.tsx b/apps/web/src/components/Composer/ChooseThumbnail.tsx
index cc7bb7281590..5d535ec73bab 100644
--- 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/Notification/Profile.tsx b/apps/web/src/components/Notification/Profile.tsx
index 802336ce4c67..f456347cc5ac 100644
--- a/apps/web/src/components/Notification/Profile.tsx
+++ b/apps/web/src/components/Notification/Profile.tsx
@@ -53,7 +53,7 @@ export const NotificationProfileName: FC<NotificationProfileProps> = ({
           <CheckBadgeIcon className="text-brand-500 size-4" />
         ) : null}
         {hasMisused(profile.id) ? (
-          <ExclamationCircleIcon className="size-4 text-red-500" />
+          <ExclamationCircleIcon className="size-4" />
         ) : null}
       </Link>
     </UserPreview>
diff --git a/apps/web/src/components/Pages/Privacy.tsx b/apps/web/src/components/Pages/Privacy.tsx
index e5035c76b58f..2f71496b1b39 100644
--- a/apps/web/src/components/Pages/Privacy.tsx
+++ b/apps/web/src/components/Pages/Privacy.tsx
@@ -16,7 +16,7 @@ const Privacy: NextPage = () => {
 
   return (
     <>
-      <div className="bg-brand-400 flex h-48 w-full items-center justify-center">
+      <div className="flex h-48 w-full items-center justify-center bg-gray-400">
         <div className="relative text-center">
           <h1 className="text-3xl font-bold text-white md:text-4xl">
             Privacy Policy
diff --git a/apps/web/src/components/Pages/Rules.tsx b/apps/web/src/components/Pages/Rules.tsx
index a00bfe8daea4..e5d265763220 100644
--- a/apps/web/src/components/Pages/Rules.tsx
+++ b/apps/web/src/components/Pages/Rules.tsx
@@ -14,7 +14,7 @@ const Rules: NextPage = () => {
 
   return (
     <>
-      <div className="bg-brand-400 flex h-48 w-full items-center justify-center">
+      <div className="flex h-48 w-full items-center justify-center bg-gray-400">
         <div className="relative text-center">
           <h1 className="text-3xl font-bold text-white md:text-4xl">Rules</h1>
         </div>
diff --git a/apps/web/src/components/Pages/Terms.tsx b/apps/web/src/components/Pages/Terms.tsx
index 0ad5b98e9095..7a170419df22 100644
--- a/apps/web/src/components/Pages/Terms.tsx
+++ b/apps/web/src/components/Pages/Terms.tsx
@@ -15,7 +15,7 @@ const Terms: NextPage = () => {
 
   return (
     <>
-      <div className="bg-brand-400 flex h-48 w-full items-center justify-center">
+      <div className="flex h-48 w-full items-center justify-center bg-gray-400">
         <div className="relative text-center">
           <h1 className="text-3xl font-bold text-white md:text-4xl">
             Terms & Conditions
diff --git a/apps/web/src/components/Pages/Thanks.tsx b/apps/web/src/components/Pages/Thanks.tsx
index 52373b419d95..379ecd674143 100644
--- a/apps/web/src/components/Pages/Thanks.tsx
+++ b/apps/web/src/components/Pages/Thanks.tsx
@@ -54,7 +54,7 @@ const Brand: FC<BrandProps> = ({ children, logo, name, size, type, url }) => {
 const Thanks: NextPage = () => {
   return (
     <>
-      <div className="bg-brand-400 flex h-48 w-full items-center justify-center">
+      <div className="flex h-48 w-full items-center justify-center bg-gray-400">
         <div className="relative text-center">
           <div className="flex items-center space-x-2 text-3xl font-bold text-white md:text-4xl">
             <div>Thank you!</div>
diff --git a/apps/web/src/components/Profile/Details.tsx b/apps/web/src/components/Profile/Details.tsx
index 2ddf4c69f4b8..98078ad0c2ee 100644
--- a/apps/web/src/components/Profile/Details.tsx
+++ b/apps/web/src/components/Profile/Details.tsx
@@ -111,7 +111,7 @@ const Details: FC<DetailsProps> = ({ profile }) => {
           <TbaBadge address={profile.ownedBy.address} />
           {hasMisused(profile.id) ? (
             <Tooltip content={misuseDetails?.type}>
-              <ExclamationCircleIcon className="size-6 text-red-500" />
+              <ExclamationCircleIcon className="size-6" />
             </Tooltip>
           ) : null}
         </div>
diff --git a/apps/web/src/components/Publication/PublicationProfile.tsx b/apps/web/src/components/Publication/PublicationProfile.tsx
index 96870269dfa7..6e5d1b071a53 100644
--- a/apps/web/src/components/Publication/PublicationProfile.tsx
+++ b/apps/web/src/components/Publication/PublicationProfile.tsx
@@ -55,7 +55,7 @@ const PublicationProfile: FC<FeedUserProfileProps> = ({
         <CheckBadgeIcon className="text-brand-500 ml-1 size-4" />
       ) : null}
       {hasMisused(profile.id) ? (
-        <ExclamationCircleIcon className="ml-1 size-4 text-red-500" />
+        <ExclamationCircleIcon className="ml-1 size-4" />
       ) : null}
       {timestamp ? (
         <span className="ld-text-gray-500 truncate">
diff --git a/apps/web/src/components/Settings/Account/RateLimits.tsx b/apps/web/src/components/Settings/Account/RateLimits.tsx
index 9c5e3a56e1f9..386e342d4438 100644
--- a/apps/web/src/components/Settings/Account/RateLimits.tsx
+++ b/apps/web/src/components/Settings/Account/RateLimits.tsx
@@ -9,7 +9,7 @@ const ProgressBar: FC<{ max: number; value: number }> = ({ max, value }) => {
   return (
     <div className="w-full rounded-full bg-gray-200">
       <div
-        className="bg-brand-500 h-2.5 rounded-full"
+        className="h-2.5 rounded-full bg-black"
         style={{
           width: `${(value / max) * 100}%`
         }}
diff --git a/apps/web/src/components/Settings/Export/Followers.tsx b/apps/web/src/components/Settings/Export/Followers.tsx
index 79fb897f41b9..8612ffe684e8 100644
--- a/apps/web/src/components/Settings/Export/Followers.tsx
+++ b/apps/web/src/components/Settings/Export/Followers.tsx
@@ -72,9 +72,11 @@ const Followers: FC = () => {
         </div>
       ) : null}
       {fetchCompleted ? (
-        <Button onClick={download}>Download followers</Button>
+        <Button onClick={download} outline>
+          Download followers
+        </Button>
       ) : (
-        <Button disabled={exporting} onClick={handleExportClick}>
+        <Button disabled={exporting} onClick={handleExportClick} outline>
           {exporting ? 'Exporting...' : 'Export now'}
         </Button>
       )}
diff --git a/apps/web/src/components/Settings/Export/Following.tsx b/apps/web/src/components/Settings/Export/Following.tsx
index e6f0eb9905a2..5f8c736b88f9 100644
--- a/apps/web/src/components/Settings/Export/Following.tsx
+++ b/apps/web/src/components/Settings/Export/Following.tsx
@@ -74,9 +74,11 @@ const Following: FC = () => {
         </div>
       ) : null}
       {fetchCompleted ? (
-        <Button onClick={download}>Download following</Button>
+        <Button onClick={download} outline>
+          Download following
+        </Button>
       ) : (
-        <Button disabled={exporting} onClick={handleExportClick}>
+        <Button disabled={exporting} onClick={handleExportClick} outline>
           {exporting ? 'Exporting...' : 'Export now'}
         </Button>
       )}
diff --git a/apps/web/src/components/Settings/Export/Notifications.tsx b/apps/web/src/components/Settings/Export/Notifications.tsx
index 7e087b31c9fd..4f76341769c5 100644
--- a/apps/web/src/components/Settings/Export/Notifications.tsx
+++ b/apps/web/src/components/Settings/Export/Notifications.tsx
@@ -76,9 +76,11 @@ const Notifications: FC = () => {
         </div>
       ) : null}
       {fetchCompleted ? (
-        <Button onClick={download}>Download notifications</Button>
+        <Button onClick={download} outline>
+          Download notifications
+        </Button>
       ) : (
-        <Button disabled={exporting} onClick={handleExportClick}>
+        <Button disabled={exporting} onClick={handleExportClick} outline>
           {exporting ? 'Exporting...' : 'Export now'}
         </Button>
       )}
diff --git a/apps/web/src/components/Settings/Export/Profile.tsx b/apps/web/src/components/Settings/Export/Profile.tsx
index 5312a804f7cf..985a5ecaf202 100644
--- a/apps/web/src/components/Settings/Export/Profile.tsx
+++ b/apps/web/src/components/Settings/Export/Profile.tsx
@@ -48,9 +48,11 @@ const Profile: FC = () => {
       <div className="text-lg font-bold">Export profile</div>
       <div className="pb-2">Export all your profile data to a JSON file.</div>
       {fetchCompleted ? (
-        <Button onClick={download}>Download profile</Button>
+        <Button onClick={download} outline>
+          Download profile
+        </Button>
       ) : (
-        <Button disabled={exporting} onClick={handleExportClick}>
+        <Button disabled={exporting} onClick={handleExportClick} outline>
           {exporting ? 'Exporting...' : 'Export now'}
         </Button>
       )}
diff --git a/apps/web/src/components/Settings/Export/Publications.tsx b/apps/web/src/components/Settings/Export/Publications.tsx
index 09e634a27f41..806548c1a6d8 100644
--- a/apps/web/src/components/Settings/Export/Publications.tsx
+++ b/apps/web/src/components/Settings/Export/Publications.tsx
@@ -78,9 +78,11 @@ const Publications: FC = () => {
         </div>
       ) : null}
       {fetchCompleted ? (
-        <Button onClick={download}>Download publications</Button>
+        <Button onClick={download} outline>
+          Download publications
+        </Button>
       ) : (
-        <Button disabled={exporting} onClick={handleExportClick}>
+        <Button disabled={exporting} onClick={handleExportClick} outline>
           {exporting ? 'Exporting...' : 'Export now'}
         </Button>
       )}
diff --git a/apps/web/src/components/Settings/Export/Tokens.tsx b/apps/web/src/components/Settings/Export/Tokens.tsx
index 2ac383a6350e..f5a36d4a6007 100644
--- a/apps/web/src/components/Settings/Export/Tokens.tsx
+++ b/apps/web/src/components/Settings/Export/Tokens.tsx
@@ -13,29 +13,29 @@ const Tokens: FC = () => {
         <div className="pb-1 text-lg font-bold">
           Your temporary access token
         </div>
-        <div
-          className="break-words rounded-md bg-gray-300 px-1.5 py-0.5 text-sm font-bold dark:bg-gray-600"
+        <button
+          className="cursor-pointer break-all rounded-md bg-gray-300 p-2 px-3 text-left text-sm font-bold dark:bg-gray-600"
           onClick={() => {
             toast.success('Copied to clipboard');
             navigator.clipboard.writeText(accessToken as string);
           }}
         >
           {accessToken}
-        </div>
+        </button>
       </Card>
       <Card className="space-y-2 p-5">
         <div className="pb-1 text-lg font-bold">
           Your temporary refresh token
         </div>
-        <div
-          className="break-words rounded-md bg-gray-300 px-1.5 py-0.5 text-sm font-bold dark:bg-gray-600"
+        <button
+          className="cursor-pointer break-all rounded-md bg-gray-300 p-2 px-3 text-left text-sm font-bold dark:bg-gray-600"
           onClick={() => {
             toast.success('Copied to clipboard');
             navigator.clipboard.writeText(refreshToken as string);
           }}
         >
           {refreshToken}
-        </div>
+        </button>
       </Card>
     </>
   );
diff --git a/apps/web/src/components/Shared/Audio/index.tsx b/apps/web/src/components/Shared/Audio/index.tsx
index 682ab88e2825..81bf58c8e511 100644
--- a/apps/web/src/components/Shared/Audio/index.tsx
+++ b/apps/web/src/components/Shared/Audio/index.tsx
@@ -79,11 +79,9 @@ const Audio: FC<AudioProps> = ({
 
   return (
     <div
-      className="bg-brand-500 overflow-hidden rounded-xl border px-3.5 pt-3.5 md:p-0 dark:border-gray-700"
+      className="overflow-hidden rounded-xl border bg-gray-500 px-3.5 pt-3.5 md:p-0 dark:border-gray-700"
       onClick={stopEventPropagation}
-      style={{
-        backgroundImage: `url(${isNew ? newPreviewUri : poster})`
-      }}
+      style={{ backgroundImage: `url(${isNew ? newPreviewUri : poster})` }}
     >
       <div className="flex flex-wrap backdrop-blur-2xl backdrop-brightness-50 md:flex-nowrap md:space-x-2">
         <CoverImage
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 09c9ef4af025..922814b9d8e3 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -19,21 +19,6 @@ body {
   @apply dark:bg-gray-600;
 }
 
-progress::-webkit-progress-bar {
-  background-color: transparent;
-}
-
-progress::-webkit-progress-value {
-  @apply bg-brand-500;
-  transition: width 0.5s ease;
-}
-
-progress::-moz-progress-bar {
-  @apply rounded-bl;
-  @apply bg-brand-500;
-  transition: width 0.5s ease;
-}
-
 .menu-item {
   @apply m-2 block cursor-pointer rounded-lg px-2 py-1.5 text-sm text-gray-700 dark:text-gray-200;
 }
diff --git a/packages/ui/src/Button.tsx b/packages/ui/src/Button.tsx
index b68590e83c6a..a1291391e42b 100644
--- a/packages/ui/src/Button.tsx
+++ b/packages/ui/src/Button.tsx
@@ -15,7 +15,7 @@ interface ButtonProps
   outline?: boolean;
   rounded?: boolean;
   size?: 'lg' | 'md' | 'sm';
-  variant?: 'brand' | 'danger' | 'primary' | 'secondary' | 'warning';
+  variant?: 'danger' | 'primary' | 'secondary' | 'warning';
 }
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -37,16 +37,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         variant === 'primary',
       'border border-gray-600 focus:ring-gray-400/50': variant === 'secondary',
       'border border-red-600 focus:ring-red-400/50': variant === 'danger',
-      'border border-yellow-600 focus:ring-yellow-400/50':
-        variant === 'warning',
-      'border-brand-600 focus:ring-brand-400/50 border': variant === 'brand'
+      'border border-yellow-600 focus:ring-yellow-400/50': variant === 'warning'
     };
 
     const nonOutlineStyles = {
       'bg-black dark:bg-white text-white dark:text-black hover:bg-gray-900 active:bg-black':
         !outline && variant === 'primary',
-      'bg-brand-500 hover:bg-brand-600 active:bg-brand-700 text-white':
-        !outline && variant === 'brand',
       'bg-gray-500 text-white hover:bg-gray-600 active:bg-gray-700':
         !outline && variant === 'secondary',
       'bg-red-500 text-white hover:bg-red-400 active:bg-red-700':
@@ -58,8 +54,6 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     const outlineStyles = {
       'text-black hover:bg-gray-50 active:bg-gray-100 dark:text-white dark:hover:bg-gray-800 dark:active:bg-gray-700':
         outline && variant === 'primary',
-      'text-brand-500 hover:bg-brand-50 active:bg-brand-100':
-        outline && variant === 'brand',
       'text-gray-500 hover:bg-gray-50 active:bg-gray-100':
         outline && variant === 'secondary',
       'text-red-500 hover:bg-red-50 active:bg-red-100':