current update is saved when new log is created

package.json

@@ -3,8 +3,8 @@
   "version": "1.0.0",
   "repository": "https://github.com/FormidableLabs/figlog.git",
   "devDependencies": {
-    "@figma/plugin-typings": "*",
-    "@figma/widget-typings": "*",
+    "@figma/plugin-typings": "^1.92.0",
+    "@figma/widget-typings": "^1.9.1",
     "date-fns": "^3.6.0",
     "esbuild": "*",
     "prettier": "3.2.5",

widget-src/components/Button.tsx

@@ -19,7 +19,7 @@ export const Button = ({ label, hideLabel = false, action, iconSrc, error = fals
         fill={COLOR.white}
         cornerRadius={RADIUS.sm}
         overflow="visible"
-        spacing={GAP.sm}
+        spacing={GAP.xs}
         padding={PADDING.xs}
         stroke={COLOR.red}
         strokeWidth={SPACE.one}
@@ -72,7 +72,7 @@ export const Button = ({ label, hideLabel = false, action, iconSrc, error = fals
       onClick={() => {
         action();
       }}
-      spacing={GAP.sm}
+      spacing={GAP.xs}
       padding={PADDING.xs}
       horizontalAlignItems="center"
       verticalAlignItems="center"

widget-src/components/ChangeLogEmpty.tsx

@@ -20,7 +20,7 @@ export const ChangeLogEmpty = ({ isLocked }: { isLocked: boolean }) => (
       fill={COLOR.white}
       overflow="visible"
       direction="vertical"
-      spacing={GAP.md}
+      spacing={GAP.sm}
       padding={{
         vertical: PADDING.xxl * 2,
         horizontal: PADDING.none,
@@ -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 />}
           />
         </>

widget-src/components/ChangeLogRow.tsx

@@ -5,7 +5,7 @@ import { ChangeLogEditing } from './log/LogEditing';
 import { ChangeLogDisplay } from './log/LogDisplay';
 
 const { widget } = figma;
-const { AutoLayout, Rectangle } = widget;
+const { AutoLayout, Line } = widget;
 
 interface ChangeLogRowProps {
   changeLogId: string;
@@ -43,12 +43,13 @@ export const ChangeLogRow = ({
       direction="vertical"
       width="fill-parent"
     >
-      <AutoLayout name="Wrapper" overflow="visible" spacing={GAP.md} width="fill-parent">
+      <AutoLayout name="Wrapper" overflow="visible" spacing={GAP.sm} width="fill-parent">
         <User
           userName={changeLog.user?.name}
           userPhotoUrl={changeLog.user?.photoUrl}
           showAvatars={showAvatars}
           isLastRow={isLastRow}
+          isFocused={!!changeLog.state?.editing && !locked}
         />
         {!!changeLog.state?.editing && !locked ? (
           <ChangeLogEditing
@@ -72,13 +73,14 @@ export const ChangeLogRow = ({
           />
         )}
       </AutoLayout>
-      <Rectangle
+      <Line
         name="Divider"
         hidden={isLastRow}
         stroke={COLOR.grey}
-        width="fill-parent"
-        height={SPACE.one}
-        strokeDashPattern={[GAP.sm, GAP.sm]}
+        length="fill-parent"
+        strokeDashPattern={[SPACE.xxxs, SPACE.xxxs]}
+        strokeCap="round"
+        strokeWidth={SPACE.one}
       />
     </AutoLayout>
   );

widget-src/components/Footer.tsx

@@ -1,6 +1,6 @@
 import { LogoFigLog } from '../svgs/LogoFigLog';
 import { LogoNearform } from '../svgs/LogoNearform';
-import { COLOR, GAP, FONT, SPACE, PADDING } from '../utilities/Styles';
+import { COLOR, GAP, FONT, RADIUS, SPACE, PADDING } from '../utilities/Styles';
 
 const { widget, openExternal } = figma;
 const { AutoLayout, Rectangle, SVG, Text } = widget;
@@ -10,23 +10,30 @@ export const Footer = () => (
     name="Footer"
     overflow="visible"
     direction="vertical"
-    spacing={PADDING.xl}
+    spacing={GAP.lg}
     width="fill-parent"
     padding={{ top: PADDING.xl }}
   >
-    <Rectangle name="Divider" fill={COLOR.greyDark} strokeAlign="outside" width="fill-parent" height={SPACE.one} />
+    <Rectangle
+      name="Divider"
+      fill={COLOR.greyDark}
+      strokeAlign="outside"
+      width="fill-parent"
+      height={SPACE.one}
+      cornerRadius={RADIUS.md}
+    />
     <AutoLayout name="Row" overflow="visible" spacing="auto" width="fill-parent" verticalAlignItems="center">
       <AutoLayout
         name="FigLog Logo"
         overflow="visible"
-        spacing={GAP.md}
+        spacing={GAP.sm}
         verticalAlignItems="center"
         onClick={() => {
           openExternal('https://commerce.nearform.com/open-source/');
         }}
       >
-        <SVG name="FigLog Logo" height={PADDING.xxl} width={PADDING.xxl} src={LogoFigLog} />
-        <AutoLayout name="FigLog Logo Text" spacing={GAP.sm}>
+        <SVG name="FigLog Logo" height={32} width={32} src={LogoFigLog} />
+        <AutoLayout name="FigLog Logo Text" spacing={GAP.xs}>
           <Text
             fontFamily={FONT.family}
             fill={COLOR.black}
@@ -50,7 +57,7 @@ export const Footer = () => (
       <AutoLayout
         name="Nearform_Commerce Logo"
         overflow="visible"
-        spacing={GAP.md}
+        spacing={GAP.sm}
         verticalAlignItems="center"
         onClick={() => {
           openExternal('https://commerce.nearform.com/');

widget-src/components/Header.tsx

@@ -2,7 +2,7 @@ import { Status } from './header/Status';
 import { Meta } from './header/Meta';
 import { Name } from './header/Name';
 import { Description } from './header/Description';
-import { COLOR, GAP, SPACE } from '../utilities/Styles';
+import { COLOR, GAP, RADIUS, SPACE } from '../utilities/Styles';
 
 const { widget } = figma;
 const { AutoLayout, Rectangle, useSyncedState } = widget;
@@ -38,7 +38,7 @@ export const Header = ({
   const [descriptionText, setDescriptionText] = useSyncedState('descriptionText', '');
 
   return (
-    <AutoLayout name="Header" overflow="visible" direction="vertical" spacing={GAP.md} width="fill-parent">
+    <AutoLayout name="Header" overflow="visible" direction="vertical" spacing={GAP.sm} width="fill-parent">
       <AutoLayout name="Container" overflow="visible" direction="vertical" width="fill-parent">
         {/* STATUS */}
         {status !== '0' && <Status status={status} />}
@@ -74,7 +74,14 @@ export const Header = ({
           locked={isLocked}
         />
       </AutoLayout>
-      <Rectangle name="Divider" fill={COLOR.greyDark} strokeAlign="outside" width="fill-parent" height={SPACE.one} />
+      <Rectangle
+        name="Divider"
+        fill={COLOR.greyDark}
+        strokeAlign="outside"
+        width="fill-parent"
+        height={SPACE.one}
+        cornerRadius={RADIUS.md}
+      />
     </AutoLayout>
   );
 };