stubbed in modal dialog

app/templates/expireInfo/index.js

@@ -2,6 +2,7 @@ const html = require('choo/html');
 const raw = require('choo/html/raw');
 const selectbox = require('../selectbox');
 const timeLimitText = require('../timeLimitText');
+const okDialog = require('../okDialog');
 
 module.exports = function(state, emit) {
   const el = html`<div> ${raw(
@@ -25,7 +26,7 @@ module.exports = function(state, emit) {
       value => {
         const max = state.user.maxDownloads;
         if (value > max) {
-          alert('todo: this setting requires an account');
+          state.modal = okDialog('todo: this setting requires an account');
           value = max;
         }
         state.downloadCount = value;
@@ -44,7 +45,7 @@ module.exports = function(state, emit) {
       value => {
         const max = state.user.maxExpireSeconds;
         if (value > max) {
-          alert('todo: this setting requires an account');
+          state.modal = okDialog('todo: this setting requires an account');
           value = max;
         }
         state.timeLimit = value;

app/templates/modal/index.js

@@ -0,0 +1,15 @@
+const html = require('choo/html');
+
+module.exports = function(state, emit) {
+  return html`
+  <div class="modal" onclick=${close}>
+    <div class="modal__box" onclick=${e => e.stopPropagation()}>
+      ${state.modal(state, close)}
+    </div>
+  </div>`;
+
+  function close(event) {
+    state.modal = null;
+    emit('render');
+  }
+};

app/templates/modal/modal.css

@@ -0,0 +1,22 @@
+.modal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  z-index: 100;
+  background: rgba(0, 0, 0, 0.7);
+  animation: fade-in 0.5s forwards;
+}
+
+.modal__box {
+  max-width: 480px;
+  max-height: 300px;
+  background: var(--pageBGColor);
+  border-radius: 4px;
+  color: var(--textColor);
+}

app/templates/okDialog/index.js

@@ -0,0 +1,13 @@
+const html = require('choo/html');
+
+module.exports = function(message) {
+  return function(state, close) {
+    return html`
+    <div class="okDialog">
+      <div class="okDialog__message">${message}</div>
+      <button class="btn" onclick=${close}>${state.translate(
+      'okButton'
+    )}</button>
+    </div>`;
+  };
+};

app/templates/okDialog/okDialog.css

@@ -0,0 +1,11 @@
+.okDialog {
+  display: flex;
+  flex-direction: column;
+  height: 100px;
+  font-weight: 400;
+  padding: 10px;
+}
+
+.okDialog__message {
+  margin-bottom: 10px;
+}