Footer updates (#81)

FormidableLabs · Apr 17, 2024 · fdff6fd · fdff6fd
1 parent 81b740e
commit fdff6fd
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 16 deletions.
diff --git a/widget-src/Widget.tsx b/widget-src/Widget.tsx
@@ -194,7 +194,7 @@ function Widget() {
           isLocked={isLocked}
         />
       )}
-      <Footer showBranding={showBranding} />
+      {showBranding && <Footer />}
     </WidgetContainer>
   );
 }

diff --git a/widget-src/components/ChangeLogRow.tsx b/widget-src/components/ChangeLogRow.tsx
@@ -42,7 +42,7 @@ export const ChangeLogRow = ({
       width="fill-parent"
     >
       <AutoLayout name="Wrapper" overflow="visible" spacing={GAP.md} width="fill-parent">
-        <User userName={changeLog.user?.name} userPhotoUrl={changeLog.user?.photoUrl} />
+        <User userName={changeLog.user?.name} userPhotoUrl={changeLog.user?.photoUrl} isLastRow={isLastRow} />
         {!!changeLog.state?.editing && !locked ? (
           <ChangeLogEditing
             changeLog={changeLog}
@@ -51,6 +51,7 @@ export const ChangeLogRow = ({
             deleteChange={deleteChange}
             setUpdatedDate={setUpdatedDate}
             showTypes={showTypes}
+            isLastRow={isLastRow}
           />
         ) : (
           <ChangeLogDisplay
@@ -60,6 +61,7 @@ export const ChangeLogRow = ({
             updateOtherStates={updateOtherStates}
             showTypes={showTypes}
             locked={locked}
+            isLastRow={isLastRow}
           />
         )}
       </AutoLayout>

diff --git a/widget-src/components/Footer.tsx b/widget-src/components/Footer.tsx
@@ -1,19 +1,23 @@
 import { LogoFigLog } from '../svgs/LogoFigLog';
+import { LogoNearform } from '../svgs/LogoNearform';
 import { COLOR, GAP, FONT, SPACE, PADDING } from '../utilities/Styles';
 
 const { widget, openExternal } = figma;
 const { AutoLayout, Rectangle, SVG, Text } = widget;
 
-interface FooterProps {
-  showBranding: boolean;
-}
-
-export const Footer = ({ showBranding }: FooterProps) => (
-  <AutoLayout name="Footer" overflow="visible" direction="vertical" spacing={PADDING.xl} width="fill-parent">
+export const Footer = () => (
+  <AutoLayout
+    name="Footer"
+    overflow="visible"
+    direction="vertical"
+    spacing={PADDING.xl}
+    width="fill-parent"
+    padding={{ top: PADDING.xl }}
+  >
     <Rectangle name="Divider" fill={COLOR.greyDark} strokeAlign="outside" width="fill-parent" height={SPACE.one} />
-    {showBranding && (
+    <AutoLayout name="Row" overflow="visible" spacing="auto" width="fill-parent" verticalAlignItems="center">
       <AutoLayout
-        name="Logo"
+        name="FigLog Logo"
         overflow="visible"
         spacing={GAP.md}
         verticalAlignItems="center"
@@ -22,7 +26,7 @@ export const Footer = ({ showBranding }: FooterProps) => (
         }}
       >
         <SVG name="FigLog Logo" height={PADDING.xxl} width={PADDING.xxl} src={LogoFigLog} />
-        <AutoLayout name="Logo Text" spacing={GAP.sm}>
+        <AutoLayout name="FigLog Logo Text" spacing={GAP.sm}>
           <Text
             fontFamily={FONT.family}
             fill={COLOR.black}
@@ -43,6 +47,17 @@ export const Footer = ({ showBranding }: FooterProps) => (
           </Text>
         </AutoLayout>
       </AutoLayout>
-    )}
+      <AutoLayout
+        name="Nearform_Commerce Logo"
+        overflow="visible"
+        spacing={GAP.md}
+        verticalAlignItems="center"
+        onClick={() => {
+          openExternal('https://commerce.nearform.com/');
+        }}
+      >
+        <SVG name="Nearform_Commerce Logo" height={16} width={174} src={LogoNearform} />
+      </AutoLayout>
+    </AutoLayout>
   </AutoLayout>
 );
diff --git a/widget-src/components/log/LogDisplay.tsx b/widget-src/components/log/LogDisplay.tsx
@@ -17,6 +17,7 @@ interface ChangeLogDisplayProps {
   updateOtherStates: (changeId: string, changes: Partial<ChangeLogState>) => void;
   showTypes: boolean;
   locked: boolean;
+  isLastRow: boolean;
 }
 
 export const ChangeLogDisplay = ({
@@ -26,6 +27,7 @@ export const ChangeLogDisplay = ({
   updateOtherStates,
   showTypes,
   locked,
+  isLastRow,
 }: ChangeLogDisplayProps) => {
   return (
     <AutoLayout
@@ -34,7 +36,8 @@ export const ChangeLogDisplay = ({
       direction="vertical"
       spacing={GAP.lg}
       padding={{
-        vertical: PADDING.xl,
+        top: PADDING.xl,
+        bottom: isLastRow ? PADDING.xxs : PADDING.xl,
         horizontal: PADDING.none,
       }}
       width="fill-parent"

diff --git a/widget-src/components/log/LogEditing.tsx b/widget-src/components/log/LogEditing.tsx
@@ -19,6 +19,7 @@ interface ChangeLogEditingProps {
   deleteChange: () => void;
   setUpdatedDate: (updatedDate: number) => void;
   showTypes: boolean;
+  isLastRow: boolean;
 }
 
 export const ChangeLogEditing = ({
@@ -28,6 +29,7 @@ export const ChangeLogEditing = ({
   deleteChange,
   setUpdatedDate,
   showTypes,
+  isLastRow,
 }: ChangeLogEditingProps) => {
   useEffect(() => {
     // console.log('state: ', changeLog.state);
@@ -40,7 +42,8 @@ export const ChangeLogEditing = ({
       direction="vertical"
       spacing={GAP.lg}
       padding={{
-        vertical: PADDING.xl,
+        top: PADDING.xl,
+        bottom: isLastRow ? PADDING.xxs : PADDING.xl,
         horizontal: PADDING.none,
       }}
       width="fill-parent"

diff --git a/widget-src/components/log/User.tsx b/widget-src/components/log/User.tsx
@@ -6,17 +6,19 @@ const { AutoLayout, Image, Rectangle, Text } = widget;
 interface UserProps {
   userName: string | undefined;
   userPhotoUrl: string | null | undefined;
+  isLastRow: boolean;
 }
 
-export const User = ({ userName, userPhotoUrl }: UserProps) => {
+export const User = ({ userName, userPhotoUrl, isLastRow }: UserProps) => {
   return (
     <AutoLayout
       name="User"
       overflow="visible"
       direction="vertical"
       spacing={GAP.none}
       padding={{
-        vertical: PADDING.xl,
+        top: PADDING.xl,
+        bottom: isLastRow ? PADDING.xxs : PADDING.xl,
         horizontal: PADDING.none,
       }}
       height="fill-parent"

diff --git a/widget-src/svgs/LogoNearform.tsx b/widget-src/svgs/LogoNearform.tsx
@@ -0,0 +1,18 @@
+export const LogoNearform: string = `<svg width='174' height='16' viewBox='0 0 174 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+<path d='M0.199707 0.168671H2.1315L8.40682 9.94036V0.168671H10.4871V13.9603H8.55529L2.27997 4.18861V13.9603H0.199707V0.168671Z' fill='#000E38'/>
+<path d='M11.8406 8.93487C11.8406 5.82242 13.6999 3.75238 16.4776 3.75238C19.2553 3.75238 21.0231 5.60433 21.0784 8.55967C21.0784 8.81658 21.0594 9.09197 21.0231 9.36736H13.9191V9.50598C13.9744 11.2193 14.986 12.343 16.5501 12.343C17.7655 12.343 18.6476 11.6925 18.9239 10.5706H20.9109C20.5794 12.5611 18.9964 14.0785 16.6589 14.0785C13.6964 14.0785 11.8372 12.0288 11.8372 8.93672L11.8406 8.93487ZM19.0171 7.81113C18.8514 6.31405 17.876 5.46571 16.4966 5.46571C15.226 5.46571 14.1418 6.37135 13.9934 7.81113H19.0171Z' fill='#000E38'/>
+<path d='M26.5078 3.75424C29.011 3.75424 30.4456 5.03508 30.4456 7.41932V11.4577C30.4456 11.9697 30.6476 12.1083 31.0533 12.1083H31.459V13.9603H30.4093C29.1215 13.9603 28.6795 13.3503 28.6795 12.3449C28.0546 13.3688 27.0965 14.0786 25.5686 14.0786C23.5074 14.0786 22.0728 12.9955 22.0728 11.1232C22.0728 9.05502 23.4711 7.89247 26.1038 7.89247H28.4775V7.28255C28.4775 6.15881 27.7231 5.46942 26.4163 5.46942C25.2389 5.46942 24.4465 6.06086 24.2998 6.94801H22.349C22.551 4.97778 24.134 3.75609 26.5078 3.75609V3.75424ZM25.8448 12.4225C27.5004 12.4225 28.4586 11.3783 28.4758 9.82204V9.46718H26.0106C24.778 9.46718 24.096 9.95881 24.096 10.9846C24.096 11.8311 24.759 12.4225 25.8448 12.4225Z' fill='#000E38'/>
+<path d='M43.2898 2.03905H44.9281V0.166779H43.0326C41.2113 0.166779 40.4016 1.11308 40.4016 2.92437V3.87067H37.5497C36.0046 3.87067 35.2484 4.53973 34.7702 5.38808L34.5493 3.87067H32.7832V13.9584H34.7702V8.89421C34.7702 7.33798 35.3399 5.85938 37.1077 5.85938H40.4016V13.9566H42.4077V5.85938H44.9281V3.86882H42.3697V3.02232C42.3697 2.33293 42.6459 2.03721 43.2898 2.03721V2.03905Z' fill='#000E38'/>
+<path d='M49.9673 3.75424C52.8382 3.75424 54.77 5.84276 54.77 8.9164C54.77 11.99 52.8382 14.0786 49.9673 14.0786C47.0963 14.0786 45.1646 12.0104 45.1646 8.9164C45.1646 5.82243 47.0963 3.75424 49.9673 3.75424ZM52.7467 8.9164C52.7467 6.9665 51.6419 5.56737 49.9673 5.56737C48.2927 5.56737 47.2068 6.9665 47.2068 8.9164C47.2068 10.8663 48.2927 12.2654 49.9673 12.2654C51.6419 12.2654 52.7467 10.8663 52.7467 8.9164Z' fill='#000E38'/>
+<path d='M57.8291 3.87256L58.05 5.38997C58.5282 4.54347 59.2826 3.87256 60.8295 3.87256H61.2714V5.86312H60.3875C58.6215 5.86312 58.05 7.34172 58.05 8.89795V13.9621H56.063V3.87441H57.8291V3.87256Z' fill='#000E38'/>
+<path d='M62.4851 3.87253H64.2149L64.4359 5.19218C64.9693 4.44364 65.779 3.77272 67.1963 3.75424C68.429 3.75424 69.5338 4.28654 70.1035 5.58586C70.7112 4.48245 71.7781 3.75424 73.3249 3.75424C75.2757 3.75424 76.8588 4.9556 76.8588 8.14753V13.9603H74.8717V8.28615C74.8717 6.51368 74.1915 5.5877 72.902 5.5877C71.5399 5.5877 70.675 6.69111 70.675 8.50424V13.9621H68.6689V8.28799C68.6689 6.51552 67.9887 5.58955 66.6819 5.58955C65.375 5.58955 64.4739 6.77243 64.4739 8.56523V13.964H62.4868V3.87623L62.4851 3.87253Z' fill='#000E38'/>
+<path d='M77.9275 13.9603H85.6702V15.9896H77.9275V13.9603Z' fill='#00E5A4'/>
+<path d='M92.4356 1.08355C94.5642 1.08355 96.0471 2.26458 96.6116 4.4067L96.6203 4.43997H97.751L97.7389 4.38452C97.1727 1.64542 95.2098 0.0115662 92.4908 0.0115662C88.9017 0.0115662 86.49 2.83754 86.49 7.046C86.49 9.11234 87.0459 10.87 88.0955 12.1305C89.1572 13.4058 90.6522 14.0786 92.4183 14.0786C95.2219 14.0786 97.1485 12.4762 97.7044 9.6853L97.7148 9.62985H96.584L96.5754 9.66312C96.0281 11.8496 94.5849 13.0048 92.3993 13.0048C89.5301 13.0048 87.6018 10.6094 87.6018 7.04415C87.6018 3.47888 89.5439 1.08355 92.4356 1.08355Z' fill='#000E38'/>
+<path d='M103.457 3.79858C100.809 3.79858 98.9597 5.90744 98.9597 8.92747C98.9597 11.9475 100.809 14.0767 103.457 14.0767C106.105 14.0767 107.973 11.9586 107.973 8.92747C107.973 5.89635 106.115 3.79858 103.457 3.79858ZM103.457 13.0823C101.42 13.0823 99.9973 11.3746 99.9973 8.92747C99.9973 6.48039 101.42 4.77261 103.457 4.77261C105.494 4.77261 106.917 6.48039 106.917 8.92747C106.917 11.3746 105.494 13.0823 103.457 13.0823Z' fill='#000E38'/>
+<path d='M120.006 3.79858C118.455 3.79858 117.276 4.64878 116.674 6.19946C116.222 4.67096 115.11 3.79858 113.606 3.79858C112.249 3.79858 111.191 4.54158 110.611 5.8945L110.475 3.91687H109.585V13.9603H110.606V8.84985C110.606 6.39722 111.719 4.81327 113.442 4.81327C115.165 4.81327 116.021 6.07747 116.021 8.28059V13.9603H117.042V8.49868C117.097 6.22533 118.19 4.81327 119.895 4.81327C121.601 4.81327 122.438 6.00909 122.438 8.18263V13.9603H123.477V8.14382C123.477 5.38253 122.212 3.79858 120.006 3.79858Z' fill='#000E38'/>
+<path d='M135.862 3.79858C134.312 3.79858 133.135 4.64878 132.532 6.19946C132.08 4.67096 130.968 3.79858 129.465 3.79858C128.108 3.79858 127.049 4.54158 126.469 5.8945L126.333 3.91687H125.444V13.9603H126.464V8.84985C126.464 6.39722 127.578 4.81327 129.301 4.81327C131.023 4.81327 131.88 6.07747 131.88 8.28059V13.9603H132.9V8.49868C132.955 6.22533 134.048 4.81327 135.754 4.81327C137.459 4.81327 138.297 6.00909 138.297 8.18263V13.9603H139.336V8.14382C139.336 5.38253 138.07 3.79858 135.864 3.79858H135.862Z' fill='#000E38'/>
+<path d='M145.174 3.79858C142.623 3.79858 140.841 5.88341 140.841 8.86833C140.841 11.8533 142.649 14.0767 145.338 14.0767C147.337 14.0767 148.962 12.6905 149.376 10.626L149.387 10.5706H148.347L148.339 10.6057C147.983 12.1102 146.775 13.0842 145.264 13.0842C143.287 13.0842 141.934 11.4928 141.896 9.12524V8.99401H149.487V8.9478C149.487 8.87757 149.492 8.80179 149.497 8.72971C149.502 8.65948 149.506 8.59294 149.506 8.5338C149.416 5.61356 147.755 3.79858 145.172 3.79858H145.174ZM141.975 8.0588C142.134 6.15325 143.481 4.77446 145.191 4.77446C147.052 4.77446 148.252 6.0017 148.409 8.0588H141.975Z' fill='#000E38'/>
+<path d='M152.112 5.74664L151.978 3.91687H151.089V13.9603H152.109V8.87018C152.109 6.24566 152.97 4.97037 154.743 4.97037H155.465V3.91687H154.928C153.511 3.91687 152.611 4.49907 152.114 5.74664H152.112Z' fill='#000E38'/>
+<path d='M160.135 4.77446C161.647 4.77446 162.749 5.67086 163.082 7.17349L163.09 7.2086H164.149L164.138 7.15316C163.746 5.05354 162.257 3.79858 160.154 3.79858C157.526 3.79858 155.693 5.91668 155.693 8.9478C155.693 11.9789 157.478 14.0767 160.137 14.0767C162.229 14.0767 163.764 12.7922 164.138 10.7221L164.149 10.6685H163.073L163.066 10.7036C162.756 12.1711 161.633 13.0823 160.138 13.0823C158.134 13.0823 156.734 11.3819 156.734 8.9478C156.734 6.51366 158.134 4.77261 160.138 4.77261L160.135 4.77446Z' fill='#000E38'/>
+<path d='M169.566 3.79858C167.014 3.79858 165.233 5.88341 165.233 8.86833C165.233 11.8533 167.04 14.0767 169.73 14.0767C171.729 14.0767 173.354 12.6905 173.768 10.626L173.778 10.5706H172.739L172.73 10.6057C172.375 12.1102 171.168 13.0842 169.656 13.0842C167.679 13.0842 166.326 11.4928 166.288 9.12524V8.99401H173.878V8.9478C173.878 8.87757 173.884 8.80179 173.889 8.72971C173.894 8.65948 173.897 8.59294 173.897 8.5338C173.808 5.61356 172.147 3.79858 169.564 3.79858H169.566ZM166.367 8.0588C166.526 6.15325 167.872 4.77446 169.585 4.77446C171.446 4.77446 172.646 6.0017 172.803 8.0588H166.369H166.367Z' fill='#000E38'/>
+</svg>`;