Redesign dialog

centrifuge · Nov 8, 2024 · 2b38b72 · 2b38b72
1 parent 9b794c5
commit 2b38b72
Show file tree

Hide file tree

Showing 9 changed files with 159 additions and 212 deletions.
diff --git a/centrifuge-react/src/components/WalletMenu/ConnectButton.tsx b/centrifuge-react/src/components/WalletMenu/ConnectButton.tsx
@@ -1,12 +1,8 @@
-import { WalletButton, WalletButtonProps } from '@centrifuge/fabric'
+import { WalletButton } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useWallet } from '../WalletProvider'
 
-type Props = WalletButtonProps & {
-  label?: string
-}
-
-export function ConnectButton({ label = 'Connect wallet', ...rest }: Props) {
+export function ConnectButton({ label = 'Connect wallet', ...rest }) {
   const { showNetworks, pendingConnect } = useWallet()
 
   return (

diff --git a/centrifuge-react/src/components/WalletProvider/SelectButton.tsx b/centrifuge-react/src/components/WalletProvider/SelectButton.tsx
@@ -16,13 +16,16 @@ type SelectButtonProps = {
   iconRight?: React.ReactNode
 }
 
-const Root = styled(Box)<{ disabled: boolean; muted?: boolean }>`
+const Root = styled(Box)<{ disabled: boolean; muted?: boolean; active?: boolean }>`
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   appearance: none;
   outline: none;
+  padding: 12px 8px;
+  height: 86px;
+  border: ${({ theme, active }) => `1px solid ${active ? theme.colors.textPrimary : theme.colors.borderPrimary}`};
 
   opacity: ${({ disabled, muted }) => (disabled || muted ? 0.2 : 1)};
   cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
@@ -36,6 +39,10 @@ const Root = styled(Box)<{ disabled: boolean; muted?: boolean }>`
   &:focus-visible:not(:disabled) {
     outline: ${({ theme }) => `solid ${theme.colors.borderSelected}`};
   }
+
+  & > span {
+    font-weight: ${({ active }) => `${active ? 700 : 500}`};
+  }
 `
 
 export function SelectButton({
@@ -58,6 +65,7 @@ export function SelectButton({
       backgroundColor={active ? 'backgroundSecondary' : 'backgroundPrimary'}
       muted={muted}
       position="relative"
+      active={active}
     >
       <Content {...restProps} />
     </Root>

diff --git a/centrifuge-react/src/components/WalletProvider/SelectionStep.tsx b/centrifuge-react/src/components/WalletProvider/SelectionStep.tsx
@@ -1,55 +1,56 @@
-import { Box, Flex, IconCheck, IconInfoFilled, Shelf, Stack, Text, Tooltip } from '@centrifuge/fabric'
+import {
+  Box,
+  IconButton,
+  IconCheckInCircle,
+  IconChevronDown,
+  IconChevronUp,
+  IconCrosschair,
+  IconInfoFilled,
+  Shelf,
+  Stack,
+  Text,
+  Tooltip,
+} from '@centrifuge/fabric'
 import * as React from 'react'
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { Network } from './types'
 import { useGetNetworkName } from './utils'
 
 type SelectionStepProps = {
-  step: number
   title: string
-  expanded?: boolean
   children?: React.ReactNode
   tooltip?: React.ReactNode
-  titleElement?: React.ReactNode
-  rightElement?: React.ReactNode
+  done: boolean
+  expanded: boolean
+  toggleExpanded: () => void
 }
 
-const Marker = styled(Flex)<{ $done: boolean }>`
-  border-radius: 50%;
-  background-color: ${({ theme, $done }) => ($done ? theme.colors.accentPrimary : theme.colors.textPrimary)};
-`
-
-export function SelectionStep({
-  step,
-  title,
-  titleElement,
-  expanded = true,
-  children,
-  tooltip,
-  rightElement,
-}: SelectionStepProps) {
+export function SelectionStep({ title, children, tooltip, done, toggleExpanded, expanded }: SelectionStepProps) {
+  const theme = useTheme()
   return (
-    <Stack>
+    <Stack
+      border={`1px solid ${theme.colors.borderPrimary}`}
+      padding={2}
+      borderRadius={10}
+      minHeight={68}
+      justifyContent="center"
+      pt={expanded ? 4 : 2}
+    >
       <Shelf justifyContent="space-between">
         <Shelf gap={2}>
-          <Marker width="iconMedium" height="iconMedium" $done={!expanded} justifyContent="center" alignItems="center">
-            {expanded ? (
-              <Text variant="interactive1" color="textInverted" textAlign="center">
-                {step}
-              </Text>
-            ) : (
-              <IconCheck size="iconSmall" color="textInverted" />
-            )}
-          </Marker>
-          <Stack bleedY={2} gap="4px">
-            <Text as="h3" variant={titleElement && !expanded ? 'label2' : 'heading4'} color="textPrimary">
+          <Box bleedY={2} display="flex" justifyContent="space-between" alignItems="center">
+            {done ? <IconCheckInCircle color="statusOk" /> : <IconCrosschair color="statusOkBg" />}
+            <Text as="h3" variant="heading3" style={{ marginLeft: 8, fontWeight: 700 }}>
               {title}
               {tooltip}
             </Text>
-            {!expanded && titleElement}
-          </Stack>
+          </Box>
         </Shelf>
-        <Box bleedY={2}>{rightElement}</Box>
+        <Box bleedY={2}>
+          <IconButton size="24px" onClick={toggleExpanded}>
+            {expanded ? <IconChevronUp /> : <IconChevronDown />}
+          </IconButton>
+        </Box>
       </Shelf>
 
       {expanded && children}