Final tweaks to the UI

README.md

@@ -39,7 +39,8 @@ This project was only possible with these awesome technologies !
 
 # Issues
 
-If you find any bugs or issues with this application feel free to report them in the [issue section](https://github.com/alexanderwe/checksum-validator/issues)
+If you find any bugs or issues with this application feel free to report them in the [issue section](https://github.com/alexanderwe/checksum-validator/issues).
+In case you want to do some local debugging, open the logs via `Help --> Open Logs` and take a look at it.
 
 
 # License

app/main/src/TouchBarBuilder.ts

@@ -14,7 +14,7 @@ export default class TouchBarBuilder {
     public build(): TouchBar {
         const check: Electron.TouchBarConstructorOptions = {
             items: [new TouchBarButton({
-                backgroundColor: '#00c4a7',
+                backgroundColor: '#8b4d93',
                 click: () => {
                     this.ipcHandler.initCheck();
                 },

app/package.json

@@ -1,6 +1,6 @@
 {
     "name": "checksum-validator",
-    "version": "0.1.2",
+    "version": "0.1.3",
     "description": "Small Electron application to validate checksums.",
     "main": "main/build/main.js",
     "author": "Alexander Weiss",

app/renderer/src/components/Checksum.component.tsx

@@ -1,6 +1,6 @@
+import { ipcRenderer } from 'electron';
 import * as React from 'react'; // ES6
 import Transition from 'react-transition-group/Transition';
-const { ipcRenderer } = require('electron');
 
 import Button from './bulma/element/Button.component';
 import Icon from './bulma/element/Icon.component';
@@ -119,7 +119,7 @@ class ChecksumValidator extends React.Component<any, IChecksumValidatorState> {
         });
     }
 
-    public closeNotification = () => {
+    public closeNotification = (): any => {
         this.setState({
             notificationOpen: false,
         });
@@ -200,7 +200,7 @@ class ChecksumValidator extends React.Component<any, IChecksumValidatorState> {
                         </span>
                         <Icon name={'nc-security'} isSmall isLeft />
                     </Form.Field>
-                    <Button isPrimary onClick={() => this.check()} icon={this.state.loading ? <Icon name={'nc-dots'} isSmall spin style={{ marginRight: '10px' }} /> : null}>
+                    <Button isOutLined isPrimary onClick={() => this.check()} icon={this.state.loading ? <Icon name={'nc-dots'} isSmall spin style={{ marginRight: '10px' }} /> : null}>
                         Check
                     </Button>
                 </Section>

app/renderer/src/styles/app.scss

@@ -2,9 +2,11 @@
 @import '../../../node_modules/bulma/sass/utilities/initial-variables';
 
 // Customization
-$green: #4da167;
-$red: #db473f;
-$primary: #08605f;
+$green: #62c462;
+$red: #ee5f5b;
+$yellow: #fff457;
+$orange: #f89406;
+$primary: #8b4d93;
 
 // Base
 
@@ -16,9 +18,8 @@ body {
 input {
     -webkit-app-region: no-drag;
 }
-
-.error {
-    color: #fe3b61;
+::-webkit-scrollbar {
+    display: none;
 }
 
 // Layout
@@ -32,9 +33,7 @@ input {
 .notification {
     border-radius: 0px !important;
     .delete {
-        &:hover {
-            cursor: pointer;
-        }
+        cursor: pointer;
     }
 }
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "checksum-validator",
-    "version": "0.1.2",
+    "version": "0.1.3",
     "description": "Small Electron application to validate checksum.",
     "main": "main.js",
     "scripts": {

webpack.config.js

@@ -1,15 +1,14 @@
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const DashboardPlugin = require('webpack-dashboard/plugin');
-var CopyWebpackPlugin = require('copy-webpack-plugin');
-var nodeExternals = require('webpack-node-externals');
-var path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const nodeExternals = require('webpack-node-externals');
+const path = require('path');
 
-// TODO: check replacement of loader with use
-var config = {
+let config = {
     module: {}
 };
 
-var rendererConfig = Object.assign({}, config, {
+let rendererConfig = Object.assign({}, config, {
     watch: true,
     target: 'electron-renderer',
     entry: './app/renderer/src/entry.tsx',
@@ -75,7 +74,7 @@ var rendererConfig = Object.assign({}, config, {
     ]
 });
 
-var mainConfig = Object.assign({}, config, {
+let mainConfig = Object.assign({}, config, {
     entry: './app/main/src/main.ts',
     target: 'electron-main',
     node: {