Merge pull request #17 from freedomofpress/visual-update

Visual update

.gitignore

@@ -10,3 +10,5 @@ release
 
 # External roles are included from Ansible Galaxy, don't version control.
 ansible/roles/geerlingguy.nodejs
+
+secret-shard*

package.json

@@ -23,10 +23,7 @@
   },
   "build": {
     "productName": "Sunder",
-    "asar": false,
-    "linux": {
-      "icon": "build/icons/app.icns"
-    }
+    "asar": false
   },
   "bin": {
     "electron": "./node_modules/.bin/electron",

src/components/BackButton.js

@@ -1,16 +1,15 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Button from './Button';
 
 
 export default class BackButton extends Component {
   static contextTypes = { router: PropTypes.object }
 
   render() {
     return (
-      <Button className="btn-back" onClick={this.context.router.goBack}>
-        Back
-      </Button>
+      <a className="btn-back" onClick={this.context.router.goBack}>
+        <i className="fa fa-chevron-left" /> Back
+      </a>
     );
   }
 }

src/components/Button.scss

@@ -43,6 +43,9 @@ $buttonDisabledColor: rgba(200, 200, 200, 0.5);
   background-color: $whiteColor;
   color: $primaryBackgroundColor;
   fill: $primaryBackgroundColor;
+  path {
+    fill: $primaryBackgroundColor;
+  }
 }
 
 .btn:active:not(.disabled) {
@@ -116,16 +119,26 @@ $buttonDisabledColor: rgba(200, 200, 200, 0.5);
   width: 100%;
   max-width: $xlargeButtonMaxWidth;
   font-size: 20px;
+  border-color: $borderColor;
+  background-color: $purple;
 
   .btn-icon-container {
     font-size: 40px;
     width: $xlargeButtonIconWidth;
+    border-right: 1px solid $borderColor;
   }
 
   .btn-content-container {
     margin-left: $xlargeButtonIconWidth;
     text-transform: uppercase;
     font-weight: bold;
-    padding: 40px 0;
+    padding: 20px;
+    text-align: center;
+  }
+}
+
+.btn-back {
+  i {
+    margin-right: 8px;
   }
 }

src/components/Export.js

@@ -5,7 +5,6 @@ import Panel from './Panel';
 import Button from './Button';
 import CopyButton from './CopyButton';
 import SaveFileButton from './SaveFileButton';
-import PuzzleIcon from './PuzzleIcon';
 import Modal from './Modal';
 import VeraCryptButton from './VeraCryptButton';
 import { detectVeraCrypt } from '../lib/veracrypt';
