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>

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',
 };
 

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 */}

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 {

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',