fixed submission tile styles

quest-chains · Sep 24, 2022 · 362b478 · 362b478
1 parent 8d63bc3
commit 362b478
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 71 deletions.
diff --git a/components/Review/PopoverButton.tsx b/components/Review/PopoverButton.tsx
@@ -1,7 +1,6 @@
 import { CheckIcon, CloseIcon } from '@chakra-ui/icons';
 import {
   Button,
-  Image,
   Popover,
   PopoverBody,
   PopoverContent,
@@ -10,8 +9,8 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 
-import CommentCheck from '@/assets/CommentCheck.svg';
-import CommentClose from '@/assets/CommentClose.svg';
+import { CommentCheckIcon } from '../icons/CommentCheckIcon';
+import { CommentCloseIcon } from '../icons/CommentCloseIcon';
 
 export type SubmissionType = {
   id: string;
@@ -36,13 +35,7 @@ export const PopoverButton: React.FC<{
 }> = ({ toReview, onReview, isDisabled, success }) => {
   const { onOpen, onClose, isOpen } = useDisclosure();
   return (
-    <Popover
-      isOpen={isOpen}
-      onOpen={onOpen}
-      onClose={onClose}
-      isLazy
-      lazyBehavior="keepMounted"
-    >
+    <Popover isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
       <Tooltip
         shouldWrapChildren
         label="Please switch to the correct chain"
@@ -56,27 +49,35 @@ export const PopoverButton: React.FC<{
             px={6}
             borderColor="gray.600"
             borderWidth={1}
+            _hover={{
+              borderColor: success ? 'main' : 'rejected',
+              color: success ? 'main' : 'rejected',
+            }}
             isDisabled={isDisabled}
+            leftIcon={success ? <CheckIcon w={4} /> : <CloseIcon w={4} />}
           >
-            {success ? <CheckIcon w={4} mr={2} /> : <CloseIcon w={4} mr={2} />}
             {success ? 'Accept' : 'Reject'}
           </Button>
         </PopoverTrigger>
       </Tooltip>
 
       <PopoverContent
         background="gray.900"
-        borderColor="transparent"
+        borderColor="gray.600"
         position="absolute"
         top="-57px"
         left="-74px"
         w="xxs"
       >
-        <PopoverBody background="transparent" borderColor="transparent">
+        <PopoverBody>
           <Button
-            borderRadius={24}
             bgColor="gray.900"
-            px={6}
+            size="sm"
+            p={4}
+            _hover={{
+              borderColor: success ? 'main' : 'rejected',
+              color: success ? 'main' : 'rejected',
+            }}
             onClick={() => {
               onReview(
                 toReview.map(r => ({
@@ -87,15 +88,19 @@ export const PopoverButton: React.FC<{
               );
               onClose();
             }}
+            leftIcon={success ? <CheckIcon w={4} /> : <CloseIcon w={4} />}
           >
-            {success ? <CheckIcon w={4} mr={2} /> : <CloseIcon w={4} mr={2} />}
             {success ? 'Accept' : 'Reject'}
           </Button>
 
           <Button
-            borderRadius={24}
             bgColor="gray.900"
-            px={6}
+            _hover={{
+              borderColor: success ? 'main' : 'rejected',
+              color: success ? 'main' : 'rejected',
+            }}
+            p={4}
+            size="sm"
             onClick={() => {
               onReview(
                 toReview.map(r => ({
@@ -106,14 +111,11 @@ export const PopoverButton: React.FC<{
               );
               onClose();
             }}
+            leftIcon={
+              success ? <CommentCheckIcon w={4} /> : <CommentCloseIcon w={4} />
+            }
           >
-            <Image
-              src={success ? CommentCheck.src : CommentClose.src}
-              alt="comment check"
-              mr={2}
-              w={4}
-            />
-            {success ? 'Accept and comment' : 'Reject and comment'}
+            {success ? 'Accept with comment' : 'Reject with comment'}
           </Button>
         </PopoverBody>
       </PopoverContent>

diff --git a/components/Review/QuestChainV1ReviewPage.tsx b/components/Review/QuestChainV1ReviewPage.tsx
@@ -54,6 +54,11 @@ type Props = {
   refresh: () => void;
 };
 
+const removeSelectedFromReviewed = (
+  r: SubmissionType[],
+  selected: SubmissionType[],
+) => r.filter(r => !selected.map(s => s.id).includes(r.id));
+
 const statusToSubmission = (
   q: graphql.QuestStatusInfoFragment,
 ): SubmissionType => ({
@@ -70,7 +75,9 @@ const statusToSubmission = (
   submissionTimestamp: Number(
     q.submissions[q.submissions.length - 1].timestamp,
   ),
-  reviewComment: q.reviews[q.reviews.length - 1].description ?? '',
+  reviewComment: q.reviews.length
+    ? q.reviews[q.reviews.length - 1].description ?? ''
+    : '',
   success:
     q.status === graphql.Status.Pass
       ? true
@@ -180,11 +187,6 @@ export const QuestChainV1ReviewPage: React.FC<Props> = ({
     setCommenting(false);
   }, [onCloseModal]);
 
-  const removeSelectedFromReviewed = (
-    r: SubmissionType[],
-    selected: SubmissionType[],
-  ) => r.filter(r => !selected.map(s => s.id).includes(r.id));
-
   const clearChecked = useCallback(() => {
     setCheckedAwaitingReview(awaitingReview.map(() => false));
     setCheckedReviewed(reviewed.map(() => false));
@@ -197,6 +199,19 @@ export const QuestChainV1ReviewPage: React.FC<Props> = ({
         ...removeSelectedFromReviewed(reviewed, selected),
         ...selected,
       ]);
+      if (selected[0]?.reviewComment) {
+        toast.success(
+          `Successfully added comment and ${
+            selected[0]?.success ? 'approved' : 'rejected'
+          } ${selected.length} submission${selected.length > 1 ? 's' : ''}!`,
+        );
+      } else {
+        toast.success(
+          `Successfully ${selected[0]?.success ? 'approved' : 'rejected'} ${
+            selected.length
+          } submission${selected.length > 1 ? 's' : ''}!`,
+        );
+      }
       // clear current checked items
       clearChecked();
     },
@@ -236,7 +251,7 @@ export const QuestChainV1ReviewPage: React.FC<Props> = ({
       setCommenting(true);
       tid = toast.loading('Uploading metadata to IPFS via web3.storage');
       const metadata: Metadata = {
-        name: `Reviewing ${reviewing} submissions(s)`,
+        name: `Reviewing ${reviewing.length} submissions(s)`,
         description: reviewComment,
       };
 
@@ -250,7 +265,6 @@ export const QuestChainV1ReviewPage: React.FC<Props> = ({
         })),
       );
       toast.dismiss(tid);
-      tid = toast.success(`Successfully added comments!`);
       onModalClose();
     } catch (error) {
       toast.dismiss(tid);
@@ -348,8 +362,8 @@ export const QuestChainV1ReviewPage: React.FC<Props> = ({
             pr={2}
             pl={16}
           >
-            <Text mr={6}>
-              {reviewed.length} Review{reviewed.length > 1 ? 's' : ''} ready
+            <Text mr={12}>
+              {reviewed.length} review{reviewed.length > 1 ? 's' : ''} ready
             </Text>
             <SubmitButton isLoading={submitting} onClick={onSubmit}>
               Submit
@@ -471,44 +485,59 @@ export const QuestChainV1ReviewPage: React.FC<Props> = ({
       </VStack>
       <Modal isOpen={isModalOpen} onClose={onModalClose} size="xl">
         <ModalOverlay />
-        <ModalContent maxW="40rem">
-          <ModalHeader>
-            Reviewing proofs for {reviewing.length} submission(s)
+        <ModalContent
+          maxW="40rem"
+          background="linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #1A202C"
+          boxShadow="0 0.25rem 0.25rem rgba(0, 0, 0, 0.25)"
+          borderRadius="0.5rem"
+        >
+          <ModalHeader textTransform={'uppercase'} fontSize="md">
+            You are about to {reviewing[0]?.success ? 'approve' : 'reject'}{' '}
+            {reviewing.length} submission{reviewing.length > 1 ? 's' : ''} with
+            a comment
           </ModalHeader>
-          <ModalCloseButton />
+          <ModalCloseButton borderRadius="full" />
           <ModalBody>
             <FormControl isRequired>
-              <FormLabel color="main" htmlFor="reviewComment">
+              <FormLabel
+                color="gray.500"
+                htmlFor="reviewComment"
+                fontWeight="bold"
+              >
                 Comment
               </FormLabel>
               <Flex pb={4} w="100%">
                 <MarkdownEditor
                   value={reviewComment}
+                  placeholder="Write what you liked about the submissions..."
                   onChange={v => setReviewComment(v)}
                 />
               </Flex>
             </FormControl>
           </ModalBody>
 
           <ModalFooter alignItems="baseline">
-            <HStack justify="space-between" spacing={4}>
+            <HStack justify="space-between" spacing={2}>
               <Button
                 variant="ghost"
-                px={6}
                 onClick={onModalClose}
                 borderRadius="full"
+                textTransform="uppercase"
+                size="sm"
               >
-                Close
+                CANCEL
               </Button>
               <Button
+                size="sm"
                 isLoading={commenting}
-                bgColor="gray.900"
-                borderRadius={24}
-                px={6}
+                variant="ghost"
+                borderRadius="full"
                 isDisabled={!reviewComment}
                 onClick={onSubmitComment}
+                textTransform="uppercase"
+                color={reviewing[0]?.success ? 'main' : 'rejected'}
               >
-                Confirm
+                Add comment and {reviewing[0]?.success ? 'approve' : 'reject'}
               </Button>
             </HStack>
           </ModalFooter>

diff --git a/components/Review/SubmissionTile.tsx b/components/Review/SubmissionTile.tsx
@@ -12,6 +12,7 @@ import {
   Text,
 } from '@chakra-ui/react';
 
+import { formatDate } from '@/utils/dateHelpers';
 import { ipfsUriToHttp } from '@/utils/uriHelpers';
 
 import { MarkdownViewer } from '../MarkdownViewer';
@@ -48,9 +49,6 @@ export const SubmissionTile: React.FC<{
   } = submission;
 
   const date = new Date(submissionTimestamp * 1000);
-  const year = date.getFullYear();
-  const month = date.getMonth();
-  const day = date.getDate();
 
   const imageUrl = ipfsUriToHttp(imageUri);
   const externalUrl = ipfsUriToHttp(externalUri);
@@ -78,9 +76,7 @@ export const SubmissionTile: React.FC<{
 
             <Flex alignItems="center" gap={6}>
               <UserDisplay address={userId} />
-              <Text>
-                {year}-{month}-{day}
-              </Text>
+              <Text>{formatDate(date)}</Text>
               <AccordionButton
                 py={6}
                 w="auto"
@@ -93,15 +89,20 @@ export const SubmissionTile: React.FC<{
               </AccordionButton>
             </Flex>
           </Flex>
-          <Flex w="full" gap={2} pr={8} position="relative">
+          <Flex w="full" h="full" gap={2} pr={8} position="relative">
             {imageUrl && (
-              <Link isExternal href={imageUrl} _hover={{}} minW="fit-content">
+              <Link
+                isExternal
+                href={imageUrl}
+                _hover={{}}
+                minW="fit-content"
+                minH="fit-content"
+              >
                 <Image
                   src={imageUrl}
                   alt="submission pic"
-                  w="full"
-                  h={isExpanded ? '12rem' : 12}
-                  minW="fit-content"
+                  w={isExpanded ? '18rem' : '6rem'}
+                  minH="fit-content"
                   pr={4}
                 />
               </Link>

diff --git a/assets/CommentCheck.svg → components/icons/CommentCheckIcon.tsx b/assets/CommentCheck.svg → components/icons/CommentCheckIcon.tsx
@@ -1,3 +1,13 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 0H2C0.896875 0 0 0.896875 0 2V11C0 12.1031 0.896875 13 2 13H5V15.625C5 15.8469 5.18125 16 5.375 16C5.45 16 5.52813 15.9781 5.59688 15.925L9.5 13H14C15.1031 13 16 12.1031 16 11V2C16 0.896875 15.1031 0 14 0ZM14.5 11C14.5 11.275 14.275 11.5 14 11.5H9L8.6 11.8L6.5 13.375V11.5H2C1.725 11.5 1.5 11.275 1.5 11V2C1.5 1.725 1.725 1.5 2 1.5H14C14.275 1.5 14.5 1.725 14.5 2V11ZM10.3969 4.075C10.2781 3.95312 10.0813 3.95313 9.95938 4.07188L7.23125 6.78125L6.04688 5.5875C5.92813 5.46563 5.73125 5.46562 5.60938 5.58437L4.87813 6.30937C4.75625 6.42812 4.75625 6.625 4.875 6.74687L7.00313 8.89062C7.12188 9.0125 7.31875 9.0125 7.44063 8.89375L11.1219 5.24375C11.2437 5.125 11.2437 4.92813 11.125 4.80625L10.3969 4.075Z" fill="white"/>
-</svg>
+import { createIcon } from '@chakra-ui/icons';
+import * as React from 'react';
+
+export const CommentCheckIcon = createIcon({
+  displayName: 'CommentCheckIcon',
+  path: (
+    <path
+      d="M14 0H2C0.896875 0 0 0.896875 0 2V11C0 12.1031 0.896875 13 2 13H5V15.625C5 15.8469 5.18125 16 5.375 16C5.45 16 5.52813 15.9781 5.59688 15.925L9.5 13H14C15.1031 13 16 12.1031 16 11V2C16 0.896875 15.1031 0 14 0ZM14.5 11C14.5 11.275 14.275 11.5 14 11.5H9L8.6 11.8L6.5 13.375V11.5H2C1.725 11.5 1.5 11.275 1.5 11V2C1.5 1.725 1.725 1.5 2 1.5H14C14.275 1.5 14.5 1.725 14.5 2V11ZM10.3969 4.075C10.2781 3.95312 10.0813 3.95313 9.95938 4.07188L7.23125 6.78125L6.04688 5.5875C5.92813 5.46563 5.73125 5.46562 5.60938 5.58437L4.87813 6.30937C4.75625 6.42812 4.75625 6.625 4.875 6.74687L7.00313 8.89062C7.12188 9.0125 7.31875 9.0125 7.44063 8.89375L11.1219 5.24375C11.2437 5.125 11.2437 4.92813 11.125 4.80625L10.3969 4.075Z"
+      fill="currentColor"
+    />
+  ),
+  viewBox: '0 0 16 16',
+});
diff --git a/assets/CommentClose.svg → components/icons/CommentCloseIcon.tsx b/assets/CommentClose.svg → components/icons/CommentCloseIcon.tsx
@@ -1,10 +1,13 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1706_17252)">
-<path d="M28 0H4C1.79375 0 0 1.79375 0 4V22C0 24.2062 1.79375 26 4 26H10V31.25C10 31.6938 10.3625 32 10.75 32C10.9 32 11.0563 31.9563 11.1938 31.85L19 26H28C30.2062 26 32 24.2062 32 22V4C32 1.79375 30.2062 0 28 0ZM29 22C29 22.55 28.55 23 28 23H18L17.2 23.6L13 26.75V23H4C3.45 23 3 22.55 3 22V4C3 3.45 3.45 3 4 3H28C28.55 3 29 3.45 29 4V22ZM20.5938 9.1125L19.8875 8.40625C19.5 8.01875 18.8625 8.01875 18.475 8.40625L16 10.8813L13.525 8.40625C13.1375 8.01875 12.5 8.01875 12.1125 8.40625L11.4062 9.1125C11.0188 9.5 11.0188 10.1375 11.4062 10.525L13.8813 13L11.4062 15.475C11.0188 15.8625 11.0188 16.5 11.4062 16.8875L12.1125 17.5938C12.5 17.9813 13.1375 17.9813 13.525 17.5938L16 15.1187L18.475 17.5938C18.8625 17.9813 19.5 17.9813 19.8875 17.5938L20.5938 16.8875C20.9813 16.5 20.9813 15.8625 20.5938 15.475L18.1187 13L20.5938 10.525C20.9875 10.1375 20.9875 9.5 20.5938 9.1125Z" fill="white"/>
-</g>
-<defs>
-<clipPath id="clip0_1706_17252">
-<rect width="32" height="32" fill="white"/>
-</clipPath>
-</defs>
-</svg>
+import { createIcon } from '@chakra-ui/icons';
+import * as React from 'react';
+
+export const CommentCloseIcon = createIcon({
+  displayName: 'CommentCloseIcon',
+  path: (
+    <path
+      d="M28 0H4C1.79375 0 0 1.79375 0 4V22C0 24.2062 1.79375 26 4 26H10V31.25C10 31.6938 10.3625 32 10.75 32C10.9 32 11.0563 31.9563 11.1938 31.85L19 26H28C30.2062 26 32 24.2062 32 22V4C32 1.79375 30.2062 0 28 0ZM29 22C29 22.55 28.55 23 28 23H18L17.2 23.6L13 26.75V23H4C3.45 23 3 22.55 3 22V4C3 3.45 3.45 3 4 3H28C28.55 3 29 3.45 29 4V22ZM20.5938 9.1125L19.8875 8.40625C19.5 8.01875 18.8625 8.01875 18.475 8.40625L16 10.8813L13.525 8.40625C13.1375 8.01875 12.5 8.01875 12.1125 8.40625L11.4062 9.1125C11.0188 9.5 11.0188 10.1375 11.4062 10.525L13.8813 13L11.4062 15.475C11.0188 15.8625 11.0188 16.5 11.4062 16.8875L12.1125 17.5938C12.5 17.9813 13.1375 17.9813 13.525 17.5938L16 15.1187L18.475 17.5938C18.8625 17.9813 19.5 17.9813 19.8875 17.5938L20.5938 16.8875C20.9813 16.5 20.9813 15.8625 20.5938 15.475L18.1187 13L20.5938 10.525C20.9875 10.1375 20.9875 9.5 20.5938 9.1125Z"
+      fill="currentColor"
+    />
+  ),
+  viewBox: '0 0 32 32',
+});