From 247daaad15be0bb6705e02eea41b9a9bec851d33 Mon Sep 17 00:00:00 2001
From: Kevin Charles <kevinmcharles@gmail.com>
Date: Wed, 12 Apr 2023 16:55:24 +0000
Subject: [PATCH] Update cards

---
 src/Tools/_framework/Paths/Community.jsx      | 128 ++----------------
 .../Paths/PortfolioActivitySettings.jsx       |   4 +-
 .../_framework/Paths/PublicPortfolio.jsx      | 128 +++++++++---------
 .../PanelHeaderComponents/ActivityCard.jsx    |  20 ++-
 .../PanelHeaderComponents/AuthorCard.jsx      |  27 ++++
 .../RecoilActivityCard.jsx                    |   2 +-
 6 files changed, 123 insertions(+), 186 deletions(-)
 create mode 100644 src/_reactComponents/PanelHeaderComponents/AuthorCard.jsx

diff --git a/src/Tools/_framework/Paths/Community.jsx b/src/Tools/_framework/Paths/Community.jsx
index 79f24ff2ac..771325da44 100644
--- a/src/Tools/_framework/Paths/Community.jsx
+++ b/src/Tools/_framework/Paths/Community.jsx
@@ -1,9 +1,7 @@
 import React, { useState } from 'react';
 import {
-  Avatar,
   Badge,
   Box,
-  Image,
   Icon,
   Tab,
   TabList,
@@ -18,8 +16,10 @@ import { useLoaderData } from 'react-router';
 import styled from 'styled-components';
 import { Carousel } from '../../../_reactComponents/PanelHeaderComponents/Carousel';
 import Searchbar from '../../../_reactComponents/PanelHeaderComponents/SearchBar';
-import { Form, Link } from 'react-router-dom';
+import { Form } from 'react-router-dom';
 import { RiEmotionSadLine } from 'react-icons/ri';
+import ActivityCard from '../../../_reactComponents/PanelHeaderComponents/ActivityCard';
+import AuthorCard from '../../../_reactComponents/PanelHeaderComponents/AuthorCard';
 
 export async function loader({ request }) {
   const url = new URL(request.url);
@@ -36,114 +36,6 @@ export async function loader({ request }) {
   }
 }
 
-function ActivityCard({ doenetId, imagePath, label, fullName }) {
-  if (!imagePath) {
-    imagePath = '/activity_default.jpg';
-  }
-  const activityLink = `/portfolioviewer/${doenetId}`;
-
-  return (
-    <Box
-      display="flex"
-      flexDirection="column"
-      height="180px"
-      width="180px"
-      background="black"
-      overflow="hidden"
-      margin="10px"
-      border="2px solid #949494"
-      borderRadius="6px"
-    >
-      <Box height="130px">
-        <Link to={activityLink}>
-          <Image
-            width="100%"
-            height="100%"
-            objectFit="contain"
-            src={imagePath}
-            alt="Activity Card"
-          />
-        </Link>
-      </Box>
-      <Box
-        height="50px"
-        display="flex"
-        justifyContent="flex-start"
-        padding="2px"
-        color="black"
-        background="white"
-      >
-        <Box
-          width="40px"
-          display="flex"
-          alignContent="center"
-          justifyContent="center"
-          alignItems="center"
-          position="relative"
-        >
-          <Avatar size="sm" name={fullName} />
-          <Box position="absolute" width="100px" left="8px" bottom="0px">
-            <Text fontSize="10px">{fullName}</Text>
-          </Box>
-        </Box>
-        <Box>
-          <Text fontSize="sm" lineHeight="1" noOfLines={2}>
-            {label}
-          </Text>
-        </Box>
-      </Box>
-    </Box>
-  );
-}
-
-function AuthorCard({ fullName, portfolioCourseId }) {
-  // function AuthorCard({ doenetId, imagePath, label, fullName }) {
-
-  const authorLink = `/publicportfolio/${portfolioCourseId}`;
-
-  return (
-    <Box
-      display="flex"
-      flexDirection="column"
-      height="180px"
-      width="180px"
-      background="black"
-      overflow="hidden"
-      margin="10px"
-      border="2px solid #949494"
-      borderRadius="6px"
-    >
-      <Box
-        height="130px"
-        display="flex"
-        alignContent="center"
-        justifyContent="center"
-        alignItems="center"
-      >
-        <Link to={authorLink}>
-          <Avatar w="100px" h="100px" fontSize="60pt" name={fullName} />
-        </Link>
-      </Box>
-      <Box
-        height="50px"
-        display="flex"
-        padding="2px"
-        color="black"
-        background="white"
-        alignContent="center"
-        justifyContent="center"
-        alignItems="center"
-      >
-        <Box>
-          <Text fontSize="sm" lineHeight="1" noOfLines={2}>
-            {fullName}
-          </Text>
-        </Box>
-      </Box>
-    </Box>
-  );
-}
-
 function Heading(props) {
   return (
     <div
@@ -289,10 +181,12 @@ export function Community() {
                 {allMatches.map((itemObj) => {
                   if (itemObj?.type == 'activity') {
                     const { doenetId, imagePath, label, fullName } = itemObj;
+                    const imageLink = `/portfolioviewer/${doenetId}`;
+
                     return (
                       <ActivityCard
                         key={doenetId}
-                        doenetId={doenetId}
+                        imageLink={imageLink}
                         imagePath={imagePath}
                         label={label}
                         fullName={fullName}
@@ -300,12 +194,13 @@ export function Community() {
                     );
                   } else if (itemObj?.type == 'author') {
                     const { courseId, firstName, lastName } = itemObj;
+                    const imageLink = `/publicportfolio/${courseId}`;
 
                     return (
                       <AuthorCard
                         key={courseId}
                         fullName={`${firstName} ${lastName}`}
-                        portfolioCourseId={courseId}
+                        imageLink={imageLink}
                       />
                     );
                   }
@@ -338,10 +233,12 @@ export function Community() {
                 {searchResults?.activities.map((activityObj) => {
                   const { doenetId, imagePath, label, fullName } = activityObj;
                   //{ activityLink, doenetId, imagePath, label, fullName }
+                  const imageLink = `/portfolioviewer/${doenetId}`;
+
                   return (
                     <ActivityCard
                       key={doenetId}
-                      doenetId={doenetId}
+                      imageLink={imageLink}
                       imagePath={imagePath}
                       label={label}
                       fullName={fullName}
@@ -377,12 +274,13 @@ export function Community() {
                 {searchResults?.users.map((authorObj) => {
                   const { courseId, firstName, lastName } = authorObj;
                   // console.log("authorObj",authorObj)
+                  const imageLink = `/publicportfolio/${courseId}`;
 
                   return (
                     <AuthorCard
                       key={courseId}
                       fullName={`${firstName} ${lastName}`}
-                      portfolioCourseId={courseId}
+                      imageLink={imageLink}
                     />
                   );
                 })}
diff --git a/src/Tools/_framework/Paths/PortfolioActivitySettings.jsx b/src/Tools/_framework/Paths/PortfolioActivitySettings.jsx
index e1ca543c34..bc7dd53e34 100644
--- a/src/Tools/_framework/Paths/PortfolioActivitySettings.jsx
+++ b/src/Tools/_framework/Paths/PortfolioActivitySettings.jsx
@@ -175,8 +175,8 @@ export function PortfolioActivitySettings() {
 
       let image = await window.BrowserImageResizer.readAndCompressImage(file, {
         quality: 0.9,
-        maxWidth: 176,
-        maxHeight: 127,
+        maxWidth: 350,
+        maxHeight: 253,
         debug: true,
       });
       // const convertToBase64 = (blob) => {
diff --git a/src/Tools/_framework/Paths/PublicPortfolio.jsx b/src/Tools/_framework/Paths/PublicPortfolio.jsx
index 04ef81fc39..4df74cddf8 100644
--- a/src/Tools/_framework/Paths/PublicPortfolio.jsx
+++ b/src/Tools/_framework/Paths/PublicPortfolio.jsx
@@ -1,5 +1,5 @@
 // import axios from 'axios';
-import { Avatar, Box, Image, Text } from '@chakra-ui/react';
+import { Avatar, Box, Image, Text, Wrap } from '@chakra-ui/react';
 import React from 'react';
 import {
   redirect,
@@ -9,6 +9,7 @@ import {
   Link,
 } from 'react-router-dom';
 import styled from 'styled-components';
+import ActivityCard from '../../../_reactComponents/PanelHeaderComponents/ActivityCard';
 // import Button from '../../../_reactComponents/PanelHeaderComponents/Button';
 
 // export async function action() {
@@ -56,62 +57,62 @@ const CardsContainer = styled.div`
   width: calc(100vw - 40px);
 `;
 
-function Card({ doenetId, imagePath, label, pageDoenetId, fullName }) {
-  const activityLink = `/portfolioviewer/${doenetId}`;
+// function Card({ doenetId, imagePath, label, pageDoenetId, fullName }) {
+//   const activityLink = `/portfolioviewer/${doenetId}`;
 
-  return (
-    <Box
-      display="flex"
-      flexDirection="column"
-      height="180px"
-      width="180px"
-      background="black"
-      overflow="hidden"
-      margin="10px"
-      border="2px solid #949494"
-      borderRadius="6px"
-    >
-      <Box height="130px">
-        <Link to={activityLink}>
-          <Image
-            width="100%"
-            height="100%"
-            objectFit="contain"
-            src={imagePath}
-            alt="Activity Card"
-          />
-        </Link>
-      </Box>
-      <Box
-        height="50px"
-        display="flex"
-        justifyContent="flex-start"
-        padding="2px"
-        color="black"
-        background="white"
-      >
-        <Box
-          width="40px"
-          display="flex"
-          alignContent="center"
-          justifyContent="center"
-          alignItems="center"
-          position="relative"
-        >
-          <Avatar size="sm" name={fullName} />
-          <Box position="absolute" width="100px" left="8px" bottom="0px">
-            <Text fontSize="10px">{fullName}</Text>
-          </Box>
-        </Box>
-        <Box>
-          <Text fontSize="sm" lineHeight="1" noOfLines={2}>
-            {label}
-          </Text>
-        </Box>
-      </Box>
-    </Box>
-  );
-}
+//   return (
+//     <Box
+//       display="flex"
+//       flexDirection="column"
+//       height="180px"
+//       width="180px"
+//       background="black"
+//       overflow="hidden"
+//       margin="10px"
+//       border="2px solid #949494"
+//       borderRadius="6px"
+//     >
+//       <Box height="130px">
+//         <Link to={activityLink}>
+//           <Image
+//             width="100%"
+//             height="100%"
+//             objectFit="contain"
+//             src={imagePath}
+//             alt="Activity Card"
+//           />
+//         </Link>
+//       </Box>
+//       <Box
+//         height="50px"
+//         display="flex"
+//         justifyContent="flex-start"
+//         padding="2px"
+//         color="black"
+//         background="white"
+//       >
+//         <Box
+//           width="40px"
+//           display="flex"
+//           alignContent="center"
+//           justifyContent="center"
+//           alignItems="center"
+//           position="relative"
+//         >
+//           <Avatar size="sm" name={fullName} />
+//           <Box position="absolute" width="100px" left="8px" bottom="0px">
+//             <Text fontSize="10px">{fullName}</Text>
+//           </Box>
+//         </Box>
+//         <Box>
+//           <Text fontSize="sm" lineHeight="1" noOfLines={2}>
+//             {label}
+//           </Text>
+//         </Box>
+//       </Box>
+//     </Box>
+//   );
+// }
 
 const PortfolioGrid = styled.div`
   display: grid;
@@ -150,23 +151,28 @@ export function PublicPortfolio() {
           </Text>
         </Box>
         <PublicActivitiesSection>
-          <CardsContainer>
+          <Wrap p="10px">
             {data.publicActivities.length < 1 ? (
               <div>No Public Activities</div>
             ) : (
               <>
                 {data.publicActivities.map((activity) => {
+                  const { doenetId, label, imagePath } = activity;
+                  const imageLink = `/portfolioviewer/${doenetId}`;
+
                   return (
-                    <Card
-                      key={`Card${activity.doenetId}`}
-                      {...activity}
+                    <ActivityCard
+                      key={`ActivityCard${activity.doenetId}`}
+                      imageLink={imageLink}
+                      label={label}
+                      imagePath={imagePath}
                       fullName={data.fullName}
                     />
                   );
                 })}
               </>
             )}
-          </CardsContainer>
+          </Wrap>
         </PublicActivitiesSection>
       </PortfolioGrid>
     </>
diff --git a/src/_reactComponents/PanelHeaderComponents/ActivityCard.jsx b/src/_reactComponents/PanelHeaderComponents/ActivityCard.jsx
index 4bc62c3ed8..44df7f06b5 100644
--- a/src/_reactComponents/PanelHeaderComponents/ActivityCard.jsx
+++ b/src/_reactComponents/PanelHeaderComponents/ActivityCard.jsx
@@ -17,16 +17,21 @@ import { GoKebabVertical } from 'react-icons/go';
 import { Link } from 'react-router-dom';
 
 export default function ActivityCard({
-  imageLink,
+  imageLink = '',
   imagePath,
   label,
   fullName,
+  //   menuItems,
 }) {
+  if (!imagePath) {
+    imagePath = '/activity_default.jpg';
+  }
+  //Note: when we have a menu width 140px becomes 120px
   return (
     <Card width="180px" height="180px" p="0" m="0">
       <Link to={imageLink}>
         <Image
-          maxHeight="120px"
+          height="120px"
           maxWidth="180px"
           src={imagePath}
           alt="Activity Card Image"
@@ -37,22 +42,23 @@ export default function ActivityCard({
       <CardBody p="1">
         <Flex columnGap="2px">
           <Avatar size="sm" name={fullName} />
-          <Box width="120px" p="1">
+          <Box width="140px" p="1">
             <Text
-              height="27px"
+              height="26px"
               lineHeight="1.1"
               fontSize="xs"
               fontWeight="700"
               noOfLines={2}
+              textAlign="left"
             >
               {label}
             </Text>
-            <Text fontSize="xs" noOfLines={1}>
+            <Text fontSize="xs" noOfLines={1} textAlign="left">
               {fullName}
             </Text>
           </Box>
 
-          <Menu>
+          {/* <Menu>
             <MenuButton height="30px">
               <Icon color="#949494" as={GoKebabVertical} boxSize={4} />
             </MenuButton>
@@ -62,7 +68,7 @@ export default function ActivityCard({
               <MenuItem>three</MenuItem>
               <MenuItem>four</MenuItem>
             </MenuList>
-          </Menu>
+          </Menu> */}
         </Flex>
       </CardBody>
     </Card>
diff --git a/src/_reactComponents/PanelHeaderComponents/AuthorCard.jsx b/src/_reactComponents/PanelHeaderComponents/AuthorCard.jsx
new file mode 100644
index 0000000000..248b39060b
--- /dev/null
+++ b/src/_reactComponents/PanelHeaderComponents/AuthorCard.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Avatar, Text, Card, CardBody, Center } from '@chakra-ui/react';
+import { Link } from 'react-router-dom';
+
+export default function AuthorCard({ imageLink, fullName }) {
+  return (
+    <Card width="180px" height="180px" p="0" m="0">
+      <Link to={imageLink}>
+        <Center
+          height="120px"
+          width="180px"
+          borderTopRadius="md"
+          background="black"
+        >
+          <Avatar w="100px" h="100px" fontSize="60pt" name={fullName} />
+        </Center>
+      </Link>
+      <CardBody p="1">
+        <Center h="50px">
+          <Text fontSize="xs" noOfLines={1}>
+            {fullName}
+          </Text>
+        </Center>
+      </CardBody>
+    </Card>
+  );
+}
diff --git a/src/_reactComponents/PanelHeaderComponents/RecoilActivityCard.jsx b/src/_reactComponents/PanelHeaderComponents/RecoilActivityCard.jsx
index ce7e72164d..b4f9221fc2 100644
--- a/src/_reactComponents/PanelHeaderComponents/RecoilActivityCard.jsx
+++ b/src/_reactComponents/PanelHeaderComponents/RecoilActivityCard.jsx
@@ -64,7 +64,7 @@ export default function RecoilActivityCard({
           <Avatar size="sm" name={fullName} />
           <Box width="120px" p="1">
             <Text
-              height="27px"
+              height="26px"
               lineHeight="1.1"
               fontSize="xs"
               fontWeight="700"