fix: resolve various UI issues

Fallenbagel · Jun 23, 2024 · fac81f7 · fac81f7
1 parent ea43e3b
commit fac81f7
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 49 deletions.
diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
@@ -551,12 +551,6 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
                     </Button>
                   </div>
                 </div>
-                <div className="relative z-10 flex h-14 items-center justify-between p-4 text-gray-200 transition duration-300 group-hover:text-white">
-                  <div>{data.collection.name}</div>
-                  <Button buttonSize="sm">
-                    {intl.formatMessage(globalMessages.view)}
-                  </Button>
-                </div>
               </Link>
             </div>
           )}

diff --git a/src/components/RequestCard/index.tsx b/src/components/RequestCard/index.tsx
@@ -112,13 +112,15 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
                       href={`/users/${requestData.requestedBy.id}`}
                       className="group flex items-center"
                     >
-                      <Image
-                        src={requestData.requestedBy.avatar}
-                        alt=""
-                        className="avatar-sm"
-                        width={20}
-                        height={20}
-                      />
+                      <span className="avatar-sm">
+                        <Image
+                          src={requestData.requestedBy.avatar}
+                          alt=""
+                          className="avatar-sm object-cover"
+                          width={20}
+                          height={20}
+                        />
+                      </span>
                       <span className="truncate group-hover:underline">
                         {requestData.requestedBy.displayName}
                       </span>
@@ -370,13 +372,15 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
                 href={`/users/${requestData.requestedBy.id}`}
                 className="group flex items-center"
               >
-                <Image
-                  src={requestData.requestedBy.avatar}
-                  alt=""
-                  className="avatar-sm object-cover"
-                  width={20}
-                  height={20}
-                />
+                <span className="avatar-sm">
+                  <Image
+                    src={requestData.requestedBy.avatar}
+                    alt=""
+                    className="avatar-sm object-cover"
+                    width={20}
+                    height={20}
+                  />
+                </span>
                 <span className="truncate font-semibold group-hover:text-white group-hover:underline">
                   {requestData.requestedBy.displayName}
                 </span>

diff --git a/src/components/RequestList/RequestItem/index.tsx b/src/components/RequestList/RequestItem/index.tsx
@@ -185,13 +185,15 @@ const RequestItemError = ({
                             href={`/users/${requestData.requestedBy.id}`}
                             className="group flex items-center truncate"
                           >
-                            <Image
-                              src={requestData.requestedBy.avatar}
-                              alt=""
-                              className="avatar-sm ml-1.5"
-                              width={20}
-                              height={20}
-                            />
+                            <span className="avatar-sm ml-1.5">
+                              <Image
+                                src={requestData.requestedBy.avatar}
+                                alt=""
+                                className="avatar-sm object-cover"
+                                width={20}
+                                height={20}
+                              />
+                            </span>
                             <span className="truncate text-sm group-hover:underline">
                               {requestData.requestedBy.displayName}
                             </span>
@@ -242,13 +244,15 @@ const RequestItemError = ({
                           href={`/users/${requestData.modifiedBy.id}`}
                           className="group flex items-center truncate"
                         >
-                          <Image
-                            src={requestData.modifiedBy.avatar}
-                            alt=""
-                            className="avatar-sm ml-1.5"
-                            width={20}
-                            height={20}
-                          />
+                          <span className="avatar-sm ml-1.5">
+                            <Image
+                              src={requestData.modifiedBy.avatar}
+                              alt=""
+                              className="avatar-sm object-cover"
+                              width={20}
+                              height={20}
+                            />
+                          </span>
                           <span className="truncate text-sm group-hover:underline">
                             {requestData.modifiedBy.displayName}
                           </span>
@@ -537,13 +541,15 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                           href={`/users/${requestData.requestedBy.id}`}
                           className="group flex items-center truncate"
                         >
-                          <Image
-                            src={requestData.requestedBy.avatar}
-                            alt=""
-                            className="avatar-sm ml-1.5 object-cover"
-                            width={20}
-                            height={20}
-                          />
+                          <span className="avatar-sm ml-1.5">
+                            <Image
+                              src={requestData.requestedBy.avatar}
+                              alt=""
+                              className="avatar-sm object-cover"
+                              width={20}
+                              height={20}
+                            />
+                          </span>
                           <span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
                             {requestData.requestedBy.displayName}
                           </span>
@@ -594,13 +600,15 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                         href={`/users/${requestData.modifiedBy.id}`}
                         className="group flex items-center truncate"
                       >
-                        <Image
-                          src={requestData.modifiedBy.avatar}
-                          alt=""
-                          className="avatar-sm ml-1.5 object-cover"
-                          width={20}
-                          height={20}
-                        />
+                        <span className="avatar-sm ml-1.5">
+                          <Image
+                            src={requestData.requestedBy.avatar}
+                            alt=""
+                            className="avatar-sm object-cover"
+                            width={20}
+                            height={20}
+                          />
+                        </span>
                         <span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
                           {requestData.modifiedBy.displayName}
                         </span>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -215,7 +215,7 @@
   }
 
   img.avatar-sm {
-    @apply mr-1 scale-100 transform-gpu rounded-full transition duration-300 group-hover:scale-105;
+    @apply mr-1 h-5 w-5 scale-100 transform-gpu rounded-full transition duration-300 group-hover:scale-105;
   }
 
   .card-field {