layout improvements

Author: typescreep

src/components/organisms/Events/molecules/EventRow/EventRow.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import { theme as antdtheme, Flex } from 'antd'
+import { theme as antdtheme, Flex, Typography } from 'antd'
 import { EarthIcon, getUppercase, hslFromString, Spacer } from '@prorobotech/openapi-k8s-toolkit'
 import { useSelector } from 'react-redux'
 import { RootState } from 'store/store'
@@ -16,11 +16,14 @@ export const EventRow: FC<TEventRowProps> = ({ e }) => {
   const theme = useSelector((state: RootState) => state.openapiTheme.theme)
 
   const abbr = e.regarding?.kind ? getUppercase(e.regarding.kind) : undefined
-  const bgColor = e.regarding?.kind && abbr ? hslFromString(abbr, theme) : 'initial'
-  const bgColorNamespace = hslFromString('NS', theme)
+  const bgColor = e.regarding?.kind && abbr ? hslFromString(e.regarding?.kind, theme) : 'initial'
+  const bgColorNamespace = hslFromString('Namespace', theme)
 
   return (
-    <Styled.Card $colorText={token.colorText}>
+    <Styled.Card
+      $bigBorder={e.type === 'Warning'}
+      $mainColor={e.type === 'Warning' ? token.colorWarningActive : token.colorText}
+    >
       <Flex justify="space-between" align="center">
         <Flex align="center" gap={16}>
           <Flex align="center" gap={8}>
@@ -44,10 +47,21 @@ export const EventRow: FC<TEventRowProps> = ({ e }) => {
         )}
       </Flex>
       <Spacer $space={16} $samespace />
-      <Flex gap={8} wrap>
+      <Flex gap={8} align="center" wrap>
+        <div>
+          {e.deprecatedSource?.component && (
+            <Flex gap={8} align="center" wrap>
+              <Flex gap={6} align="center" wrap>
+                <Typography.Text type="secondary">Generated by</Typography.Text>
+                <Styled.Title>{e.deprecatedSource?.component}</Styled.Title>
+              </Flex>
+              <div>
+                <Typography.Text type="secondary">•</Typography.Text>
+              </div>
+            </Flex>
+          )}
+        </div>
         <Styled.Title>{e.reason || e.action || 'Event'}</Styled.Title>
-        <Styled.Title>•</Styled.Title>
-        <Styled.Title>{e.type || 'Normal'}</Styled.Title>
       </Flex>
       <Spacer $space={16} $samespace />
       {eventText(e) && <div>{eventText(e)}</div>}

src/components/organisms/Events/molecules/EventRow/styled.ts

@@ -1,13 +1,14 @@
 import styled from 'styled-components'
 
 type TCardProps = {
-  $colorText: string
+  $mainColor: string
+  $bigBorder?: boolean
 }
 
 const Card = styled.div<TCardProps>`
   border-radius: 6px;
   padding: 16px 8px;
-  border: 1px solid ${({ $colorText }) => $colorText};
+  border: ${({ $bigBorder }) => ($bigBorder ? 2 : 1)}px solid ${({ $mainColor }) => $mainColor};
   gap: 12px;
   margin-bottom: 16px;
   position: relative;
@@ -16,8 +17,8 @@ const Card = styled.div<TCardProps>`
     position: absolute;
     content: '';
     width: 36px;
-    height: 1px;
-    background: ${({ $colorText }) => $colorText};
+    height: ${({ $bigBorder }) => ($bigBorder ? 2 : 1)}px;
+    background: ${({ $mainColor }) => $mainColor};
     left: -37px;
     top: 50%; /* halfway down parent */
     transform: translateY(-50%); /* center vertically */
@@ -26,11 +27,11 @@ const Card = styled.div<TCardProps>`
   &:after {
     position: absolute;
     content: '';
-    width: 6px;
-    height: 6px;
+    width: ${({ $bigBorder }) => ($bigBorder ? 7 : 6)}px;
+    height: ${({ $bigBorder }) => ($bigBorder ? 7 : 6)}px;
     border-radius: 50%;
-    background: ${({ $colorText }) => $colorText};
-    left: -39px;
+    background: ${({ $mainColor }) => $mainColor};
+    left: ${({ $bigBorder }) => ($bigBorder ? -41 : -39)}px;
     top: 50%;
     transform: translateY(-50%);
   }