feat: update size util

heyxyz · Dec 20, 2023 · 084ffab · 084ffab
1 parent a31ccdf
commit 084ffab
Show file tree

Hide file tree

Showing 233 changed files with 529 additions and 519 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -84,7 +84,7 @@
     "@types/uuid": "^9.0.7",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.32",
-    "tailwindcss": "^3.3.7",
+    "tailwindcss": "^3.4.0",
     "typescript": "^5.3.3"
   }
 }
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 h-8 w-8" />}
+        icon={<BookmarkIcon className="text-brand-500 size-8" />}
         message="No bookmarks yet!"
       />
     );

diff --git a/apps/web/src/components/Comment/Feed.tsx b/apps/web/src/components/Comment/Feed.tsx
@@ -93,7 +93,7 @@ const Feed: FC<FeedProps> = ({ publication }) => {
   if (!publication?.isHidden && totalComments === 0) {
     return (
       <EmptyState
-        icon={<ChatBubbleLeftRightIcon className="text-brand-500 h-8 w-8" />}
+        icon={<ChatBubbleLeftRightIcon className="text-brand-500 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
@@ -104,7 +104,7 @@ const Attachment: FC = () => {
           <Spinner size="sm" />
         ) : (
           <Tooltip content="Media" placement="top">
-            <PhotoIcon className="text-brand-500 h-5 w-5" />
+            <PhotoIcon className="text-brand-500 size-5" />
           </Tooltip>
         )}
       </Menu.Button>
@@ -125,7 +125,7 @@ const Attachment: FC = () => {
             disabled={disableImageUpload()}
             htmlFor={`image_${id}`}
           >
-            <PhotoIcon className="text-brand-500 h-4 w-4" />
+            <PhotoIcon className="text-brand-500 size-4" />
             <span className="text-sm">Upload image(s)</span>
             <input
               accept={ImageMimeType.join(',')}
@@ -148,7 +148,7 @@ const Attachment: FC = () => {
             disabled={Boolean(attachments.length)}
             htmlFor={`video_${id}`}
           >
-            <VideoCameraIcon className="text-brand-500 h-4 w-4" />
+            <VideoCameraIcon className="text-brand-500 size-4" />
             <span className="text-sm">Upload video</span>
             <input
               accept={VideoMimeType.join(',')}
@@ -170,7 +170,7 @@ const Attachment: FC = () => {
             disabled={Boolean(attachments.length)}
             htmlFor={`audio_${id}`}
           >
-            <MusicalNoteIcon className="text-brand-500 h-4 w-4" />
+            <MusicalNoteIcon className="text-brand-500 size-4" />
             <span className="text-sm">Upload audio</span>
             <input
               accept={AudioMimeType.join(',')}

diff --git a/apps/web/src/components/Composer/Actions/CollectSettings/AmountConfig.tsx b/apps/web/src/components/Composer/Actions/CollectSettings/AmountConfig.tsx
@@ -24,7 +24,7 @@ const AmountConfig: FC<AmountConfigProps> = ({
       <ToggleWithHelper
         description="Get paid whenever someone collects your post"
         heading="Charge for collecting"
-        icon={<CurrencyDollarIcon className="h-4 w-4" />}
+        icon={<CurrencyDollarIcon className="size-4" />}
         on={Boolean(collectModule.amount?.value)}
         setOn={() => {
           setCollectType({

diff --git a/apps/web/src/components/Composer/Actions/CollectSettings/CollectLimitConfig.tsx b/apps/web/src/components/Composer/Actions/CollectSettings/CollectLimitConfig.tsx
@@ -19,7 +19,7 @@ const CollectLimitConfig: FC<CollectLimitConfigProps> = ({
       <ToggleWithHelper
         description="Make the collects exclusive"
         heading="Limited edition"
-        icon={<StarIcon className="h-4 w-4" />}
+        icon={<StarIcon className="size-4" />}
         on={Boolean(collectModule.collectLimit)}
         setOn={() =>
           setCollectType({

diff --git a/apps/web/src/components/Composer/Actions/CollectSettings/FollowersConfig.tsx b/apps/web/src/components/Composer/Actions/CollectSettings/FollowersConfig.tsx
@@ -16,7 +16,7 @@ const FollowersConfig: FC<FollowersConfigProps> = ({ setCollectType }) => {
       <ToggleWithHelper
         description="Only followers can collect"
         heading="Who can collect"
-        icon={<UserGroupIcon className="h-4 w-4" />}
+        icon={<UserGroupIcon className="size-4" />}
         on={collectModule.followerOnly || false}
         setOn={() =>
           setCollectType({ followerOnly: !collectModule.followerOnly })

diff --git a/apps/web/src/components/Composer/Actions/CollectSettings/ReferralConfig.tsx b/apps/web/src/components/Composer/Actions/CollectSettings/ReferralConfig.tsx
@@ -18,7 +18,7 @@ const ReferralConfig: FC<ReferralConfigProps> = ({ setCollectType }) => {
       <ToggleWithHelper
         description="Share your fee with people who amplify your content"
         heading="Mirror referral reward"
-        icon={<ArrowsRightLeftIcon className="h-4 w-4" />}
+        icon={<ArrowsRightLeftIcon className="size-4" />}
         on={Boolean(collectModule.referralFee)}
         setOn={() =>
           setCollectType({

diff --git a/apps/web/src/components/Composer/Actions/CollectSettings/SplitConfig.tsx b/apps/web/src/components/Composer/Actions/CollectSettings/SplitConfig.tsx
@@ -80,7 +80,7 @@ const SplitConfig: FC<SplitConfigProps> = ({
             <Beta />
           </div>
         }
-        icon={<UsersIcon className="h-4 w-4" />}
+        icon={<UsersIcon className="size-4" />}
         on={recipients.length > 0}
         setOn={() => {
           setCollectType({
@@ -143,7 +143,7 @@ const SplitConfig: FC<SplitConfigProps> = ({
                   }}
                   type="button"
                 >
-                  <XCircleIcon className="h-5 w-5 text-red-500" />
+                  <XCircleIcon className="size-5 text-red-500" />
                 </button>
               </div>
             ))}
@@ -153,7 +153,7 @@ const SplitConfig: FC<SplitConfigProps> = ({
               <div />
             ) : (
               <Button
-                icon={<PlusIcon className="h-3 w-3" />}
+                icon={<PlusIcon className="size-3" />}
                 onClick={() => {
                   setCollectType({
                     recipients: [...recipients, { recipient: '', split: 0 }]
@@ -166,7 +166,7 @@ const SplitConfig: FC<SplitConfigProps> = ({
               </Button>
             )}
             <Button
-              icon={<ArrowsRightLeftIcon className="h-3 w-3" />}
+              icon={<ArrowsRightLeftIcon className="size-3" />}
               onClick={splitEvenly}
               outline
               size="sm"

diff --git a/apps/web/src/components/Composer/Actions/CollectSettings/TimeLimitConfig.tsx b/apps/web/src/components/Composer/Actions/CollectSettings/TimeLimitConfig.tsx
@@ -20,7 +20,7 @@ const TimeLimitConfig: FC<TimeLimitConfigProps> = ({ setCollectType }) => {
       <ToggleWithHelper
         description="Limit collecting to specific period of time"
         heading="Time limit"
-        icon={<ClockIcon className="h-4 w-4" />}
+        icon={<ClockIcon className="size-4" />}
         on={Boolean(collectModule.endsAt)}
         setOn={() =>
           setCollectType({

diff --git a/apps/web/src/components/Composer/Actions/CollectSettings/index.tsx b/apps/web/src/components/Composer/Actions/CollectSettings/index.tsx
@@ -22,11 +22,11 @@ const CollectSettings: FC = () => {
           type="button"
           whileTap={{ scale: 0.9 }}
         >
-          <RectangleStackIcon className="text-brand-500 h-5 w-5" />
+          <RectangleStackIcon className="text-brand-500 size-5" />
         </motion.button>
       </Tooltip>
       <Modal
-        icon={<RectangleStackIcon className="text-brand-500 h-5 w-5" />}
+        icon={<RectangleStackIcon className="text-brand-500 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
@@ -37,11 +37,11 @@ const Gif: FC<GiphyProps> = ({ setGifAttachment }) => {
           type="button"
           whileTap={{ scale: 0.9 }}
         >
-          <GifIcon className="text-brand-500 h-5 w-5" />
+          <GifIcon className="text-brand-500 size-5" />
         </motion.button>
       </Tooltip>
       <Modal
-        icon={<PhotoIcon className="text-brand-500 h-5 w-5" />}
+        icon={<PhotoIcon className="text-brand-500 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
@@ -68,7 +68,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 h-4 w-4" />
+          <VideoCameraIcon className="text-brand-500 size-4" />
           <b>Go Live</b>
         </div>
         <div className="flex items-center space-x-3">
@@ -81,7 +81,7 @@ const LivestreamEditor: FC = () => {
               }}
               type="button"
             >
-              <XCircleIcon className="h-5 w-5 text-red-400" />
+              <XCircleIcon className="size-5 text-red-400" />
             </button>
           </Tooltip>
         </div>
@@ -107,7 +107,7 @@ const LivestreamEditor: FC = () => {
                   }}
                   type="button"
                 >
-                  <ClipboardDocumentIcon className="h-4 w-4 text-gray-400" />
+                  <ClipboardDocumentIcon className="size-4 text-gray-400" />
                 </button>
               </div>
               <div className="flex items-center space-x-1">
@@ -122,7 +122,7 @@ const LivestreamEditor: FC = () => {
                   }}
                   type="button"
                 >
-                  <ClipboardDocumentIcon className="h-4 w-4 text-gray-400" />
+                  <ClipboardDocumentIcon className="size-4 text-gray-400" />
                 </button>
               </div>
             </Card>
@@ -137,7 +137,7 @@ const LivestreamEditor: FC = () => {
             type="button"
           >
             <Wrapper>
-              <SignalIcon className="text-brand-500 h-5 w-5" />
+              <SignalIcon className="text-brand-500 size-5" />
               <div>Create Live Stream</div>
             </Wrapper>
           </button>
@@ -149,7 +149,7 @@ const LivestreamEditor: FC = () => {
               type="button"
             >
               <Wrapper>
-                <VideoCameraIcon className="text-brand-500 h-5 w-5" />
+                <VideoCameraIcon className="text-brand-500 size-5" />
                 <div>Record</div>
               </Wrapper>
             </button>
@@ -159,7 +159,7 @@ const LivestreamEditor: FC = () => {
               type="button"
             >
               <Wrapper>
-                <VideoCameraSlashIcon className="text-brand-500 h-5 w-5" />
+                <VideoCameraSlashIcon className="text-brand-500 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
@@ -27,7 +27,7 @@ const LivestreamSettings: FC = () => {
         type="button"
         whileTap={{ scale: 0.9 }}
       >
-        <VideoCameraIcon className="text-brand-500 h-5 w-5" />
+        <VideoCameraIcon className="text-brand-500 size-5" />
       </motion.button>
     </Tooltip>
   );

diff --git a/apps/web/src/components/Composer/Actions/PollSettings/PollEditor.tsx b/apps/web/src/components/Composer/Actions/PollSettings/PollEditor.tsx
@@ -20,12 +20,12 @@ 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 h-4 w-4" />
+          <Bars3BottomLeftIcon className="text-brand-500 size-4" />
           <b>Poll</b>
         </div>
         <div className="flex items-center space-x-3">
           <Button
-            icon={<ClockIcon className="h-4 w-4" />}
+            icon={<ClockIcon className="size-4" />}
             onClick={() => setShowPollLengthModal(true)}
             outline
             size="sm"
@@ -34,7 +34,7 @@ const PollEditor: FC = () => {
             {pollConfig.length} {plur('day', pollConfig.length)}
           </Button>
           <Modal
-            icon={<ClockIcon className="text-brand-500 h-5 w-5" />}
+            icon={<ClockIcon className="text-brand-500 size-5" />}
             onClose={() => setShowPollLengthModal(false)}
             show={showPollLengthModal}
             title="Poll length"
@@ -84,7 +84,7 @@ const PollEditor: FC = () => {
               }}
               type="button"
             >
-              <XCircleIcon className="h-5 w-5 text-red-400" />
+              <XCircleIcon className="size-5 text-red-400" />
             </button>
           </Tooltip>
         </div>
@@ -104,7 +104,7 @@ const PollEditor: FC = () => {
                     }}
                     type="button"
                   >
-                    <XMarkIcon className="h-5 w-5 text-red-500" />
+                    <XMarkIcon className="size-5 text-red-500" />
                   </button>
                 ) : null
               }
@@ -128,7 +128,7 @@ const PollEditor: FC = () => {
             }}
             type="button"
           >
-            <PlusIcon className="h-4 w-4" />
+            <PlusIcon className="size-4" />
             <span>Add another option</span>
           </button>
         ) : null}

diff --git a/apps/web/src/components/Composer/Actions/PollSettings/index.tsx b/apps/web/src/components/Composer/Actions/PollSettings/index.tsx
@@ -24,7 +24,7 @@ const PollSettings: FC = () => {
         type="button"
         whileTap={{ scale: 0.9 }}
       >
-        <Bars3BottomLeftIcon className="text-brand-500 h-5 w-5" />
+        <Bars3BottomLeftIcon className="text-brand-500 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
@@ -115,7 +115,7 @@ const ReferenceSettings: FC = () => {
           static
         >
           <Module
-            icon={<GlobeAltIcon className="h-4 w-4" />}
+            icon={<GlobeAltIcon className="size-4" />}
             onClick={() => {
               setSelectedReferenceModule(
                 ReferenceModuleType.FollowerOnlyReferenceModule
@@ -126,7 +126,7 @@ const ReferenceSettings: FC = () => {
             title={EVERYONE}
           />
           <Module
-            icon={<UsersIcon className="h-4 w-4" />}
+            icon={<UsersIcon className="size-4" />}
             onClick={() => {
               setSelectedReferenceModule(
                 ReferenceModuleType.FollowerOnlyReferenceModule
@@ -137,7 +137,7 @@ const ReferenceSettings: FC = () => {
             title={MY_FOLLOWERS}
           />
           <Module
-            icon={<UserPlusIcon className="h-4 w-4" />}
+            icon={<UserPlusIcon className="size-4" />}
             onClick={() => {
               setSelectedReferenceModule(
                 ReferenceModuleType.DegreesOfSeparationReferenceModule
@@ -148,7 +148,7 @@ const ReferenceSettings: FC = () => {
             title={MY_FOLLOWS}
           />
           <Module
-            icon={<UserGroupIcon className="h-4 w-4" />}
+            icon={<UserGroupIcon className="size-4" />}
             onClick={() => {
               setSelectedReferenceModule(
                 ReferenceModuleType.DegreesOfSeparationReferenceModule

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

diff --git a/apps/web/src/components/Composer/NewAttachments.tsx b/apps/web/src/components/Composer/NewAttachments.tsx
@@ -142,7 +142,7 @@ const NewAttachments: FC<NewAttachmentsProps> = ({
               (isVideo ? (
                 <Button
                   className="mt-3"
-                  icon={<XMarkIcon className="h-4 w-4" />}
+                  icon={<XMarkIcon className="size-4" />}
                   onClick={() => removeAttachment(attachment)}
                   outline
                   size="sm"
@@ -157,7 +157,7 @@ const NewAttachments: FC<NewAttachmentsProps> = ({
                     onClick={() => removeAttachment(attachment)}
                     type="button"
                   >
-                    <XMarkIcon className="h-4 w-4 text-white" />
+                    <XMarkIcon className="size-4 text-white" />
                   </button>
                 </div>
               ))}