From eae1a364928625c0b2f842c41b75319b718b250d Mon Sep 17 00:00:00 2001
From: Hsu Zhong Jun <27919917+dcshzj@users.noreply.github.com>
Date: Fri, 10 Nov 2023 14:22:47 +0800
Subject: [PATCH] styles(media): adjustments from design feedback

---
 .../CreateMediaFolderModal.stories.tsx        |   1 +
 .../CreateMediaFolderModal.tsx                |  53 ++++--
 .../DeleteMediaModal/DeleteMediaModal.tsx     |   2 +-
 .../ImagePreviewCard/ImagePreviewCard.tsx     |   7 +-
 .../MoveMediaModal/MoveMediaModal.tsx         |   2 +-
 src/layouts/Media/Media.tsx                   |  18 +-
 .../Media/components/FilePreviewCard.tsx      | 157 ++++++++++++------
 7 files changed, 169 insertions(+), 71 deletions(-)

diff --git a/src/components/CreateMediaFolderModal/CreateMediaFolderModal.stories.tsx b/src/components/CreateMediaFolderModal/CreateMediaFolderModal.stories.tsx
index 6315eb4e9a..1907dc6f8a 100644
--- 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
index b0fd302e47..502d8b89ce 100644
--- a/src/components/CreateMediaFolderModal/CreateMediaFolderModal.tsx
+++ b/src/components/CreateMediaFolderModal/CreateMediaFolderModal.tsx
@@ -28,12 +28,15 @@ 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"
@@ -41,6 +44,7 @@ import {
 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
index f4ffd0642f..320ba4c1c4 100644
--- 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
index b73dd0f687..bb8774356f 100644
--- 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
index 67fe270b3a..afcf5b8d6e 100644
--- 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
index 26c51e271f..7cccee76c3 100644
--- 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}
                             />
diff --git a/src/layouts/Media/components/FilePreviewCard.tsx b/src/layouts/Media/components/FilePreviewCard.tsx
index 1cfd0629ec..70ffadb317 100644
--- a/src/layouts/Media/components/FilePreviewCard.tsx
+++ b/src/layouts/Media/components/FilePreviewCard.tsx
@@ -1,81 +1,138 @@
-import {
-  LinkBox,
-  LinkOverlay,
-  Icon,
-  Text,
-  Divider,
-  HStack,
-  Box,
-} from "@chakra-ui/react"
+import { Box, Divider, HStack, Icon, Text } from "@chakra-ui/react"
+import { Checkbox } from "@opengovsg/design-system-react"
 import { BiChevronRight, BiEditAlt, BiFolder, BiTrash } from "react-icons/bi"
 import { Link as RouterLink, useRouteMatch } from "react-router-dom"
 
 import { Card, CardBody } from "components/Card"
 import { ContextMenu } from "components/ContextMenu"
 
