@rango-dev/ui 0.29.1-next.9 → 0.30.0

package/src/components/Flags/index.ts

@@ -1,9 +1,49 @@
+import Bengali from './Bengali';
+import Chinese from './Chinese';
 import English from './English';
+import Finland from './Finland';
 import French from './French';
+import German from './German';
+import Greece from './Greece';
+import Hindi from './Hindi';
+import Indonesian from './Indonesian';
+import Italian from './Italian';
 import Japanese from './Japanese';
+import Malay from './Malay';
+import Netherlands from './Netherlands';
+import Poland from './Poland';
 import Portuguese from './Portuguese';
+import Russian from './Russian';
 import Spanish from './Spanish';
+import Swedish from './Swedish';
+import Thai from './Thai';
+import Turkish from './Turkish';
+import Ukrainian from './Ukrainian';
+import Vietnamese from './Vietnamese';
 
 export type { FlagPropTypes } from './Flags.types';
 
-export { English, Spanish, Japanese, French, Portuguese };
+export {
+  English,
+  Spanish,
+  Japanese,
+  French,
+  Portuguese,
+  Hindi,
+  Chinese,
+  Bengali,
+  Russian,
+  Indonesian,
+  German,
+  Malay,
+  Swedish,
+  Thai,
+  Turkish,
+  Ukrainian,
+  Vietnamese,
+  Finland,
+  Netherlands,
+  Greece,
+  Italian,
+  Poland,
+};

package/src/components/FullExpandedQuote/FullExpandedQuote.Skeletons.tsx

