Merge pull request marvelai-org#130 from radicalxdev/fix/trucations

rework ux copy of categorized date titles
Cosmodocus · Aug 27, 2024 · 01d9dec · 01d9dec
2 parents 5ac56bc + b7131b5
commit 01d9dec
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git a/frontend/components/ToolCard/styles.js b/frontend/components/ToolCard/styles.js
@@ -46,6 +46,13 @@ const styles = {
     fontFamily: 'Satoshi Bold',
     fontSize: '16px',
     color: (theme) => theme.palette.Common.White['100p'],
+    sx: {
+      display: '-webkit-box',
+      WebkitLineClamp: 1,
+      WebkitBoxOrient: 'vertical',
+      overflow: 'hidden',
+      width: 'calc(100% - 16px)',
+    },
   },
   contentGridProps: {
     container: true,
@@ -59,12 +66,11 @@ const styles = {
     fontFamily: 'Satoshi Regular',
     fontSize: '14px',
     color: (theme) => theme.palette.Common.White['100p'],
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
     sx: {
       display: '-webkit-box',
       WebkitLineClamp: 1,
       WebkitBoxOrient: 'vertical',
+      overflow: 'hidden',
     },
   },
   imageProps: {

diff --git a/frontend/components/ToolHistoryCard/styles.js b/frontend/components/ToolHistoryCard/styles.js
@@ -17,7 +17,6 @@ const styles = {
       borderRadius: '15px',
       overflow: 'hidden',
       flexDirection: 'column',
-      p: 2,
       background: (theme) => theme.palette.Common.White['100p'],
     },
   },
@@ -26,34 +25,42 @@ const styles = {
     container: true,
     item: true,
     mobileSmall: 12,
-    rowGap: 1.5,
+    height: '100%',
     justifyContent: 'center',
     flexDirection: 'column',
   },
   titleProps: {
     fontFamily: 'Satoshi Bold',
     fontSize: '18px',
     color: (theme) => theme.palette.Common.Black['100p'],
+    sx: {
+      display: '-webkit-box',
+      WebkitLineClamp: 1,
+      WebkitBoxOrient: 'vertical',
+      overflow: 'hidden',
+      width: 'calc(100% - 160px)',
+    },
   },
   contentGridProps: {
     container: true,
     item: true,
-    mobileSmall: 12,
+    mobileSmall: true,
     flexDirection: 'column',
-    justifyContent: 'center',
+    justifyContent: 'space-between',
     alignItems: 'flex-start',
-    margin: '20px',
+    px: 2.5,
+    py: 1.5,
   },
   descriptionProps: {
     fontFamily: 'Satoshi Regular',
     fontSize: '12px',
     color: (theme) => theme.palette.Common.Black['100p'],
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
     sx: {
       display: '-webkit-box',
       WebkitLineClamp: 1,
+      overflow: 'hidden',
       WebkitBoxOrient: 'vertical',
+      width: 'calc(100% - 160px)',
     },
   },
   imageProps: {
@@ -64,7 +71,8 @@ const styles = {
     position: 'relative',
     container: true,
     item: true,
-    marginLeft: '-20px',
+    alignItems: 'center',
+    justifyContent: 'center',
     sx: {
       backgroundColor: '#007BFF',
       backgroundImage: backgroundImageUrl
@@ -73,9 +81,6 @@ const styles = {
       backgroundSize: 'cover',
       width: '160px',
       height: '100%',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
     },
   }),
   previewButtonProps: {

diff --git a/frontend/hooks/useFilterByTime.jsx b/frontend/hooks/useFilterByTime.jsx
@@ -85,9 +85,9 @@ const useFilterByTime = (data) => {
       setCategorizedData({
         today: { title: 'Today', items: today },
         yesterday: { title: 'Yesterday', items: yesterday },
-        previous7Days: { title: 'Previous 7 days', items: previous7Days },
+        previous7Days: { title: 'Previous 7 Days', items: previous7Days },
         previous30Days: {
-          title: 'Previous 30 days',
+          title: 'Previous 30 Days',
           items: previous30Days,
         },
         monthsBefore: { items: sortedMonthsBeforeData },