update input styles

icons/search.svg

 <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="m15.026 13.848 2.98 2.978a.834.834 0 1 1-1.18 1.18l-2.978-2.98a7.467 7.467 0 0 1-4.681 1.64c-4.14 0-7.5-3.36-7.5-7.5 0-4.14 3.36-7.5 7.5-7.5 4.14 0 7.5 3.36 7.5 7.5a7.466 7.466 0 0 1-1.641 4.681Zm-1.672-.619A5.814 5.814 0 0 0 15 9.167a5.832 5.832 0 0 0-5.833-5.834 5.831 5.831 0 0 0-5.834 5.834A5.832 5.832 0 0 0 9.167 15a5.814 5.814 0 0 0 4.062-1.646l.125-.125Z" fill="currentColor"/>
+  <path d="m14.048 13.074 2.464 2.463a.69.69 0 1 1-.975.975l-2.463-2.464A6.205 6.205 0 0 1 3 9.202 6.205 6.205 0 0 1 9.203 3a6.205 6.205 0 0 1 4.845 10.074Zm-1.382-.512a4.823 4.823 0 0 0-3.463-8.184 4.822 4.822 0 0 0-4.825 4.825 4.823 4.823 0 0 0 8.184 3.463l.104-.104Z" fill="currentColor"/>
 </svg>

toolkit/chakra/field.tsx

@@ -7,12 +7,13 @@ import getComponentDisplayName from '../utils/getComponentDisplayName';
 import type { InputProps } from './input';
 import type { InputGroupProps } from './input-group';
 
-export interface FieldProps extends Omit<ChakraField.RootProps, 'label' | 'children'> {
+export interface FieldProps extends Omit<ChakraField.RootProps, 'label' | 'children' | 'size'> {
   label?: React.ReactNode;
   helperText?: React.ReactNode;
   errorText?: React.ReactNode;
   optionalText?: React.ReactNode;
   children: React.ReactElement<InputProps> | React.ReactElement<InputGroupProps>;
+  size?: 'sm' | 'md' | 'lg' | '2xl';
 }
 
 export const Field = React.forwardRef<HTMLDivElement, FieldProps>(

toolkit/chakra/input-group.tsx

@@ -59,7 +59,7 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
     return (
       <Group ref={ ref } w="100%" { ...rest }>
         { startElement && (
-          <InputElement pointerEvents="none" ref={ startElementRef } px={ 0 } { ...startElementProps }>
+          <InputElement pointerEvents="none" ref={ startElementRef } px={ 0 } color="gray.500" { ...startElementProps }>
             { startElement }
           </InputElement>
         ) }
@@ -76,7 +76,7 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
           });
         }) }
         { endElement && (
-          <InputElement placement="end" ref={ endElementRef } px={ 0 } { ...endElementProps }>
+          <InputElement placement="end" ref={ endElementRef } px={ 0 } color="gray.500" { ...endElementProps }>
             { endElement }
           </InputElement>
         ) }

toolkit/chakra/input.tsx

 import type { InputProps as ChakraInputProps } from '@chakra-ui/react';
 import { Input as ChakraInput } from '@chakra-ui/react';
 
-export interface InputProps extends ChakraInputProps {}
+export interface InputProps extends Omit<ChakraInputProps, 'size'> {
+  size?: 'sm' | 'md' | 'lg' | '2xl';
+}
 
 export const Input = ChakraInput;

toolkit/theme/foundations/semanticTokens.ts

@@ -260,7 +260,10 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         readOnly: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' } },
         error: { value: '{colors.red.500}' },
       },
