Merge pull request #38 from akiraonstarknet/sync-ui-colors

update color schema to new colors
strkfarm · Sep 3, 2024 · 02753dc · 02753dc
2 parents f64b419 + 32bc1dd
commit 02753dc
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 37 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -128,7 +128,7 @@ export default function Home() {
                       : banner.mobile
                   }
                   height={'auto'}
-                  boxShadow={'0px 0px 2px #484848'}
+                  boxShadow={'none'}
                   width="100%"
                   alt="Banner"
                   style={{ objectFit: 'cover', borderRadius: '10px' }}

diff --git a/src/app/template.tsx b/src/app/template.tsx
@@ -27,22 +27,22 @@ const theme = extendTheme({
   colors: {
     transparent: 'rgba(0, 0, 0, 0)',
     opacity_50p: 'rgba(0, 0, 0, 0.5)',
-    color1: 'rgba(86, 118, 254, 1)',
-    color1_65p: 'rgba(86, 118, 254, 0.65)',
-    color1_50p: 'rgba(86, 118, 254, 0.5)',
-    color1_35p: 'rgba(86, 118, 254, 0.35)',
+    color1: 'rgba(53, 60, 79, 1)',
+    color1_65p: 'rgba(53, 60, 79, 0.65)',
+    color1_50p: 'rgba(53, 60, 79, 0.5)',
+    color1_35p: 'rgba(53, 60, 79, 0.35)',
     color1_light: '#bcc9ff80',
-    color2: 'rgb(127 73 229)',
-    color2Text: 'rgb(165 118 255)',
-    color2_65p: 'rgba(104, 51, 205, 0.65)',
-    color2_50p: 'rgba(104, 51, 205, 0.5)',
-    highlight: '#272932', // light grey
+    color2: 'rgba(132, 132, 195, 1)',
+    color2Text: '#7DFACB',
+    color2_65p: 'rgba(132, 132, 195, 0.65)',
+    color2_50p: 'rgba(132, 132, 195, 0.15)',
+    highlight: '#1a1a27', // light grey
     light_grey: '#9d9d9d',
     disabled_text: '#818181',
     disabled_bg: '#5f5f5f',
-    purple: '#6F4FF2',
-    cyan: '#22F3DF',
-    bg: '#1A1C26', // dark blue
+    purple: '#2F2D5C',
+    cyan: '#7DFACB',
+    bg: '#111119', // dark blue
   },
   fontSizes: {
     large: '50px',

diff --git a/src/components/Deposit.tsx b/src/components/Deposit.tsx
@@ -151,7 +151,7 @@ export default function Deposit(props: DepositProps) {
           <Button
             size={'sm'}
             marginLeft={'5px'}
-            color="purple"
+            color="color2"
             bg="highlight"
             padding="0"
             maxHeight={'25px'}
@@ -196,7 +196,7 @@ export default function Deposit(props: DepositProps) {
               bgColor={'highlight'}
               borderColor={'bg'}
               borderWidth={'1px'}
-              color="color2Text"
+              color="color2"
               _hover={{
                 bg: 'bg',
               }}
@@ -324,10 +324,10 @@ export default function Deposit(props: DepositProps) {
 
       <Box width="100%" marginTop={'15px'}>
         <Flex justifyContent="space-between">
-          <Text fontSize={'12px'} color="color2Text" fontWeight={'bold'}>
+          <Text fontSize={'12px'} color="color2" fontWeight={'bold'}>
             Current TVL Limit:
           </Text>
-          <Text fontSize={'12px'} color="color2Text">
+          <Text fontSize={'12px'} color="color2">
             {!tvlInfo || !tvlInfo?.data ? (
               <Spinner size="2xs" />
             ) : (
@@ -339,7 +339,7 @@ export default function Deposit(props: DepositProps) {
           </Text>
         </Flex>
         <Progress
-          colorScheme="green"
+          colorScheme="gray"
           bg="bg"
           value={
             (100 *

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -199,18 +199,24 @@ export default function Navbar(props: NavbarProps) {
     <Container
       width={'100%'}
       padding={'0'}
-      borderBottom={'1px solid var(--chakra-colors-color2)'}
       position={'fixed'}
-      bg="bg"
+      bg="black"
       zIndex={999}
       top="0"
     >
-      <Center bg="highlight" color="orange" padding={0}>
-        <Text fontSize="12px" textAlign={'center'} padding="0px 5px">
-          {''}
-          <b>Report bugs & share feedback in our Telegram group.</b>
-          {''}
-        </Text>
+      <Center bg="color2" color="black" padding={0}>
+        <Link href={CONSTANTS.COMMUNITY_TG} target="_blank">
+          <Text
+            fontSize="12px"
+            textAlign={'center'}
+            padding="0px 5px"
+            fontFamily={'serif'}
+          >
+            {''}
+            <b>Report bugs & share feedback in our Telegram group.</b>
+            {''}
+          </Text>
+        </Link>
       </Center>
       <Box
         width={'100%'}

diff --git a/src/components/Pools.tsx b/src/components/Pools.tsx
@@ -158,7 +158,7 @@ export default function Pools() {
       }
 
       <Container width="100%" float={'left'} padding={'0px'} marginTop={'10px'}>
-        <Card variant={'filled'} bg="opacity_50p" color={'purple'}>
+        <Card variant={'filled'} bg="opacity_50p" color={'color2'}>
           <CardBody paddingTop={'5px'} paddingBottom={'5px'}>
             <HStack width={'100%'}>
               <Heading width={{ base: '50%', md: '33%' }} size="md">

diff --git a/src/components/Strategies.tsx b/src/components/Strategies.tsx
@@ -216,21 +216,19 @@ const Strategies: React.FC = () => {
                 color="cyan"
                 fontWeight={'bold'}
                 float={{ base: 'left', md: 'right' }}
+                fontSize={'20px'}
               >
                 {(strat.netYield * 100).toFixed(2)}%
               </Text>
             </Tooltip>
 
-            <AvatarGroup size="xs" max={4} marginRight={'5px'} float={'right'}>
-              {getUniqueById(
-                strat.actions.map((p) => ({
-                  id: p.pool.pool.name,
-                  logo: p.pool.pool.logos[0],
-                })),
-              ).map((p: any) => (
-                <Avatar key={p.id} src={p.logo} />
-              ))}
-            </AvatarGroup>
+            <Avatar
+              size={'xs'}
+              marginTop={'2px'}
+              float={'right'}
+              marginRight={'2px'}
+              src={strat?.holdingTokens[0].logo}
+            />
           </Box>
           <Tooltip label="Multiplier showing the additional reward earned compared to simple deposit">
             <Text