redesigned activity card

refactor add multiple creators section create categories component refactor the use of category colors, translation file, and rendering of the tags separate creators section into its own component add unpublished icon to card update imports
unstructuredstudio · Jul 17, 2024 · 5dab8f4 · 5dab8f4
1 parent c3f4f34
commit 5dab8f4
Show file tree

Hide file tree

Showing 9 changed files with 362 additions and 179 deletions.
diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json
@@ -1098,7 +1098,9 @@
          "mediaServerError": "Sorry media server is down we couldn't upload your files! try again later",
          "uploadError": "error occurred while downloading file : "
       }
-   }
+   },
+   "tooltipMore": " more",
+   "tooltipUnpublished": "Unpublished"
  },
 
   "activityDetails": {

diff --git a/zubhub_frontend/zubhub/src/assets/js/colors.js b/zubhub_frontend/zubhub/src/assets/js/colors.js
@@ -1,22 +1,23 @@
 export const colors = {
-    primary: '#02B7C4',
-    "primary-01": "#E5F8F9",
-    secondary: '#DC3545',
-    tertiary: '#FECB00',
-    'tertiary-dark': '#C18D30',
-    black: '#292535',
-    gray: '#7E7E7E',
-    light: '#C4C4C4',
-    white: '#fff',
-    green: '#22C55E',
-    red: '#f44336',
-    'blue-light': '#00B8C433',
-    'blue-dark': '#7BA8AB',
-    'blue-pale': '#DBECFF'
-}
+  primary: '#02B7C4',
+  'primary-01': '#E5F8F9',
+  secondary: '#DC3545',
+  tertiary: '#FECB00',
+  'tertiary-dark': '#C18D30',
+  black: '#292535',
+  gray: '#7E7E7E',
+  light: '#C4C4C4',
+  white: '#fff',
+  green: '#22C55E',
+  red: '#f44336',
+  'blue-light': '#00B8C433',
+  'blue-dark': '#7BA8AB',
+  'blue-pale': '#DBECFF',
+  border: '#7E5B4B',
+};
 
 export const borders = {
-    borderRadius: 20,
-    borderRadiusMd: 8,
-    borderRadiusSm: 4,
-}
+  borderRadius: 20,
+  borderRadiusMd: 8,
+  borderRadiusSm: 4,
+};
diff --git a/zubhub_frontend/zubhub/src/assets/js/muiTheme.js b/zubhub_frontend/zubhub/src/assets/js/muiTheme.js
@@ -32,4 +32,17 @@ export const theme = createTheme({
       },
     },
   },
+  categoryColors: {
+    Animations: '#FCB07F',
+    Art: '#F8D991',
+    Science: '#FBC9B3',
+    Coding: '#65B4BD',
+    Electronics: '#F1D27C',
+    Toys: '#FAC5C2',
+    Games: '#6065A4',
+    Mechanical: '#F571AE',
+    Music: '#F1FC73',
+    Robotics: '#A66CA9',
+    Structures: '#FAE393',
+  },
 });
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/components/activity/activityStyle.js b/zubhub_frontend/zubhub/src/assets/js/styles/components/activity/activityStyle.js
@@ -1,15 +1,17 @@
+import { colors } from '../../../colors';
+
+// eslint-disable-next-line no-unused-vars
 export const style = theme => ({
   activityCardContainer: {
     position: 'relative',
-    // maxWidth: '350px',
-    // minWidth: '300px',
-    height: '95%',
+    width: '100%',
+    textAlign: 'left',
   },
   activityCard: {
     maxWidth: '100%',
-    borderRadius: '15px',
+    height: '33em',
+    borderRadius: '20px',
     position: 'relative!important',
-    height: '100%',
   },
   opacity: {
     backgroundColor: 'black',
@@ -27,57 +29,41 @@ export const style = theme => ({
     objectFit: 'cover',
     height: '100%',
   },
+  unpublishedCardImage: {
+    filter: 'brightness(60%)',
+  },
+  publishStyle: {
+    position: 'absolute',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: 'white',
+    top: '1em',
+    right: '1em',
+    zIndex: 1,
+    backgroundColor: colors.gray,
+    padding: '0.2em 1em',
+    borderRadius: '50px',
+    fontWeight: 700,
+    fontSize: '1.05rem',
+  },
   mediaBoxStyle: {
     width: '100%',
-    height: '17em',
+    height: '13em',
     position: 'relative',
     padding: '2%',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
   },
-  activityTagsBox: {
-    position: 'absolute',
-    top: '10px',
-    right: '10%',
-    display: 'flex',
-  },
-  activityTagPill: {
-    backgroundColor: 'white',
-    color: 'var(--text-color2)',
-    border: '1px solid var(--text-color2)',
-    '&:hover': {
-      backgroundColor: 'var(--text-color2)',
-      color: 'white',
-      border: '1px solid white',
-    },
-  },
-  activityTagsShowMore: {
-    '&:hover': {
-      backgroundColor: 'white',
-      color: 'var(--text-color2)',
-      border: '1px solid white',
-    },
-  },
-  tagsShowMoreIconContainer: {
-    //position: 'absolute',
-  },
-  tagsShowMoreList: {
-    position: 'absolute',
-    right: '0%',
-    backgroundColor: 'white',
-    maxHeight: '12em',
-    overflow: 'auto',
-    borderRadius: '10px',
-  },
-
   activityCardContent: {
     width: '100%',
-    position: 'relative',
-  },
-  activityCardInfoBox: {
-    height: '100%',
+    padding: '16px',
+    '&:last-child': {
+      paddingBottom: '12px',
+    },
     display: 'flex',
+    flexDirection: 'column',
     justifyContent: 'space-between',
   },
   projectsCount: {
@@ -92,10 +78,70 @@ export const style = theme => ({
     marginLeft: '5px',
   },
   activityTitle: {
-    fontSize: '1.1rem',
-    fontWeight: '900',
+    fontSize: '1.3rem',
+    fontWeight: 700,
     color: 'var(--text-color1)',
-    // width: '80%',
-    textAlign: '-webkit-auto',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  activityDescription: {
+    height: '48px',
+    margin: '8px 0',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    display: '-webkit-box',
+    '-webkit-line-clamp': 2,
+    '-webkit-box-orient': 'vertical',
+  },
+  activityCategoryContainer: {
+    margin: '12px 0',
+    display: 'flex',
+    flexWrap: 'nowrap',
+    gap: '8px',
+  },
+  activityCategory: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    fontSize: '0.9em',
+    padding: '2px 10px',
+    border: '1px solid #7E5B4B',
+    borderRadius: '10em',
+    background: '#F1D27C',
+  },
+  footer: {
+    marginTop: 10,
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    overflow: 'hidden',
+  },
+  captionStyle: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  captionIconStyle: {
+    backgroundColor: '#eee',
+    padding: '2px 7px',
+    borderRadius: 25,
+    justifyContent: 'space-between',
+    fontWeight: '600',
+    display: 'flex',
+    alignItems: 'center',
+    marginRight: '1em',
+    '& svg': {
+      fill: 'rgba(0,0,0,0.54)',
+      marginRight: '0.5em',
+      fontSize: '1.1rem',
+    },
+  },
+  date: {
+    fontSize: '0.9rem',
+    fontWeight: '600',
+    marginLeft: 'auto',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
   },
 });