+import useRedirectHook from "hooks/useRedirectHook"
+
 import { BxFileArchiveSolid } from "assets"
 
 interface FilePreviewCardProps {
   name: string
+  isSelected: boolean
+  isMenuNeeded?: boolean
   onOpen?: () => void
+  onClick?: () => void
+  onCheck?: () => void
   onDelete?: () => void
   onMove?: () => void
 }
 
 export const FilePreviewCard = ({
   name,
+  isSelected,
+  isMenuNeeded = true,
   onOpen,
+  onClick,
+  onCheck,
   onDelete,
   onMove,
 }: FilePreviewCardProps): JSX.Element => {
   const { url } = useRouteMatch()
+  const { setRedirectToPage } = useRedirectHook()
   const encodedName = encodeURIComponent(name)
 
   return (
-    <Box position="relative" h="100%">
-      <LinkBox position="relative" h="100%">
-        <LinkOverlay
-          as={RouterLink}
-          to={`${url}/editMediaSettings/${encodedName}`}
-        >
-          <Card variant="multi">
-            <CardBody>
-              <Icon as={BxFileArchiveSolid} fontSize="1.5rem" fill="icon.alt" />
-              <Text textStyle="body-1" color="text.label" noOfLines={3}>
-                {name}
-              </Text>
-            </CardBody>
-          </Card>
-        </LinkOverlay>
-      </LinkBox>
-      <ContextMenu onOpen={onOpen}>
-        <ContextMenu.Button />
-        <ContextMenu.List>
-          <ContextMenu.Item
-            icon={<BiEditAlt />}
-            as={RouterLink}
-            to={`${url}/editMediaSettings/${encodedName}`}
-          >
-            <Text>Edit details</Text>
-          </ContextMenu.Item>
-          <ContextMenu.Item icon={<BiFolder />} onClick={onMove}>
-            <HStack spacing="4rem" alignItems="center">
-              <Text>Move to</Text>
-              <Icon as={BiChevronRight} fontSize="1.25rem" />
-            </HStack>
-          </ContextMenu.Item>
-          <>
-            <Divider />
+    <Box position="relative" h="100%" data-group>
+      {/* Checkbox overlay */}
+      <Checkbox
+        position="absolute"
+        left="1rem"
+        top="0.5rem"
+        h="3.25rem"
+        w="3.25rem"
+        size="md"
+        p="1rem"
+        variant="transparent"
+        display={isSelected ? "inline-block" : "none"}
+        _groupHover={{
+          bg: "transparent",
+          display: "inline-block",
+        }}
+        _focusWithin={{
+          outline: "none",
+        }}
+        zIndex={1}
+        isChecked={isSelected}
+        onChange={() => {
+          if (onCheck) onCheck()
+        }}
+      />
+
+      <Box
+        position="relative"
+        h="100%"
+        onClick={(e) => {
+          // For some weird reason, the onClick event is treated as a submit event
+          // We can safely disable the default behaviour here since we define the
+          // onClick behaviour ourselves
+          e.preventDefault()
+
+          if (onClick) {
+            onClick()
+          } else {
+            setRedirectToPage(`${url}/editMediaSettings/${encodedName}`)
+          }
+        }}
+      >
+        <Card variant="multi" _hover={{ bg: undefined }}>
+          <CardBody>
+            {!isSelected && (
+              <Icon
+                as={BxFileArchiveSolid}
+                fontSize="1.5rem"
+                fill="icon.alt"
+                _groupHover={{
+                  display: "none",
+                }}
+              />
+            )}
+            <Text
+              textStyle="body-1"
+              color="text.label"
+              noOfLines={3}
+              ml={isSelected ? "2.5rem" : 0}
+              _groupHover={{ marginLeft: "2.5rem" }}
+            >
+              {name}
+            </Text>
+          </CardBody>
+        </Card>
+      </Box>
+
+      {isMenuNeeded && (
+        <ContextMenu onOpen={onOpen}>
+          <ContextMenu.Button />
+          <ContextMenu.List>
             <ContextMenu.Item
-              icon={<BiTrash />}
-              color="interaction.critical.default"
-              onClick={onDelete}
+              icon={<BiEditAlt />}
+              as={RouterLink}
+              to={`${url}/editMediaSettings/${encodedName}`}
             >
-              Delete file
+              <Text>Edit details</Text>
+            </ContextMenu.Item>
+            <ContextMenu.Item icon={<BiFolder />} onClick={onMove}>
+              <HStack spacing="4rem" alignItems="center">
+                <Text>Move to</Text>
+                <Icon as={BiChevronRight} fontSize="1.25rem" />
+              </HStack>
             </ContextMenu.Item>
-          </>
-        </ContextMenu.List>
-      </ContextMenu>
+            <>
+              <Divider />
+              <ContextMenu.Item
+                icon={<BiTrash />}
+                color="interaction.critical.default"
+                onClick={onDelete}
+              >
+                Delete file
+              </ContextMenu.Item>
+            </>
+          </ContextMenu.List>
+        </ContextMenu>
+      )}
     </Box>
   )
 }