From 7cb1051634f0063c1c1be328156ad61889a93671 Mon Sep 17 00:00:00 2001
From: Eric Reynolds <reynolek@gmail.com>
Date: Thu, 27 May 2021 02:41:25 -0700
Subject: [PATCH] INS-674 - First pass at making the send button more visible
 (#3414)

* INS-674 - First pass at making the send button more visible

* [wip] adds rect for send button

* Update colors in the SVG to match send button

* Update the gRPC send button to also use theme colors

* Adding left margin to send button

Co-authored-by: Eric Reynolds <eric.reynolds@konghq.com>
Co-authored-by: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
Co-authored-by: Opender Singh <opender.singh@konghq.com>
---
 .../app/ui/components/buttons/grpc-send-button.tsx           | 3 ++-
 packages/insomnia-app/app/ui/components/settings/theme.tsx   | 4 ++++
 .../insomnia-app/app/ui/css/components/request-url-bar.less  | 5 ++++-
 packages/insomnia-components/src/button/button.tsx           | 5 +++++
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/insomnia-app/app/ui/components/buttons/grpc-send-button.tsx b/packages/insomnia-app/app/ui/components/buttons/grpc-send-button.tsx
index 0e09def08..5a7ec9e02 100644
--- a/packages/insomnia-app/app/ui/components/buttons/grpc-send-button.tsx
+++ b/packages/insomnia-app/app/ui/components/buttons/grpc-send-button.tsx
@@ -12,8 +12,9 @@ interface Props {
 
 const buttonProps: ButtonProps = {
   className: 'tall',
+  bg: 'surprise',
   size: 'medium',
-  variant: 'text',
+  variant: 'contained',
   radius: '0',
 };
 
diff --git a/packages/insomnia-app/app/ui/components/settings/theme.tsx b/packages/insomnia-app/app/ui/components/settings/theme.tsx
index 842a3d0f1..851007a1d 100644
--- a/packages/insomnia-app/app/ui/components/settings/theme.tsx
+++ b/packages/insomnia-app/app/ui/components/settings/theme.tsx
@@ -69,6 +69,10 @@ class Theme extends PureComponent<Props, State> {
               height="10%"
               className="theme--pane__header--sub bg-fill"
             />
+            {/* Send Button */}
+            <g>
+              <rect x="53%" y="10%" width="9%" height="10%" className="surprise-fill" />
+            </g>
           </g>
 
           {/* Sidebar */}
diff --git a/packages/insomnia-app/app/ui/css/components/request-url-bar.less b/packages/insomnia-app/app/ui/css/components/request-url-bar.less
index dc9706ba7..f74d07b8c 100644
--- a/packages/insomnia-app/app/ui/css/components/request-url-bar.less
+++ b/packages/insomnia-app/app/ui/css/components/request-url-bar.less
@@ -26,8 +26,11 @@
   .urlbar__send-btn {
     padding-right: var(--padding-md);
     padding-left: var(--padding-md);
+    margin-left: 0.75em;
     min-width: 5em;
     text-align: center;
+    background: var(--color-surprise);
+    color: #fff;
   }
 
   form {
@@ -48,7 +51,7 @@
 
   button:focus,
   button:hover {
-    background-color: var(--hl-xs);
+    filter: brightness(0.8);
   }
 
   & > .dropdown > button {
diff --git a/packages/insomnia-components/src/button/button.tsx b/packages/insomnia-components/src/button/button.tsx
index 31e307bd6..f9e6e334f 100644
--- a/packages/insomnia-components/src/button/button.tsx
+++ b/packages/insomnia-components/src/button/button.tsx
@@ -8,12 +8,17 @@ export const ButtonSizeEnum = {
   Medium: 'medium',
 } as const;
 
+// These variants determine how the `bg` color variable is handled
+// Outlined sets the `bg` color as an outline
+// Contained sets the `bg` color as the background color
+// Text sets the `bg` color as the text color
 export const ButtonVariantEnum = {
   Outlined: 'outlined',
   Contained: 'contained',
   Text: 'text',
 } as const;
 
+// Sets the `bg` color to a themed color
 export const ButtonThemeEnum = {
   Default: 'default',
   Surprise: 'surprise',