refactored css, including some markup changes

mozilla · Feb 15, 2018 · 8d41111 · 8d41111
1 parent 3163edc
commit 8d41111
Show file tree

Hide file tree

Showing 62 changed files with 5,465 additions and 3,812 deletions.
diff --git a/app/base.css b/app/base.css
@@ -0,0 +1,257 @@
+:root {
+  --pageBGColor: #fff;
+  --primaryControlBGColor: #0297f8;
+  --primaryControlFGColor: #fff;
+  --primaryControlHoverColor: #0287e8;
+  --inputTextColor: #737373;
+  --errorColor: #d70022;
+  --linkColor: #0094fb;
+  --textColor: #0c0c0d;
+  --lightTextColor: #737373;
+  --successControlBGColor: #05a700;
+  --successControlFGColor: #fff;
+}
+
+html {
+  background: url('../assets/send_bg.svg');
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui',
+    'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif;
+  font-weight: 200;
+  background-size: 110%;
+  background-repeat: no-repeat;
+  background-position: center top;
+  height: 100%;
+  margin: auto;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui',
+    'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  min-height: 100vh;
+  position: relative;
+}
+
+pre,
+input,
+select,
+textarea,
+button {
+  font-family: inherit;
+  margin: 0;
+}
+
+pre {
+  font-family: monospace;
+  font-size: 18px;
+  font-weight: 600;
+  display: inline-block;
+}
+
+a {
+  text-decoration: none;
+}
+
+.all {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  max-width: 650px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box;
+  width: 96%;
+}
+
+.btn {
+  font-size: 15px;
+  font-weight: 500;
+  color: white;
+  cursor: pointer;
+  text-align: center;
+  background: var(--primaryControlBGColor);
+  border: 1px solid var(--primaryControlBGColor);
+  border-radius: 5px;
+}
+
+.btn--cancel {
+  color: var(--errorColor);
+  background: var(--pageBGColor);
+  font-size: 15px;
+  border: 0;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.btn--cancel:disabled {
+  text-decoration: none;
+  cursor: auto;
+}
+
+.input {
+  border: 1px solid var(--primaryControlBGColor);
+  border-radius: 6px 0 0 6px;
+  font-size: 20px;
+  color: var(--inputTextColor);
+  font-family: 'SF Pro Text', sans-serif;
+  letter-spacing: 0;
+  line-height: 23px;
+  font-weight: 300;
+  height: 46px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.input--noBtn {
+  border-radius: 6px;
+}
+
+.inputBtn {
+  background: var(--primaryControlBGColor);
+  border-radius: 0 6px 6px 0;
+  border: 1px solid var(--primaryControlBGColor);
+  color: white;
+  cursor: pointer;
+
+  /* Force flat button look */
+  appearance: none;
+  font-size: 15px;
+  padding-bottom: 3px;
+  padding-left: 10px;
+  padding-right: 10px;
+  white-space: nowrap;
+}
+
+.inputBtn:disabled {
+  cursor: auto;
+}
+
+.inputBtn:hover {
+  background-color: var(--primaryControlHoverColor);
+}
+
+.inputBtn--hidden {
+  display: none;
+}
+
+.cursor--pointer {
+  cursor: pointer;
+}
+
+.link {
+  color: var(--linkColor);
+  text-decoration: none;
+}
+
+.link:focus,
+.link:active,
+.link:hover {
+  color: var(--primaryControlHoverColor);
+}
+
+.link--action {
+  text-decoration: underline;
+  text-align: center;
+}
+
+.page {
+  margin: 0 auto 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+}
+
+.progressSection {
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  font-size: 15px;
+}
+
+.progressSection__text {
+  color: rgba(0, 0, 0, 0.5);
+  letter-spacing: -0.4px;
+  margin-top: 24px;
+  margin-bottom: 74px;
+}
+
+.effect--fadeOut {
+  opacity: 0;
+  animation: fadeout 200ms linear;
+}
+
+@keyframes fadeout {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.effect--fadeIn {
+  opacity: 1;
+  animation: fadein 200ms linear;
+}
+
+@keyframes fadein {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.title {
+  font-size: 33px;
+  line-height: 40px;
+  margin: 20px auto;
+  text-align: center;
+  max-width: 520px;
+  font-family: 'SF Pro Text', sans-serif;
+  word-wrap: break-word;
+}
+
+.description {
+  font-size: 15px;
+  line-height: 23px;
+  max-width: 630px;
+  text-align: center;
+  margin: 0 auto 60px;
+  color: var(--textColor);
+  width: 92%;
+}
+
+@media (max-device-width: 768px), (max-width: 768px) {
+  .description {
+    margin: 0 auto 25px;
+  }
+}
+
+@media (max-device-width: 520px), (max-width: 520px) {
+  .input {
+    font-size: 22px;
+    padding: 10px 10px;
+    border-radius: 6px 6px 0 0;
+  }
+
+  .inputBtn {
+    border-radius: 0 0 6px 6px;
+    flex: 0 1 65px;
+  }
+
+  .input--noBtn {
+    border-radius: 6px;
+  }
+}
diff --git a/app/fileManager.js b/app/fileManager.js
@@ -108,7 +108,7 @@ export default function(state, emitter) {
 
       document.getElementById('cancel-upload').hidden = 'hidden';
       await delay(1000);
-      await fadeOut('upload-progress');
+      await fadeOut('.page');
       openLinksInNewTab(links, false);
       emitter.emit('pushState', `/share/${ownedFile.id}`);
     } catch (err) {
@@ -170,7 +170,7 @@ export default function(state, emitter) {
       const time = Date.now() - start;
       const speed = size / (time / 1000);
       await delay(1000);
-      await fadeOut('download-progress');
+      await fadeOut('.page');
       saveFile(f);
       state.storage.totalDownloads += 1;
       state.transfer.reset();

diff --git a/app/main.css b/app/main.css
@@ -0,0 +1,19 @@
+@import './base.css';
+@import './templates/header/header.css';
+@import './templates/downloadButton/downloadButton.css';
+@import './templates/progress/progress.css';
+@import './templates/passwordInput/passwordInput.css';
+@import './templates/downloadPassword/downloadPassword.css';
+@import './templates/setPasswordSection/setPasswordSection.css';
+@import './templates/changePasswordSection/changePasswordSection.css';
+@import './templates/footer/footer.css';
+@import './templates/fxPromo/fxPromo.css';
+@import './templates/selectbox/selectbox.css';
+@import './templates/fileList/fileList.css';
+@import './templates/file/file.css';
+@import './templates/popup/popup.css';
+@import './pages/welcome/welcome.css';
+@import './pages/preview/preview.css';
+@import './pages/share/share.css';
+@import './pages/notFound/notFound.css';
+@import './pages/unsupported/unsupported.css';
diff --git a/app/pages/completed.js b/app/pages/completed.js
diff --git a/app/pages/completed/index.js b/app/pages/completed/index.js
@@ -0,0 +1,28 @@
+const html = require('choo/html');
+const progress = require('../../templates/progress');
+const { fadeOut } = require('../../utils');
+
+module.exports = function(state, emit) {
+  const div = html`
+    <div class="page effect--fadeIn">
+      <div class="title">
+        ${state.translate('downloadFinish')}
+      </div>
+      <div class="description"></div>
+      ${progress(1)}
+      <div class="progressSection">
+        <div class="progressSection__text"></div>
+      </div>
+      <a class="link link--action"
+        href="/"
+        onclick=${sendNew}>${state.translate('sendYourFilesLink')}</a>
+    </div>`;
+
+  async function sendNew(e) {
+    e.preventDefault();
+    await fadeOut('.page');
+    emit('pushState', '/');
+  }
+
+  return div;
+};