Add click-to-confirm buttons and fix color names

Author: 64json

src/frontend/common/stylesheet/colors.scss

@@ -4,6 +4,7 @@ $theme-light: #505050;
 $color-font: #bbbbbb;
 $color-shadow: rgba(#000000, .2);
 $color-overlay: rgba(#ffffff, .1);
+$color-alert: #f3bd58;
 $color-selected: #2962ff;
 $color-patched: #c51162;
 $color-highlight: #29d;
@@ -15,7 +16,8 @@ $color-highlight: #29d;
   colorFont: $color-font;
   colorShadow: $color-shadow;
   colorOverlay: $color-overlay;
+  colorAlert: $color-alert;
   colorSelected: $color-selected;
-  colorNotified: $color-patched;
+  colorPatched: $color-patched;
   colorHighlight: $color-highlight;
 }

src/frontend/components/Button/index.jsx

@@ -1,18 +1,47 @@
 import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import styles from './stylesheet.scss';
-import { classes } from '/common/util';
 import { Link } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import faExclamationCircle from '@fortawesome/fontawesome-free-solid/faExclamationCircle';
+import { classes } from '/common/util';
+import { Ellipsis } from '/components';
+import styles from './stylesheet.scss';
 
 class Button extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      confirming: false,
+    };
+  }
+
   render() {
-    const { className, children, onClick, to, href, icon, reverse, selected, disabled, primary, active, ...rest } = this.props;
+    let { className, children, to, href, onClick, icon, reverse, selected, disabled, primary, active, confirmNeeded, ...rest } = this.props;
+    const { confirming } = this.state;
+
+    if (confirmNeeded) {
+      if (confirming) {
+        className = classes(styles.confirming, className);
+        icon = faExclamationCircle;
+        children = <Ellipsis key="text">Click to Confirm</Ellipsis>;
+      } else {
+        to = null;
+        href = null;
+        onClick = () => {
+          this.setState({ confirming: true });
+          window.setTimeout(() => {
+            this.setState({ confirming: false });
+          }, 2000);
+        };
+      }
+    }
 
     const iconOnly = !children;
     const props = {
       className: classes(styles.button, reverse && styles.reverse, selected && styles.selected, disabled && styles.disabled, primary && styles.primary, active && styles.active, iconOnly && styles.icon_only, className),
-      onClick: disabled ? null : onClick,
+      to: disabled ? null : to,
       href: disabled ? null : href,
+      onClick: disabled ? null : onClick,
       children: [
         icon && (
           typeof icon === 'string' ?
@@ -26,13 +55,9 @@ class Button extends React.Component {
     };
 
     return to ? (
-      <Link to={to} {...props} />
+      <Link {...props} />
     ) : href ? (
-      /^https?:\/\//i.test(href) ? (
-        <a href={href} rel="noopener" target="_blank" {...props} />
-      ) : (
-        <a href={href} {...props} />
-      )
+      <a rel="noopener" target="_blank" {...props} />
     ) : (
       <div {...props} />
     );

src/frontend/components/Button/stylesheet.scss

@@ -36,20 +36,20 @@
   }
 
   &:hover {
-    background: $color-overlay;
+    background-color: $color-overlay;
   }
 
   &.primary {
     &:hover {
-      background: $color-shadow;
+      background-color: $color-shadow;
 
       &:active {
         box-shadow: 0px 0px 10px 3px #1a1a1a inset;
       }
     }
 
     &.active {
-      background: $color-shadow;
+      background-color: $color-shadow;
       box-shadow: 0px 0px 10px 3px #1a1a1a inset;
       font-weight: bold;
 
@@ -60,7 +60,7 @@
   }
 
   &.selected {
-    background: $color-shadow;
+    background-color: $color-shadow;
 
     &:hover {
       color: rgba($color-font, .8);
@@ -69,7 +69,11 @@
 
   &.disabled {
     cursor: not-allowed;
-    background: $color-shadow;
+    background-color: $color-shadow;
     opacity: 0.6;
   }
+
+  &.confirming {
+    color: $color-alert;
+  }
 }

src/frontend/components/CodeEditor/index.jsx

@@ -97,7 +97,8 @@ class CodeEditor extends React.Component {
           }
           <div className={styles.empty}>
             <div className={styles.empty} />
-            <Button className={styles.delete} icon={faTrashAlt} primary onClick={() => onDeleteFile(file)}>
+            <Button className={styles.delete} icon={faTrashAlt} primary onClick={() => onDeleteFile(file)}
+                    confirmNeeded>
               <Ellipsis>Delete File</Ellipsis>
             </Button>
           </div>

src/frontend/components/CodeEditor/stylesheet.scss

@@ -14,7 +14,7 @@
     min-height: 0 !important;
 
     .current_line_marker {
-      background: rgba($color-highlight, 0.4);
+      background-color: rgba($color-highlight, 0.4);
       border: 1px solid $color-highlight;
       position: absolute;
       width: 100% !important;
@@ -24,10 +24,10 @@
 
     @keyframes line_highlight {
       from {
-        background: rgba($color-highlight, 0.1);
+        background-color: rgba($color-highlight, 0.1);
       }
       to {
-        background: rgba($color-highlight, 0.4);
+        background-color: rgba($color-highlight, 0.4);
       }
     }
   }

src/frontend/components/Header/index.jsx

@@ -129,7 +129,7 @@ class Header extends React.Component {
           <div className={styles.section}>
             <Button icon={faSave} primary disabled={!gistId || this.isGistSaved()}
                     onClick={() => this.saveGist()}>Save</Button>
-            <Button icon={faTrashAlt} primary disabled={!gistId} onClick={() => this.deleteGist()}>Delete</Button>
+            <Button icon={faTrashAlt} primary disabled={!gistId} onClick={() => this.deleteGist()} confirmNeeded>Delete</Button>
             <Button icon={faShare} primary disabled={gistId === 'new'} onClick={() => this.shareLink()}>Share</Button>
             <Button icon={faExpandArrowsAlt} primary
                     onClick={() => this.handleClickFullScreen()}>Fullscreen</Button>

src/frontend/components/Header/stylesheet.scss

@@ -43,7 +43,7 @@
         white-space: nowrap;
 
         &:hover {
-          background: $color-shadow;
+          background-color: $color-shadow;
         }
 
         .range {
@@ -73,7 +73,7 @@
             margin-left: -3px;
             margin-top: -3px;
             appearance: none;
-            background: $color-font;
+            background-color: $color-font;
             cursor: pointer;
             display: block;
             position: absolute;

src/frontend/components/ToastContainer/stylesheet.scss

@@ -17,11 +17,11 @@
 
   &.success {
     border-color: rgb(0, 150, 0);
-    background: rgba(0, 120, 0, .8);
+    background-color: rgba(0, 120, 0, .8);
   }
 
   &.error {
     border-color: rgb(150, 0, 0);
-    background: rgba(120, 0, 0, .8);
+    background-color: rgba(120, 0, 0, .8);
   }
 }

src/frontend/core/renderers/ChartRenderer/index.jsx

@@ -10,7 +10,7 @@ class ChartRenderer extends Array1DRenderer {
     const chartData = {
       labels: row.map(col => `${col.value}`),
       datasets: [{
-        backgroundColor: row.map(col => col.patched ? styles.colorNotified : col.selected ? styles.colorSelected : styles.colorFont),
+        backgroundColor: row.map(col => col.patched ? styles.colorPatched : col.selected ? styles.colorSelected : styles.colorFont),
         data: row.map(col => col.value),
       }],
     };