Styles & naming convention

thesis · Apr 4, 2024 · 37e98bc · 37e98bc
1 parent 568ad88
commit 37e98bc
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 15 deletions.
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx
@@ -37,7 +37,7 @@ function StakeDetails({
       <TransactionDetailsAmountItem
         label="Fees"
         sublabel="How are fees calculated?"
-        popover={<FeesTooltip />}
+        tooltip={<FeesTooltip />}
         from={{
           currency,
           amount: details?.protocolFee,

diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx
@@ -25,7 +25,7 @@ function UnstakeDetails({ currency }: { currency: CurrencyType }) {
       <TransactionDetailsAmountItem
         label="Fees"
         sublabel="How are fees calculated?"
-        popover={<FeesTooltip />}
+        tooltip={<FeesTooltip />}
         from={{
           currency,
           amount: details?.protocolFee,

diff --git a/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltip.tsx b/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltip.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { Info } from "#/assets/icons"
 import { Icon, Tooltip, List } from "@chakra-ui/react"
-import { FeesItemType, FeesPopoverItem } from "./FeesTooltipItem"
+import { FeesItemType, FeesTooltipItem } from "./FeesTooltipItem"
 
 const fees: Array<FeesItemType> = [
   {
@@ -28,7 +28,8 @@ export function FeesTooltip() {
       label={
         <List spacing={0.5} minW={60}>
           {fees.map((fee) => (
-            <FeesPopoverItem
+            <FeesTooltipItem
+              key={fee.label}
               label={fee.label}
               amount={fee.amount}
               currency={fee.currency}

diff --git a/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx b/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { HStack } from "@chakra-ui/react"
+import { ListItem } from "@chakra-ui/react"
 import {
   CurrencyBalance,
   CurrencyBalanceProps,
@@ -10,9 +10,9 @@ export type FeesItemType = CurrencyBalanceProps & {
   label: string
 }
 
-export function FeesPopoverItem({ label, amount, ...props }: FeesItemType) {
+export function FeesTooltipItem({ label, amount, ...props }: FeesItemType) {
   return (
-    <HStack w={60} justifyContent="space-between">
+    <ListItem display="flex" justifyContent="space-between">
       <TextSm color="white">{label}</TextSm>
       <CurrencyBalance
         size="sm"
@@ -22,6 +22,6 @@ export function FeesPopoverItem({ label, amount, ...props }: FeesItemType) {
         symbolFontWeight="semibold"
         {...props}
       />
-    </HStack>
+    </ListItem>
   )
 }
diff --git a/dapp/src/components/shared/TransactionDetails/AmountItem.tsx b/dapp/src/components/shared/TransactionDetails/AmountItem.tsx
@@ -6,20 +6,20 @@ import { CurrencyBalanceWithConversion } from "../CurrencyBalanceWithConversion"
 type TransactionDetailsAmountItemProps = ComponentProps<
   typeof CurrencyBalanceWithConversion
 > &
-  Pick<TransactionDetailsItemProps, "label" | "sublabel" | "popover">
+  Pick<TransactionDetailsItemProps, "label" | "sublabel" | "tooltip">
 
 function TransactionDetailsAmountItem({
   label,
   sublabel,
-  popover,
+  tooltip,
   from,
   to,
 }: TransactionDetailsAmountItemProps) {
   return (
     <TransactionDetailsItem
       label={label}
       sublabel={sublabel}
-      popover={popover}
+      tooltip={tooltip}
       alignItems="start"
     >
       <Flex flexDirection="column" alignItems="end">

diff --git a/dapp/src/components/shared/TransactionDetails/index.tsx b/dapp/src/components/shared/TransactionDetails/index.tsx
@@ -6,14 +6,14 @@ export type TransactionDetailsItemProps = {
   label: string
   sublabel?: string
   value?: string
-  popover?: React.ReactElement
+  tooltip?: React.ReactElement
   children?: React.ReactNode
 } & ListItemProps
 
 function TransactionDetailsItem({
   label,
   sublabel,
-  popover,
+  tooltip,
   value,
   children,
   ...listItemProps
@@ -26,9 +26,14 @@ function TransactionDetailsItem({
       {...listItemProps}
     >
       <VStack alignItems="start" gap={0}>
-        <TextMd fontWeight="semibold" color="grey.700">
+        <TextMd
+          display="flex"
+          alignItems="center"
+          fontWeight="semibold"
+          color="grey.700"
+        >
           {label}
-          {popover}
+          {tooltip}
         </TextMd>
         {sublabel && <TextSm color="grey.400">{sublabel}</TextSm>}
       </VStack>