-      placeholder: { value: '{colors.gray.500}' },
+      placeholder: {
+        DEFAULT: { value: '{colors.gray.500}' },
+        error: { value: '{colors.red.500}' },
+      },
     },
     field: {
       placeholder: {

toolkit/theme/recipes/button.recipe.ts

@@ -264,7 +264,7 @@ export const recipe = defineRecipe({
     size: {
       '2xs': { px: 2, h: 5, minW: 5, textStyle: 'xs', borderRadius: 'sm', gap: 1 },
       xs: { px: 2, h: 6, minW: 6, textStyle: 'sm', borderRadius: 'sm', gap: 1 },
-      sm: { px: 3, h: 8, minW: 8, textStyle: 'md', borderRadius: 'base', gap: 1 },
+      sm: { px: 3, h: 8, minW: 8, textStyle: 'sm', borderRadius: 'base', gap: 1 },
       md: { px: 3, h: 10, minW: 10, textStyle: 'md', borderRadius: 'base', gap: 2, '& .chakra-spinner': { '--spinner-size': '20px' } },
     },
   },

toolkit/theme/recipes/field.recipe.ts

@@ -79,11 +79,6 @@ export const recipe = defineSlotRecipe({
           fontSize: 'md',
         },
       },
-      xl: {
-        label: {
-          fontSize: 'md',
-        },
-      },
       // special size for textarea
       '2xl': {
         label: {
@@ -113,7 +108,7 @@ export const recipe = defineSlotRecipe({
 
   compoundVariants: [
     {
-      size: 'xl',
+      size: 'lg',
       floating: true,
       css: {
         label: {

toolkit/theme/recipes/input.recipe.ts

@@ -28,21 +28,16 @@ export const recipe = defineRecipe({
   variants: {
     size: {
       sm: {
-        textStyle: 'md',
+        textStyle: 'sm',
         px: '2',
         '--input-height': 'sizes.8',
       },
       md: {
-        textStyle: 'md',
+        textStyle: 'sm',
         px: '2',
         '--input-height': 'sizes.10',
       },
       lg: {
-        textStyle: 'md',
-        px: '3',
-        '--input-height': 'sizes.12',
-      },
-      xl: {
         textStyle: 'md',
         px: '4',
         '--input-height': '60px',
@@ -69,6 +64,7 @@ export const recipe = defineRecipe({
         },
         _focus: {
           borderColor: 'input.border.focus',
+          boxShadow: 'size.md',
           _hover: {
             borderColor: 'input.border.focus',
           },
@@ -91,6 +87,9 @@ export const recipe = defineRecipe({
         },
         _invalid: {
           borderColor: 'input.border.error',
+          _placeholder: {
+            color: 'input.placeholder.error',
+          },
           _hover: {
             borderColor: 'input.border.error',
           },
@@ -105,7 +104,7 @@ export const recipe = defineRecipe({
 
   compoundVariants: [
     {
-      size: 'xl',
+      size: 'lg',
       floating: true,
       css: {
         padding: '26px 10px 10px 16px',

toolkit/theme/recipes/tooltip.recipe.ts

@@ -5,7 +5,7 @@ export const recipe = defineSlotRecipe({
   base: {
     content: {
       px: '2',
-      py: '2',
+      py: '1',
       borderRadius: 'sm',
       fontWeight: '500',
       textStyle: 'sm',

ui/advancedFilter/filters/AddressFilter.tsx

@@ -70,7 +70,7 @@ const AddressFilterInput = ({ address, mode, onModeChange, onChange, onClear, is
       />
       <InputGroup
         flexGrow={ 1 }
-        endElement={ <ClearButton onClick={ onClear } isDisabled={ !address }/> }
+        endElement={ <ClearButton onClick={ onClear } mx={ 2 } isDisabled={ !address }/> }
       >
         <Input value={ address } onChange={ onChange } placeholder="Smart contract / Address (0x...)*" size="sm" autoComplete="off"/>
       </InputGroup>

ui/csvExport/CsvExportFormField.tsx

@@ -42,7 +42,6 @@ const CsvExportFormField = ({ formApi, name }: Props) => {
       placeholder={ capitalize(name) }
       required
       rules={{ validate }}
-      size="xl"
       maxW={{ base: 'auto', lg: '220px' }}
     />
   );

ui/rewards/RewardsButton.tsx

@@ -38,9 +38,8 @@ const RewardsButton = ({ variant = 'header', size }: Props) => {
         { ...(apiToken ? { href: route({ pathname: '/account/merits' }) } : {}) }
         onClick={ apiToken ? undefined : openLoginModal }
         onFocus={ handleFocus }
-        fontSize="sm"
         size={ size }
-        px={{ base: '10px', lg: !isLoading && Boolean(apiToken) ? 2.5 : 4 }}
+        px={{ base: '10px', lg: 3 }}
         loading={ isLoading }
         _hover={{
           textDecoration: 'none',

ui/rewards/RewardsReadOnlyInputWithCopy.tsx

@@ -17,7 +17,7 @@ type Props = {
 const RewardsReadOnlyInputWithCopy = ({ label, value, className, isLoading }: Props) => {
   return (
     <Skeleton loading={ isLoading } className={ className }>
-      <Field label={ label } floating size="xl" readOnly>
+      <Field label={ label } floating size="lg" readOnly>
         <InputGroup endElement={ <CopyToClipboard text={ value }/> } endElementProps={{ px: 3 }}>
           <Input value={ value } fontWeight="500"/>
         </InputGroup>

ui/rewards/login/steps/LoginStepContent.tsx

@@ -147,7 +147,7 @@ const LoginStepContent = ({ goNext, closeModal, openAuthModal }: Props) => {
               label="Code"
               floating
               id="referral-code"
-              size="xl"
+              size="lg"
               mt={ 3 }
               invalid={ refCodeError }
               helperText="The code should be in format XXXXXX"

ui/shared/filters/FilterInput.tsx

@@ -39,7 +39,7 @@ const FilterInput = ({ onChange, size = 'sm', placeholder, initialValue, type, n
     inputRef?.current?.focus();
   }, [ onChange ]);
 
-  const startElement = <IconSvg name="search" color={{ _light: 'blackAlpha.600', _dark: 'whiteAlpha.600' }} boxSize={ 4 }/>;
+  const startElement = <IconSvg name="search" boxSize={ 5 }/>;
 
   const endElement = <ClearButton onClick={ handleFilterQueryClear } isVisible={ filterQuery.length > 0 }/>;
 

ui/shared/forms/fields/FormFieldColor.tsx

@@ -31,7 +31,7 @@ const FormFieldColor = <
   onBlur,
   group,
   inputProps,
-  size = 'xl',
+  size = 'lg',
   disabled,
   sampleDefaultBgColor,
   ...restProps

ui/shared/forms/fields/FormFieldText.tsx

@@ -36,7 +36,7 @@ const FormFieldText = <
   floating: floatingProp,
   ...restProps
 }: Props<FormFields, Name>) => {
-  const defaultSize = asComponent === 'Textarea' ? '2xl' : 'xl';
+  const defaultSize = asComponent === 'Textarea' ? '2xl' : 'lg';
   const size = sizeProp || defaultSize;
   const floating = floatingProp !== undefined ? floatingProp : size === defaultSize;
 

ui/showcases/Field.tsx

@@ -30,16 +30,16 @@ const FieldShowcase = () => {
           )) }
 
           <Sample label="size: xl" w="100%" alignItems="flex-start">
-            <Field label="Email" required floating size="xl" helperText="Helper text" maxWidth="300px">
+            <Field label="Email" required floating size="lg" helperText="Helper text" maxWidth="300px">
               <Input/>
             </Field>
-            <Field label="Email (disabled)" required floating disabled size="xl" maxWidth="300px">
+            <Field label="Email (disabled)" required floating disabled size="lg" maxWidth="300px">
               <Input value="me@example.com"/>
             </Field>
-            <Field label="Email (readOnly)" required floating readOnly size="xl" maxWidth="300px">
+            <Field label="Email (readOnly)" required floating readOnly size="lg" maxWidth="300px">
               <Input value="me@example.com"/>
             </Field>
-            <Field label="Email (invalid)" required floating size="xl" errorText="Something went wrong" invalid maxWidth="300px">
+            <Field label="Email (invalid)" required floating size="lg" errorText="Something went wrong" invalid maxWidth="300px">
               <Input value="duck"/>
             </Field>
           </Sample>
@@ -62,16 +62,16 @@ const FieldShowcase = () => {
             </Field>
           </Sample>
           <Sample label="floating label" p={ 4 } bgColor={{ _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' }} alignItems="flex-start">
-            <Field label="Email" required floating size="xl" helperText="Helper text" maxWidth="300px">
+            <Field label="Email" required floating size="lg" helperText="Helper text" maxWidth="300px">
               <Input/>
             </Field>
-            <Field label="Email (disabled)" required disabled floating size="xl" maxWidth="300px">
+            <Field label="Email (disabled)" required disabled floating size="lg" maxWidth="300px">
               <Input value="me@example.com"/>
             </Field>
-            <Field label="Email (readOnly)" required readOnly floating size="xl" maxWidth="300px">
+            <Field label="Email (readOnly)" required readOnly floating size="lg" maxWidth="300px">
               <Input value="me@example.com"/>
             </Field>
-            <Field label="Email (invalid)" required floating size="xl" errorText="Something went wrong" invalid maxWidth="300px">
+            <Field label="Email (invalid)" required floating size="lg" errorText="Something went wrong" invalid maxWidth="300px">
               <Input value="duck"/>
             </Field>
           </Sample>

ui/showcases/Input.tsx

@@ -23,9 +23,6 @@ const InputShowcase = () => {
           <Sample label="size: lg">
             <Input type="text" placeholder="Name" size="lg"/>
           </Sample>
-          <Sample label="size: xl">
-            <Input type="text" placeholder="Name" size="xl"/>
-          </Sample>
         </SamplesStack>
       </Section>
 
@@ -36,6 +33,7 @@ const InputShowcase = () => {
             <Input type="text" placeholder="Name"/>
             <Input type="text" placeholder="Name (disabled)" disabled/>
             <Input type="text" placeholder="Name (readOnly)" readOnly/>
+            <Input type="text" placeholder="Name (invalid)" data-invalid/>
             <Input type="text" placeholder="Name (invalid)" data-invalid value="duck"/>
           </Sample>
         </SamplesStack>
@@ -45,7 +43,7 @@ const InputShowcase = () => {
         <SectionHeader>Input group</SectionHeader>
         <SamplesStack>
           <Sample label="with end element">
-            <Field label="Referral code" required floating size="xl" w="300px" flexShrink={ 0 }>
+            <Field label="Referral code" required floating size="lg" w="300px" flexShrink={ 0 }>
               <InputGroup endElement={ <IconSvg name="copy" boxSize={ 5 }/> } endElementProps={{ px: 3 }}>
                 <Input/>
               </InputGroup>

ui/showcases/Link.tsx

@@ -71,9 +71,6 @@ const LinkShowcase = () => {
         </SamplesStack>
       </Section>
 
-      { /* TODO @tom2drum links with icons */ }
-      <span>??? links with icons</span>
-
       <Section>
         <SectionHeader>Loading</SectionHeader>
         <SamplesStack>

ui/snippets/navigation/vertical/NavLink.tsx

@@ -9,7 +9,6 @@ import useIsMobile from 'lib/hooks/useIsMobile';
 import { isInternalItem } from 'lib/hooks/useNavItems';
 import { Link } from 'toolkit/chakra/link';
 import { Tooltip } from 'toolkit/chakra/tooltip';
-import IconSvg from 'ui/shared/IconSvg';
 
 import LightningLabel, { LIGHTNING_LABEL_CLASS_NAME } from '../LightningLabel';
 import NavLinkIcon from '../NavLinkIcon';
@@ -73,7 +72,6 @@ const NavLink = ({ item, onClick, isCollapsed, isDisabled }: Props) => {
               display={{ base: 'inline', lg: isExpanded ? 'inline' : 'none', xl: isCollapsed ? 'none' : 'inline' }}
             >
               <span>{ item.text }</span>
-              { !isInternalLink && <IconSvg name="link_external" boxSize={ 3 } color="icon.externalLink" verticalAlign="middle"/> }
             </chakra.span>
             { isHighlighted && (
               <LightningLabel

ui/snippets/searchBar/SearchBarInput.tsx

@@ -104,26 +104,23 @@ const SearchBarInput = (
   const startElement = (
     <IconSvg
       name="search"
-      boxSize={{ base: isHomepage ? 6 : 4, lg: 6 }}
-      color={{ _light: 'blackAlpha.600', _dark: 'whiteAlpha.600' }}
-      ml={{ base: 3, lg: 4 }}
-      mr="10px"
+      boxSize={ 5 }
+      ml={{ base: 2, lg: isHomepage ? 4 : 2 }}
+      mr={ 2 }
     />
   );
 
   const endElement = (
     <>
-      <ClearButton onClick={ onClear } isVisible={ value.length > 0 }/>
+      <ClearButton onClick={ onClear } isVisible={ value.length > 0 } mx={ 2 }/>
       { !isMobile && (
         <Center
           boxSize="20px"
-          my="2px"
-          mr={ 3 }
-          ml={ 2 }
+          mr={{ base: 2, lg: isHomepage ? 4 : 2 }}
           borderRadius="sm"
           borderWidth="1px"
-          borderColor="gray.400"
-          color="gray.400"
+          borderColor="gray.500"
+          color="gray.500"
         >
           /
         </Center>

ui/snippets/topBar/NetworkMenu.tsx

@@ -23,8 +23,9 @@ const NetworkMenu = () => {
           aria-label="Network menu"
           borderRadius="sm"
           onClick={ menu.onToggle }
+          p={ 0.5 }
         >
-          <IconSvg name="networks"/>
+          <IconSvg name="networks" boxSize="full"/>
         </IconButton>
       </PopoverTrigger>
       <NetworkMenuContentDesktop items={ menu.data } tabs={ menu.availableTabs }/>

ui/snippets/user/profile/UserProfileButton.tsx

@@ -84,8 +84,7 @@ const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending, ..
           onFocus={ handleFocus }
           selected={ dataExists }
           highlighted={ isAutoConnectDisabled }
-          textStyle="sm"
-          px={ dataExists ? 2.5 : 4 }
+          px={{ base: 2.5, lg: 3 }}
           fontWeight={ dataExists ? 700 : 600 }
           loading={ isButtonLoading }
           { ...rest }

ui/snippets/user/wallet/UserWalletButton.tsx

@@ -49,8 +49,7 @@ const UserWalletButton = ({ size, variant, isPending, isAutoConnectDisabled, add
         variant={ variant }
         selected={ Boolean(address) }
         highlighted={ isAutoConnectDisabled }
-        textStyle="sm"
-        px={ address ? 2.5 : 4 }
+        px={{ base: 2.5, lg: 3 }}
         fontWeight={ address ? 700 : 600 }
         loading={ isPending }
         loadingText={ isMobile ? undefined : 'Connecting' }