styles(media): adjustments from design feedback

isomerpages · Nov 10, 2023 · eae1a36 · eae1a36
1 parent c6c108f
commit eae1a36
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 71 deletions.
diff --git a/src/components/CreateMediaFolderModal/CreateMediaFolderModal.stories.tsx b/src/components/CreateMediaFolderModal/CreateMediaFolderModal.stories.tsx
@@ -56,6 +56,7 @@ const createMediaFolderModalTemplate: StoryFn<
       <CreateMediaFolderModal
         originalSelectedMedia={originalSelectedMedia}
         mediaLabels={getMediaLabels("images")}
+        mediaType="images"
         subDirectories={{ directories: [] }}
         mediaData={[
           MOCK_MEDIA_ITEM_ONE,

diff --git a/src/components/CreateMediaFolderModal/CreateMediaFolderModal.tsx b/src/components/CreateMediaFolderModal/CreateMediaFolderModal.tsx
@@ -28,19 +28,23 @@ import { UseMutateAsyncFunction } from "react-query"
 import { DirectorySettingsSchema } from "components/DirectorySettingsModal"
 import { ImagePreviewCard } from "components/ImagePreviewCard"
 
+import { FilePreviewCard } from "layouts/Media/components"
+
 import { getSelectedMediaDto } from "utils/media"
 
 import { GetMediaSubdirectoriesDto, MediaData } from "types/directory"
 import { MiddlewareError } from "types/error"
 import {
   MediaFolderCreationInfo,
+  MediaFolderTypes,
   MediaLabels,
   SelectedMediaDto,
 } from "types/media"
 
 interface CreateMediaFolderModalProps {
   originalSelectedMedia: SelectedMediaDto[]
   mediaLabels: MediaLabels
+  mediaType: MediaFolderTypes
   subDirectories: GetMediaSubdirectoriesDto | undefined
   mediaData: (MediaData | undefined)[]
   isWriteDisabled: boolean | undefined
@@ -84,6 +88,7 @@ const getButtonLabel = (
 export const CreateMediaFolderModal = ({
   originalSelectedMedia,
   mediaLabels,
+  mediaType,
   subDirectories,
   mediaData,
   isWriteDisabled,
@@ -158,17 +163,19 @@ export const CreateMediaFolderModal = ({
       <FormProvider {...methods}>
         <form onSubmit={methods.handleSubmit(onSubmit)}>
           <ModalContent my="4rem">
-            <ModalCloseButton />
+            <ModalCloseButton top="1.5rem" insetEnd="2rem" />
 
             <ModalHeader pt="2rem" pb={0} px="2rem">
-              Create a new {singularDirectoryLabel}
-              {originalSelectedMedia.length > 0
-                ? ` with ${originalSelectedMedia.length} ${
-                    originalSelectedMedia.length === 1
-                      ? singularMediaLabel
-                      : pluralMediaLabel
-                  }`
-                : ""}
+              <Text as="h4" textStyle="h4" mr="2.5rem">
+                Create a new {singularDirectoryLabel}
+                {originalSelectedMedia.length > 0
+                  ? ` with ${originalSelectedMedia.length} ${
+                      originalSelectedMedia.length === 1
+                        ? singularMediaLabel
+                        : pluralMediaLabel
+                    }`
+                  : ""}
+              </Text>
             </ModalHeader>
 
             <ModalBody px="2rem" pt="1rem" pb={0}>
@@ -213,15 +220,28 @@ export const CreateMediaFolderModal = ({
                       py="1rem"
                     >
                       <SimpleGrid columns={3} spacing="1.5rem" w="100%">
-                        {mediaData.map(
-                          (data) =>
+                        {mediaData.map((data) =>
+                          data && mediaType === "images" ? (
+                            <ImagePreviewCard
+                              key={data.name}
+                              name={data.name}
+                              addedTime={data.addedTime}
+                              mediaUrl={data.mediaUrl}
+                              imageHeight="10.5rem"
+                              isSelected={methods
+                                .watch("selectedPages")
+                                .some(
+                                  (selectedData) =>
+                                    selectedData.filePath === data.mediaPath
+                                )}
+                              isMenuNeeded={false}
+                              onClick={() => handleSelect(data)}
+                              onCheck={() => handleSelect(data)}
+                            />
+                          ) : (
                             data && (
-                              <ImagePreviewCard
-                                key={data.name}
+                              <FilePreviewCard
                                 name={data.name}
-                                addedTime={data.addedTime}
-                                mediaUrl={data.mediaUrl}
-                                imageHeight="10.5rem"
                                 isSelected={methods
                                   .watch("selectedPages")
                                   .some(
@@ -233,6 +253,7 @@ export const CreateMediaFolderModal = ({
                                 onCheck={() => handleSelect(data)}
                               />
                             )
+                          )
                         )}
                       </SimpleGrid>
                     </Box>

diff --git a/src/components/DeleteMediaModal/DeleteMediaModal.tsx b/src/components/DeleteMediaModal/DeleteMediaModal.tsx
@@ -64,7 +64,7 @@ export const DeleteMediaModal = ({
         {selectedMedia.length === 1 && (
           <>
             <ModalHeader>
-              <Text as="h4" textStyle="h4">
+              <Text as="h4" textStyle="h4" mr="2.5rem">
                 Delete {selectedMedia[0].filePath.split("/").pop()}?
               </Text>
             </ModalHeader>

diff --git a/src/components/ImagePreviewCard/ImagePreviewCard.tsx b/src/components/ImagePreviewCard/ImagePreviewCard.tsx
@@ -11,7 +11,7 @@ import {
   VStack,
 } from "@chakra-ui/react"
 import { Checkbox } from "@opengovsg/design-system-react"
-import { BiEditAlt, BiTrash } from "react-icons/bi"
+import { BiEditAlt, BiFolder, BiTrash } from "react-icons/bi"
 import { Link as RouterLink, useRouteMatch } from "react-router-dom"
 
 import { ContextMenu } from "components/ContextMenu"
@@ -33,6 +33,7 @@ export interface ImagePreviewCardProps {
   onClick?: () => void
   onCheck?: () => void
   onDelete?: () => void
+  onMove?: () => void
 }
 
 // Note: This is written as a separate component as the current Card API is not
@@ -48,6 +49,7 @@ export const ImagePreviewCard = ({
   onClick,
   onCheck,
   onDelete,
+  onMove,
 }: ImagePreviewCardProps): JSX.Element => {
   const { url } = useRouteMatch()
   const { setRedirectToPage } = useRedirectHook()
@@ -185,6 +187,9 @@ export const ImagePreviewCard = ({
             >
               <Text>Rename image</Text>
             </ContextMenu.Item>
+            <ContextMenu.Item icon={<BiFolder />} onClick={onMove}>
+              <Text>Move to</Text>
+            </ContextMenu.Item>
             <ContextMenu.Item
               icon={<BiTrash />}
               color="interaction.critical.default"

diff --git a/src/components/MoveMediaModal/MoveMediaModal.tsx b/src/components/MoveMediaModal/MoveMediaModal.tsx
@@ -118,7 +118,7 @@ export const MoveMediaModal = ({
         <ModalCloseButton />
 
         <ModalHeader>
-          <Text as="h4" textStyle="h4">
+          <Text as="h4" textStyle="h4" mr="2.5rem">
             Move{" "}
             {selectedMedia.length === 1
               ? getLastChildOfPath(selectedMedia[0].filePath)

diff --git a/src/layouts/Media/Media.tsx b/src/layouts/Media/Media.tsx
@@ -357,6 +357,7 @@ export const Media = (): JSX.Element => {
       <CreateMediaFolderModal
         originalSelectedMedia={selectedMedia}
         mediaLabels={getMediaLabels(mediaType)}
+        mediaType={mediaType}
         subDirectories={mediaFolderSubdirectories}
         mediaData={files.map(({ data }) => data) || []}
         isWriteDisabled={isWriteDisabled}
@@ -467,7 +468,11 @@ export const Media = (): JSX.Element => {
                     <Menu.List>
                       <Menu.Item onClick={() => onMoveModalOpen()}>
                         <Icon as={BiFolderOpen} mr="1rem" fontSize="1.25rem" />
-                        Move images to album
+                        Move{" "}
+                        {selectedMedia.length === 1
+                          ? singularMediaLabel
+                          : pluralMediaLabel}{" "}
+                        to {singularDirectoryLabel}
                       </Menu.Item>
 
                       {directoryLevel < MAX_MEDIA_LEVELS && (
@@ -479,7 +484,10 @@ export const Media = (): JSX.Element => {
                             mr="1rem"
                             fontSize="1.25rem"
                           />
-                          Create new album with images
+                          Create new {singularDirectoryLabel} with{" "}
+                          {selectedMedia.length === 1
+                            ? singularMediaLabel
+                            : pluralMediaLabel}
                         </Menu.Item>
                       )}
 
@@ -633,14 +641,20 @@ export const Media = (): JSX.Element => {
                             }
                             onCheck={() => handleSelect(data)}
                             onDelete={onDeleteModalOpen}
+                            onMove={onMoveModalOpen}
                           />
                         ) : (
                           data && (
                             <FilePreviewCard
                               name={data.name}
+                              isSelected={selectedMedia.some(
+                                (selectedData) =>
+                                  selectedData.filePath === data.mediaPath
+                              )}
                               onOpen={() =>
                                 setIndividualMedia(getSelectedMediaDto(data))
                               }
+                              onCheck={() => handleSelect(data)}
                               onDelete={onDeleteModalOpen}
                               onMove={onMoveModalOpen}
                             />