From 4dad42c836e275ad65229fd7a429aa6db87aa9d9 Mon Sep 17 00:00:00 2001
From: Ryan Srofe <ryan.srofe@formidable.com>
Date: Sun, 28 Apr 2024 13:48:46 -0400
Subject: [PATCH] style token adjustments

switching out tokens
cleaning up tokens
removing inline formulas using tokens
fixing change type list key bug
---
 widget-src/components/ChangeLogEmpty.tsx |  4 ++--
 widget-src/components/ChangeLogRow.tsx   |  4 ++--
 widget-src/components/Footer.tsx         |  4 ++--
 widget-src/components/log/Type.tsx       |  8 ++++----
 widget-src/components/log/TypeMenu.tsx   | 11 +++++------
 5 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/widget-src/components/ChangeLogEmpty.tsx b/widget-src/components/ChangeLogEmpty.tsx
index 780747c..f012c79 100644
--- a/widget-src/components/ChangeLogEmpty.tsx
+++ b/widget-src/components/ChangeLogEmpty.tsx
@@ -58,8 +58,8 @@ export const ChangeLogEmpty = ({ isLocked }: { isLocked: boolean }) => (
             x={570}
             y={-4}
             positioning="absolute"
-            height={SPACE.md}
-            width={SPACE.lg}
+            height={SPACE.lg}
+            width={SPACE.xl}
             src={<HelpArrow />}
           />
         </>
diff --git a/widget-src/components/ChangeLogRow.tsx b/widget-src/components/ChangeLogRow.tsx
index 0cb569f..c8db078 100644
--- a/widget-src/components/ChangeLogRow.tsx
+++ b/widget-src/components/ChangeLogRow.tsx
@@ -1,6 +1,6 @@
 import { ChangeLog, ChangeLogState } from '../types/ChangeLog';
 import { User } from './log/User';
-import { COLOR, GAP, RADIUS, SPACE } from '../utilities/Styles';
+import { COLOR, GAP, SPACE } from '../utilities/Styles';
 import { ChangeLogEditing } from './log/LogEditing';
 import { ChangeLogDisplay } from './log/LogDisplay';
 
@@ -78,7 +78,7 @@ export const ChangeLogRow = ({
         hidden={isLastRow}
         stroke={COLOR.grey}
         length="fill-parent"
-        strokeDashPattern={[RADIUS.sm, RADIUS.sm]}
+        strokeDashPattern={[SPACE.xxxs, SPACE.xxxs]}
         strokeCap="round"
         strokeWidth={SPACE.one}
       />
diff --git a/widget-src/components/Footer.tsx b/widget-src/components/Footer.tsx
index fbd08e3..259fe10 100644
--- a/widget-src/components/Footer.tsx
+++ b/widget-src/components/Footer.tsx
@@ -10,7 +10,7 @@ export const Footer = () => (
     name="Footer"
     overflow="visible"
     direction="vertical"
-    spacing={PADDING.xl}
+    spacing={GAP.lg}
     width="fill-parent"
     padding={{ top: PADDING.xl }}
   >
@@ -32,7 +32,7 @@ export const Footer = () => (
           openExternal('https://commerce.nearform.com/open-source/');
         }}
       >
-        <SVG name="FigLog Logo" height={PADDING.xxl} width={PADDING.xxl} src={LogoFigLog} />
+        <SVG name="FigLog Logo" height={32} width={32} src={LogoFigLog} />
         <AutoLayout name="FigLog Logo Text" spacing={GAP.xs}>
           <Text
             fontFamily={FONT.family}
diff --git a/widget-src/components/log/Type.tsx b/widget-src/components/log/Type.tsx
index 7dd035f..1644b73 100644
--- a/widget-src/components/log/Type.tsx
+++ b/widget-src/components/log/Type.tsx
@@ -67,14 +67,14 @@ export const Type = ({ type, isActive = false }: TypeProps) => {
       }}
       horizontalAlignItems="center"
       verticalAlignItems="center"
-      spacing={SPACE.xxxs}
+      spacing={GAP.xs}
       positioning="auto"
       stroke={showStroke ? COLOR.grey : ''}
-      strokeDashPattern={showStroke ? [GAP.xs, GAP.xs] : []}
+      strokeDashPattern={showStroke ? [SPACE.xxxs, SPACE.xxxs] : []}
     >
-      {isActive && <SVG name="Active" height={PADDING.md} width={PADDING.md} src={<Check color={txColor} />} />}
+      {isActive && <SVG name="Active" height={SPACE.xxs} width={SPACE.xxs} src={<Check color={txColor} />} />}
       {type === ('none' || 'added') && (
-        <SVG name="Add" height={PADDING.md} width={PADDING.md} src={<ActionAddIcon color={txColor} />} />
+        <SVG name="Add" height={SPACE.xxs} width={SPACE.xxs} src={<ActionAddIcon color={txColor} />} />
       )}
       <Text
         name="Type"
diff --git a/widget-src/components/log/TypeMenu.tsx b/widget-src/components/log/TypeMenu.tsx
index 74ab609..05248ae 100644
--- a/widget-src/components/log/TypeMenu.tsx
+++ b/widget-src/components/log/TypeMenu.tsx
@@ -1,5 +1,5 @@
 import { ChangeType, ChangeTypes } from '../../types/ChangeTypes';
-import { COLOR, FONT, PADDING, RADIUS } from '../../utilities/Styles';
+import { COLOR, GAP, PADDING, RADIUS } from '../../utilities/Styles';
 import { Type } from './Type';
 
 const { widget } = figma;
@@ -15,7 +15,7 @@ export const TypeMenu = ({ currentType, selectType }: TypeMenuProps) => {
     <AutoLayout
       positioning="absolute"
       x={-PADDING.sm}
-      y={{ type: 'bottom', offset: FONT.lineHeight.xs + PADDING.xs * 2 + PADDING.xxs }}
+      y={{ type: 'bottom', offset: PADDING.xxl }}
       fill={COLOR.white}
       stroke={COLOR.grey}
       strokeDashPattern={[]}
@@ -23,7 +23,7 @@ export const TypeMenu = ({ currentType, selectType }: TypeMenuProps) => {
         vertical: PADDING.sm,
         horizontal: PADDING.sm,
       }}
-      spacing={PADDING.md}
+      spacing={GAP.sm}
       horizontalAlignItems="start"
       verticalAlignItems="center"
       overflow="visible"
@@ -34,14 +34,13 @@ export const TypeMenu = ({ currentType, selectType }: TypeMenuProps) => {
         color: COLOR.grey,
         offset: { x: 3, y: 3 },
         blur: 8,
-        spread: -4,
       }}
     >
       {ChangeTypes.map(changeType => {
         if (changeType !== 'added' && changeType !== 'none') {
           return (
-            <AutoLayout name="Action Wrapper" onClick={() => selectType(changeType)}>
-              <Type type={changeType} key={changeType} isActive={changeType === currentType} />
+            <AutoLayout name="Action Wrapper" onClick={() => selectType(changeType)} key={changeType}>
+              <Type type={changeType} isActive={changeType === currentType} />
             </AutoLayout>
           );
         }