From 0fcc5b45ba780023541978847e8d8d30ba5ca1a3 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 23 Jul 2024 08:38:35 +0200
Subject: [PATCH] feat: basic last modified by styling

---
 .../feature/FeatureView/Contributors.tsx      | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/frontend/src/component/feature/FeatureView/Contributors.tsx b/frontend/src/component/feature/FeatureView/Contributors.tsx
index f26dd8de53..39e9257c45 100644
--- a/frontend/src/component/feature/FeatureView/Contributors.tsx
+++ b/frontend/src/component/feature/FeatureView/Contributors.tsx
@@ -3,14 +3,46 @@ import { GroupCardAvatars } from 'component/admin/groups/GroupsList/GroupCard/Gr
 import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
 import type { IFeatureToggle } from 'interfaces/featureToggle';
 import type { FC } from 'react';
+import { Link } from 'react-router-dom';
 
 type LastModifiedByProps = {
     id: number;
     name: string;
     imageUrl: string;
 };
+
+const LastModifiedByContainer = styled('div')(({ theme }) => ({
+    display: 'grid',
+    gridTemplateAreas: `
+        'description description'
+        'avatar link'
+    `,
+    gap: theme.spacing(1),
+    alignItems: 'center',
+    height: 'min-content',
+    fontSize: theme.typography.body2.fontSize,
+
+    '.description': {
+        gridArea: 'description',
+    },
+    '.avatar': {
+        gridArea: 'avatar',
+    },
+    '.link': {
+        gridArea: 'link',
+    },
+}));
+
 const LastModifiedBy: FC<LastModifiedByProps> = ({ id, name, imageUrl }) => {
-    return <UserAvatar user={{ id, name, imageUrl }} />;
+    return (
+        <LastModifiedByContainer>
+            <span className='description'>Last modified by</span>
+            <UserAvatar className='avatar' user={{ id, name, imageUrl }} />
+            <Link className='link' to='logs'>
+                View change
+            </Link>
+        </LastModifiedByContainer>
+    );
 };
 
 type CollaboratorListProps = {
@@ -24,6 +56,7 @@ const Container = styled('article')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'row',
     gap: theme.spacing(2),
+    alignItems: 'center',
 }));
 
 type Props = {