Refactor: Card styles based on collection type

Author: 318097

README.md

@@ -78,6 +78,7 @@
   - [x] Visibility
   - [ ] Moving
   - [ ] Generate tags/slugs
+- [ ] Add custom field when uploading data
 
 ### Bugs
 

src/components/notes/NoteCard.js

@@ -55,17 +55,13 @@ const NoteCard = ({
     selected: !!isSelected,
   });
 
-  const titleClasses = classnames("title", {
-    "post-title": type !== "DROP",
-  });
-
   const goToLink = () => window.open(url);
 
   return (
-    <StyledNoteCard size={settings?.cardSize}>
+    <StyledNoteCard collectionType={settings?.collectionType}>
       <Card onClick={(e) => handleClick(e, _id)} className={cardClasses}>
         <h3
-          className={titleClasses}
+          className={"title"}
           dangerouslySetInnerHTML={{ __html: md.renderInline(title) }}
         />
         {["DROP", "QUIZ"].includes(type) && content && (

src/components/notes/NoteMeta.js

@@ -28,8 +28,8 @@ const NoteMeta = ({ sourceInfo = {}, inPopup }) => {
   if (!entriesLength) return null;
 
   return inPopup ? (
-    <Popover content={SourceInfo} trigger="click">
-      <Icon hover size={12} className="icon" type="circle" />
+    <Popover content={SourceInfo} placement="bottomLeft">
+      <Icon size={12} className="icon" type="circle" />
     </Popover>
   ) : (
     SourceInfo

src/components/notes/UploadContent.js

@@ -572,7 +572,7 @@ const UploadCard = ({
   const onlyTitleAndURL = isExternalData;
   const goToLink = () => window.open(url);
   return (
-    <StyledNoteCard size={onlyTitleAndURL ? "sm" : ""}>
+    <StyledNoteCard collectionType={onlyTitleAndURL ? "LINK" : ""}>
       <Card className={cardClasses} onClick={() => editItem(item)}>
         <h3 className="title">{title}</h3>
         {!!content && (

src/components/notes/styled.js

@@ -2,9 +2,29 @@ import styled from "styled-components";
 import colors from "@codedrops/react-ui";
 import { fadeInDownAnimation } from "../../lib/animations";
 
+const collectionType = ({ collectionType }) => {
+  switch (collectionType) {
+    case "LINK":
+      return {
+        height: "220px",
+        fontSize: "1.2rem",
+      };
+    case "WORD":
+      return {
+        height: "180px",
+        fontSize: "1.6rem",
+      };
+    default:
+      return {
+        height: "300px",
+        fontSize: "1.2rem",
+      };
+  }
+};
+
 const StyledNoteCard = styled.div`
-  height: ${(props) => (props.size === "sm" ? "180px" : "300px")};
-  max-height: ${(props) => (props.size === "sm" ? "180px" : "300px")};
+  height: ${(props) => collectionType(props).height};
+  max-height: ${(props) => collectionType(props).height};
   display: flex;
   flex-direction: column;
   /* break-inside: avoid-column; */
@@ -36,12 +56,9 @@ const StyledNoteCard = styled.div`
     align-items: center;
     justify-content: center;
     .title {
-      font-size: 1.2rem;
+      font-size: ${(props) => collectionType(props).fontSize};
       text-align: center;
     }
-    .post-title {
-      font-size: 1.6rem;
-    }
     .content {
       font-size: inherit;
       width: 100%;

src/constants.js

@@ -103,7 +103,6 @@ const DEFAULT_SETTING_STATE = {
     },
   ],
   defaultDisplayType: "CARD",
-  cardSize: "sm",
   defaultFilters: {
     limit: 50,
     status: ["QUICK_ADD", "DRAFT"],