STUD-184: collaborator list display bug (#554)

* fixes collaborator table bug * resizes various image sources * updates to owners list display logic * gets tests passing
projectNEWM · Mar 7, 2024 · ba371fd · ba371fd
1 parent 8d64033
commit ba371fd
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 13 deletions.
diff --git a/apps/studio/src/pages/home/SideBar.tsx b/apps/studio/src/pages/home/SideBar.tsx
@@ -18,7 +18,7 @@ import {
   FileUploadOutlined as UploadIcon,
   AccountBalanceWalletRounded as WalletIcon,
 } from "@mui/icons-material";
-import { useWindowDimensions } from "@newm-web/utils";
+import { resizeCloudinaryImage, useWindowDimensions } from "@newm-web/utils";
 import theme from "@newm-web/theme";
 import {
   NEWM_CLICKUP_FORM_URL,
@@ -76,7 +76,10 @@ export const SideBar: FunctionComponent<SideBarProps> = ({
             <ProfileImage
               aria-label="profile image"
               referrerPolicy="no-referrer"
-              src={ pictureUrl }
+              src={ resizeCloudinaryImage(pictureUrl, {
+                height: 280,
+                width: 280,
+              }) }
             />
           ) }
 

diff --git a/apps/studio/src/pages/home/library/EditSong.tsx b/apps/studio/src/pages/home/library/EditSong.tsx
@@ -8,6 +8,7 @@ import { useDispatch } from "react-redux";
 import { useNavigate, useParams } from "react-router";
 import * as Yup from "yup";
 import { MintingStatus } from "@newm-web/types";
+import { resizeCloudinaryImage } from "@newm-web/utils";
 import DeleteSongModal from "./DeleteSongModal";
 import { SongRouteParams } from "./types";
 import { commonYupValidation } from "../../../common";
@@ -282,7 +283,7 @@ const EditSong: FunctionComponent = () => {
         <ProfileImage
           alt="Song cover art"
           height="90px"
-          src={ coverArtUrl }
+          src={ resizeCloudinaryImage(coverArtUrl, { height: 180, width: 180 }) }
           width="90px"
         />
         { title && <Typography variant="h3">{ title.toUpperCase() }</Typography> }

diff --git a/apps/studio/src/pages/home/library/ViewDetails.tsx b/apps/studio/src/pages/home/library/ViewDetails.tsx
@@ -7,6 +7,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import { Button, ProfileImage, Tooltip } from "@newm-web/elements";
 import theme from "@newm-web/theme";
 import { MintingStatus } from "@newm-web/types";
+import { resizeCloudinaryImage } from "@newm-web/utils";
 import MintSong from "./MintSong";
 import SongInfo from "./SongInfo";
 import { SongRouteParams } from "./types";
@@ -105,7 +106,7 @@ const ViewDetails: FunctionComponent = () => {
         <ProfileImage
           alt="Song cover art"
           height="90px"
-          src={ coverArtUrl }
+          src={ resizeCloudinaryImage(coverArtUrl, { height: 180, width: 180 }) }
           width="90px"
         />
         { title && <Typography variant="h3">{ title.toUpperCase() }</Typography> }

diff --git a/apps/studio/src/pages/home/owners/OwnersTable.tsx b/apps/studio/src/pages/home/owners/OwnersTable.tsx
@@ -10,7 +10,7 @@ import {
   Typography,
 } from "@mui/material";
 import theme from "@newm-web/theme";
-import { useWindowDimensions } from "@newm-web/utils";
+import { resizeCloudinaryImage, useWindowDimensions } from "@newm-web/utils";
 import {
   TableCell,
   TableHeadCell,
@@ -181,29 +181,40 @@ export default function OwnersTable({
                     { pictureUrl ? (
                       <img
                         alt="Profile"
-                        src={ pictureUrl }
+                        src={ resizeCloudinaryImage(pictureUrl, {
+                          height: 80,
+                          width: 80,
+                        }) }
                         style={ {
                           borderRadius: "50%",
                           height: "40px",
                           width: "40px",
                         } }
                       />
                     ) : (
-                      <Stack alignItems="center" direction="row" gap={ 1 }>
+                      <Box
+                        alignItems="center"
+                        display="flex"
+                        height="40px"
+                        justifyContent="center"
+                        width="40px"
+                      >
                         <AccountCircleIcon
                           sx={ {
                             color: theme.colors.grey200,
                             fontSize: "46px",
-                            marginLeft: "-2px",
                           } }
                         />
+                      </Box>
+                    ) }
 
-                        <Typography fontStyle="italic" fontWeight={ 400 }>
-                          Waiting on account creation
-                        </Typography>
-                      </Stack>
+                    { id ? (
+                      `${firstName} ${lastName}`
+                    ) : (
+                      <Typography fontStyle="italic" fontWeight={ 400 }>
+                        Waiting on account creation
+                      </Typography>
                     ) }
-                    { firstName && lastName ? `${firstName} ${lastName}` : null }
                   </Stack>
                 </TableCell>
                 <TableCell>