Update all row accessories to use AccessoryButton

asoong · Oct 17, 2023 · 9142380 · 9142380
1 parent 6aed725
commit 9142380
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 89 deletions.
diff --git a/client/src/components/Deposit/OffRamperIntentRow.tsx b/client/src/components/Deposit/OffRamperIntentRow.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import styled from 'styled-components/macro'
-import { UserX, ChevronRight } from 'react-feather';
 
 import { SVGIconThemed } from '../SVGIcon/SVGIconThemed';
+import { AccessoryButton } from '@components/common/AccessoryButton';
 
 
 interface IntentRowProps {
@@ -101,8 +101,16 @@ export const IntentRow: React.FC<IntentRowProps> = ({
       </IntentDetailsContainer>
 
       <ActionsContainer>
-        <StyledChevronRight onClick={handleCompleteOrderClick}/>
-        <StyledUserX/>
+        <AccessoryButton
+          onClick={handleCompleteOrderClick}
+          height={36}
+          title={'Complete'}
+          icon={'chevronRight'}/>
+
+        <AccessoryButton
+          height={36}
+          title={'Block'}
+          icon={'userX'}/>
       </ActionsContainer>
     </Container>
   );
@@ -126,10 +134,10 @@ const IntentDetailsContainer = styled.div`
 const ActionsContainer = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-end;
   justify-content: space-between;
-  padding: 2rem 1.25rem 2rem 0rem;
-  flex-grow: 1;
+  padding: 2rem 1.5rem 2rem 0rem;
+  gap: 16px;
 `;
 
 const AmountLabelsContainer = styled.div`
@@ -153,23 +161,3 @@ const Value = styled.label`
   font-size: 15px;
   color: #FFFFFF;
 `;
-
-const StyledUserX = styled(UserX)`
-  width: 20px;
-  height: 20px;
-  color: #6C757D;
-
-  &:hover {
-    color: #FFF;
-  }
-`;
-
-const StyledChevronRight = styled(ChevronRight)`
-  width: 26px;
-  height: 26px;
-  color: #6C757D;
-
-  &:hover {
-    color: #FFF;
-  }
-`;
diff --git a/client/src/components/Deposit/PositionRow.tsx b/client/src/components/Deposit/PositionRow.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import styled from 'styled-components';
-import { LogOut } from 'react-feather';
 
 import { SVGIconThemed } from '../SVGIcon/SVGIconThemed';
+import { AccessoryButton } from '@components/common/AccessoryButton';
 
 
 interface PositionRowProps {
@@ -65,7 +65,11 @@ export const PositionRow: React.FC<PositionRowProps> = ({
       </PositionDetailsContainer>
 
       <ActionsContainer>
-        <StyledLogOut onClick={handleWithdrawClick}/>
+        <AccessoryButton
+          onClick={handleWithdrawClick}
+          height={36}
+          title={'Withdraw'}
+          icon={'logout'}/>
       </ActionsContainer>
     </Container>
   );
@@ -147,13 +151,3 @@ const Value = styled.span`
   font-size: 15px;
   margin-left: 4px;
 `;
-
-const StyledLogOut = styled(LogOut)`
-  width: 20px;
-  height: 20px;
-  color: #6C757D;
-
-  &:hover {
-    color: #FFF;
-  }
-`;
diff --git a/client/src/components/Swap/OnRamperIntentRow.tsx b/client/src/components/Swap/OnRamperIntentRow.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import styled from 'styled-components/macro'
-import { ChevronRight, Send } from 'react-feather';
 
 import { SVGIconThemed } from '../SVGIcon/SVGIconThemed';
 import { AccessoryButton } from '@components/common/AccessoryButton';
@@ -146,8 +145,7 @@ const ActionsContainer = styled.div`
   flex-direction: column;
   align-items: flex-end;
   justify-content: space-between;
-  padding: 2rem 1.25rem 2rem 0rem;
-  gap: 12px;
+  padding: 1.5rem 1.5rem 1.65rem 0rem;
 `;
 
 const AmountLabelsContainer = styled.div`
@@ -171,23 +169,3 @@ const Value = styled.span`
   color: #FFFFFF;
   font-size: 15px;
 `;
-
-const StyledSend = styled(Send)`
-  width: 18px;
-  height: 18px;
-  color: #6C757D;
-
-  &:hover {
-    color: #FFF;
-  }
-`;
-
-const StyledChevronRight = styled(ChevronRight)`
-  width: 26px;
-  height: 26px;
-  color: #6C757D;
-
-  &:hover {
-    color: #FFF;
-  }
-`;
diff --git a/client/src/components/Swap/OnRamperIntentTable.tsx b/client/src/components/Swap/OnRamperIntentTable.tsx
@@ -5,10 +5,10 @@ import {
   usePrepareContractWrite,
   useWaitForTransaction
 } from 'wagmi'
-import { Trash2 } from 'react-feather';
 
 import { ThemedText } from '../../theme/text'
 import { IntentRow, IntentRowData } from "./OnRamperIntentRow";
+import { AccessoryButton } from '@components/common/AccessoryButton';
 import { toUsdcString, toUsdString } from '@helpers/units'
 import { PRECISION, SECONDS_IN_DAY  } from '@helpers/constants'
 import useLiquidity from '@hooks/useLiquidity';
@@ -165,7 +165,11 @@ export const OnRamperIntentTable: React.FC<OnRamperIntentTableProps> = ({
             Current Order
           </ThemedText.LabelSmall>
 
-          <StyledTrash2 onClick={handleCancelClick}/>
+          <AccessoryButton
+            onClick={handleCancelClick}
+            height={36}
+            title={'Cancel'}
+            icon={'trash'}/>
         </IntentCountTitle>
 
         <Table>
@@ -209,7 +213,7 @@ const TitleAndTableContainer = styled.div`
 const IntentCountTitle = styled.div`
   display: flex;
   justify-content: space-between;
-  padding: 1.25rem 1.5rem 1rem 1.5rem;
+  padding: 1rem 1.5rem 0.75rem 1.5rem;
   border-bottom: 1px solid #98a1c03d;
   align-items: center;
 `
@@ -231,13 +235,3 @@ const Table = styled.div`
     border-bottom: none;
   }
 `;
-
-const StyledTrash2 = styled(Trash2)`
-  width: 18px;
-  height: 18px;
-  color: #6C757D;
-
-  &:hover {
-    color: #FFF;
-  }
-`;
diff --git a/client/src/components/common/AccessoryButton.tsx b/client/src/components/common/AccessoryButton.tsx
@@ -1,9 +1,18 @@
 import React from "react";
 import styled, { css } from 'styled-components';
-import { ChevronRight, Send } from 'react-feather';
+import {
+  ChevronRight,
+  LogOut,
+  Send,
+  Trash2,
+  UserX
+} from 'react-feather';
 
 import Spinner from "@components/common/Spinner";
 
+
+type iconType = "send" | "chevronRight" | "trash" | "userX" | "logout";
+
 interface AccessoryButtonProps {
   fullWidth?: boolean;
   title?: string;
@@ -12,7 +21,7 @@ interface AccessoryButtonProps {
   loading?: boolean;
   onClick?: () => void;
   children?: React.ReactNode;
-  icon?: "send" | "chevronRight";
+  icon?: iconType;
 }
 
 export const AccessoryButton: React.FC<AccessoryButtonProps> = ({
@@ -30,12 +39,23 @@ export const AccessoryButton: React.FC<AccessoryButtonProps> = ({
    * Helpers
    */
 
-  const getIcon = (iconName: "send" | "chevronRight") => {
+  const getIcon = (iconName: iconType) => {
     switch (iconName) {
       case "send":
         return <StyledSend />;
+
       case "chevronRight":
         return <StyledChevronRight />;
+
+      case "logout":
+        return <StyledLogOut />;
+
+      case "trash":
+        return <StyledTrash />;
+
+      case "userX":
+        return <StyledUserX />;
+
       default:
         return null;
     }
@@ -70,19 +90,23 @@ const Container = styled.button<AccessoryButtonProps>`
   height: ${({ height }) => height}px;
   border-radius: 18px;
   background: transparent;
-  border: 1px solid #6C757D;
-  padding: 8px 16px;
+  border: 1px solid #adb5bd;
+  padding: 0px 14px;
   color: white;
   cursor: pointer;
   transition: background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 
   &:hover:not([disabled]) {
-    background: rgba(206, 212, 218, 0.1);
-    color: #FFF;
+    border: 1px solid #495057;
+    color: #495057;
+
+    * {
+      color: #495057;
+    }
   }
 
   &:active:not([disabled]) {
-    background: #bc3035;
+    background: rgba(206, 212, 218, 0.1);
     box-shadow: inset 0px -8px 0px rgba(0, 0, 0, 0.16);
   }
 
@@ -108,25 +132,45 @@ const Container = styled.button<AccessoryButtonProps>`
 const ButtonAndLabelContainer = styled.div`
   display: flex;
   align-items: center;
-  justify-content: center;
-  flex-grow: 1;
-  font-weight: 700;
-  font-size: 14px;
+  font-size: 13px;
   font-family: 'Graphik';
+  font-weight: 600;
   text-align: center;
-  color: #6C757D;
+  color: #adb5bd;
   gap: 8px;
 `;
 
 const StyledSend = styled(Send)`
   width: 12px;
   height: 12px;
-  color: #6C757D;
+  color: #adb5bd;
+  margin-left: 2px;
 `;
 
 const StyledChevronRight = styled(ChevronRight)`
   width: 18px;
   height: 18px;
-  color: #6C757D;
+  color: #adb5bd;
   margin-right: -4px;
 `;
+
+const StyledLogOut = styled(LogOut)`
+  width: 15px;
+  height: 15px;
+  color: #adb5bd;
+  margin-left: 2px;
+`;
+
+const StyledTrash = styled(Trash2)`
+  width: 13px;
+  height: 13px;
+  color: #adb5bd;
+  margin-left: 2px;
+`;
+
+const StyledUserX = styled(UserX)`
+  width: 15px;
+  height: 15px;
+  color: #adb5bd;
+  margin-left: 2px;
+`;