feat: minor ux fixes

gitroomhq · Jan 7, 2025 · 0de53d2 · 0de53d2
1 parent ba84a67
commit 0de53d2
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 21 deletions.
diff --git a/apps/frontend/src/app/global.scss b/apps/frontend/src/app/global.scss
@@ -282,7 +282,7 @@ html {
   width: auto !important;
 }
 
-.editor * {
+.editor :not(.removeEditor *) {
   @apply text-textColor;
 }
 

diff --git a/apps/frontend/src/components/launches/calendar.tsx b/apps/frontend/src/components/launches/calendar.tsx
@@ -561,7 +561,7 @@ export const CalendarColumn: FC<{
           ))}
           {!showAll && postList.length > 3 && (
             <div
-              className="text-center hover:underline py-[5px]"
+              className="text-center hover:underline py-[5px] text-textColor"
               onClick={showAllFunc}
             >
               + Show more ({postList.length - 3})
@@ -683,7 +683,7 @@ const CalendarItem: FC<{
       className={clsx('w-full flex h-full flex-1 flex-col group', 'relative')}
       style={{ opacity }}
     >
-      <div className="bg-forth text-[11px] h-[15px] w-full rounded-tr-[10px] rounded-tl-[10px] flex justify-center gap-[10px] px-[5px]">
+      <div className="text-primary bg-forth text-[11px] h-[15px] w-full rounded-tr-[10px] rounded-tl-[10px] flex justify-center gap-[10px] px-[5px]">
         <div
           className="hidden group-hover:block hover:underline cursor-pointer"
           onClick={duplicatePost}

diff --git a/apps/frontend/src/components/launches/helpers/pick.platform.component.tsx b/apps/frontend/src/components/launches/helpers/pick.platform.component.tsx
@@ -316,7 +316,7 @@ export const PickPlatforms: FC<{
                               height={15}
                             />
                           </div>
-                          <div>{integration.name}</div>
+                          <div>{integration.name.slice(0, 10)}{integration.name.length > 10 ? '...' : ''}</div>
                         </div>
                       </div>
                     </div>

diff --git a/apps/frontend/src/components/launches/providers/high.order.provider.tsx b/apps/frontend/src/components/launches/providers/high.order.provider.tsx
@@ -409,7 +409,9 @@ export const withProvider = function <T extends object>(
                     >
                       {editInPlace
                         ? 'Edit globally'
-                        : `Edit only ${integration?.name} (${capitalize(
+                        : `Edit only ${integration?.name.slice(0, 10)}${
+                            (integration?.name?.length || 0) > 10 ? '...' : ''
+                          } (${capitalize(
                             integration?.identifier.replace('-', ' ')
                           )})`}
                     </Button>

diff --git a/apps/frontend/src/components/media/media.component.tsx b/apps/frontend/src/components/media/media.component.tsx
@@ -75,8 +75,8 @@ export const Pagination: FC<{
             aria-current="page"
             onClick={() => setPage(page)}
             className={clsx(
-              'cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border hover:bg-forth h-10 w-10 hover:text-white border-[#1F1F1F] text-white',
-              current === page && 'bg-forth'
+              'cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border hover:bg-forth h-10 w-10 hover:text-white border-[#1F1F1F]',
+              current === page ? 'bg-forth !text-white' : 'text-textColor hover:text-white'
             )}
           >
             {page + 1}
@@ -89,7 +89,7 @@ export const Pagination: FC<{
         )}
       >
         <a
-          className="cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 h-10 px-4 py-2 gap-1 pr-2.5 text-gray-400 hover:text-white border-[#1F1F1F] hover:bg-forth"
+          className="text-textColor hover:text-white group cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 h-10 px-4 py-2 gap-1 pr-2.5 text-gray-400 border-[#1F1F1F] hover:bg-forth"
           aria-label="Go to next page"
           onClick={() => setPage(current + 1)}
         >
@@ -292,7 +292,7 @@ export const MediaBox: FC<{
   }, [data]);
 
   return (
-    <div className="fixed left-0 top-0 bg-primary/80 z-[300] w-full min-h-full p-4 md:p-[60px] animate-fade">
+    <div className="removeEditor fixed left-0 top-0 bg-primary/80 z-[300] w-full min-h-full p-4 md:p-[60px] animate-fade">
       <div className="max-w-[1000px] w-full h-full bg-sixth border-tableBorder border-2 rounded-xl relative mx-auto">
         <DropFiles onDrop={dragAndDrop}>
           <div className="pb-[20px] px-[20px] w-full h-full">
@@ -375,8 +375,10 @@ export const MediaBox: FC<{
               ) : (
                 <>
                   {selectedMedia.length > 0 && (
-                    <div className="flex justify-center absolute top-[7px]">
-                      <Button onClick={addMedia}>Add selected media</Button>
+                    <div className="flex justify-center absolute top-[7px] text-white">
+                      <Button onClick={addMedia} className="!text-white">
+                        <span className="!text-white">Add selected media</span>
+                      </Button>
                     </div>
                   )}
                 </>
@@ -403,7 +405,7 @@ export const MediaBox: FC<{
                   >
                     <div
                       onClick={removeItem(media)}
-                      className="border border-red-400 text-white flex justify-center items-center absolute w-[20px] h-[20px] rounded-full bg-red-700 -top-[5px] -right-[5px]"
+                      className="border border-red-400 !text-white flex justify-center items-center absolute w-[20px] h-[20px] rounded-full bg-red-700 -top-[5px] -right-[5px]"
                     >
                       X
                     </div>
@@ -445,15 +447,7 @@ export const MultiMediaComponent: FC<{
     target: { name: string; value?: Array<{ id: string; path: string }> };
   }) => void;
 }> = (props) => {
-  const {
-    onOpen,
-    onClose,
-    name,
-    error,
-    text,
-    onChange,
-    value,
-  } = props;
+  const { onOpen, onClose, name, error, text, onChange, value } = props;
   const user = useUser();
 
   useEffect(() => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -316,7 +316,7 @@ export const PickPlatforms: FC<{ @@
                                   height={15}
                                 />
                               </div>
-                              <div>{integration.name}</div>
+                              <div>{integration.name.slice(0, 10)}{integration.name.length > 10 ? '...' : ''}</div>
                             </div>
                           </div>
                         </div>
@@ Expand Down @@