@@ -48,12 +47,6 @@ export default class Export extends Component {
     return (
       <div className="container flex-column export">
         <div className="success-container">
-          <div className="success-icon-container align-center">
-            <PuzzleIcon />
-            <div className="success-message align-center">
-              <i className="fa fa-check" />
-            </div>
-          </div>
           <div className="export-explanation">
             <p>
               <strong>{'What\'s next? '}</strong>

src/components/Export.scss

@@ -86,7 +86,7 @@
 
   .info {
     padding: 10px;
-    color: $borderColor;
+    color: darken($whiteColor, 40%);
   }
 }
 

src/components/Home.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import './Home.scss';
-import PuzzleIcon from 'src/components/PuzzleIcon';
+import Icon from 'src/components/Icon';
 import Button from './Button';
 
 export default class Home extends Component {
@@ -13,16 +13,16 @@ export default class Home extends Component {
         <h1 className="home-title align-center">Sunder</h1>
         <div className="home-actions align-center">
           <Button type="xlarge"
-            icon={<PuzzleIcon className="split" />}
+            icon={<Icon />}
             id="split-button"
             onClick={() => this.context.router.push('split')}>
-            Split a secret
+            Sunder It
           </Button>
           <Button type="xlarge"
-            icon={<PuzzleIcon />}
+            icon={<Icon type="recover" />}
             id="recover-button"
             onClick={() => this.context.router.push('recover')}>
-            Recover a secret
+            Recover It
           </Button>
         </div>
         <p className="home-explanation">

src/components/Home.scss

@@ -5,39 +5,34 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  background-color: $blueGray;
 }
 
 .home-actions {
   margin-bottom: 20px;
 
-  i {
-    color: $accentColor;
+  .btn ~ .btn {
+    margin-left: 0;
   }
 
-  path {
-    fill: $accentColor;
+  i {
+    color: $accentColor;
   }
 
   .btn:hover i {
     color: $primaryBackgroundColor;
   }
-
-  .btn:hover path {
-    fill: $primaryBackgroundColor;
-  }
 }
 
 .home-title {
-  font-family: "Courier New", monospace;
   font-size: 50px;
   margin-bottom: 60px;
-  text-transform: lowercase;
 }
 
 .home-explanation {
   text-align: center;
   max-width: $xlargeButtonMaxWidth;
   line-height: 28px;
   font-size: 18px;
-  color: $gray;
+  color: $whiteColor;
 }

src/components/HomeButton.js

@@ -1,17 +1,15 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Button from './Button';
 
 
 export default class HomeButton extends Component {
   static contextTypes = { router: PropTypes.object }
 
   render() {
     return (
-      <Button className="btn-back"
-        onClick={() => this.context.router.push('/')}>
-        Home
-      </Button>
+      <a className="btn-back" onClick={() => this.context.router.push('/')}>
+        <i className="fa fa-chevron-left" /> Home
+      </a>
     );
   }
 }

src/components/Icon.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Icon.scss';
+
+
+/* eslint-disable max-len */
+export default function Icon(props) {
+  let className = '';
+  if (props.type === 'recover') {
+    className += 'recover-icon';
+  }
+  if (props.type === 'spin') {
+    className += ' spin';
+  }
+
+  return (
+    <svg className={`${className} icon`} viewBox="0 0 180 180" version="1.1">
+      <g id="Sunder" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="Logo" transform="translate(-60.000000, -60.000000)">
+          <g id="logo" transform="translate(60.000000, 60.000000)">
+            <rect id="bg" fill="transparent" x="0" y="0" width="180" height="180" rx="38"></rect>
+            <path d="M85.9019093,91.1244232 C82.4225743,89.5593138 80,86.0625682 80,82 C80,76.4771525 84.4771525,72 90,72 C95.5228475,72 100,76.4771525 100,82 C100,86.0625682 97.5774257,89.5593138 94.0980907,91.1244232 L98,108 L82,108 L85.9019093,91.1244232 Z" id="keyhole" fill="#FFD719"></path>
+            <path d="M107.346948,123.053273 C120.303636,108.657917 129.352857,90.9224416 133.03591,69.1678319 C140.384854,71.2715974 147.125236,73.9065375 153.01812,76.9941535 C142.680491,127.750112 108.300053,152.337217 95.27604,160 L95.27604,134.490535 C99.388122,131.183123 103.455321,127.377244 107.346948,123.053273 Z" id="Path" fill="#7864FF"></path>
+            <path d="M84.72,159.751421 C71.30484,151.79296 37.24884,127.105115 26.97792,76.8371561 C32.88228,73.7783229 39.62616,71.1682407 46.96932,69.0854082 C50.67192,90.8073102 59.77992,108.540169 72.83076,122.957766 C76.66404,127.19408 80.66892,130.93716 84.72,134.202707 L84.72,159.751421 L84.72,159.751421 Z" id="Path" fill="#19F5FF"></path>
+            <path d="M25.19988,66.0174169 C24.4224,59.8264851 24,53.2888507 24,46.3914306 C40.401,37.7133979 63.90888,32 90,32 C116.11356,32 139.59768,37.7003148 156,46.3914306 C156,53.3411832 155.57496,59.9259168 154.79352,66.1587146 C137.751,58.0026984 115.46808,53.2090437 91.9074,52.9447647 C91.27248,52.9369148 90.63756,52.9329899 90,52.9329899 L89.93796,52.9329899 L89.84688,52.9329899 C65.69616,52.9329899 42.711,57.7174864 25.19988,66.0174169 Z" id="Path" fill="#FF910A"></path>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+Icon.propTypes = { type: PropTypes.string };

src/components/PuzzleIcon.scss → src/components/Icon.scss

@@ -1,6 +1,6 @@
 @import '~src/shared/variables';
 
-.puzzle {
+.icon {
   display: inline-block;
   width: 100%;
   height: auto;
@@ -10,17 +10,19 @@
   }
 }
 
-.puzzle.split path {
-  transform-origin: center;
-  transform: scale(0.7) rotate(180deg);
+.icon.recover-icon {
+  path {
+    fill: #FFD719
+  }
 }
 
-.puzzle.spin path:nth-child(4n){
+.icon.spin path:nth-child(3n){
   fill: $accentColor;
 }
 
-.puzzle.spin {
-  animation: spin 2s infinite steps(4);
+.icon.spin #keyhole {
+  animation: spin 2s infinite;
+  transform-origin: 50% 50%;
 }
 
 

src/components/Layout.js

@@ -1,15 +1,23 @@
 import React from 'react';
+import Icon from 'src/components/Icon';
 import PropTypes from 'prop-types';
 import './Layout.scss';
 
 
 export default function Layout(props) {
-  const { header, children } = props;
+  const { header, children, title } = props;
   return (
     <div className="layout-container">
       <div className="header">
+        <div className="icon-container">
+          <Icon />
+        </div>
+        <span className="app-title">Sunder</span>
+        <span className="app-title-separator">|</span>
+        <span className="app-sub-title">{title}</span>
+      </div>
+      <div className="layout-nav">
         {header}
-        <h1 className="app-title">Sunder</h1>
       </div>
       <div className="content-container">
         {children}
@@ -20,5 +28,6 @@ export default function Layout(props) {
 
 Layout.propTypes = {
   header: PropTypes.element.isRequired,
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired
 };

src/components/Layout.scss

@@ -1,4 +1,7 @@
+@import '~src/shared/variables';
+
 $headerHeight: 100px;
+$navHeight: 40px;
 
 .layout-container {
   width: 100%;
@@ -11,23 +14,43 @@ $headerHeight: 100px;
   padding: 20px 40px;
 }
 
+.icon-container {
+  max-width: 50px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 25px;
+}
+
+.app-title {
+  font-size: 25px;
+  vertical-align: middle;
+  pointer-events: none;
+}
+
+.app-title-separator {
+  font-size: 25px;
+  vertical-align: middle;
+  color: $lightGray;
+  padding: 0 15px;
+}
+
+.app-sub-title {
+  color: $lightGray;
+  font-size: 18px;
+  vertical-align: middle;
+}
+
+.layout-nav {
+  padding: 0 40px;
+  line-height: $navHeight;
+  background-color: $gray;
+}
+
 .content-container {
-  /* variable interpolation in calc apparently doesn't work, but this is $headerHeight */
-  height: calc(100% - 100px);
+  /* variable interpolation in calc apparently doesn't work, but this is $headerHeight + navHeight */
+  height: calc(100% - 140px);
   display: flex;
   flex-direction: column;
   max-width: 900px;
   margin: auto;
 }
-
-.app-title {
-  text-align: center;
-  position: absolute;
-  top: 40px;
-  left: 0;
-  width: 100%;
-  font-family: "Courier New", monospace;
-  font-size: 20px;
-  text-transform: lowercase;
-  pointer-events: none;
-}

src/components/Panel.scss

@@ -6,7 +6,7 @@ $panelTitleHeight: 20px;
 
 .panel {
   position: relative;
-  border: 1px solid $lightBlue;
+  border: 1px solid $borderColor;
   flex-grow: 1;
   display: flex;
 }