Made sandbox delete button and alert popup confirm button red. (codesandbox#767)

Author: lbogdan

packages/app/src/app/components/Alert/index.js

@@ -12,7 +12,7 @@ function Alert({ title, body, onCancel, onDelete }) {
         <Button small block secondary onClick={onCancel}>
           Cancel
         </Button>
-        <Button small block primary onClick={onDelete}>
+        <Button small block danger onClick={onDelete}>
           Delete
         </Button>
       </Buttons>

packages/app/src/app/components/Button/elements.js

@@ -2,7 +2,8 @@ import styled, { css, keyframes } from 'styled-components';
 import Link from 'react-router-dom/Link';
 import theme from 'common/theme';
 
-const getBackgroundColor = ({ disabled, red, secondary }) => {
+const getBackgroundColor = ({ disabled, red, secondary, danger }) => {
+  if (danger) return `background-color: ${theme.dangerBackground()}`;
   if (disabled) return `background: ${theme.background2.darken(0.1)()}`;
   if (secondary) return `background: #3A4B5D`;
   if (red)

packages/app/src/app/pages/Sandbox/Editor/Workspace/SandboxActions/elements.js

@@ -17,3 +17,15 @@ export const PatronMessage = styled.div`
   color: rgba(255, 255, 255, 0.6);
   font-size: 0.875rem;
 `;
+
+export const CenteredText = styled.div`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+
+  svg {
+    opacity: 0.8;
+    margin-right: 0.25rem;
+  }
+`;

packages/app/src/app/pages/Sandbox/Editor/Workspace/SandboxActions/index.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { inject, observer } from 'mobx-react';
+import TrashIcon from 'react-icons/lib/fa/trash';
 
 import Button from 'app/components/Button';
 import { WorkspaceInputContainer, WorkspaceSubtitle } from '../elements';
 
-import { PrivacySelect, PatronMessage } from './elements';
+import { PrivacySelect, PatronMessage, CenteredText } from './elements';
 
 function SandboxActions({ store, signals }) {
   const sandbox = store.editor.currentSandbox;
@@ -41,6 +42,7 @@ function SandboxActions({ store, signals }) {
         <Button
           block
           small
+          danger
           style={{
             margin: '0.75rem 0.25rem',
             boxSizing: 'border-box',
@@ -51,7 +53,10 @@ function SandboxActions({ store, signals }) {
             })
           }
         >
-          Delete Sandbox
+          <CenteredText>
+            <TrashIcon />
+            <span>Delete Sandbox</span>
+          </CenteredText>
         </Button>
       </WorkspaceInputContainer>
     </div>

packages/common/theme.js

@@ -58,6 +58,7 @@ const theme = createTheme({
   green: '#5da700',
   redBackground: '#400000',
   red: '#F27777',
+  dangerBackground: '#DC3545',
 });
 
 export default theme;