Toast and modal improvements

electron/package.json

@@ -53,7 +53,7 @@
     "eslint-plugin-import": "^2.22.1"
   },
   "dependencies": {
-    "@lightningrodlabs/electron-holochain": "=0.7.8",
+    "@lightningrodlabs/electron-holochain": "=0.7.12",
     "electron-context-menu": "^3.5.0",
     "electron-default-menu": "^1.0.2",
     "electron-log": "^4.3.5",

electron/src/holochain.ts

@@ -1,9 +1,6 @@
-import * as path from 'path'
-import { app } from 'electron'
 import {
   ElectronHolochainOptions,
   StateSignal,
-  PathOptions,
 } from '@lightningrodlabs/electron-holochain'
 import { DATASTORE_PATH, KEYSTORE_PATH, PROFILES_HAPP_PATH } from './paths'
 
@@ -53,6 +50,7 @@ const devOptions: ElectronHolochainOptions = {
   keystorePath: KEYSTORE_PATH,
   passphrase: 'test-passphrase',
   bootstrapUrl: 'https://bootstrap.holo.host',
+  logging: 'Json',
 }
 const prodOptions: ElectronHolochainOptions = {
   happPath: PROFILES_HAPP_PATH, // preload
@@ -63,6 +61,7 @@ const prodOptions: ElectronHolochainOptions = {
   keystorePath: KEYSTORE_PATH,
   passphrase: 'test-passphrase',
   bootstrapUrl: 'https://bootstrap.holo.host',
+  logging: 'Json',
 }
 
 export { devOptions, prodOptions }

electron/src/index.ts

@@ -1,17 +1,13 @@
-import {
-  app,
-  BrowserWindow,
-  ipcMain,
-  shell,
-  autoUpdater,
-  Menu,
-} from 'electron'
+import { app, BrowserWindow, ipcMain, shell, autoUpdater, Menu } from 'electron'
 import * as contextMenu from 'electron-context-menu'
 import * as path from 'path'
 import * as fs from 'fs'
 import initAgent, {
+  ERROR_EVENT,
   StateSignal,
   STATUS_EVENT,
+  HOLOCHAIN_LOG_EVENT,
+  WASM_LOG_EVENT,
 } from '@lightningrodlabs/electron-holochain'
 
 import { devOptions, prodOptions, stateSignalToText } from './holochain'
@@ -45,8 +41,6 @@ contextMenu.default({
   showSaveImageAs: true,
 })
 
-
-
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
 // if (require('electron-squirrel-startup')) {
 // eslint-disable-line global-require
@@ -177,19 +171,37 @@ app.on('ready', async () => {
   const splashWindow = createSplashWindow()
   const opts = app.isPackaged ? prodOptions : devOptions
   const { statusEmitter, shutdown } = await initAgent(app, opts, BINARY_PATHS)
+  let mainWindow: BrowserWindow | null = null
   statusEmitter.on(STATUS_EVENT, (state: StateSignal) => {
     switch (state) {
       case StateSignal.IsReady:
         // important that this line comes before the next one
         // otherwise this triggers the 'all-windows-closed'
         // event
-        createMainWindow()
+        mainWindow = createMainWindow()
         splashWindow.close()
         break
       default:
         splashWindow.webContents.send('status', stateSignalToText(state))
     }
   })
+  statusEmitter.on(ERROR_EVENT, (error: Error) => {
+    if (!error.message.includes('no project meta exists')) {
+      if (mainWindow) {
+        mainWindow.webContents.send('holochainError', error.message)
+      }
+    }
+  })
+  statusEmitter.on(HOLOCHAIN_LOG_EVENT, (log: string) => {
+    if (mainWindow) {
+      mainWindow.webContents.send('holochainLog', log)
+    }
+  })
+  statusEmitter.on(WASM_LOG_EVENT, (log: string) => {
+    if (mainWindow) {
+      mainWindow.webContents.send('wasmLog', log)
+    }
+  })
 })
 
 // Quit when all windows are closed, except on macOS. There, it's common
@@ -285,7 +297,7 @@ ipcMain.handle('checkForMigrationData', (event) => {
     )
     return {
       file: existingMigrationPath,
-      data: prevVersionMigrationDataString
+      data: prevVersionMigrationDataString,
     }
   } else {
     return null

web/src/components/ButtonCheckbox/ButtonCheckbox.scss

@@ -14,10 +14,10 @@
   transition: 0.2s box-shadow ease;
   -webkit-font-smoothing: antialiased;
   user-select: none;
-  border: 0.15rem solid #ffffff00;
+  border: 0.15rem solid var(--border-color-button-checkbox);
 
   &:hover,
-  &.focused {
+  &:focus {
     box-shadow: 0rem 0rem 1.25rem var(--shadow-color-hover);
   }
 
@@ -45,6 +45,7 @@
 
     .button-checkbox-text {
       user-select: none;
+      margin-right: 0.5rem;
       /* Standard */
     }
   }

web/src/components/ButtonCheckbox/ButtonCheckbox.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import Checkbox from '../Checkbox/Checkbox'
-import Icon from '../Icon/Icon'
 
 import './ButtonCheckbox.scss'
 
@@ -19,8 +18,23 @@ const ButtonCheckbox: React.FC<ButtonCheckboxProps> = ({
   icon,
   text,
 }) => {
+  useEffect(() => {
+    // listen for Enter key to be pressed, but
+    // ignore if Command/Ctrl is also pressed
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Enter' && !e.metaKey) {
+        onChange(!isChecked)
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [isChecked, onChange])
   return (
     <div
+      role="button"
+      tabIndex={0}
       className={`button-checkbox-wrapper ${isChecked ? 'selected' : ''} ${
         size === 'tiny'
           ? 'tiny'

web/src/components/ButtonWithPendingState/ButtonWithPendingState.js

@@ -10,7 +10,7 @@ export default function ButtonWithPendingState({
 }) {
   return pending ? (
     <span className="pending-acorn">
-      <Icon name="acorn-logo.svg" className="white not-hoverable very-small" />
+      <Icon name="acorn-logo.svg" className="not-hoverable" size="very-small"/>
       <span>{pendingText}</span>
     </span>
   ) : (

web/src/components/CreateProjectModal/CreateProjectModal.scss

@@ -1,79 +1,32 @@
-.create-project-modal-wrapper {
-  /* width: 550px; */
-  height: 523px;
-  overflow: hidden;
+.create-project-modal {
+  width: 30rem;
+  overflow: auto;
   position: relative;
   justify-content: space-between;
   align-items: center;
-}
-
-.create-project-modal-wrapper .validating-form-input {
-  margin-bottom: 28px;
-}
-
-.project-modal-content {
-  line-height: 1.45;
-}
-
-.create-project-image-row {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-}
-
-.create-project-image-row .validating-form-input {
-  margin-bottom: 0;
-}
-
-.create-project-image {
-  margin-left: 8px;
-  width: 44px;
-  height: 44px;
-  background-size: cover;
-  background-repeat: no-repeat;
-  border-radius: 10px;
-  border: 2px solid #f3efeb;
-  box-sizing: border-box;
-  background-color: var(--bg-color-tertiary);
-}
-
-/* create project modal animation */
-
-.create-project-form {
-  position: absolute;
-  opacity: 1;
-  transition: opacity 0.3s, transform 0.4s;
-  width: 420px;
-}
-
-.create-project-form.project-created {
-  /* background-color: blue; */
-  opacity: 0;
-  -webkit-transform: translateX(-300px);
-  transform: translateX(-300px);
-}
-
-/* project created modal animation */
-
-/* default is to be hidden */
-
-.project-created-modal {
-  /* position: absolute; */
-  opacity: 0;
-  -webkit-transform: scale(0.8);
-  transform: scale(0.8);
-  transition: opacity 0.3s, transform 0.4s;
-}
-
-/* then it shows */
-
-.project-created-modal.project-created {
-  opacity: 1;
-  -webkit-transform: scale(1);
-  transform: scale(1);
-}
 
-.project-created-modal.project-created .project-modal-content-spacer {
-  margin-bottom: 7rem;
-  margin-top: 3rem;
+  .create-project-form {
+
+    .create-project-image-row {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-end;
+
+      .validating-form-input {
+        margin-bottom: 0;
+      }
+
+      .create-project-image {
+        margin-left: 8px;
+        width: 44px;
+        height: 44px;
+        background-size: cover;
+        background-repeat: no-repeat;
+        border-radius: 10px;
+        border: 2px solid #f3efeb;
+        box-sizing: border-box;
+        background-color: var(--bg-color-tertiary);
+      }
+    }
+  }
 }