feat: Revised icons and list styling

implerhq · Oct 19, 2024 · 4c4a581 · 4c4a581
1 parent bdf5c35
commit 4c4a581
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 20 deletions.
diff --git a/apps/web/assets/icons/EditImport.icon.tsx b/apps/web/assets/icons/EditImport.icon.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { IconType } from '@types';
 import { IconSizes } from 'config';
 
-export const EditImportIcon = ({ size = 'sm' }: IconType) => {
+export const EditProjectIcon = ({ size = 'sm', color }: IconType) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -13,21 +13,21 @@ export const EditImportIcon = ({ size = 'sm' }: IconType) => {
     >
       <path
         d="M4.66797 4.66797H4.0013C3.64768 4.66797 3.30854 4.80844 3.05849 5.05849C2.80844 5.30854 2.66797 5.64768 2.66797 6.0013V12.0013C2.66797 12.3549 2.80844 12.6941 3.05849 12.9441C3.30854 13.1942 3.64768 13.3346 4.0013 13.3346H10.0013C10.3549 13.3346 10.6941 13.1942 10.9441 12.9441C11.1942 12.6941 11.3346 12.3549 11.3346 12.0013V11.3346"
-        stroke="white"
+        stroke={color}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M13.59 4.39007C13.8526 4.12751 14.0001 3.77139 14.0001 3.40007C14.0001 3.02875 13.8526 2.67264 13.59 2.41007C13.3274 2.14751 12.9713 2 12.6 2C12.2287 2 11.8726 2.14751 11.61 2.41007L6 8.00007V10.0001H8L13.59 4.39007Z"
-        stroke="white"
+        stroke={color}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M10.668 3.33203L12.668 5.33203"
-        stroke="white"
+        stroke={color}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"

diff --git a/apps/web/assets/icons/Swap.icon.tsx b/apps/web/assets/icons/Swap.icon.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { IconType } from '@types';
-import { IconSizes } from 'config';
+import { colors, IconSizes } from 'config';
 
-export const SwapIcon = ({ size = 'sm' }: IconType) => {
+export const SwapIcon = ({ size = 'sm', color = colors.green }: IconType) => {
   return (
     <svg
       width={IconSizes[size]}
@@ -12,14 +12,14 @@ export const SwapIcon = ({ size = 'sm' }: IconType) => {
       xmlns="http://www.w3.org/2000/svg"
     >
       <g clipPath="url(#clip0_5106_4813)">
-        <path d="M16 3L20 7L16 11" stroke="#5463FF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-        <path d="M10 7H20" stroke="#5463FF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-        <path d="M8 13L4 17L8 21" stroke="#5463FF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-        <path d="M4 17H13" stroke="#5463FF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M16 3L20 7L16 11" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M10 7H20" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M8 13L4 17L8 21" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M4 17H13" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
       </g>
       <defs>
         <clipPath id="clip0_5106_4813">
-          <rect width="24" height="24" fill="white" />
+          <rect width="24" height="24" fill={color} />
         </clipPath>
       </defs>
     </svg>

diff --git a/apps/web/components/List/List.styles.tsx b/apps/web/components/List/List.styles.tsx
@@ -5,24 +5,19 @@ export const getListStyles = createStyles((theme) => ({
     width: '100%',
   },
   header: {
-    padding: theme.spacing.md,
     borderBottom: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`,
-    textAlign: 'left',
-    marginBottom: theme.spacing.xl,
   },
   row: {
     borderBottom: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`,
-    '&:last-child': {
-      borderBottom: 'none',
-    },
     cursor: 'pointer',
   },
   td: {
     padding: theme.spacing.sm,
     textAlign: 'left',
   },
   th: {
-    padding: theme.spacing.sm,
+    textAlign: 'left',
+    padding: theme.spacing.xs,
   },
   selectedRow: {
     backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],

diff --git a/apps/web/components/List/List.tsx b/apps/web/components/List/List.tsx
@@ -3,19 +3,19 @@ import { Table, Text } from '@mantine/core';
 import { getListStyles } from './List.styles';
 
 interface IHeadingItem<T> {
-  title: string;
   key: string;
+  title: string;
   width?: number | string;
   Cell?: (item: T) => React.ReactNode;
 }
 
 interface IListProps<T> {
   data?: T[];
   emptyDataText?: string;
+  selectedItemId?: string;
   headings?: IHeadingItem<T>[];
   style?: React.CSSProperties;
   extraContent?: React.ReactNode;
-  selectedItemId?: string;
   onItemClick?: (item: T) => void;
 }