feat: cart icon

Libree · Aug 22, 2023 · ec72627 · ec72627 · spheron-protocol · Aug 22, 2023
1 parent 4261b68
commit ec72627
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 2 deletions.
diff --git a/packages/ui-components/src/components/icons/interface/icon_outline_cart.tsx b/packages/ui-components/src/components/icons/interface/icon_outline_cart.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { IconType } from '..';
+
+export const IconOutlineCart: IconType = ({ height = 16, width = 16, ...props }) => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth="1.5"
+            stroke="currentColor"
+            height={height}
+            width={width}
+            {...props}
+        >
+            <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
+            />
+        </svg>
+
+    );
+};
diff --git a/packages/ui-components/src/components/icons/interface/icon_solid_cart.tsx b/packages/ui-components/src/components/icons/interface/icon_solid_cart.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { IconType } from '..';
+
+export const IconSolidCart: IconType = ({ height = 16, width = 16, ...props }) => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            height={height}
+            width={width}
+            {...props}
+        >
+            <path
+                d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
+            />
+        </svg>
+    );
+};
diff --git a/packages/ui-components/src/components/icons/interface/index.ts b/packages/ui-components/src/components/icons/interface/index.ts
@@ -42,3 +42,5 @@ export {IconFlag} from './icon_flag';
 export {IconFeedback} from './icon_feedback';
 export {IconArrowRight} from './icon_arrow_right';
 export {IconArrowLeft} from './icon_arrow_left';
+export {IconOutlineCart} from './icon_outline_cart';
+export {IconSolidCart} from './icon_solid_cart';
diff --git a/packages/web-app/src/components/loanOfferTable/index.tsx b/packages/web-app/src/components/loanOfferTable/index.tsx
@@ -3,6 +3,7 @@ import { getTokenIcon, getTokenSymbol } from 'utils/library';
 import useScreen from 'hooks/useScreen';
 import { LoanOffer } from 'utils/types';
 import { useTranslation } from 'react-i18next';
+import { IconOutlineCart, IconSolidCart } from '@aragon/ui-components/src/components/icons';
 
 type LoanOfferTableProps = {
     loanOffers: LoanOffer[];
@@ -30,6 +31,7 @@ export const LoanOfferTable: React.FC<LoanOfferTableProps> = ({
                             </th>
                             <th className='font-bold px-2'>{t('marketplace.loanOffersTable.header4')}</th>
                             <th className='font-bold px-2'>{t('marketplace.loanOffersTable.header5')}</th>
+                            <th />
                         </tr>
                     </thead>
                     <tbody className='text-ui-500 my-1'>
@@ -68,14 +70,19 @@ export const LoanOfferTable: React.FC<LoanOfferTableProps> = ({
                                             </p>
                                         </div>
                                     </td>
-                                    <td className='py-1 rounded-r-2xl font-semibold'>
-                                        <div className='flex items-center p-1.5 tablet:p-2 space-x-0.5 tablet:space-x-1 bg-white rounded-r-2xl'>
+                                    <td className='py-1 font-semibold'>
+                                        <div className='flex items-center p-1.5 tablet:p-2 space-x-0.5 tablet:space-x-1 bg-white'>
                                             <img src={loanAssetIcon} alt='' width={20} height={20} />
                                             <p className='font-semibold'>
                                                 {`${loanOffer.loanAmount} ${isMobile ? '' : getTokenSymbol(loanOffer.loanAssetAddress)}`}
                                             </p>
                                         </div>
                                     </td>
+                                    <td className='py-1 rounded-r-2xl'>
+                                        <div className='p-1.5 tablet:p-2 bg-white rounded-r-2xl'>
+                                            <IconSolidCart height={isMobile ? 20 : 24} width={isMobile ? 20 : 24} />
+                                        </div>
+                                    </td>
                                 </tr>
                             )
                         })}