feat: use black as primary

heyverse · Mar 1, 2024 · 37afa42 · 37afa42
1 parent 4d23edc
commit 37afa42
Show file tree

Hide file tree

Showing 19 changed files with 39 additions and 54 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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':