refactor design

Author: asalef10

src/pages/stakingPage/components/RewardsCard.tsx

@@ -24,7 +24,6 @@ export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Elemen
   const [isClaiming, setIsClaiming] = useState(false);
   const [isCompounding, setIsCompounding] = useState(false);
   const [grixPrice, setGrixPrice] = useState<number | null>(null);
-  const { totalStaked } = useVesting();
   const toast = useToast();
 
   // Fetch GRIX price from CoinGecko

src/pages/stakingPage/components/StakeUnstakeModal.tsx

@@ -147,14 +147,39 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                 <Button
                   key={percentage}
                   onClick={() => handlePercentageClick(percentage)}
-                  bg="#1E2328"
-                  color="white"
-                  size="md"
+                  variant="outline"
+                  bg="gray.800"
+                  color="gray.300"
+                  borderColor="gray.600"
+                  size="sm"
                   flex={1}
+                  height="32px"
+                  fontSize="xs"
+                  fontWeight="500"
                   isDisabled={!hasBalance}
-                  opacity={hasBalance ? 1 : 0.5}
-                  _hover={{ bg: hasBalance ? '#2A3038' : '#1E2328' }}
-                  _active={{ bg: hasBalance ? '#2A3038' : '#1E2328' }}
+                  _hover={{
+                    bg: hasBalance ? 'gray.700' : 'gray.800',
+                    borderColor: hasBalance ? 'gray.500' : 'gray.600',
+                    color: hasBalance ? 'white' : 'gray.300',
+                    transform: hasBalance ? 'translateY(-1px)' : 'none',
+                    boxShadow: hasBalance ? 'sm' : 'none'
+                  }}
+                  _active={{
+                    bg: hasBalance ? 'gray.600' : 'gray.800',
+                    transform: hasBalance ? 'translateY(0)' : 'none'
+                  }}
+                  _disabled={{
+                    opacity: 0.5,
+                    cursor: 'not-allowed',
+                    _hover: {
+                      bg: 'gray.800',
+                      borderColor: 'gray.600',
+                      color: 'gray.300',
+                      transform: 'none',
+                      boxShadow: 'none'
+                    }
+                  }}
+                  transition="all 0.2s"
                 >
                   {percentage}%
                 </Button>
@@ -181,15 +206,35 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                   isLoading={isApproving}
                   loadingText="Approving"
                   onClick={handleApprove}
-                  bg="#2F6C60"
+                  variant="solid"
+                  bg="teal.500"
                   color="white"
-                  size="lg"
+                  size="md"
                   width="full"
-                  height="48px"
+                  height="40px"
                   fontSize="sm"
+                  fontWeight="500"
                   isDisabled={!isAmountValid()}
-                  _hover={{ bg: '#2A5F54' }}
-                  _active={{ bg: '#264F46' }}
+                  _hover={{ 
+                    bg: 'teal.600',
+                    transform: 'translateY(-1px)',
+                    boxShadow: 'md'
+                  }}
+                  _active={{ 
+                    bg: 'teal.700',
+                    transform: 'translateY(0)'
+                  }}
+                  _disabled={{
+                    bg: 'gray.700',
+                    color: 'gray.500',
+                    cursor: 'not-allowed',
+                    _hover: {
+                      bg: 'gray.700',
+                      transform: 'none',
+                      boxShadow: 'none'
+                    }
+                  }}
+                  transition="all 0.2s"
                 >
                   Approve
                 </Button>
@@ -198,15 +243,35 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                   isLoading={isLoading}
                   loadingText={isStakeMode ? 'Staking' : 'Unstaking'}
                   onClick={onSubmit}
-                  bg="#2F6C60"
+                  variant="solid"
+                  bg="teal.500"
                   color="white"
-                  size="lg"
+                  size="md"
                   width="full"
-                  height="48px"
+                  height="40px"
                   fontSize="sm"
+                  fontWeight="500"
                   isDisabled={!isAmountValid() || !amount}
-                  _hover={{ bg: '#2A5F54' }}
-                  _active={{ bg: '#264F46' }}
+                  _hover={{ 
+                    bg: 'teal.600',
+                    transform: 'translateY(-1px)',
+                    boxShadow: 'md'
+                  }}
+                  _active={{ 
+                    bg: 'teal.700',
+                    transform: 'translateY(0)'
+                  }}
+                  _disabled={{
+                    bg: 'gray.700',
+                    color: 'gray.500',
+                    cursor: 'not-allowed',
+                    _hover: {
+                      bg: 'gray.700',
+                      transform: 'none',
+                      boxShadow: 'none'
+                    }
+                  }}
+                  transition="all 0.2s"
                 >
                   {isStakeMode ? 'Stake' : 'Unstake'}
                 </Button>