Merge pull request #1280 from HerrEmil/frame-button-interactions

Frame button interaction changes

src/browser/components/ConfirmationDialog.tsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright (c) "Neo4j"
+ * Neo4j Sweden AB [http://neo4j.com]
+ *
+ * This file is part of Neo4j.
+ *
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import { Button, Modal } from 'semantic-ui-react'
+
+interface ConfirmationDialogProps {
+  cancelLabel?: string
+  confirmLabel?: string
+  onClose: () => void
+  onConfirm: () => void
+  open: boolean
+}
+
+function ConfirmationDialog({
+  cancelLabel = 'Cancel',
+  children,
+  confirmLabel = 'OK',
+  onClose,
+  onConfirm,
+  open
+}: React.PropsWithChildren<ConfirmationDialogProps>): JSX.Element {
+  return (
+    <Modal
+      closeOnEscape={true}
+      onClose={() => onClose()}
+      open={open}
+      size="tiny"
+      style={{ fontSize: '16px', lineHeight: '1.5' }}
+    >
+      <Modal.Content>{children}</Modal.Content>
+      <Modal.Actions style={{ background: 'white', border: 'none' }}>
+        <Button basic color="grey" onClick={() => onClose()}>
+          {cancelLabel}
+        </Button>
+        <Button
+          color="twitter"
+          content={confirmLabel}
+          onClick={() => onConfirm()}
+        />
+      </Modal.Actions>
+    </Modal>
+  )
+}
+
+export default ConfirmationDialog

src/browser/components/icons/Icons.tsx

@@ -41,9 +41,9 @@ import arrowLeft1 from 'icons/arrow-left-1.svg'
 import arrowRight1 from 'icons/arrow-right-1.svg'
 import skipPrev from 'icons/skip-prev.svg'
 import file from 'icons/file.svg'
-import save_file from 'icons/save_file.svg'
 import save_favorite from 'icons/save_favorite.svg'
 import run_icon from 'icons/run_icon.svg'
+import stop_icon from 'icons/stop_icon.svg'
 import help from 'icons/help.svg'
 
 const inactive = `
@@ -53,9 +53,6 @@ const inactive = `
 const green = `
   color: #4cd950;
 `
-const lightGreen = `
-  color: #61B88C
-`
 
 const successGreen = `
   color: #4cd950;
@@ -274,6 +271,7 @@ export const RefreshIcon = () => (
   <IconContainer icon={buttonRefreshArrow} width={12} />
 )
 export const RunIcon = () => <IconContainer icon={run_icon} width={12} />
+export const StopIcon = () => <IconContainer icon={stop_icon} width={12} />
 
 export const CloseIcon = () => <IconContainer icon={close} width={12} />
 export const UpIcon = () => <IconContainer className="sl-chevron-up" />
@@ -282,10 +280,7 @@ export const DoubleUpIcon = () => <IconContainer className="sl-double-up" />
 export const DoubleDownIcon = () => <IconContainer className="sl-double-down" />
 export const PinIcon = () => <IconContainer icon={pin} width={12} />
 export const SaveFavorite = () => (
-  <IconContainer inactiveStyle={lightBlue} icon={save_favorite} width={12} />
-)
-export const SaveFile = () => (
-  <IconContainer inactiveStyle={lightGreen} icon={save_file} width={12} />
+  <IconContainer icon={save_favorite} width={12} />
 )
 
 export const MinusIcon = () => (

src/browser/index.html

@@ -13,9 +13,6 @@
         width: 100%;
         height: 100%;
       }
-      a {
-        color: #68bdf4 !important;
-      }
     </style>
     <link
       rel="apple-touch-icon"

src/browser/modules/DBMSInfo/styled.tsx

@@ -84,7 +84,7 @@ export const StyledValueUCFirst = styled(StyledValue)`
 
 export const StyledLink = styled.a`
   cursor: pointer;
-  color: #fff;
+  color: #4183c4;
   &:hover {
     color: #bcc0c9;
     text-decoration: none;