Box component + tweak ExpandBox

src/app/(sidebar)/account/create/page.tsx

@@ -52,13 +52,14 @@ export default function CreateAccount() {
               Fund account with Friendbot
             </Button>
           </div>
+
+          <ExpandBox isExpanded={Boolean(account.publicKey)} offsetTop="xl">
+            <GenerateKeypair
+              publicKey={account.publicKey}
+              secretKey={secretKey}
+            />
+          </ExpandBox>
         </div>
-        <ExpandBox isExpanded={Boolean(account.publicKey)}>
-          <GenerateKeypair
-            publicKey={account.publicKey}
-            secretKey={secretKey}
-          />
-        </ExpandBox>
       </Card>
     </div>
   );

src/app/(sidebar)/account/styles.scss

@@ -24,7 +24,6 @@
     display: flex;
     align-items: flex-start;
     flex-direction: column;
-    margin-top: pxToRem(24px);
     gap: pxToRem(16px);
 
     .Input__side-element--right {

src/components/ExpandBox/index.tsx

@@ -4,7 +4,15 @@ import "./styles.scss";
 export const ExpandBox = ({
   children,
   isExpanded,
-}: {
+  offsetTop,
+  customValue,
+}: (
+  | {
+      offsetTop: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+      customValue?: undefined;
+    }
+  | { offsetTop: "custom"; customValue: string }
+) & {
   children: React.ReactNode;
   isExpanded: boolean;
 }) => {
@@ -24,7 +32,8 @@ export const ExpandBox = ({
 
   return (
     <div
-      className="ExpandBox"
+      className={`ExpandBox ExpandBox--${offsetTop}`}
+      {...(offsetTop === "custom" ? { marginTop: customValue } : {})}
       data-is-expanded={isExpanded}
       data-is-open={isOpen}
     >

src/components/ExpandBox/styles.scss

@@ -1,10 +1,38 @@
 .ExpandBox {
   display: grid;
   grid-template-rows: 0fr;
-  transition: grid-template-rows 100ms ease-out;
+  transition:
+    grid-template-rows 100ms ease-out,
+    margin-top 100ms ease-out;
+  margin-top: 0;
+
+  &--xs {
+    margin-top: calc(var(--sds-gap-xs) * -1);
+  }
+
+  &--sm {
+    margin-top: calc(var(--sds-gap-sm) * -1);
+  }
+
+  &--md {
+    margin-top: calc(var(--sds-gap-md) * -1);
+  }
+
+  &--lg {
+    margin-top: calc(var(--sds-gap-lg) * -1);
+  }
+
+  &--xl {
+    margin-top: calc(var(--sds-gap-xl) * -1);
+  }
+
+  &--xxl {
+    margin-top: calc(var(--sds-gap-xxl) * -1);
+  }
 
   &[data-is-expanded="true"] {
     grid-template-rows: 1fr;
+    margin-top: 0;
   }
 
   &[data-is-open="true"] {

src/components/FormElements/AssetPicker.tsx

@@ -107,6 +107,8 @@ export const AssetPicker = ({
               value.type,
             ),
         )}
+        offsetTop="custom"
+        customValue="0"
       >
         <AssetPickerFields
           id={id}

src/components/layout/Box/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import "./styles.scss";
+
+export const Box = ({
+  gap,
+  children,
+  customValue,
+  addlClassName,
+}: (
+  | { gap: "xs" | "sm" | "md" | "lg" | "xl" | "xxl"; customValue?: undefined }
+  | { gap: "custom"; customValue: string }
+) & { children: React.ReactElement; addlClassName?: string }) => {
+  return (
+    <div
+      className={`Box Box--${gap} ${addlClassName}`}
+      {...(gap === "custom" ? { gap: customValue } : {})}
+    >
+      {children}
+    </div>
+  );
+};

src/components/layout/Box/styles.scss

@@ -0,0 +1,28 @@
+.Box {
+  display: flex;
+  flex-direction: column;
+
+  &--xs {
+    gap: var(--sds-gap-xs);
+  }
+
+  &--sm {
+    gap: var(--sds-gap-sm);
+  }
+
+  &--md {
+    gap: var(--sds-gap-md);
+  }
+
+  &--lg {
+    gap: var(--sds-gap-lg);
+  }
+
+  &--xl {
+    gap: var(--sds-gap-xl);
+  }
+
+  &--xxl {
+    gap: var(--sds-gap-xxl);
+  }
+}

src/styles/globals.scss

@@ -3,6 +3,16 @@
 // Fonts for SDS
 @import url("https://fonts.googleapis.com/css2?family=Inter+Tight&family=Inter:wght@400;500;600&family=Roboto+Mono&display=swap");
 
+// TODO: move to SDS when ready
+:root {
+  --sds-gap-xs: #{pxToRem(4px)};
+  --sds-gap-sm: #{pxToRem(8px)};
+  --sds-gap-md: #{pxToRem(12px)};
+  --sds-gap-lg: #{pxToRem(16px)};
+  --sds-gap-xl: #{pxToRem(24px)};
+  --sds-gap-xxl: #{pxToRem(32px)};
+}
+
 // Layout
 #root {
   min-width: auto !important;