@@ -53,7 +53,7 @@ export function SkeletonItemLeft() {
     <div
       style={{
         display: 'flex',
-        alignItems: 'end',
+        alignItems: 'center',
       }}>
       <Skeleton variant="rounded" width={42} height={49} />
     </div>

package/src/components/FullExpandedQuote/FullExpandedQuote.styles.ts

@@ -20,6 +20,12 @@ export const RouteContainer = styled('div', {
   [`.${darkTheme} &`]: {
     backgroundColor: '$neutral500',
   },
+  '&:hover': {
+    backgroundColor: '$neutral300',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral400',
+    },
+  },
   variants: {
     selected: {
       true: {
@@ -55,7 +61,7 @@ export const TagsContainer = styled('div', {
 
 export const Steps = styled('div', {
   display: 'flex',
-  height: '85px',
+  height: '102px',
 });
 
 export const StepItem = styled('div', {
@@ -109,8 +115,8 @@ export const SwapperContainer = styled(FlexCenter, {
 export const SwapperImage = styled(FlexCenter, {
   borderRadius: '$lg',
   position: 'relative',
-  width: '$18',
-  height: '$18',
+  width: '$24',
+  height: '$24',
   border: '1px solid transparent',
   variants: {
     state: {
@@ -127,10 +133,10 @@ export const SwapperImage = styled(FlexCenter, {
 export const IconHighlight = styled(FlexCenter, {
   borderRadius: '$lg',
   position: 'absolute',
-  width: '$8',
-  height: '$8',
-  bottom: -2,
-  right: -2,
+  width: '$10',
+  height: '$10',
+  bottom: -3,
+  right: -3,
   variants: {
     type: {
       warning: {
@@ -153,12 +159,12 @@ export const IconHighlight = styled(FlexCenter, {
 
 export const OutputSection = styled(FlexCenter, {
   flexDirection: 'column',
-  paddingLeft: '$4',
+  paddingLeft: '$8',
 });
 
 export const VerticalLine = styled('div', {
   display: 'flex',
-  width: '50%',
+  width: 'calc(50% + 1px)',
   borderRight: '1px dashed',
   height: '$10',
   borderColor: '$info300',

package/src/components/FullExpandedQuote/FullExpandedQuote.tsx

@@ -45,7 +45,8 @@ export function FullExpandedQuote(props: PropTypes) {
     warningLevel,
     tooltipContainer,
     onClick,
-    selected,
+    feeWarning,
+    selected = false,
   } = props;
 
   const steps: DataLoadedProps['steps'] = loading
@@ -64,6 +65,7 @@ export function FullExpandedQuote(props: PropTypes) {
               fee={props.fee}
               time={props.time}
               steps={numberOfSteps}
+              feeWarning={feeWarning}
             />
             <TagsContainer>
               {props.tags.map((tag) => (
@@ -85,7 +87,7 @@ export function FullExpandedQuote(props: PropTypes) {
               ) : (
                 <LeftSection>
                   <ChainToken
-                    size="small"
+                    size="xmedium"
                     chainImage={step.from.chain.image}
                     tokenImage={step.from.token.image}
                   />
@@ -116,20 +118,21 @@ export function FullExpandedQuote(props: PropTypes) {
                     <SwapperContainer>
                       <SwapperImage state={step.state}>
                         <Image
-                          size={15}
+                          size={22}
                           type="circular"
                           src={step.swapper.image}
                         />
                         {step.state && (
                           <IconHighlight type={step.state}>
                             {step.state === 'error' ? (
-                              <ErrorIcon size={6} color="error" />
+                              <ErrorIcon size={8} color="error" />
                             ) : (
-                              <WarningIcon size={6} color="warning" />
+                              <WarningIcon size={8} color="warning" />
                             )}
                           </IconHighlight>
                         )}
                       </SwapperImage>
+                      <Divider size={2} />
                       <Typography size="xsmall" variant="body" align="center">
                         {step.swapper.displayName}
                       </Typography>
@@ -149,6 +152,7 @@ export function FullExpandedQuote(props: PropTypes) {
               tokenImage={steps[numberOfSteps - 1].to.token.image}
               size="medium"
             />
+            <Divider size={4} />
             <div>
               <Tooltip
                 content={props.outputPrice.realValue}
@@ -158,7 +162,7 @@ export function FullExpandedQuote(props: PropTypes) {
                   {props.outputPrice.value}
                 </Typography>
                 <Divider size={4} direction="horizontal" />
-                <Typography size="large" variant="body">
+                <Typography size="xmedium" variant="title">
                   {steps[numberOfSteps - 1].to.token.displayName}
                 </Typography>
               </Tooltip>

package/src/components/FullExpandedQuote/FullExpandedQuote.types.ts

@@ -10,6 +10,7 @@ type BaseProps = {
   tooltipContainer?: HTMLElement;
   onClick?: () => void;
   selected?: boolean;
+  feeWarning?: boolean;
 };
 
 export type DataLoadedProps = {

package/src/components/Header/Header.styles.ts

@@ -16,7 +16,7 @@ export const Container = styled('div', {
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  padding: '$15 $20',
+  padding: '$20 $20 $15 $20',
   $$color: '$colors$neutral100',
   [`.${darkTheme} &`]: {
     $$color: '$colors$neutral300',

package/src/components/I18nManager/I18nManager.tsx

@@ -11,11 +11,21 @@ import React, { useEffect, useReducer } from 'react';
  *  "translations/*": ["../../translations/*"]
  *}
  */
+import { messages as deMessages } from '../../../../../translations/de';
+import { messages as elMessages } from '../../../../../translations/el';
 import { messages as enMessages } from '../../../../../translations/en';
 import { messages as esMessages } from '../../../../../translations/es';
+import { messages as fiMessages } from '../../../../../translations/fi';
 import { messages as frMessages } from '../../../../../translations/fr';
+import { messages as itMessages } from '../../../../../translations/it';
 import { messages as jaMessages } from '../../../../../translations/ja';
+import { messages as nlMessages } from '../../../../../translations/nl';
+import { messages as plMessages } from '../../../../../translations/pl';
 import { messages as ptMessages } from '../../../../../translations/pt';
+import { messages as ruMessages } from '../../../../../translations/ru';
+import { messages as svMessages } from '../../../../../translations/sv';
+import { messages as ukMessages } from '../../../../../translations/uk';
+import { messages as zhMessages } from '../../../../../translations/zh';
 
 const messages = {
   en: enMessages,
@@ -23,6 +33,16 @@ const messages = {
   ja: jaMessages,
   fr: frMessages,
   pt: ptMessages,
+  zh: zhMessages,
+  ru: ruMessages,
+  de: deMessages,
+  uk: ukMessages,
+  sv: svMessages,
+  fi: fiMessages,
+  nl: nlMessages,
+  el: elMessages,
+  it: itMessages,
+  pl: plMessages,
 };
 
 i18n.load(messages);

package/src/components/ListItem/ListItem.types.ts

@@ -5,5 +5,7 @@ export type ListItemProps = {
   end?: React.ReactNode;
   as?: 'div' | 'li';
   onClick?: () => void;
+  onKeyUp?: React.KeyboardEventHandler<HTMLLIElement>;
   hasDivider?: boolean;
+  tabIndex?: number;
 };

package/src/components/ListItemButton/ListItemButton.styles.ts

@@ -1,26 +1,10 @@
 import { darkTheme, styled } from '../../theme';
+import { ListItem } from '../ListItem/ListItem';
 
-export const BaseListItemButton = styled('button', {
+export const BaseListItemButton = styled(ListItem, {
   transition: 'all 0.35s',
-  border: 0,
-  width: '100%',
-  backgroundColor: 'transparent',
-  fontFamily: 'inherit',
-  padding: 'unset',
-  '&:focus-visible': {
-    borderRadius: '$xs',
-
-    outline: 0,
-    $$color: '$colors$info100',
-    [`.${darkTheme} &`]: {
-      $$color: '$colors$info700',
-    },
-    backgroundColor: '$$color',
-  },
   '&:hover': {
     $$color: '$colors$info100',
-    borderRadius: '$xs',
-
     [`.${darkTheme} &`]: {
       $$color: '$colors$neutral100',
     },
@@ -30,19 +14,19 @@ export const BaseListItemButton = styled('button', {
   '&:active': {
     transform: 'scale(0.99)',
   },
-  variants: {
-    hasDivider: {
-      true: {
-        borderBottom: '1px solid',
-        $$color: '$colors$neutral300',
-        [`.${darkTheme} &`]: {
-          $$color: '$colors$neutral400',
-        },
-        borderColor: '$$color',
-        borderBottomRightRadius: 0,
-        borderBottomLeftRadius: 0,
-      },
+
+  '&:focus-visible': {
+    borderRadius: '$xs',
+
+    outline: 0,
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
     },
+    backgroundColor: '$$color',
+  },
+
+  variants: {
     selected: {
       true: { outline: '1px solid $secondary500' },
       false: { outline: 0 },

package/src/components/ListItemButton/ListItemButton.tsx

@@ -2,25 +2,27 @@ import type { ListItemButtonProps } from './ListItemButton.types';
 
 import React from 'react';
 
-import { ListItem } from '../ListItem/ListItem';
-
 import { BaseListItemButton } from './ListItemButton.styles';
 
 function ListItemButton(props: ListItemButtonProps) {
-  const { onClick, id, style, hasDivider, selected, ...restProps } = props;
+  const { onClick, id, selected, ...restProps } = props;
   const onClickWithKey = () => {
     if (onClick) {
       onClick(id);
     }
   };
+
   return (
     <BaseListItemButton
-      hasDivider={hasDivider}
-      selected={selected}
       onClick={onClickWithKey}
-      style={style}>
-      <ListItem {...restProps} />
-    </BaseListItemButton>
+      aria-label="button"
+      selected={selected}
+      onKeyUp={(e: { key: string }) => {
+        e.key === 'Enter' && onClickWithKey();
+      }}
+      tabIndex={0}
+      {...restProps}
+    />
   );
 }
 

package/src/components/ListItemButton/ListItemButton.types.ts

@@ -5,6 +5,5 @@ export type ListItemButtonProps = Omit<ListItemProps, 'onClick'> & {
   id: string;
   onClick: (id: string) => void;
   style?: CSSProperties;
-  hasDivider?: boolean;
   selected?: boolean;
 };

package/src/components/Popover/Popover.styles.ts

@@ -1,15 +1,21 @@
 import * as RadixPopover from '@radix-ui/react-popover';
 
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const PopoverContainer = styled(RadixPopover.Content, {
   borderRadius: '$sm',
   filter: 'drop-shadow(0px 5px 20px rgba(130, 130, 130, 0.20))',
   backgroundColor: '$neutral100',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral300',
+  },
 });
 
 export const PopoverArrow = styled(RadixPopover.Arrow, {
   fill: '$neutral100',
+  [`.${darkTheme} &`]: {
+    fill: '$neutral300',
+  },
   width: '$16',
   height: '$8',
 });

package/src/components/Select/Select.tsx

@@ -8,10 +8,10 @@ import { Typography } from '../Typography';
 
 import { SelectContent, SelectItem, SelectTrigger } from './select.styles';
 
-export function SelectComponent(props: PropTypes) {
+export function SelectComponent<T extends string>(props: PropTypes<T>) {
   const [open, setOpen] = useState(false);
   const selectRef = useRef<HTMLDivElement>(null);
-  const { options, value, container, handleItemClick } = props;
+  const { options, value, container, handleItemClick, variant } = props;
   const handleToggle = () => {
     setOpen((prev) => !prev);
   };
@@ -29,17 +29,20 @@ export function SelectComponent(props: PropTypes) {
     };
   }, []);
 
+  const selectedLabel = options.find((option) => option.value === value)?.label;
+
   return (
     <div ref={selectRef}>
-      <Select.Root value={value?.value} open={open}>
+      <Select.Root value={value} open={open}>
         <SelectTrigger
+          variant={variant}
           onKeyDown={(event) => event.key === 'Enter' && handleToggle()}
           onClick={handleToggle}
           open={open}
-          aria-label={value?.label}>
+          aria-label={selectedLabel}>
           <Select.Value>
             <Typography variant="body" size="small">
-              {value?.label}
+              {selectedLabel}
             </Typography>
           </Select.Value>
 
@@ -63,11 +66,11 @@ export function SelectComponent(props: PropTypes) {
                     key={option.value}
                     value={option.value}>
                     <Select.ItemText>
-                      <Typography variant="body" size="small">
+                      <Typography variant="body" size="small" className="_text">
                         {option.label}
                       </Typography>
                     </Select.ItemText>
-                    {option.value === value?.value && (
+                    {option.value === value && (
                       <DoneIcon size={14} color="secondary" />
                     )}
                   </SelectItem>

package/src/components/Select/Select.types.ts

@@ -1,10 +1,14 @@
-type Item = {
-  value: string;
+type Item<T> = {
+  value: T;
   label: string;
 };
-export type PropTypes = {
-  options: Item[];
-  handleItemClick?: (item: Item) => void;
-  value: Item;
+
+type Variant = 'filled' | 'outlined';
+
+export type PropTypes<T> = {
+  options: Item<T>[];
+  handleItemClick?: (item: Item<T>) => void;
+  value: string;
   container?: HTMLElement;
+  variant: Variant;
 };

package/src/components/Select/select.styles.ts

@@ -9,22 +9,9 @@ export const SelectTrigger = styled(Select.Trigger, {
   justifyContent: 'space-between',
   alignItems: 'center',
   cursor: 'pointer',
-  padding: '$5 $10',
-  border: 0,
   outline: 0,
   whiteSpace: 'nowrap',
-  borderRadius: '$sm',
-  backgroundColor: '$neutral300',
-  [`.${darkTheme} &`]: {
-    backgroundColor: '$neutral400',
-  },
   width: '100%',
-  '&:hover': {
-    backgroundColor: '$info100',
-    [`.${darkTheme} &`]: {
-      backgroundColor: '$neutral',
-    },
-  },
   '& svg': {
     transition: `all ${EXPANDABLE_QUOTE_TRANSITION_DURATION}ms ease`,
   },
@@ -44,6 +31,35 @@ export const SelectTrigger = styled(Select.Trigger, {
         },
       },
     },
+    variant: {
+      filled: {
+        border: 0,
+        borderRadius: '$sm',
+        padding: '$5 $10',
+        backgroundColor: '$neutral300',
+        [`.${darkTheme} &`]: {
+          backgroundColor: '$neutral400',
+        },
+        '&:hover': {
+          backgroundColor: '$info100',
+          [`.${darkTheme} &`]: {
+            backgroundColor: '$neutral',
+          },
+        },
+      },
+      outlined: {
+        backgroundColor: 'transparent',
+        padding: '$10',
+        border: '1px solid $neutral300',
+        borderRadius: '$xm',
+        '&:hover': {
+          borderColor: '$info300',
+          '& svg': {
+            color: '$secondary500',
+          },
+        },
+      },
+    },
   },
 });
 
@@ -69,8 +85,12 @@ export const SelectItem = styled(Select.Item, {
 
   '&:hover': {
     backgroundColor: '$info100',
+    '& ._text': {
+      color: '$secondary500',
+    },
     [`.${darkTheme} &`]: {
       backgroundColor: '$neutral',
+      color: '$secondary500',
     },
   },
 });

package/src/components/StepDetails/StepDetails.styles.ts

@@ -69,7 +69,7 @@ export const Alerts = styled('div', {
 });
 
 export const DashedLine = styled('div', {
-  borderLeft: '1px dashed black',
+  borderLeft: '1px dashed $foreground',
   minHeight: '64px',
   margin: '0 11.5px',
   alignSelf: 'stretch',

package/src/components/Tooltip/Tooltip.styles.ts

@@ -1,6 +1,6 @@
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 import { Typography } from '../Typography';
 
 export const TooltipContent = styled(RadixTooltip.Content, {
@@ -17,9 +17,11 @@ export const TooltipContent = styled(RadixTooltip.Content, {
 export const TooltipTypography = styled(Typography, {
   borderRadius: '$md',
   padding: '$5 $10',
-  boxShadow:
-    'inset 0 0 0.5px 1px rgba(255, 255, 255, 0.075), 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0.3px 0.4px rgba(0, 0, 0, 0.02), 0.9px 1.5px rgba(0, 0, 0, 0.045), 0 3.5px 6px rgba(0, 0, 0, 0.09)',
-  backgroundColor: '$neutral100',
+  boxShadow: '5px 5px 10px 0px rgba(0, 0, 0, 0.10)',
+  backgroundColor: '$neutral200',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral500',
+  },
 });
 
 export const TriggerContent = styled('div', {

package/src/containers/SwapInput/SwapInput.styles.ts

@@ -45,6 +45,12 @@ export const MaxButton = styled(Button, {
     $$color: '$colors$secondary800',
   },
   backgroundColor: '$$color',
+  '& ._typography': {
+    color: '$colors$secondary500',
+    [`.${darkTheme} &`]: {
+      color: '$colors$secondary400',
+    },
+  },
 });
 
 export const ValueTypography = styled('div', {

package/src/containers/SwapInput/SwapInput.tsx

@@ -58,7 +58,7 @@ export function SwapInput(props: SwapInputProps) {
                 variant="default"
                 size="xsmall"
                 onClick={props.onSelectMaxBalance}>
-                <Typography variant="body" size="xsmall" color="secondary500">
+                <Typography variant="body" size="xsmall">
                   {i18n.t('Max')}
                 </Typography>
               </MaxButton>

package/src/containers/SwapInput/TokenSection.styles.ts

@@ -24,7 +24,7 @@ export const Container = styled(Button, {
   '&:hover': {
     $$color: '$colors$info100',
     [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral400',
+      $$color: '$colors$neutral100',
     },
     backgroundColor: '$$color !important',
   },

package/src/icons/BorderRadius.tsx

@@ -8,13 +8,16 @@ function SvgBorderRadius(props: SvgIconPropsWithChildren) {
   return createElement(
     SvgIcon,
     props,
-    <svg viewBox="0 0 19 18" xmlns="http://www.w3.org/2000/svg">
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M0.489258 4.74652C0.489258 2.15304 2.592 0 5.24997 0C5.53793 0 5.77138 0.22074 5.77138 0.493036C5.77138 0.765333 5.53793 0.986072 5.24997 0.986072C3.22533 0.986072 1.53208 2.64173 1.53208 4.74652C1.53208 5.01881 1.29864 5.23955 1.01067 5.23955C0.722702 5.23955 0.489258 5.01881 0.489258 4.74652ZM13.2071 0.493036C13.2071 0.22074 13.4406 0 13.7286 0C16.3865 0 18.4893 2.15304 18.4893 4.74652C18.4893 5.01882 18.2558 5.23956 17.9678 5.23956C17.6799 5.23956 17.4464 5.01882 17.4464 4.74652C17.4464 2.64173 15.7532 0.986072 13.7286 0.986072C13.4406 0.986072 13.2071 0.765333 13.2071 0.493036ZM2.60885 4.74638C2.60885 3.32747 3.76259 2.1266 5.24991 2.1266L13.7285 2.1266C15.2158 2.1266 16.3696 3.32747 16.3696 4.74638L16.3696 13.2533C16.3696 14.6722 15.2158 15.8731 13.7285 15.8731L5.2499 15.8731C3.76259 15.8731 2.60885 14.6722 2.60885 13.2533L2.60885 4.74638ZM5.24991 3.11267C4.39592 3.11267 3.65167 3.81615 3.65167 4.74638L3.65167 13.2533C3.65167 14.1836 4.39592 14.887 5.2499 14.887L13.7285 14.887C14.5825 14.887 15.3267 14.1836 15.3267 13.2533L15.3267 4.74638C15.3267 3.81616 14.5825 3.11267 13.7285 3.11267L5.24991 3.11267ZM1.01067 12.7604C1.29864 12.7604 1.53208 12.9812 1.53208 13.2535C1.53208 15.3583 3.22533 17.0139 5.24996 17.0139C5.53793 17.0139 5.77138 17.2347 5.77138 17.507C5.77138 17.7793 5.53793 18 5.24996 18C2.592 18 0.489258 15.847 0.489258 13.2535C0.489258 12.9812 0.722702 12.7604 1.01067 12.7604ZM17.9678 12.7604C18.2558 12.7604 18.4893 12.9812 18.4893 13.2535C18.4893 15.847 16.3865 18 13.7285 18C13.4406 18 13.2071 17.7793 13.2071 17.507C13.2071 17.2347 13.4406 17.0139 13.7285 17.0139C15.7532 17.0139 17.4464 15.3583 17.4464 13.2535C17.4464 12.9812 17.6799 12.7604 17.9678 12.7604Z"
-        fill="#727272"
-      />
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <g id="Icons">
+        <path
+          id="Border-Radius"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M3.48926 7.74652C3.48926 5.15304 5.592 3 8.24997 3C8.53793 3 8.77138 3.22074 8.77138 3.49304C8.77138 3.76533 8.53793 3.98607 8.24997 3.98607C6.22533 3.98607 4.53208 5.64173 4.53208 7.74652C4.53208 8.01881 4.29864 8.23955 4.01067 8.23955C3.7227 8.23955 3.48926 8.01881 3.48926 7.74652ZM16.2071 3.49304C16.2071 3.22074 16.4406 3 16.7286 3C19.3865 3 21.4893 5.15304 21.4893 7.74652C21.4893 8.01882 21.2558 8.23956 20.9678 8.23956C20.6799 8.23956 20.4464 8.01882 20.4464 7.74652C20.4464 5.64173 18.7532 3.98607 16.7286 3.98607C16.4406 3.98607 16.2071 3.76533 16.2071 3.49304ZM5.60885 7.74638C5.60885 6.32747 6.76259 5.1266 8.24991 5.1266L16.7285 5.1266C18.2158 5.1266 19.3696 6.32747 19.3696 7.74638L19.3696 16.2533C19.3696 17.6722 18.2158 18.8731 16.7285 18.8731L8.2499 18.8731C6.76259 18.8731 5.60885 17.6722 5.60885 16.2533L5.60885 7.74638ZM8.24991 6.11267C7.39592 6.11267 6.65167 6.81615 6.65167 7.74638L6.65167 16.2533C6.65167 17.1836 7.39592 17.887 8.2499 17.887L16.7285 17.887C17.5825 17.887 18.3267 17.1836 18.3267 16.2533L18.3267 7.74638C18.3267 6.81616 17.5825 6.11267 16.7285 6.11267L8.24991 6.11267ZM4.01067 15.7604C4.29864 15.7604 4.53208 15.9812 4.53208 16.2535C4.53208 18.3583 6.22533 20.0139 8.24996 20.0139C8.53793 20.0139 8.77138 20.2347 8.77138 20.507C8.77138 20.7793 8.53793 21 8.24996 21C5.592 21 3.48926 18.847 3.48926 16.2535C3.48926 15.9812 3.7227 15.7604 4.01067 15.7604ZM20.9678 15.7604C21.2558 15.7604 21.4893 15.9812 21.4893 16.2535C21.4893 18.847 19.3865 21 16.7285 21C16.4406 21 16.2071 20.7793 16.2071 20.507C16.2071 20.2347 16.4406 20.0139 16.7285 20.0139C18.7532 20.0139 20.4464 18.3583 20.4464 16.2535C20.4464 15.9812 20.6799 15.7604 20.9678 15.7604Z"
+          fill="#727272"
+        />
+      </g>
     </svg>
   );
 }