From 6aed7259caee9d26c3439678db40a68ee603fb33 Mon Sep 17 00:00:00 2001
From: Alex Soong <alexsoong91@gmail.com>
Date: Mon, 16 Oct 2023 23:58:38 -0700
Subject: [PATCH] Add new type of accessory button to add to table rows to
 clarify next actions to take

---
 .../src/components/Swap/OnRamperIntentRow.tsx |  18 ++-
 .../src/components/common/AccessoryButton.tsx | 132 ++++++++++++++++++
 2 files changed, 146 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/common/AccessoryButton.tsx

diff --git a/client/src/components/Swap/OnRamperIntentRow.tsx b/client/src/components/Swap/OnRamperIntentRow.tsx
index d3555972c..6fe3d2407 100644
--- a/client/src/components/Swap/OnRamperIntentRow.tsx
+++ b/client/src/components/Swap/OnRamperIntentRow.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components/macro'
 import { ChevronRight, Send } from 'react-feather';
 
 import { SVGIconThemed } from '../SVGIcon/SVGIconThemed';
+import { AccessoryButton } from '@components/common/AccessoryButton';
 
 
 interface IntentRowProps {
@@ -109,8 +110,17 @@ export const IntentRow: React.FC<IntentRowProps> = ({
       </IntentDetailsContainer>
 
       <ActionsContainer>
-        <StyledSend onClick={handleSendClick}/>
-        <StyledChevronRight onClick={handleCompleteOrderClick}/>
+        <AccessoryButton
+          onClick={handleSendClick}
+          height={36}
+          title={'Send'}
+          icon={'send'}/>
+
+        <AccessoryButton
+          onClick={handleCompleteOrderClick}
+          height={36}
+          title={'Complete'}
+          icon={'chevronRight'}/>
       </ActionsContainer>
     </Container>
   );
@@ -134,10 +144,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;
+  gap: 12px;
 `;
 
 const AmountLabelsContainer = styled.div`
diff --git a/client/src/components/common/AccessoryButton.tsx b/client/src/components/common/AccessoryButton.tsx
new file mode 100644
index 000000000..68821189e
--- /dev/null
+++ b/client/src/components/common/AccessoryButton.tsx
@@ -0,0 +1,132 @@
+import React from "react";
+import styled, { css } from 'styled-components';
+import { ChevronRight, Send } from 'react-feather';
+
+import Spinner from "@components/common/Spinner";
+
+interface AccessoryButtonProps {
+  fullWidth?: boolean;
+  title?: string;
+  height?: number;
+  disabled?: boolean;
+  loading?: boolean;
+  onClick?: () => void;
+  children?: React.ReactNode;
+  icon?: "send" | "chevronRight";
+}
+
+export const AccessoryButton: React.FC<AccessoryButtonProps> = ({
+  fullWidth = false,
+  title = '',
+  height = 48,
+  disabled = false,
+  loading = false,
+  onClick,
+  children,
+  icon
+}) => {
+  
+  /*
+   * Helpers
+   */
+
+  const getIcon = (iconName: "send" | "chevronRight") => {
+    switch (iconName) {
+      case "send":
+        return <StyledSend />;
+      case "chevronRight":
+        return <StyledChevronRight />;
+      default:
+        return null;
+    }
+  };
+  
+  /*
+   * Component
+   */
+
+  return (
+    <Container
+      fullWidth={fullWidth}
+      height={height}
+      disabled={disabled || loading}
+      onClick={onClick}
+    >
+      <ButtonAndLabelContainer>
+        {loading ? <Spinner /> : (
+          <>
+            {title && <span>{title}</span>}
+            {icon && getIcon(icon)}
+            {children}
+          </>
+        )}
+      </ButtonAndLabelContainer>
+    </Container>
+  );
+};
+
+const Container = styled.button<AccessoryButtonProps>`
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+  height: ${({ height }) => height}px;
+  border-radius: 18px;
+  background: transparent;
+  border: 1px solid #6C757D;
+  padding: 8px 16px;
+  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;
+  }
+
+  &:active:not([disabled]) {
+    background: #bc3035;
+    box-shadow: inset 0px -8px 0px rgba(0, 0, 0, 0.16);
+  }
+
+  ${({ disabled }) => 
+    disabled && css`
+      opacity: 0.5;
+      cursor: not-allowed;
+      &:hover, &:active {
+        background: #df2e2d; // Reset hover and active states for disabled buttons
+        box-shadow: inset 0px -6px 0px rgba(0, 0, 0, 0.16);
+      }
+    `
+  }
+
+  ${({ loading }) => 
+    loading && css`
+      cursor: wait;
+      background: #dedede;
+    `
+  }
+`;
+
+const ButtonAndLabelContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  font-weight: 700;
+  font-size: 14px;
+  font-family: 'Graphik';
+  text-align: center;
+  color: #6C757D;
+  gap: 8px;
+`;
+
+const StyledSend = styled(Send)`
+  width: 12px;
+  height: 12px;
+  color: #6C757D;
+`;
+
+const StyledChevronRight = styled(ChevronRight)`
+  width: 18px;
+  height: 18px;
+  color: #6C757D;
+  margin-right: -4px;
+`;