Fix/align garden UI across apps (#1138)

* fix/align garden ui across apps * chore: Remove unused imports in getTextColor.ts --------- Co-authored-by: Gustav-Eikaas <89254170+Gustav-Eikaas@users.noreply.github.com>
equinor · Nov 11, 2024 · 5f2e26b · 5f2e26b
1 parent ee3dcee
commit 5f2e26b
Show file tree

Hide file tree

Showing 20 changed files with 68 additions and 106 deletions.
diff --git a/libs/handoverapp/src/lib/config/gardenConfig.ts b/libs/handoverapp/src/lib/config/gardenConfig.ts
@@ -3,7 +3,7 @@ import { useGardenDataSource } from '@cc-components/shared/workspace-config';
 import { useHttpClient } from '@equinor/fusion-framework-react-app/http';
 import { FilterState } from '@equinor/workspace-fusion/filter';
 import { CustomItemView, GardenConfig } from '@equinor/workspace-fusion/garden';
-import { GardenHeader, GardenItem } from '../ui-garden';
+import { GardenItem } from '../ui-garden';
 
 export const useGardenConfig = (
   contextId: string
@@ -34,7 +34,6 @@ export const useGardenConfig = (
     customViews: {
       //bs typescript error
       customItemView: GardenItem as any,
-      customHeaderView: GardenHeader as any,
     },
     visuals: {
       rowHeight: 31,

diff --git a/libs/handoverapp/src/lib/ui-garden/Header.tsx b/libs/handoverapp/src/lib/ui-garden/Header.tsx
diff --git a/libs/handoverapp/src/lib/ui-garden/index.ts b/libs/handoverapp/src/lib/ui-garden/index.ts
@@ -1,2 +1 @@
-export { GardenHeader } from './Header';
 export { GardenItem } from './Item';
diff --git a/libs/handoverapp/src/lib/utils-garden/getTextColor.ts b/libs/handoverapp/src/lib/utils-garden/getTextColor.ts
@@ -1,5 +1,5 @@
 import { PackageStatus } from '@cc-components/shared/types';
-import { tokens } from '@equinor/eds-tokens';
+import { itemContentColors } from '@cc-components/shared/mapping';
 
 export const getTextColor = (status: PackageStatus) => {
   return (
@@ -11,6 +11,6 @@ export const getTextColor = (status: PackageStatus) => {
       'RFO Rejected',
     ] as PackageStatus[]
   ).includes(status)
-    ? tokens.colors.text.static_icons__primary_white.rgba
-    : tokens.colors.text.static_icons__default.rgba;
+    ? itemContentColors.Dark
+    : itemContentColors.Light;
 };
diff --git a/libs/heattraceapp/src/lib/utils-garden/getTextColor.ts b/libs/heattraceapp/src/lib/utils-garden/getTextColor.ts
@@ -1,6 +1,8 @@
+import { itemContentColors } from '@cc-components/shared/mapping';
+
 export const getTextColor = (status: string) => {
   if (status === 'Pressure test' || status === 'Insulation' || status === 'Complete')
-    return '#000000';
+    return itemContentColors.Light;
 
-  return '#ffffff';
+  return itemContentColors.Dark;
 };
diff --git a/libs/loopapp/src/lib/config/gardenConfig.ts b/libs/loopapp/src/lib/config/gardenConfig.ts
@@ -28,7 +28,7 @@ export const useGardenConfig = (contextId: string): GardenConfig<Loop, FilterSta
       customItemView: GardenItem,
     },
     visuals: {
-      rowHeight: 30,
+      rowHeight: 31,
     },
   };
 };
diff --git a/libs/loopapp/src/lib/ui-garden/Item.tsx b/libs/loopapp/src/lib/ui-garden/Item.tsx
@@ -11,6 +11,8 @@ import {
   StyledStatusCircles,
 } from './garden.styles';
 import { PopoverContent } from './Popover';
+import { itemContentColors } from '@cc-components/shared/mapping';
+
 const createProgressBackground = (progress: number) => {
   const standardColor = '#ffffff';
   return `linear-gradient(90deg, #d9eaf2 ${progress}%, ${standardColor} ${progress}%)`;
@@ -54,6 +56,7 @@ const LoopGardenItem = (props: CustomItemView<Loop>) => {
             setIsOpen(false);
           }}
           backgroundColor={linear}
+          textColor={itemContentColors.Light}
           onClick={onClick}
           style={{ width: `${columnExpanded ? 100 : width}%`, maxWidth }}
           isSelected={isSelected}

diff --git a/libs/loopapp/src/lib/ui-garden/garden.styles.ts b/libs/loopapp/src/lib/ui-garden/garden.styles.ts
@@ -9,7 +9,7 @@ export const StyledRoot = styled.div`
   margin-left: 5px;
   position: relative;
 `;
-export type ItemProps = { backgroundColor: string; isSelected: boolean };
+export type ItemProps = { backgroundColor: string; isSelected: boolean; textColor: string };
 
 export const StyledItemWrapper = styled.div<ItemProps>`
   display: grid;
@@ -18,7 +18,7 @@ export const StyledItemWrapper = styled.div<ItemProps>`
   box-sizing: border-box;
   position: relative;
   background: ${(props) => props.backgroundColor};
-  color: ${tokens.colors.text.static_icons__default.rgba};
+  color: ${(props) => props.textColor};
   cursor: pointer;
   border: 1px solid #ededed;
   height: 100%;

diff --git a/libs/pipingapp/src/lib/ui-garden/Item.tsx b/libs/pipingapp/src/lib/ui-garden/Item.tsx
@@ -11,6 +11,7 @@ import {
 import { Pipetest } from 'libs/pipingshared/dist/src';
 import { PackageStatus, PopoverWrapper } from '@cc-components/shared';
 import { getPipetestStatusColors } from '../utils-garden/getPipetestStatusColors';
+import { itemContentColors } from '@cc-components/shared/mapping';
 
 const PipetestGardenItem = (props: CustomItemView<Pipetest>) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -54,6 +55,7 @@ const PipetestGardenItem = (props: CustomItemView<Pipetest>) => {
           onClick={onClick}
           style={{ width: `${columnExpanded ? 100 : width}%`, maxWidth }}
           isSelected={isSelected}
+          textColor={itemContentColors.Light}
         >
           <StyledItemText>{displayName}</StyledItemText>
           <StyledStatusCircles

diff --git a/libs/pipingapp/src/lib/ui-garden/garden.styles.ts b/libs/pipingapp/src/lib/ui-garden/garden.styles.ts
@@ -9,7 +9,11 @@ export const StyledRoot = styled.div`
   margin-left: 5px;
   position: relative;
 `;
-export type ItemProps = { backgroundColor: string; isSelected: boolean };
+export type ItemProps = {
+  backgroundColor: string;
+  isSelected: boolean;
+  textColor: string;
+};
 
 export const StyledItemWrapper = styled.div<ItemProps>`
   display: grid;
@@ -18,7 +22,7 @@ export const StyledItemWrapper = styled.div<ItemProps>`
   box-sizing: border-box;
   position: relative;
   background: ${(props) => props.backgroundColor};
-  color: ${tokens.colors.text.static_icons__default.rgba};
+  color: ${(props) => props.textColor};
   cursor: pointer;
   border: 1px solid #ededed;
   height: 100%;

diff --git a/libs/punchapp/src/lib/config/gardenConfig.ts b/libs/punchapp/src/lib/config/gardenConfig.ts
@@ -26,7 +26,7 @@ export const useGardenConfig = (contextId: string): GardenConfig<Punch, FilterSt
     getDisplayName: (item) => item.punchItemNo,
     initialGrouping: ['HandoverPlan'],
     visuals: {
-      rowHeight: 25,
+      rowHeight: 31,
     },
     customViews: {
       customItemView: PunchGardenItem as any,

diff --git a/libs/punchapp/src/lib/ui-garden/punchGardenItem.styles.ts b/libs/punchapp/src/lib/ui-garden/punchGardenItem.styles.ts
@@ -37,8 +37,6 @@ export const StyledItemText = styled.div`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-family: Equinor monospace;
-  font-weight: 500;
 `;
 
 type StatusCirclesProps = {

diff --git a/libs/punchapp/src/lib/utils-statuses/punchStatusColors.ts b/libs/punchapp/src/lib/utils-statuses/punchStatusColors.ts
@@ -1,13 +1,14 @@
-import { PunchStatus } from "@cc-components/punchshared";
+import { PunchStatus } from '@cc-components/punchshared';
+import { itemContentColors } from '@cc-components/shared/mapping';
 
 export const punchStatusColors: Record<PunchStatus, string> = {
-    'Cleared not verified': '#0084C4',
-    Open: '#D9EAF2',
-    Closed: '#4BB748',
+  'Cleared not verified': '#0084C4',
+  Open: '#D9EAF2',
+  Closed: '#4BB748',
 };
 
 export const punchStatusTextColors: Record<PunchStatus, string> = {
-    'Cleared not verified': '#FFFFFF',
-    Open: '#565656',
-    Closed: '#FFFFFF',
-};
+  'Cleared not verified': itemContentColors.Dark,
+  Open: itemContentColors.Light,
+  Closed: itemContentColors.Dark,
+};
diff --git a/libs/swcrapp/src/lib/config/gardenConfig.tsx b/libs/swcrapp/src/lib/config/gardenConfig.tsx
@@ -27,7 +27,7 @@ export const useGardenConfig = (
     getDisplayName: (item) => item.softwareChangeRecordNo,
     initialGrouping: ['RFO_ForecastDate'],
     visuals: {
-      rowHeight: 25,
+      rowHeight: 31,
     },
     customViews: {
       customItemView: SwcrItem as any,

diff --git a/libs/swcrapp/src/lib/ui-garden/Item.tsx b/libs/swcrapp/src/lib/ui-garden/Item.tsx
@@ -3,6 +3,7 @@ import { tokens } from '@equinor/eds-tokens';
 import { CustomItemView } from '@equinor/workspace-fusion/garden';
 import { memo, useMemo } from 'react';
 import { StyledItemWrapper, StyledRoot } from './garden.styles';
+import { itemContentColors } from '@cc-components/shared/mapping';
 
 export const SwcrItem = (props: CustomItemView<SwcrPackage>) => {
   const {
@@ -17,8 +18,8 @@ export const SwcrItem = (props: CustomItemView<SwcrPackage>) => {
 
   const statusColor = getSwcrStatusColor(data.status);
   const textColor = ['Closed - Rejected', 'Closed'].includes(data.status)
-    ? tokens.colors.text.static_icons__primary_white.rgba
-    : tokens.colors.text.static_icons__default.rgba;
+    ? itemContentColors.Dark
+    : itemContentColors.Light;
   const width = useMemo(() => (depth ? 100 - depth * 3 : 100), [depth]);
   const maxWidth = useMemo(() => itemWidth * 0.95, [itemWidth]);
 

diff --git a/libs/swcrapp/src/lib/ui-garden/garden.styles.ts b/libs/swcrapp/src/lib/ui-garden/garden.styles.ts
@@ -1,19 +1,39 @@
 import { tokens } from '@equinor/eds-tokens';
 import styled from 'styled-components';
-type SwcrItemProps = { $backgroundColor: string; $textColor: string; $isSelected: boolean };
+type SwcrItemProps = {
+  $backgroundColor: string;
+  $textColor: string;
+  $isSelected: boolean;
+};
 
 export const StyledItemWrapper = styled.div<SwcrItemProps>`
-  background-color: ${(props) => props.$backgroundColor};
+  display: grid;
+  grid-template-columns: 15px 3fr auto;
+  align-items: center;
+  box-sizing: border-box;
+  position: relative;
+  background: ${(props) => props.$backgroundColor};
   color: ${(props) => props.$textColor};
   cursor: pointer;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 5px;
   height: 100%;
+  border-radius: 5px;
+  font-weight: 500;
+  font-size: 13px;
+  padding-left: 20px;
+  padding-right: 2px;
   outline: ${(props) => (props.$isSelected ? '2px dashed green' : '')};
   outline-offset: ${(props) => (props.$isSelected ? '2px' : '')};
+  width: 100%;
+
+  &:before {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    border-radius: 10px;
+    content: ' ';
+  }
 `;
 
 export const StyledRoot = styled.div`

diff --git a/libs/workorderapp/src/lib/config/gardenConfig.ts b/libs/workorderapp/src/lib/config/gardenConfig.ts
@@ -1,7 +1,7 @@
 import { WorkOrder } from '@cc-components/workordershared';
 import { GardenConfig } from '@equinor/workspace-fusion/garden';
 import { FilterState } from '@equinor/workspace-fusion/filter';
-import { GardenHeader, GardenItem } from '../ui-garden';
+import { GardenItem } from '../ui-garden';
 import { useHttpClient } from '@equinor/fusion-framework-react-app/http';
 import { useGardenDataSource } from '@cc-components/shared/workspace-config';
 
@@ -34,10 +34,9 @@ export const useGardenConfig = (
     getSubgroupItems,
     customViews: {
       customItemView: GardenItem as any,
-      customHeaderView: GardenHeader as any,
     },
     visuals: {
-      rowHeight: 30,
+      rowHeight: 31,
     },
   };
 };
diff --git a/libs/workorderapp/src/lib/ui-garden/Header.tsx b/libs/workorderapp/src/lib/ui-garden/Header.tsx
diff --git a/libs/workorderapp/src/lib/ui-garden/index.ts b/libs/workorderapp/src/lib/ui-garden/index.ts
@@ -1,2 +1 @@
 export { GardenItem } from './Item';
-export { GardenHeader } from './Header';
diff --git a/libs/workorderapp/src/lib/utils-statuses/getTextColorByStatus.ts b/libs/workorderapp/src/lib/utils-statuses/getTextColorByStatus.ts
@@ -1,7 +1,8 @@
 import { FollowUpStatuses, ProcosysStatuses } from '@cc-components/shared';
+import { itemContentColors } from '@cc-components/shared/mapping';
 
 export const getTextColorByStatus = (status: string) => {
   return status === FollowUpStatuses.WOFinished || status === ProcosysStatuses.ComplByMC
-    ? '#ffffff'
-    : '#212121';
+    ? itemContentColors.Dark
+    : itemContentColors.Light;
 };