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

Author:    Berra Karaman <esma.berra.karaman@hotmail.com>
Date:      Wed Jan 24 22:58:02 2024 +0300

Author: brrkrmn

zubhub_frontend/zubhub/public/locales/en/translation.json

@@ -1084,7 +1084,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": {

zubhub_frontend/zubhub/src/assets/js/colors.js

@@ -12,7 +12,8 @@ export const colors = {
     red: '#f44336',
     'blue-light': '#00B8C433',
     'blue-dark': '#7BA8AB',
-    'blue-pale': '#DBECFF'
+    'blue-pale': '#DBECFF',
+    border: '#7E5B4B',
 }
 
 export const borders = {

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',
+  }
 });

zubhub_frontend/zubhub/src/assets/js/styles/components/activity/activityStyle.js

@@ -1,15 +1,16 @@
+import { colors } from "../../../colors";
+
 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,58 +28,42 @@ 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',
-    justifyContent: 'space-between',
+    flexDirection: 'column',
+    justifyContent: 'space-between'
   },
   projectsCount: {
     color: 'white',
@@ -92,10 +77,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',
+  }
 });