chore: differentiate action popup and popup, improve responsiveness a…

…nd refactor footers, ref #5260
leather-io · Aug 19, 2024 · 2cae2a2 · 2cae2a2
1 parent 9e7d404
commit 2cae2a2
Show file tree

Hide file tree

Showing 49 changed files with 815 additions and 860 deletions.
diff --git a/public/html/action-popup.html b/public/html/action-popup.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html class="mode__action-popup light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href="/assets/base.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="splash-screen"></div>
+    <div id="app"></div>
+    <script src="/assets/splash-screen.js"></script>
+    <script src="browser-polyfill.js"></script>
+  </body>
+</html>
diff --git a/scripts/generate-manifest.js b/scripts/generate-manifest.js
@@ -87,7 +87,7 @@ const manifest = {
   web_accessible_resources: [{ resources: ['inpage.js'], matches: ['*://*/*'] }],
   action: {
     default_title: 'Leather',
-    default_popup: 'popup.html',
+    default_popup: 'action-popup.html',
     default_icon: defaultIconEnvironment[WALLET_ENVIRONMENT],
   },
   options_ui: {

diff --git a/src/app/components/disclaimer.tsx b/src/app/components/disclaimer.tsx
@@ -10,7 +10,7 @@ interface DisclaimerProps extends BoxProps {
 }
 export function Disclaimer({ disclaimerText, learnMoreUrl, ...props }: DisclaimerProps) {
   return (
-    <Box lineHeight="1.4" {...props}>
+    <Box {...props}>
       <styled.span textStyle="caption.01">
         {disclaimerText}
         {learnMoreUrl ? (

diff --git a/src/app/components/info-card/info-card.tsx b/src/app/components/info-card/info-card.tsx
@@ -105,7 +105,6 @@ export function InfoCardBtn({ icon, label, onClick }: InfoCardBtnProps) {
 interface InfoCardFooterProps {
   children: ReactNode;
 }
-/** @deprecated replace with ui/footer */
 export function InfoCardFooter({ children }: InfoCardFooterProps) {
   return (
     <Flex

diff --git a/src/app/components/layout/card/card-content.tsx b/src/app/components/layout/card/card-content.tsx
diff --git a/src/app/components/layout/card/card.stories.tsx b/src/app/components/layout/card/card.stories.tsx
@@ -1,28 +1,110 @@
+import { TooltipProvider } from '@radix-ui/react-tooltip';
 import type { Meta } from '@storybook/react';
-import { Box } from 'leather-styles/jsx';
+import { Box, styled } from 'leather-styles/jsx';
 
-import { Button } from '@leather.io/ui';
+import { Button, Logo } from '@leather.io/ui';
 
 import { Card as Component } from './card';
+import { AvailableBalance, ButtonRow } from './index';
 
 const meta: Meta<typeof Component> = {
   component: Component,
   tags: ['autodocs'],
   title: 'Layout/Card',
+  decorators: [
+    Story => (
+      <TooltipProvider>
+        <Story />
+      </TooltipProvider>
+    ),
+  ],
 };
 
 export default meta;
 
 export function Card() {
+  return (
+    <Component>
+      <Box height="40vh">Card content</Box>
+    </Component>
+  );
+}
+
+export function CardWithButtonFooter() {
   return (
     <Component
       footer={
         <Button fullWidth onClick={() => null}>
-          Create new account
+          Button
         </Button>
       }
     >
-      <Box height="200px" bg="lightModeRed.300" />
+      <Box height="40vh">Card content</Box>
+    </Component>
+  );
+}
+export function CardWithButtonRowFooter() {
+  return (
+    <Component
+      footer={
+        <ButtonRow flexDirection="row">
+          <Button flexGrow={1} onClick={() => null} variant="outline">
+            Cancel
+          </Button>
+          <Button flexGrow={1} onClick={() => null}>
+            Confirm
+          </Button>
+        </ButtonRow>
+      }
+    >
+      <Box height="40vh">Card content</Box>
+    </Component>
+  );
+}
+
+export function CardWithBalanceFooter() {
+  return (
+    <Component
+      footer={
+        <ButtonRow>
+          <Button fullWidth onClick={() => null}>
+            Continue
+          </Button>
+          <AvailableBalance balance="$10" />
+        </ButtonRow>
+      }
+    >
+      <Box height="40vh">Card content</Box>
+    </Component>
+  );
+}
+
+export function CardWithBigHeader() {
+  return (
+    <Component
+      header={
+        <styled.h1 textStyle="heading.03" p="space.05">
+          choose asset <br /> to fund
+        </styled.h1>
+      }
+    >
+      <Box height="40vh">Card content</Box>
+    </Component>
+  );
+}
+
+export function CardWithLogo() {
+  return (
+    <Component
+      header={
+        <styled.h1 p="space.04" hideBelow="sm">
+          <Box px="space.02">
+            <Logo />
+          </Box>
+        </styled.h1>
+      }
+    >
+      <Box height="40vh">Card content</Box>
     </Component>
   );
 }
diff --git a/src/app/components/layout/card/card.tsx b/src/app/components/layout/card/card.tsx
@@ -1,20 +1,65 @@
 import type { ReactNode } from 'react';
 
-import { Flex } from 'leather-styles/jsx';
+import { Flex, FlexProps } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 interface CardProps {
   children: ReactNode;
   dataTestId?: string;
   header?: ReactNode;
   footer?: ReactNode;
+  footerBorder?: boolean;
+  contentStyle?: FlexProps;
 }
 
-export function Card({ children, dataTestId, header, footer }: CardProps) {
+export function Card({
+  children,
+  dataTestId,
+  header,
+  footer,
+  contentStyle,
+  footerBorder = false,
+  ...props
+}: CardProps & FlexProps) {
   return (
-    <Flex data-testid={dataTestId} direction="column">
+    <Flex
+      data-testid={dataTestId}
+      direction="column"
+      position={{ base: 'unset', sm: 'relative' }}
+      border={{ base: 'unset', sm: 'default' }}
+      rounded="lg"
+      {...props}
+    >
       {header}
-      {children}
-      {footer}
+      <Flex
+        flexDirection="column"
+        width="100%"
+        overflowY="auto"
+        style={{ marginBottom: footer ? token('sizes.footerHeight') : 0 }}
+        p="space.05"
+        maxHeight={{ base: '70vh', md: '80vh' }}
+        {...contentStyle}
+      >
+        {children}
+      </Flex>
+      {footer && (
+        <Flex
+          bottom={0}
+          position="absolute"
+          gap="space.05"
+          p="space.05"
+          width="100vw"
+          maxWidth="100%"
+          zIndex={1}
+          minHeight="footerHeight"
+          bg="ink.background-primary"
+          borderTop={footerBorder ? 'default' : 'unset'}
+          borderBottomLeftRadius="lg"
+          borderBottomRightRadius="lg"
+        >
+          {footer}
+        </Flex>
+      )}
     </Flex>
   );
 }
diff --git a/...nents/layout/footer/available-balance.tsx → ...out/card/components/available-balance.tsx b/...nents/layout/footer/available-balance.tsx → ...out/card/components/available-balance.tsx
diff --git a/src/app/components/layout/card/components/button-row.tsx b/src/app/components/layout/card/components/button-row.tsx
@@ -0,0 +1,11 @@
+import { Flex, FlexProps } from 'leather-styles/jsx';
+
+import { HasChildren } from '@app/common/has-children';
+
+export function ButtonRow({ children, ...props }: HasChildren & FlexProps) {
+  return (
+    <Flex flexDirection="column" gap="space.04" width="100%" {...props}>
+      {children}
+    </Flex>
+  );
+}
diff --git a/src/app/components/layout/card/components/summary-footer.tsx b/src/app/components/layout/card/components/summary-footer.tsx
@@ -0,0 +1,18 @@
+import { HStack } from 'leather-styles/jsx';
+
+import { CopyIcon, ExternalLinkIcon } from '@leather.io/ui';
+
+import { InfoCardBtn } from '@app/components/info-card/info-card';
+
+interface SummaryFooterProps {
+  onClickLink(): void;
+  onClickCopy(): void;
+}
+export function SummaryFooter({ onClickLink, onClickCopy }: SummaryFooterProps) {
+  return (
+    <HStack gap="space.04" width="100%">
+      <InfoCardBtn icon={<ExternalLinkIcon />} label="View details" onClick={onClickLink} />
+      <InfoCardBtn icon={<CopyIcon />} label="Copy ID" onClick={onClickCopy} />
+    </HStack>
+  );
+}
diff --git a/src/app/components/layout/card/index.ts b/src/app/components/layout/card/index.ts
@@ -0,0 +1,4 @@
+export { Card } from './card';
+export { ButtonRow } from './components/button-row';
+export { SummaryFooter } from './components/summary-footer';
+export { AvailableBalance } from './components/available-balance';