wip: added opacity on hover for down arrow in swap item

apps/oeth/vite.config.ts

@@ -1,8 +1,10 @@
 /// <reference types="vitest" />
+/// <reference types="vite-plugin-svgr/client" />
 import react from '@vitejs/plugin-react';
 import path from 'path';
 import { defineConfig } from 'vite';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
+import svgr from 'vite-plugin-svgr';
 import viteTsConfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
@@ -19,6 +21,7 @@ export default defineConfig({
   },
 
   plugins: [
+    svgr(),
     react({
       babel: {
         plugins: [

libs/shared/components/src/Cards/SwapCard/SwapItem.stories.tsx

@@ -1,6 +1,4 @@
-import { Box, IconButton } from '@mui/material';
-
-import { SwapItem } from './SwapItem';
+import { DropdownIcon, SwapItem } from './SwapItem';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -18,27 +16,13 @@ export default meta;
 export const Default: StoryObj<typeof SwapItem> = {};
 export const WithAdditionalNode: StoryObj<typeof SwapItem> = {
   args: {
-    additionalNode: (
-      <IconButton disableRipple>
-        <Box
-          component={'img'}
-          src={`https://app.oeth.com/images/downarrow.svg`}
-        />
-      </IconButton>
-    ),
+    additionalNode: <DropdownIcon />,
   },
 };
 
 export const Hover: StoryObj<typeof SwapItem> = {
   args: {
-    additionalNode: (
-      <IconButton>
-        <Box
-          component={'img'}
-          src={`https://app.oeth.com/images/downarrow.svg`}
-        />
-      </IconButton>
-    ),
+    additionalNode: <DropdownIcon />,
   },
   parameters: {
     pseudo: {

libs/shared/components/src/Cards/SwapCard/SwapItem.tsx

@@ -1,8 +1,9 @@
-import { alpha, Box, Stack } from '@mui/material';
+import { alpha, Box, IconButton, Stack } from '@mui/material';
 
 import { Mix } from '../../Mix';
+import { ReactComponent as Dropdown } from './dropdown.svg';
 
-import type { SxProps } from '@mui/material';
+import type { ButtonProps, SxProps } from '@mui/material';
 
 interface Props {
   icon: string | string[];
@@ -50,3 +51,24 @@ export function SwapItem({ icon, name, additionalNode: Component, sx }: Props) {
     </Stack>
   );
 }
+
+export function DropdownIcon({ sx, ...rest }: ButtonProps) {
+  return (
+    <IconButton
+      sx={{
+        ...sx,
+        maxHeight: '1.375rem',
+        maxWidth: '1.375rem',
+        padding: 0,
+        marginInlineStart: 1,
+        '&:hover stop:first-of-type': {
+          opacity: 0.4,
+        },
+      }}
+      {...rest}
+      disableTouchRipple
+    >
+      <Dropdown />
+    </IconButton>
+  );
+}

libs/shared/components/vite.config.ts

@@ -1,12 +1,15 @@
 /// <reference types="vitest" />
-import { defineConfig } from 'vite';
+/// <reference types="vite-plugin-svgr/client" />
 import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
 import viteTsConfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
   cacheDir: '../../../node_modules/.vite/shared-components',
 
   plugins: [
+    svgr(),
     react(),
     viteTsConfigPaths({
       root: '../../../',

libs/shared/storybook/vite.config.ts

@@ -1,10 +1,13 @@
 /// <reference types="vitest" />
-import { defineConfig } from 'vite';
+/// <reference types="vite-plugin-svgr/client" />
 import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
 import viteTsConfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
   plugins: [
+    svgr(),
     react({
       babel: {
         plugins: [

package.json

@@ -76,6 +76,7 @@
     "vite": "~4.4.9",
     "vite-plugin-dts": "~3.5.1",
     "vite-plugin-static-copy": "^0.17.0",
+    "vite-plugin-svgr": "^3.2.0",
     "vite-tsconfig-paths": "~4.2.0",
     "vitest": "~0.34.1"
   }