mirrors/insomnia
1
0
Fork 0
mirror of https://github.com/Kong/insomnia synced 2024-11-08 06:39:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

INS-674 - First pass at making the send button more visible (#3414)

Browse Source 
* 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>
This commit is contained in:
Eric Reynolds 2021-05-27 02:41:25 -07:00 committed by Opender Singh
parent 25ac42eb23
commit 4c1475936c
4 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/insomnia-app/app/ui/components/buttons/grpc-send-button.tsx
View File

@ -12,8 +12,9 @@ interface Props {
const buttonProps: ButtonProps = {
className: 'tall',
bg: 'surprise',
size: 'medium',
variant: 'text',
variant: 'contained',
radius: '0',
};

4
packages/insomnia-app/app/ui/components/settings/theme.tsx
View File

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

5
packages/insomnia-app/app/ui/css/components/request-url-bar.less
View File

@ -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 {

5
packages/insomnia-components/src/button/button.tsx
View File

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