New color palette

DApp has been redesigned and projects use a new color palette. Let's update the color palette in the code. However, let's leave the old palette until we update the base components. This is the simplest solution to avoid complications with new colors.
thesis · Dec 19, 2024 · 5fb7d6f · 5fb7d6f
1 parent 3b6342d
commit 5fb7d6f
Show file tree

Hide file tree

Showing 59 changed files with 288 additions and 206 deletions.
diff --git a/dapp/src/components/AcrePointsClaimModal.tsx b/dapp/src/components/AcrePointsClaimModal.tsx
@@ -67,7 +67,7 @@ function AcrePointsClaimModalBase({
           prefix="+"
           suffix=" PTS"
           animateMode="whileInView"
-          color="brand.400"
+          color="acre.50"
         />,
       ],
       [
@@ -76,7 +76,7 @@ function AcrePointsClaimModalBase({
           value={formattedTotalAmount}
           suffix=" PTS"
           animateMode="whileInView"
-          indicationColor="brand.400"
+          indicationColor="acre.50"
         />,
       ],
       // TODO: Uncomment when the leaderboard feature is ready
@@ -86,7 +86,7 @@ function AcrePointsClaimModalBase({
       //     value={rankPositionDifference}
       //     prefix={rankPositionDifference > 0 ? "+" : "-"}
       //     animateMode="whileInView"
-      //     color={rankPositionDifference > 0 ? "green.500" : "red.500"}
+      //     color={rankPositionDifference > 0 ? "green.50" : "red.50"}
       //   />,
       // ],
       // [
@@ -95,7 +95,7 @@ function AcrePointsClaimModalBase({
       //     value={estimatedRankPosition}
       //     prefix="#"
       //     animateMode="whileInView"
-      //     indicationColor="brand.400"
+      //     indicationColor="acre.50"
       //   />,
       // ],
     ],
@@ -166,7 +166,7 @@ function AcrePointsClaimModalBase({
                 fontSize={{ base: "5xl", md: "8xl" }}
                 lineHeight="6.25rem" // 100px
                 fontWeight="bold"
-                color="grey.700"
+                color="text.primary"
               >
                 {currentStepValue}
               </Box>

diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx
@@ -49,7 +49,7 @@ const CONNECTION_ALERTS: ConnectionAlerts = {
   [ConnectionAlert.Rejected]: {
     title: "Please connect your wallet to start using Acre",
     status: "info",
-    colorScheme: "blue",
+    colorScheme: "oldPalette.blue",
   },
   [ConnectionAlert.NotSupported]: {
     title: "Not supported.",

diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx
@@ -196,7 +196,7 @@ export default function ConnectWalletButton({
       key={connector.id}
       alignSelf="stretch"
       borderWidth={1}
-      borderColor="gold.300"
+      borderColor="surface.4"
       rounded="lg"
       mb={3}
       _last={{ mb: 0 }}
@@ -252,7 +252,7 @@ export default function ConnectWalletButton({
               pt={4}
               borderTopWidth={1}
               borderStyle="solid"
-              borderColor="gold.300"
+              borderColor="surface.4"
               align="start"
             >
               <Flex direction="column" gap={2} w="full">

diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletStatusLabel.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletStatusLabel.tsx
@@ -11,25 +11,25 @@ import Spinner from "../shared/Spinner"
 
 const statusToLabelProps: Record<Status, { color: string }> = {
   idle: {
-    color: "grey.500",
+    color: "text.tertiary",
   },
   pending: {
-    color: "brand.400",
+    color: "acre.50",
   },
   error: {
-    color: "grey.500",
+    color: "text.tertiary",
   },
   success: {
-    color: "grey.700",
+    color: "text.primary",
   },
 }
 
 const boxSize = 5
 const statusToIcon: Record<Status, React.ReactNode> = {
   idle: <Box boxSize={boxSize} />,
   pending: <Spinner boxSize={boxSize} />,
-  error: <Icon as={IconCircleX} boxSize={boxSize} color="grey.500" />,
-  success: <Icon as={IconCircleCheck} boxSize={boxSize} color="green.500" />,
+  error: <Icon as={IconCircleX} boxSize={boxSize} color="text.tertiary" />,
+  success: <Icon as={IconCircleCheck} boxSize={boxSize} color="green.50" />,
 }
 
 type ConnectWalletStatusLabelProps = {
@@ -51,7 +51,7 @@ export default function ConnectWalletStatusLabel({
         <TextMd {...statusToLabelProps[status]}>{label}</TextMd>
       </HStack>
       {isError && (
-        <HStack color="red.400" textAlign="start">
+        <HStack color="red.50" textAlign="start">
           <Icon as={IconInfoCircle} boxSize={boxSize} />
           <TextMd>Rejected by user</TextMd>
         </HStack>

diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx
@@ -68,8 +68,8 @@ export default function ConnectWallet() {
       <Button
         size="lg"
         variant="card"
-        color="grey.700"
-        leftIcon={<Icon as={BitcoinIcon} boxSize={6} color="brand.400" />}
+        color="text.primary"
+        leftIcon={<Icon as={BitcoinIcon} boxSize={6} color="acre.50" />}
         onClick={() => handleConnectWallet(false)}
         {...((modalType === MODAL_TYPES.CONNECT_WALLET ||
           isOpenGlobalErrorModal) && {
@@ -115,14 +115,14 @@ export default function ConnectWallet() {
           <MenuButton
             as={Button}
             variant="card"
-            leftIcon={<Icon as={BitcoinIcon} boxSize={6} color="brand.400" />}
+            leftIcon={<Icon as={BitcoinIcon} boxSize={6} color="acre.50" />}
             rightIcon={isOpen ? <IconChevronUp /> : <IconChevronDown />}
           >
-            <TextMd color="brand.400">
+            <TextMd color="acre.50">
               {addressUtils.truncateAddress(address)}
             </TextMd>
           </MenuButton>
-          <MenuList bg="gold.200">
+          <MenuList bg="surface.3">
             {options.map(
               (option) =>
                 option.isSupported && (
@@ -165,8 +165,8 @@ export default function ConnectWallet() {
           }}
           spacing={3}
         >
-          <Icon as={BitcoinIcon} boxSize={6} color="brand.400" />
-          <TextMd color="brand.400">
+          <Icon as={BitcoinIcon} boxSize={6} color="acre.50" />
+          <TextMd color="acre.50">
             {addressUtils.truncateAddress(address)}
           </TextMd>
         </HStack>
@@ -178,7 +178,7 @@ export default function ConnectWallet() {
             collapsed: { width: 0 },
           }}
           spacing={1}
-          divider={<StackDivider borderColor="gold.500" />}
+          divider={<StackDivider borderColor="surface.5" />}
         >
           {options.map(
             (option) =>

diff --git a/dapp/src/components/MezoBeehiveModal.tsx b/dapp/src/components/MezoBeehiveModal.tsx
@@ -35,7 +35,7 @@ function MezoBeehiveModalBase() {
             mx={-2}
             boxSize="3.75rem" // 60px
             ring={0.5}
-            ringColor="gold.100"
+            ringColor="surface.2"
             rounded="full"
           />
           <MezoSignIcon boxSize={10} rounded="full" zIndex={-1} />
@@ -61,8 +61,8 @@ function MezoBeehiveModalBase() {
         <VStack>
           <Card
             gap={2}
-            bg="grey.700"
-            color="gold.300"
+            bg="brown.100"
+            color="surface.4"
             align="start"
             textAlign="start"
             position="relative"
@@ -82,7 +82,7 @@ function MezoBeehiveModalBase() {
             }}
           >
             <CardHeader as={HStack}>
-              <Icon as={IconChartPieFilled} color="brand.400" boxSize={5} />
+              <Icon as={IconChartPieFilled} color="acre.50" boxSize={5} />
             </CardHeader>
 
             <CardBody>
@@ -98,7 +98,7 @@ function MezoBeehiveModalBase() {
             <CardBody
               as={HStack}
               spacing={6}
-              color="grey.700"
+              color="text.primary"
               textAlign="start"
             >
               <MezoSignIcon
@@ -118,7 +118,7 @@ function MezoBeehiveModalBase() {
                   variant="link"
                   textDecorationLine="none"
                   rightIcon={
-                    <Icon as={IconArrowUpRight} boxSize={4} color="brand.400" />
+                    <Icon as={IconArrowUpRight} boxSize={4} color="acre.50" />
                   }
                 >
                   More info

diff --git a/dapp/src/components/MobileModeBanner/index.tsx b/dapp/src/components/MobileModeBanner/index.tsx
@@ -44,9 +44,9 @@ function MobileModeBanner(props: MobileModeBannerProps) {
       maxH="100vh"
       {...restProps}
     >
-      <Flex align="center" justify="center" p={4} bg="grey.700">
-        <TextMd color="gold.300" textAlign="center" whiteSpace="break-spaces">
-          Acre App is <LiveTag color="brand.400" gap={1} px={1} py={0} /> on
+      <Flex align="center" justify="center" p={4} bg="brown.100">
+        <TextMd color="surface.4" textAlign="center" whiteSpace="break-spaces">
+          Acre App is <LiveTag color="acre.50" gap={1} px={1} py={0} /> on
           desktop!
         </TextMd>
 
@@ -62,7 +62,7 @@ function MobileModeBanner(props: MobileModeBannerProps) {
               />
             }
             iconSpacing={0}
-            color="brand.400"
+            color="acre.50"
             p={0}
             h="auto"
             ml={2}
@@ -83,8 +83,8 @@ function MobileModeBanner(props: MobileModeBannerProps) {
           >
             <Box
               h="full"
-              bg="grey.700"
-              color="gold.300"
+              bg="brown.100"
+              color="surface.4"
               px={5}
               py={8}
               textAlign="center"

diff --git a/dapp/src/components/TransactionModal/ActionDurationEstimation.tsx b/dapp/src/components/TransactionModal/ActionDurationEstimation.tsx
@@ -15,9 +15,9 @@ export default function ActionDurationEstimation({
   )
 
   return (
-    <TextMd mt={4} color="grey.400">
+    <TextMd mt={4} color="text.tertiary">
       Estimated duration&nbsp;
-      <TextMd as="span" color="grey.500">
+      <TextMd as="span">
         ~ {activitiesUtils.getEstimatedDuration(amount, type)}
       </TextMd>
     </TextMd>

diff --git a/...mponents/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx b/...mponents/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx
@@ -78,15 +78,15 @@ function AcrePointsRewardEstimation(props: StackProps) {
                 px={3}
                 py={1}
                 rounded="2xl"
-                bg="gold.300"
-                _hover={{ bg: "gold.200" }}
+                bg="surface.4"
+                _hover={{ bg: "surface.3" }}
               >
                 <HStack spacing={1}>
                   <TextMd>{selectedTierItem.label}</TextMd>
                   <Icon
                     as={IconChevronDown}
                     boxSize={4}
-                    color="brand.400"
+                    color="acre.50"
                     zIndex={2}
                     rotate={isOpen ? 180 : 0}
                     transform="auto"
@@ -99,7 +99,7 @@ function AcrePointsRewardEstimation(props: StackProps) {
                 minW={0}
                 rounded="2xl"
                 shadow="none"
-                bg="gold.300"
+                bg="surface.4"
                 border="none"
                 overflow="hidden"
                 motionProps={{
@@ -112,9 +112,9 @@ function AcrePointsRewardEstimation(props: StackProps) {
                     px={3}
                     py={1}
                     rounded="2xl"
-                    bg="gold.300"
-                    _active={{ bg: "gold.200" }}
-                    _hover={{ bg: "gold.200" }}
+                    bg="surface.4"
+                    _active={{ bg: "surface.3" }}
+                    _hover={{ bg: "surface.3" }}
                     key={tierItem.label}
                     onClick={() => setSelectedTierItem(tierItem)}
                     fontWeight="semibold"

diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx
@@ -50,15 +50,15 @@ export default function RetryModal({ isLoading, retry }: RetryModalProps) {
 
   return (
     <>
-      <ModalHeader as={Flex} color="red.400" justifyContent="center">
+      <ModalHeader as={Flex} color="red.50" justifyContent="center">
         <Skeleton isLoaded={!isLoading} w="fit-content">
           Oops! There was an error.
         </Skeleton>
       </ModalHeader>
       <ModalBody gap={10} pt={2} pb={6}>
         <Skeleton isLoaded={!isLoading} borderRadius="50%">
-          <IconWrapper icon={CableWithPlugIcon} boxSize={32} color="red.400">
-            <Icon as={IconX} color="red.400" boxSize={14} strokeWidth={1} />
+          <IconWrapper icon={CableWithPlugIcon} boxSize={32} color="red.50">
+            <Icon as={IconX} color="red.50" boxSize={14} strokeWidth={1} />
           </IconWrapper>
         </Skeleton>
         <Flex flexDirection="column" alignItems="center">
@@ -84,7 +84,7 @@ export default function RetryModal({ isLoading, retry }: RetryModalProps) {
               h={3}
               aspectRatio={1}
               borderRadius="50%"
-              background={`conic-gradient(var(--chakra-colors-brand-400) ${progressPercent}, transparent 0)`}
+              background={`conic-gradient(var(--chakra-colors-acre-50) ${progressPercent}, transparent 0)`}
               transition="background"
             />
             <Box />
@@ -96,8 +96,8 @@ export default function RetryModal({ isLoading, retry }: RetryModalProps) {
           Retry transaction
         </Button>
         <HStack>
-          <Icon as={IconShieldCheckFilled} boxSize={5} color="gold.700" />
-          <TextSm color="grey.700">Your funds are secure.</TextSm>
+          <Icon as={IconShieldCheckFilled} boxSize={5} color="acre.50" />
+          <TextSm color="text.primary">Your funds are secure.</TextSm>
         </HStack>
       </ModalFooter>
     </>

diff --git a/.../src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx b/.../src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
@@ -31,11 +31,11 @@ export default function ServerErrorModal({
   return (
     <>
       <ModalCloseButton />
-      <ModalHeader color="red.400" textAlign="center">
+      <ModalHeader color="red.50" textAlign="center">
         We&apos;re currently facing system issues.
       </ModalHeader>
       <ModalBody gap={10} pb={6}>
-        <IconWrapper icon={CableWithPlugIcon} boxSize={32} color="red.400">
+        <IconWrapper icon={CableWithPlugIcon} boxSize={32} color="red.50">
           <Icon as={IconServerBolt} boxSize={14} strokeWidth={1} />
         </IconWrapper>
         <TextMd>
@@ -59,7 +59,7 @@ export default function ServerErrorModal({
         px={8}
         flexDirection="row"
         justifyContent="space-between"
-        bgColor="gold.200"
+        bgColor="surface.3"
         borderRadius="xl"
       >
         <Flex flexDirection="column">
@@ -68,12 +68,12 @@ export default function ServerErrorModal({
             {/* TODO: ADD a tooltip */}
             {/* <TooltipIcon label="Tooltip text" placement="top" /> */}
           </HStack>
-          <TextMd color="red.400">Partial Outage</TextMd>
+          <TextMd color="red.50">Partial Outage</TextMd>
         </Flex>
         <Button
           // TODO: Use a loading button
           isLoading={isLoading}
-          leftIcon={<Icon as={IconReload} boxSize={5} color="brand.400" />}
+          leftIcon={<Icon as={IconReload} boxSize={5} color="acre.50" />}
           variant="outline"
           onClick={retry}
         >

diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/NotEnoughFundsModal.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/NotEnoughFundsModal.tsx
@@ -33,15 +33,15 @@ export default function NotEnoughFundsModal() {
         as={TextXl}
         fontSize="xl"
         textAlign="center"
-        color="red.400"
+        color="red.50"
         fontWeight="bold"
       >
         Not enough funds left for future withdrawals
       </ModalHeader>
       <ModalBody>
         <BitcoinsStackErrorIcon />
 
-        <TextMd color="grey.600" px={1}>
+        <TextMd color="text.primary" px={1}>
           After this withdrawal, your balance will fall below the{" "}
           <CurrencyBalance
             amount={minWithdrawAmount}

diff --git a/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx b/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx
@@ -21,7 +21,7 @@ export default function FeesTooltipItem({
       <CurrencyBalance
         size="sm"
         amount={amount}
-        color="gold.300"
+        color="surface.4"
         fontWeight="semibold"
         desiredDecimals={currencies.DESIRED_DECIMALS_FOR_FEE}
         withRoundUp