New color palette (#929)

Ref AENG-9 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. - [Color palette](https://www.figma.com/design/1jAHRz9Kh43x7WpjiZ1tq2/UI-Styleguide?node-id=1287-65&m=dev) - [All variables](https://www.figma.com/design/1jAHRz9Kh43x7WpjiZ1tq2/UI-Styleguide?node-id=298-1022&p=f&vars=1&m=dev) How the palette was updated: - `brand.400` -> `acre.50` - `grey.700` -> `text.primary` or `brown.100` - `grey.500` -> `text.tertiary` - `green.500` -> `green.50` - `red.500` -> `red.50` - `gold.100` -> `surface.2` - `gold.200` -> `surface.3` - `gold.300` -> `surface.4` - `gold.500` -> `surface.5` Note, that the design has changed, so some components have been matched to the new designs. ### Testing Please go through the dApp to make sure nothing looks wrong. Components such as links, button alert, modal, card will be updated soon.
thesis · Dec 30, 2024 · 921062a · 921062a
2 parents 0bfe2f6 + 0f7c042
commit 921062a
Show file tree

Hide file tree

Showing 59 changed files with 288 additions and 209 deletions.
diff --git a/dapp/src/components/AcrePointsClaimModal.tsx b/dapp/src/components/AcrePointsClaimModal.tsx
@@ -66,7 +66,7 @@ function AcrePointsClaimModalBase({
           prefix="+"
           suffix=" PTS"
           animateMode="whileInView"
-          color="brand.400"
+          color="acre.50"
         />,
       ],
       [
@@ -75,7 +75,7 @@ function AcrePointsClaimModalBase({
           value={formattedTotalAmount}
           suffix=" PTS"
           animateMode="whileInView"
-          indicationColor="brand.400"
+          indicationColor="acre.50"
         />,
       ],
       // TODO: Uncomment when the leaderboard feature is ready
@@ -85,7 +85,7 @@ function AcrePointsClaimModalBase({
       //     value={rankPositionDifference}
       //     prefix={rankPositionDifference > 0 ? "+" : "-"}
       //     animateMode="whileInView"
-      //     color={rankPositionDifference > 0 ? "green.500" : "red.500"}
+      //     color={rankPositionDifference > 0 ? "green.50" : "red.50"}
       //   />,
       // ],
       // [
@@ -94,7 +94,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="sm"
       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
@@ -10,25 +10,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 = {
@@ -52,7 +52,7 @@ export default function ConnectWalletStatusLabel({
         </Text>
       </HStack>
       {isError && (
-        <HStack color="red.400" textAlign="start">
+        <HStack color="red.50" textAlign="start">
           <Icon as={IconInfoCircle} boxSize={boxSize} />
           <Text size="md">Rejected by user</Text>
         </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 />}
           >
-            <Text size="md" color="brand.400">
+            <Text size="md" color="acre.50">
               {addressUtils.truncateAddress(address)}
             </Text>
           </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" />
-          <Text size="md" color="brand.400">
+          <Icon as={BitcoinIcon} boxSize={6} color="acre.50" />
+          <Text size="md" color="acre.50">
             {addressUtils.truncateAddress(address)}
           </Text>
         </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
@@ -37,7 +37,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} />
@@ -65,8 +65,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"
@@ -86,7 +86,7 @@ function MezoBeehiveModalBase() {
             }}
           >
             <CardHeader as={HStack}>
-              <Icon as={IconChartPieFilled} color="brand.400" boxSize={5} />
+              <Icon as={IconChartPieFilled} color="acre.50" boxSize={5} />
             </CardHeader>
 
             <CardBody>
@@ -102,7 +102,7 @@ function MezoBeehiveModalBase() {
             <CardBody
               as={HStack}
               spacing={6}
-              color="grey.700"
+              color="text.primary"
               textAlign="start"
             >
               <MezoSignIcon
@@ -122,7 +122,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,14 +44,14 @@ function MobileModeBanner(props: MobileModeBannerProps) {
       maxH="100vh"
       {...restProps}
     >
-      <Flex align="center" justify="center" p={4} bg="grey.700">
+      <Flex align="center" justify="center" p={4} bg="brown.100">
         <Text
           size="md"
-          color="gold.300"
+          color="surface.4"
           textAlign="center"
           whiteSpace="break-spaces"
         >
-          Acre App is <LiveTag color="brand.400" gap={1} px={1} py={0} /> on
+          Acre App is <LiveTag color="acre.50" gap={1} px={1} py={0} /> on
           desktop!
         </Text>
 
@@ -67,7 +67,7 @@ function MobileModeBanner(props: MobileModeBannerProps) {
               />
             }
             iconSpacing={0}
-            color="brand.400"
+            color="acre.50"
             p={0}
             h="auto"
             ml={2}
@@ -88,8 +88,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 (
-    <Text size="md" mt={4} color="grey.400">
+    <Text size="md" mt={4} color="text.tertiary">
       Estimated duration&nbsp;
-      <Text size="md" as="span" color="grey.500">
+      <Text size="md" as="span">
         ~ {activitiesUtils.getEstimatedDuration(amount, type)}
       </Text>
     </Text>

diff --git a/...mponents/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx b/...mponents/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx
@@ -80,15 +80,15 @@ function AcrePointsRewardEstimation(props: StackProps) {
                 px={3}
                 py={1}
                 rounded="sm"
-                bg="gold.300"
-                _hover={{ bg: "gold.200" }}
+                bg="surface.4"
+                _hover={{ bg: "surface.3" }}
               >
                 <HStack spacing={1}>
                   <Text size="md">{selectedTierItem.label}</Text>
                   <Icon
                     as={IconChevronDown}
                     boxSize={4}
-                    color="brand.400"
+                    color="acre.50"
                     zIndex={2}
                     rotate={isOpen ? 180 : 0}
                     transform="auto"
@@ -101,7 +101,7 @@ function AcrePointsRewardEstimation(props: StackProps) {
                 minW={0}
                 rounded="sm"
                 shadow="none"
-                bg="gold.300"
+                bg="surface.4"
                 border="none"
                 overflow="hidden"
                 motionProps={{
@@ -114,9 +114,9 @@ function AcrePointsRewardEstimation(props: StackProps) {
                     px={3}
                     py={1}
                     rounded="sm"
-                    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">
@@ -86,7 +86,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 />
@@ -98,8 +98,8 @@ export default function RetryModal({ isLoading, retry }: RetryModalProps) {
           Retry transaction
         </Button>
         <HStack>
-          <Icon as={IconShieldCheckFilled} boxSize={5} color="gold.700" />
-          <Text size="sm" color="grey.700">
+          <Icon as={IconShieldCheckFilled} boxSize={5} color="acre.50" />
+          <Text size="sm" color="text.primary">
             Your funds are secure.
           </Text>
         </HStack>

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>
         <Text size="md">
@@ -59,7 +59,7 @@ export default function ServerErrorModal({
         px={8}
         flexDirection="row"
         justifyContent="space-between"
-        bgColor="gold.200"
+        bgColor="surface.3"
         borderRadius="md"
       >
         <Flex flexDirection="column">
@@ -70,14 +70,14 @@ export default function ServerErrorModal({
             {/* TODO: ADD a tooltip */}
             {/* <TooltipIcon label="Tooltip text" placement="top" /> */}
           </HStack>
-          <Text size="md" color="red.400">
+          <Text size="md" color="red.50">
             Partial Outage
           </Text>
         </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={Text}
         size="xl"
         textAlign="center"
-        color="red.400"
+        color="red.50"
         fontWeight="bold"
       >
         Not enough funds left for future withdrawals
       </ModalHeader>
       <ModalBody>
         <BitcoinsStackErrorIcon />
 
-        <Text size="md" color="grey.600" px={1}>
+        <Text size="md" color="text.primary" px={1}>
           After this withdrawal, your balance will fall below the{" "}
           <CurrencyBalance
             amount={minWithdrawAmount}