Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Destructive Action Button Color #1794

Merged
merged 2 commits into from May 7, 2020
Merged

Destructive Action Button Color #1794

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2dbf352
destructive buttons should be a different color
shreddedbacon Apr 16, 2020
1654e04
use a variant property
shreddedbacon Apr 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 3 additions & 2 deletions services/ui/src/components/BillingModifiers/AllBillingModifiers.js
View file
Open in desktop
Expand Up @@ -75,13 +75,14 @@ const AllBillingModifiers = ({group, modifiers, month}) => (
variables: { input: { id } }
})
}
variant='red'
>
Delete
</Button>
);
}}
</Mutation>
</div>
</div>
</div>
)
)}
Expand All @@ -97,7 +98,7 @@ const AllBillingModifiers = ({group, modifiers, month}) => (
border-radius: 3px;
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.03);
}

.header {
@media ${bp.wideUp} {
align-items: center;
Expand Down
26 changes: 24 additions & 2 deletions services/ui/src/components/Button/index.js
View file
Open in desktop
@@ -1,7 +1,7 @@
import React from 'react';
import { bp, color } from 'lib/variables';

const Button = ({ action = null, href = null, disabled, children }) => {
const Button = ({ action = null, href = null, disabled, children, variant }) => {
const ButtonElement = href ? 'a' : 'button';
const onClick = action
? action
Expand All @@ -17,7 +17,7 @@ const Button = ({ action = null, href = null, disabled, children }) => {
onClick={onClick}
href={href}
disabled={disabled}
className={`btn ${disabled ? 'btn--disabled' : ''}`}
className={`${variant ? `btn-${variant}` : 'btn'} ${disabled ? 'btn--disabled' : ''} `}
>
{children}
</ButtonElement>
Expand All @@ -39,6 +39,28 @@ const Button = ({ action = null, href = null, disabled, children }) => {
background-color: ${color.blue};
}

&.btn--disabled {
background-color: ${color.lightestGrey};
color: ${color.darkGrey};
cursor: not-allowed;
}
}
.btn-red {
display: inline-block;
background-color: ${color.lightRed};
border: none;
border-radius: 3px;
color: ${color.white};
cursor: pointer;
padding: 10px 30px;
@media ${bp.tinyUp} {
align-self: auto;
}

&:hover {
background-color: ${color.red};
}

&.btn--disabled {
background-color: ${color.lightestGrey};
color: ${color.darkGrey};
Expand Down
3 changes: 2 additions & 1 deletion services/ui/src/components/DeleteConfirm/index.js
View file
Open in desktop
Expand Up @@ -19,7 +19,7 @@ export const DeleteConfirm = ({
}) => {
return (
<React.Fragment>
<Button action={openModal}>
<Button variant='red' action={openModal}>
Delete
</Button>
<Modal
Expand All @@ -42,6 +42,7 @@ export const DeleteConfirm = ({
<Button
disabled={inputValue !== deleteName}
action={onDelete}
variant='red'
>
Delete
</Button>
Expand Down
6 changes: 3 additions & 3 deletions services/ui/src/components/SshKeys/index.js
View file
Open in desktop
Expand Up @@ -29,7 +29,7 @@ const SshKeys = ({me: { id, email, sshKeys: keys }}) => {
<div className="delete">
<Mutation mutation={DeleteSshKeyById} refetchQueries={[{ query: Me}]}>
{(deleteSshKeyById, { loading, called, error, data }) => {

if (error) {
return <div>{error.message}</div>;
}
Expand All @@ -39,7 +39,7 @@ const SshKeys = ({me: { id, email, sshKeys: keys }}) => {
}

return (
<Button action={() => deleteSshKeyById({
<Button variant='red' action={() => deleteSshKeyById({
variables: {
input: {
id: key.id,
Expand Down Expand Up @@ -96,7 +96,7 @@ const SshKeys = ({me: { id, email, sshKeys: keys }}) => {
width: 55%;
}
}

}
}

Expand Down
2 changes: 2 additions & 0 deletions services/ui/src/lib/variables.js
View file
Open in desktop
Expand Up @@ -21,6 +21,8 @@ export const color = {
lightBlue: '#4c84ff',
blue: '#4578e6',
brightBlue: '#2bc0d8',
lightRed: '#dc3545',
red: '#c82333',
};

export const bp = {
Expand Down