21224: css tweaks Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>

[arvados.git] / services / workbench2 / src / views-components / project-details-card / project-details-card.tsx

diff --git a/services/workbench2/src/views-components/project-details-card/project-details-card.tsx b/services/workbench2/src/views-components/project-details-card/project-details-card.tsx
index 3ed07a472d7d88ffd810e48cb79d3c0f30de44cd..257f4de8450585cdbf8e2466496f9b20cd592a22 100644 (file)
--- a/services/workbench2/src/views-components/project-details-card/project-details-card.tsx
+++ b/services/workbench2/src/views-components/project-details-card/project-details-card.tsx
@@ -28,33 +28,26 @@ import { RichTextEditorLink } from 'components/rich-text-editor-link/rich-text-e
 
 type CssRules =
     | 'root'
-    | 'cardheader'
-    | 'fadeout'
-    | 'showmore'
+    | 'cardHeader'
+    | 'showMore'
     | 'nameContainer'
     | 'activeIndicator'
-    | 'cardcontent'
+    | 'cardContent'
     | 'namePlate'
     | 'faveIcon'
     | 'frozenIcon'
-    | 'attributesection'
+    | 'attributeSection'
     | 'attribute'
-    | 'chipsection'
+    | 'chipSection'
     | 'tag';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
         width: '100%',
         marginBottom: '1rem',
+        flex: '0 0 auto',
     },
-    fadeout: {
-        maxWidth: '25rem',
-        minWdidth: '18rem',
-        height: '1.5rem',
-        overflow: 'hidden',
-        WebkitMaskImage: '-webkit-gradient(linear, left bottom, right bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))',
-    },
-    showmore: {
+    showMore: {
         color: theme.palette.primary.main,
         cursor: 'pointer',
         maxWidth: '10rem',
@@ -65,10 +58,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     activeIndicator: {
         margin: '0.3rem auto auto 1rem',
     },
-    cardheader: {
+    cardHeader: {
         paddingTop: '0.4rem',
     },
-    cardcontent: {
+    cardContent: {
         display: 'flex',
         flexDirection: 'column',
         marginTop: '-1rem',
@@ -89,7 +82,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         height: '1rem',
         color: theme.palette.text.primary,
     },
-    attributesection: {
+    attributeSection: {
         display: 'flex',
         flexWrap: 'wrap',
     },
@@ -99,7 +92,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         padding: '0.5rem',
         borderRadius: '5px',
     },
-    chipsection: {
+    chipSection: {
         display: 'flex',
         flexWrap: 'wrap',
     },
@@ -207,7 +200,7 @@ const UserCard: React.FC<UserCardProps> = ({ classes, currentResource }) => {
     return (
         <Card className={classes.root}>
             <CardHeader
-                className={classes.cardheader}
+                className={classes.cardHeader}
                 title={
                     <section className={classes.nameContainer}>
                         <Typography
@@ -230,12 +223,12 @@ const UserCard: React.FC<UserCardProps> = ({ classes, currentResource }) => {
 };
 
 const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, frozenByFullName, handleContextMenu, isAdmin }) => {
-    const { name, uuid, description } = currentResource as ProjectResource;
+    const { name, description } = currentResource as ProjectResource;
 
     return (
         <Card className={classes.root}>
             <CardHeader
-                className={classes.cardheader}
+                className={classes.cardHeader}
                 title={
                     <>
                     <section className={classes.namePlate}>
@@ -261,7 +254,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
                             <FreezeIcon style={{ fontSize: 'inherit' }} />
                         </Tooltip>}
                     </section>
-                    <section className={classes.chipsection}>
+                    <section className={classes.chipSection}>
                     <Typography component='div'>
                         {typeof currentResource.properties === 'object' &&
                             Object.keys(currentResource.properties).map((k) =>
@@ -287,11 +280,10 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
                     </IconButton>
                 </Tooltip>}
             />
-            <CardContent className={classes.cardcontent}>
+            <CardContent className={classes.cardContent}>
                 {description && (
                         <section>
-                            {/* <Typography className={classes.fadeout}>{description.replace(/<[^>]*>/g, '').slice(0, 45)}...</Typography> */}
-                            <div className={classes.showmore}>
+                            <div className={classes.showMore}>
                                 <RichTextEditorLink
                                     title={`Description of ${name}`}
                                     content={description}