fix by PR feedback

eallend · eallend · commit c99fd229751f · 2025-02-17T04:53:18.000+03:00
diff --git a/theme/components/Button/Button.ts b/theme/components/Button/Button.ts
@@ -8,20 +8,24 @@ const variantSolid = defineStyle((props) => {
 
   const bg = mode('blackAlpha.800', 'grey.10')(props);
   const color = 'white';
-  const hoverBg = mode('blackAlpha.800', 'grey.10')(props);
+  const hoverBg = mode('blackAlpha.800', 'white')(props);
+  const hoverColor = mode('blackAlpha.800', 'black')(props);
   const activeBg = hoverBg;
 
   return {
     bg,
     color,
     _hover: {
+      color: hoverColor,
       bg: hoverBg,
       _disabled: {
-        bg,
+        bg: "black",
+        color: "grey.50"
       },
     },
     _disabled: {
-      opacity: 0.2,
+      bg: "black",
+      color: "grey.50"
     },
     // According to design there is no "active" or "pressed" state
     // It is simply should be the same as the "hover" state
@@ -38,10 +42,10 @@ const variantOutline = defineStyle((props) => {
 
   const bg = 'transparent';
 
-  const color = isGrayTheme ? mode('blackAlpha.800', 'whiteAlpha.800')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
-  const borderColor = isGrayTheme ? mode('gray.200', 'grey.10')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
+  const color = isGrayTheme ? mode('blackAlpha.800', 'white')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
+  const borderColor = isGrayTheme ? mode('gray.200', 'grey.30')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
 
-  const selectedBg = isGrayTheme ? mode('blue.50', 'grey.10')(props) : mode(`${ c }.50`, 'gray.600')(props);
+  const selectedBg = isGrayTheme ? mode('blue.50', 'grey.30')(props) : mode(`${ c }.50`, 'gray.600')(props);
   const selectedColor = mode('blue.600', 'gray.50')(props);
 
   return {
@@ -52,9 +56,9 @@ const variantOutline = defineStyle((props) => {
     borderColor: isPurple ? 'cyan' : borderColor,
     bg,
     _hover: {
-      color: 'link_hovered',
-      borderColor: 'link_hovered',
-      bg,
+      color,
+      borderColor: color,
+      bg: 'grey.30',
       span: {
         color: 'link_hovered',
       },
@@ -69,8 +73,8 @@ const variantOutline = defineStyle((props) => {
     // According to design there is no "active" or "pressed" state
     // It is simply should be the same as the "hover" state
     _active: {
-      color: 'link_hovered',
-      borderColor: 'link_hovered',
+      color,
+      borderColor: color,
       bg,
       span: {
         color: 'link_hovered',
@@ -98,16 +102,20 @@ const variantRadioGroup = defineStyle((props) => {
   const outline = runIfFn(variantOutline, props);
   const bgColor = mode('blue.50', 'gray.800')(props);
   const selectedTextColor = mode('blue.700', 'gray.50')(props);
+  const hoverTextColor = mode('blue.700', 'black')(props);
+  const hoverBgColor = mode('blue.700', 'white')(props);
+
 
   return {
     ...outline,
-    fontWeight: 500,
+    fontWeight: 400,
     cursor: 'pointer',
     bgColor: 'none',
     borderColor: bgColor,
     _hover: {
+      bg: hoverBgColor,
       borderColor: bgColor,
-      color: 'link_hovered',
+      color: hoverTextColor,
     },
     _active: {
       bgColor: 'none',
@@ -288,10 +296,11 @@ const sizes = {
     px: 4,
   }),
   sm: defineStyle({
-    h: 8,
+    h: 'unset',
     minW: 'unset',
     fontSize: 'sm',
-    px: 3,
+    py: '12px',
+    px: '24px'
   }),
   xs: defineStyle({
     h: 6,
diff --git a/theme/components/Tabs.ts b/theme/components/Tabs.ts
@@ -11,6 +11,7 @@ import Button from './Button/Button';
 const variantSoftRounded = definePartsStyle((props) => {
   return {
     tab: {
+      fontWeight: 400,
       borderRadius: 'base',
       color: mode('purple.300', 'white')(props),
       _selected: {
@@ -22,7 +23,8 @@ const variantSoftRounded = definePartsStyle((props) => {
         },
       },
       _hover: {
-        color: 'link_hovered',
+        color: mode('white', 'black')(props),
+        bg: mode('purple.200', 'white')(props),
       },
       _focusVisible: {
         boxShadow: { base: 'none', lg: 'outline' },
@@ -70,7 +72,7 @@ const sizes = {
     tab: Button.sizes?.sm,
   }),
   md: definePartsStyle({
-    tab: Button.sizes?.md,
+    tab: Button.sizes?.sm,
   }),
 };
 
diff --git a/theme/foundations/borders.ts b/theme/foundations/borders.ts
@@ -2,7 +2,7 @@ const borders = {
   radii: {
     none: '0',
     sm: '4px',
-    base: '8px',
+    base: '12px',
     md: '12px',
     lg: '16px',
     xl: '24px',
diff --git a/ui/address/details/AddressQrCode.tsx b/ui/address/details/AddressQrCode.tsx
@@ -11,7 +11,7 @@ import {
   Box,
   useDisclosure,
   Tooltip,
-  IconButton,
+  Text,
 } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import QRCode from 'qrcode';
@@ -24,7 +24,6 @@ import * as mixpanel from 'lib/mixpanel/index';
 import { useRollbar } from 'lib/rollbar';
 import Skeleton from 'ui/shared/chakra/Skeleton';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import IconSvg from 'ui/shared/IconSvg';
 
 const SVG_OPTIONS = {
   margin: 0,
@@ -70,17 +69,14 @@ const AddressQrCode = ({ address, className, isLoading }: Props) => {
   return (
     <>
       <Tooltip label="Click to view QR code">
-        <IconButton
+        <Text
           className={ className }
-          aria-label="Show QR code"
-          variant="outline"
-          size="sm"
-          pl="6px"
-          pr="6px"
           onClick={ onOpen }
-          icon={ <IconSvg name="qr_code" boxSize={ 5 }/> }
-          flexShrink={ 0 }
-        />
+          fontSize="14px"
+          color="grey.50"
+        >
+          Click to See QR Code
+        </Text>
       </Tooltip>
 
       { error && (
diff --git a/ui/shared/filters/FilterButton.tsx b/ui/shared/filters/FilterButton.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import Skeleton from 'ui/shared/chakra/Skeleton';
 import IconSvg from 'ui/shared/IconSvg';
 
-const FilterIcon = <IconSvg name="filter" boxSize={ 5 } mr={{ base: 0, lg: 2 }}/>;
+const FilterIcon = <IconSvg name="filter" boxSize={ 5 } ml={{ base: 0, lg: 2 }}/>;
 
 interface Props {
   isActive?: boolean;
@@ -39,25 +39,25 @@ const FilterButton = ({ isActive, isLoading, appliedFiltersNum, onClick, as }: P
       ref={ ref }
       rightIcon={ appliedFiltersNum ? num : undefined }
       size="sm"
-      fontWeight="500"
       variant="outline"
       colorScheme="gray"
       onClick={ onClick }
       isActive={ isActive }
       data-selected={ Boolean(appliedFiltersNum) }
-      px={ 1.5 }
-      flexShrink={ 0 }
       as={ as }
+      px="12px"
+      py="8px"
+      fontWeight={400}
       pointerEvents="all"
       _hover={ isActive ? {
-        color: 'link_hovered',
+        color: 'white',
         '.AppliedFiltersNum': {
           bg: 'link_hovered',
         },
       } : undefined }
     >
-      { FilterIcon }
       <Box display={{ base: 'none', lg: 'block' }}>Filter</Box>
+      { FilterIcon }
     </Button>
   );
 };
diff --git a/ui/shared/pagination/Pagination.tsx b/ui/shared/pagination/Pagination.tsx
@@ -26,8 +26,11 @@ const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasPage
     >
       <Skeleton isLoaded={ !showSkeleton } display="inline-block" mr={ 4 } borderRadius="base">
         <Button
-          variant="outline"
           size="sm"
+          px="24px"
+          py="12px"
+          h={ 9 }
+          fontWeight={ 400 }
           onClick={ resetPage }
           isDisabled={ page === 1 || isLoading }
         >
@@ -36,23 +39,26 @@ const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasPage
       </Skeleton>
       <Skeleton isLoaded={ !showSkeleton } display="inline-block" mr={ 3 } borderRadius="base">
         <IconButton
-          variant="outline"
           onClick={ onPrevPageClick }
           size="sm"
+          px="24px"
+          py="12px"
+          fontWeight={ 400 }
           aria-label="Prev page"
           w="36px"
+          h={ 9 }
           icon={ <IconSvg name="arrows/east-mini" w={ 5 } h={ 5 }/> }
           isDisabled={ !canGoBackwards || isLoading }
         />
       </Skeleton>
       <Skeleton isLoaded={ !showSkeleton } display="inline-block" borderRadius="base">
         <Button
-          variant="outline"
           size="sm"
-          data-selected={ true }
-          borderWidth="1px"
+          px="24px"
+          py="12px"
           fontWeight={ 400 }
-          h={ 8 }
+          data-selected={ true }
+          h={ 9 }
           minW="36px"
           cursor="unset"
         >
@@ -61,8 +67,11 @@ const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasPage
       </Skeleton>
       <Skeleton isLoaded={ !showSkeleton } display="inline-block" ml={ 3 } borderRadius="base">
         <IconButton
-          variant="outline"
           onClick={ onNextPageClick }
+          px="24px"
+          py="12px"
+          h={ 9 }
+          fontWeight={ 400 }
           size="sm"
           aria-label="Next page"
           w="36px"
diff --git a/ui/snippets/navigation/useNavLinkStyleProps.tsx b/ui/snippets/navigation/useNavLinkStyleProps.tsx
@@ -13,7 +13,6 @@ export default function useNavLinkProps({ isExpanded, isCollapsed, isActive }: P
 
   return {
     itemProps: {
-      py: '9px',
       display: 'flex',
       color: isActive ? colors.text.active : colors.text.default,
       bgColor: isActive ? colors.bg.active : colors.bg.default,
diff --git a/ui/snippets/navigation/vertical/NavLink.tsx b/ui/snippets/navigation/vertical/NavLink.tsx
@@ -10,7 +10,7 @@ import useIsMobile from 'lib/hooks/useIsMobile';
 import { isInternalItem } from 'lib/hooks/useNavItems';
 import IconSvg from 'ui/shared/IconSvg';
 
-import LightningLabel, { LIGHTNING_LABEL_CLASS_NAME } from '../LightningLabel';
+import LightningLabel from '../LightningLabel';
 import NavLinkIcon from '../NavLinkIcon';
 import useColors from '../useColors';
 import useNavLinkStyleProps from '../useNavLinkStyleProps';
@@ -21,9 +21,11 @@ type Props = {
   onClick?: (e: React.MouseEvent) => void;
   isCollapsed?: boolean;
   isDisabled?: boolean;
+  isMainNav?: boolean
+  onMouseOver?: () => void
 };
 
-const NavLink = ({ item, onClick, isCollapsed, isDisabled }: Props) => {
+const NavLink = ({ item, onClick, isCollapsed, isMainNav, onMouseOver }: Props) => {
   const isMobile = useIsMobile();
   const colors = useColors();
 
@@ -44,17 +46,17 @@ const NavLink = ({ item, onClick, isCollapsed, isDisabled }: Props) => {
       { ...styleProps.itemProps }
       display="flex"
       position="relative"
-      mr={ 3 }
-      px={ 2 }
-      py={ 1 }
+      px={ !isMainNav ? "12px" : "24px" }
+      py={ !isMainNav ? "12px" : "12px"}
       aria-label={ `${ item.text } link` }
+      fontSize="12px"
       whiteSpace="nowrap"
       onClick={ onClick }
       _hover={{
-        [`& *:not(.${ LIGHTNING_LABEL_CLASS_NAME }, .${ LIGHTNING_LABEL_CLASS_NAME } *)`]: {
-          color: isDisabled ? 'inherit' : 'link_hovered',
-        },
+        bg: "grey.20",
+        borderRadius: "14px"
       }}
+      onMouseOver={onMouseOver}
     >
       <Tooltip
         label={ item.text }
@@ -67,10 +69,15 @@ const NavLink = ({ item, onClick, isCollapsed, isDisabled }: Props) => {
         margin={ 0 }
       >
         <HStack spacing={ 0 } overflow="hidden">
-          <NavLinkIcon item={ item }/>
-          <Text { ...styleProps.textProps } as="span" ml={ 3 }>
+          {/*@ts-ignore*/}
+          {!isMainNav && (item.icon || item.iconComponent) &&
+            <Box w={{ base: '36px', lg: '36px' }} display="flex" borderRadius="10px" bg="black" p="6px">
+              <NavLinkIcon boxSize="24px" item={ item } color="rgba(255, 255, 255, 0.5)"/>
+            </Box>
+          }
+          <Text { ...styleProps.textProps } as="span" ml={ !isMainNav ? 3 : 0 }>
             <span>{ item.text }</span>
-            { !isInternalLink && <IconSvg name="link_external" boxSize={ 3 } color="icon_link_external" verticalAlign="middle"/> }
+            { !isInternalLink && <IconSvg name="link_external" boxSize={ 3 } color="grey.50" verticalAlign="middle"/> }
           </Text>
           { isHighlighted && (
             <LightningLabel iconColor={ styleProps.itemProps.bgColor } isCollapsed={ isCollapsed }/>
diff --git a/ui/snippets/navigation/vertical/NavLinkGroup.tsx b/ui/snippets/navigation/vertical/NavLinkGroup.tsx
diff --git a/ui/snippets/navigation/vertical/NavigationDesktop.tsx b/ui/snippets/navigation/vertical/NavigationDesktop.tsx
