From 9ab5ebde9c712235950a1be05a37ed6bf7b7dc2f Mon Sep 17 00:00:00 2001
From: Lisa Knox <lisaknox83@gmail.com>
Date: Fri, 19 Jan 2024 10:46:55 -0500
Subject: [PATCH] 21224: css tweaks Arvados-DCO-1.1-Signed-off-by: Lisa Knox
 <lisa.knox@curii.com>

---
 .../project-details-card.tsx                  | 144 ++++++++++--------
 1 file changed, 83 insertions(+), 61 deletions(-)

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 6a140a0345..d9db66d634 100644
--- 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
@@ -20,7 +20,7 @@ import { formatDate } from 'common/formatters';
 import { resourceLabel } from 'common/labels';
 import { ResourceKind } from 'models/resource';
 
-type CssRules = 'root' | 'fadeout' | 'cardcontent' | 'attribute' | 'tag';
+type CssRules = 'root' | 'cardheader' | 'fadeout' | 'cardcontent' | 'attributesection' | 'attribute' | 'chipsection' | 'tag';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
@@ -28,21 +28,39 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         marginBottom: '1rem',
     },
     fadeout: {
-        maxWidth: '45%',
+        maxWidth: '30rem',
         minWdidth: '18rem',
         height: '2.7rem',
         overflow: 'hidden',
         WebkitMaskImage: '-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))',
     },
+    cardheader: {
+        paddingTop: '0.4rem',
+    },
     cardcontent: {
+        display: 'flex',
+        flexDirection: 'column',
+        marginTop: '-1rem'
+    },
+    attributesection: {
         display: 'flex',
         flexWrap: 'wrap',
     },
     attribute: {
         marginBottom: '0.5rem',
         marginRight: '1rem',
+        border: '1px solid lightgrey',
+        padding: '0.5rem',
+        borderRadius: '5px'
+    },
+    chipsection: {
+        display: 'flex',
+        flexWrap: 'wrap',
+    },
+    tag: {
+        marginRight: '1rem',
+        marginTop: '0.5rem'
     },
-    tag: {},
 });
 
 const mapStateToProps = (state: RootState) => {
@@ -64,8 +82,8 @@ export const ProjectDetailsCard = connect(mapStateToProps)(
         const { name, description, uuid } = currentResource;
         return (
             <Card className={classes.root}>
-                {console.log(currentResource)}
                 <CardHeader
+                className={classes.cardheader}
                     title={
                         <Typography
                             noWrap
@@ -91,63 +109,67 @@ export const ProjectDetailsCard = connect(mapStateToProps)(
                     action={<MultiselectToolbar inputSelectedUuid={uuid} />}
                 />
                 <CardContent className={classes.cardcontent}>
-                    <Typography
-                        component='div'
-                        className={classes.attribute}
-                    >
-                        <DetailsAttribute
-                            label='Type'
-                            value={currentResource.groupClass === GroupClass.FILTER ? 'Filter group' : resourceLabel(ResourceKind.PROJECT)}
-                        />
-                    </Typography>
-                    <Typography
-                        component='div'
-                        className={classes.attribute}
-                    >
-                        <DetailsAttribute
-                            label='Owner'
-                            linkToUuid={currentResource.ownerUuid}
-                            uuidEnhancer={(uuid: string) => <ResourceWithName uuid={uuid} />}
-                        />
-                    </Typography>
-                    <Typography
-                        component='div'
-                        className={classes.attribute}
-                    >
-                        <DetailsAttribute
-                            label='Last modified'
-                            value={formatDate(currentResource.modifiedAt)}
-                        />
-                    </Typography>
-                    <Typography
-                        component='div'
-                        className={classes.attribute}
-                    >
-                        <DetailsAttribute
-                            label='Created at'
-                            value={formatDate(currentResource.createdAt)}
-                        />
-                    </Typography>
-                    <Typography
-                        component='div'
-                        className={classes.attribute}
-                    >
-                        <DetailsAttribute
-                            label='UUID'
-                            linkToUuid={currentResource.uuid}
-                            value={currentResource.uuid}
-                        />
-                    </Typography>
-                    <Typography
-                        component='div'
-                        className={classes.attribute}
-                    >
-                        {Object.keys(currentResource.properties).map((k) =>
-                            Array.isArray(currentResource.properties[k])
-                                ? currentResource.properties[k].map((v: string) => getPropertyChip(k, v, undefined, classes.tag))
-                                : getPropertyChip(k, currentResource.properties[k], undefined, classes.tag)
-                        )}
-                    </Typography>
+                    <section className={classes.attributesection}>
+                        <Typography
+                            component='div'
+                            className={classes.attribute}
+                        >
+                            <DetailsAttribute
+                                label='Type'
+                                value={currentResource.groupClass === GroupClass.FILTER ? 'Filter group' : resourceLabel(ResourceKind.PROJECT)}
+                            />
+                        </Typography>
+                        <Typography
+                            component='div'
+                            className={classes.attribute}
+                        >
+                            <DetailsAttribute
+                                label='Owner'
+                                linkToUuid={currentResource.ownerUuid}
+                                uuidEnhancer={(uuid: string) => <ResourceWithName uuid={uuid} />}
+                            />
+                        </Typography>
+                        <Typography
+                            component='div'
+                            className={classes.attribute}
+                        >
+                            <DetailsAttribute
+                                label='Last modified'
+                                value={formatDate(currentResource.modifiedAt)}
+                            />
+                        </Typography>
+                        <Typography
+                            component='div'
+                            className={classes.attribute}
+                        >
+                            <DetailsAttribute
+                                label='Created at'
+                                value={formatDate(currentResource.createdAt)}
+                            />
+                        </Typography>
+                        <Typography
+                            component='div'
+                            className={classes.attribute}
+                        >
+                            <DetailsAttribute
+                                label='UUID'
+                                linkToUuid={currentResource.uuid}
+                                value={currentResource.uuid}
+                            />
+                        </Typography>
+                    </section>
+                    <section className={classes.chipsection}>
+                        <Typography
+                            component='div'
+                            // className={classes.attribute}
+                        >
+                            {Object.keys(currentResource.properties).map((k) =>
+                                Array.isArray(currentResource.properties[k])
+                                    ? currentResource.properties[k].map((v: string) => getPropertyChip(k, v, undefined, classes.tag))
+                                    : getPropertyChip(k, currentResource.properties[k], undefined, classes.tag)
+                            )}
+                        </Typography>
+                    </section>
                 </CardContent>
             </Card>
         );
-- 
2.39.5