[TKAI-4356] use lx instead of tkai on frontend (#137)

* feat: add lx and vote icon and currencies

* refactor: increase path size

* Update .gitignore

* refactor: change transaction to icon to match lx

* refactor: update transferReceiced icon

* feat: update transferReceived, jury and backer icons

---------

Co-authored-by: Vitor Hugo <vhcsilva@gmail.com>
Co-authored-by: ickas <hey@ickas.xyz>

Author: 3 people

.gitignore

@@ -6,5 +6,5 @@ dist
 package-lock.json
 .env
 *.tgz
-
+.claude
 .vscode

src/atoms/label/index.tsx

@@ -5,7 +5,7 @@ import { colors } from '../../ions/variables';
 import { Icon } from '../..';
 
 export interface LabelProps {
-  currency?: 'tkai' | 'vkai' | undefined;
+  currency?: 'lx' | 'vote' | 'tkai' | 'vkai' | undefined;
   value: string;
   className?: string;
   style?: React.CSSProperties;
@@ -16,8 +16,7 @@ const Label = (props: LabelProps) => {
   return (
     <Styles.LabelStyle className={className} style={style}>
       {value}
-      {currency === 'tkai' && <Icon icon="tkai" fill={colors.grey200} />}
-      {currency === 'vkai' && <Icon icon="vkai" fill={colors.grey200} />}
+      {currency && <Icon icon={currency} fill={colors.grey200} />}
     </Styles.LabelStyle>
   );
 };

src/atoms/label/stories/label.stories.tsx

@@ -8,7 +8,7 @@ export default {
     currency: {
       control: {
         type: 'select',
-        options: ['', 'tkai', 'vkai'],
+        options: ['', 'lx', 'vote', 'tkai', 'vkai'],
       },
     },
   },
@@ -20,7 +20,7 @@ export const LabelComponentKAI = (args: LabelProps) => {
 
 LabelComponentKAI.storyName = 'With Currency';
 LabelComponentKAI.args = {
-  currency: 'tkai',
+  currency: 'lx',
   value: 'Amount',
 };
 

src/ions/icons.ts

@@ -4,7 +4,7 @@ import * as Styles from './styles';
 
 export interface CardValueProps {
   label: string;
-  currency?: 'tkai' | 'vkai' | undefined;
+  currency?: 'lx' | 'vote' | 'tkai' | 'vkai' | undefined;
   value: string | number;
   description?: string;
   buttonValue?: string;

src/molecules/card-value/index.tsx

@@ -8,7 +8,7 @@ export default {
     currency: {
       control: {
         type: 'select',
-        options: ['', 'tkai', 'vkai'],
+        options: ['', 'lx', 'vote', 'tkai', 'vkai'],
       },
     },
   },
@@ -18,10 +18,10 @@ export const CardValueComponentKAI = (args: CardValueProps) => (
   <CardValue {...args} />
 );
 
-CardValueComponentKAI.storyName = 'With TKAI';
+CardValueComponentKAI.storyName = 'With LX';
 CardValueComponentKAI.args = {
   label: 'Amount',
-  currency: 'tkai',
+  currency: 'lx',
   value: '13000',
   showArrowButton: false,
 };

src/molecules/card-value/stories/card-value.stories.tsx

@@ -3,7 +3,7 @@ import { Label } from '../..';
 import * as Styles from './styles';
 
 export interface FormGroupProps {
-  currency?: 'tkai' | 'vkai' | undefined;
+  currency?: 'lx' | 'vote' | 'tkai' | 'vkai' | undefined;
   label: string;
   error?: boolean;
   children: React.ReactNode;

src/molecules/form-group/index.tsx

@@ -15,7 +15,7 @@ export default {
     currency: {
       control: {
         type: 'select',
-        options: ['', 'tkai', 'vkai'],
+        options: ['', 'lx', 'vote', 'tkai', 'vkai'],
       },
     },
   },
@@ -32,6 +32,6 @@ export const FormGroupComponent = (args: FormGroupProps) => {
 FormGroupComponent.storyName = 'Form Group';
 FormGroupComponent.args = {
   label: 'Awesome Label',
-  currency: '',
+  currency: 'lx',
   error: false,
 };

src/molecules/form-group/stories/form-group.stories.tsx

@@ -168,6 +168,10 @@ const Table = <CellData extends CellBaseType>(props: TableProps<CellData>) => {
                               <Icon icon="tkai" fill="hsl(0, 0%, 16%)" />
                             ) : className === 'vkai' ? (
                               <Icon icon="vkai" fill="hsl(0, 0%, 16%)" />
+                            ) : className === 'lx' ? (
+                              <Icon icon="lx" fill="hsl(0, 0%, 16%)" />
+                            ) : className === 'vote' ? (
+                              <Icon icon="vote" fill="hsl(0, 0%, 16%)" />
                             ) : null}
                           </div>
                         </td>

src/molecules/table/index.tsx

@@ -75,7 +75,7 @@ const columns = {
       id: 'amount',
       value: 'Amount',
       dataKey: 'amount',
-      className: 'vkai',
+      className: 'lx',
       dataTestId: 'header-amount-id',
     },
     {