Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New color palette #929

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

New color palette #929

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2673faa
New color palette
kkosiorowska Dec 19, 2024
0f7c042
Merge branch 'main' of github.com:thesis/acre into new-color-palette
kkosiorowska Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions dapp/src/components/AcrePointsClaimModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ function AcrePointsClaimModalBase({
prefix="+"
suffix=" PTS"
animateMode="whileInView"
color="brand.400"
color="acre.50"
/>,
],
[
Expand All @@ -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
Expand All @@ -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"}
// />,
// ],
// [
Expand All @@ -94,7 +94,7 @@ function AcrePointsClaimModalBase({
// value={estimatedRankPosition}
// prefix="#"
// animateMode="whileInView"
// indicationColor="brand.400"
// indicationColor="acre.50"
// />,
// ],
],
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down
4 changes: 2 additions & 2 deletions dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand Down Expand Up @@ -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">
Expand Down
14 changes: 7 additions & 7 deletions dapp/src/components/ConnectWalletModal/ConnectWalletStatusLabel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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>
Expand Down
16 changes: 8 additions & 8 deletions dapp/src/components/Header/ConnectWallet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) && {
Expand Down Expand Up @@ -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 && (
Expand Down Expand Up @@ -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>
Expand All @@ -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) =>
Expand Down
12 changes: 6 additions & 6 deletions dapp/src/components/MezoBeehiveModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down Expand Up @@ -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"
Expand All @@ -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>
Expand All @@ -102,7 +102,7 @@ function MezoBeehiveModalBase() {
<CardBody
as={HStack}
spacing={6}
color="grey.700"
color="text.primary"
textAlign="start"
>
<MezoSignIcon
Expand All @@ -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
Expand Down
12 changes: 6 additions & 6 deletions dapp/src/components/MobileModeBanner/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -67,7 +67,7 @@ function MobileModeBanner(props: MobileModeBannerProps) {
/>
}
iconSpacing={0}
color="brand.400"
color="acre.50"
p={0}
h="auto"
ml={2}
Expand All @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions dapp/src/components/TransactionModal/ActionDurationEstimation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
14 changes: 7 additions & 7 deletions ...mponents/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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={{
Expand All @@ -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"
Expand Down
12 changes: 6 additions & 6 deletions dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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 />
Expand All @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions .../src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand All @@ -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}
>
Expand Down
4 changes: 2 additions & 2 deletions dapp/src/components/TransactionModal/ActiveUnstakingStep/NotEnoughFundsModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Loading
Loading