refactor: organise layout components

Author: kyranjamie

apps/web/app/components/icons/alex-logo.tsx

@@ -0,0 +1,15 @@
+import { styled } from 'leather-styles/jsx';
+import { HTMLStyledProps } from 'leather-styles/types';
+import { ImageSizeProps } from '~/utils/types';
+
+export function AlexLogo(props: HTMLStyledProps<'img'> & ImageSizeProps) {
+  return (
+    <styled.img
+      width={props.size ?? props.width}
+      height={props.size ?? props.height}
+      src="icons/alex.svg"
+      alt="Alex Logo"
+      {...props}
+    />
+  );
+}

apps/web/app/components/icons/bitflow-logo.tsx

@@ -0,0 +1,15 @@
+import { styled } from 'leather-styles/jsx';
+import { HTMLStyledProps } from 'leather-styles/types';
+import { ImageSizeProps } from '~/utils/types';
+
+export function BitflowLogo(props: HTMLStyledProps<'img'> & ImageSizeProps) {
+  return (
+    <styled.img
+      width={props.size ?? props.width}
+      height={props.size ?? props.height}
+      src="icons/bitflow.png"
+      alt="Bitflow Logo"
+      {...props}
+    />
+  );
+}

apps/web/app/components/icons/sbtc-logo.tsx

@@ -0,0 +1,15 @@
+import { styled } from 'leather-styles/jsx';
+import { HTMLStyledProps } from 'leather-styles/types';
+import { ImageSizeProps } from '~/utils/types';
+
+export function SbtcLogo(props: HTMLStyledProps<'img'> & ImageSizeProps) {
+  return (
+    <styled.img
+      width={props.size ?? props.width}
+      height={props.size ?? props.height}
+      src="icons/sbtc.svg"
+      alt="Sbtc Logo"
+      {...props}
+    />
+  );
+}

apps/web/app/components/icons/sbtc-icon.tsx renamed to apps/web/app/components/icons/sbtc-monogram-icon.tsx

@@ -1,6 +1,6 @@
 import { HTMLStyledProps, styled } from 'leather-styles/jsx';
 
-export function SbtcIcon(props: HTMLStyledProps<'svg'>) {
+export function SbtcMonogramIcon(props: HTMLStyledProps<'svg'>) {
   return (
     <styled.svg
       xmlns="http://www.w3.org/2000/svg"

apps/web/app/components/icons/velar-logo.tsx

@@ -0,0 +1,15 @@
+import { styled } from 'leather-styles/jsx';
+import { HTMLStyledProps } from 'leather-styles/types';
+import { ImageSizeProps } from '~/utils/types';
+
+export function VelarLogo(props: HTMLStyledProps<'img'> & ImageSizeProps) {
+  return (
+    <styled.img
+      width={props.size ?? props.width}
+      height={props.size ?? props.height}
+      src="icons/velar.png"
+      alt="Velar Logo"
+      {...props}
+    />
+  );
+}

apps/web/app/components/icons/zest-logo.tsx

@@ -0,0 +1,15 @@
+import { styled } from 'leather-styles/jsx';
+import { HTMLStyledProps } from 'leather-styles/types';
+import { ImageSizeProps } from '~/utils/types';
+
+export function ZestLogo(props: HTMLStyledProps<'img'> & ImageSizeProps) {
+  return (
+    <styled.img
+      width={props.size ?? props.width}
+      height={props.size ?? props.height}
+      src="icons/zest.svg"
+      alt="Zest Logo"
+      {...props}
+    />
+  );
+}

apps/web/app/components/info-grid/info-grid.tsx

@@ -0,0 +1,23 @@
+import { Flex, FlexProps, Grid, GridProps } from 'leather-styles/jsx';
+
+// This component is intended to share styles only. No layout based assumptions
+// should be made.
+export function InfoGrid(props: GridProps) {
+  return (
+    <Grid
+      border="default"
+      borderWidth="1px"
+      borderRadius="sm"
+      overflow="hidden"
+      gap="1px"
+      bg="ink.border-default"
+      {...props}
+    />
+  );
+}
+
+export function InfoGridCell(props: FlexProps) {
+  return <Flex flexDir="column" bg="ink.background-primary" {...props} />;
+}
+
+InfoGrid.Cell = InfoGridCell;

apps/web/app/components/layouts/primary-cell-five-grid.layout.tsx

@@ -4,10 +4,10 @@ import { WhenClient } from '~/components/client-only';
 
 import { SignInButton } from '../sign-in-button/sign-in-button';
 
-export const insetPageMarginX = css({ mx: ['-space.04', '-space.05', '-space.07'] });
+export const insetPageMarginX = css({ mx: ['-space.04', '-space.05', '-space.06'] });
 
 export function Page(props: HTMLStyledProps<'div'>) {
-  return <styled.main mx={['space.04', 'space.05', 'space.07']} {...props} />;
+  return <styled.main mx={['space.04', 'space.05', 'space.06']} {...props} />;
 }
 
 export function PageInset(props: HTMLStyledProps<'div'>) {
@@ -27,7 +27,7 @@ export function PageHeader({ title }: PageHeaderProps) {
       borderBottom="default"
       alignItems="center"
     >
-      <styled.h1 textStyle="heading.05" mx={['space.04', 'space.05', 'space.05']}>
+      <styled.h1 textStyle="heading.05" mx={['space.04', 'space.05', 'space.06']}>
         {title}
       </styled.h1>