ui color scheme: tweak colors on main page, popup, add logo

downloader: add page.size to downloads
bump to 0.4.8

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ArchiveWeb.page",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "main": "index.js",
   "description": "Create Web Archives directly in your browser",
   "repository": "https://github.com/webrecorder/archiveweb.page",

src/downloader.js

@@ -407,6 +407,7 @@ class Downloader
         title: page.title,
         url: page.url,
         id: page.id,
+        size: page.size,
         ts};
 
       if (page.favIconUrl) {

src/ext/popup.js

@@ -333,7 +333,7 @@ class RecPopup extends LitElement
     }
 
     return html`
-    <div class="view-row is-marginless" style="background-color: lightsteelblue">
+    <div class="view-row is-marginless" style="background-color: #ddddff">
       <form @submit="${this.onNewColl}">
         <div class="flex-form">
           <label for="new-name" class="is-size-7 is-italic">Create New Archive:</label>
@@ -394,8 +394,8 @@ class RecPopup extends LitElement
             html`<a target="_blank" class="is-size-6" href="${this.replayUrl}">View Recorded Page</a>` : ``}
         </div>
         <table class="status">
-          <tr><td>New Size:</td><th>${prettyBytes(this.status.sizeNew)}</th></tr>
-          <tr><td>Size:</td><th>${prettyBytes(this.status.sizeTotal)}</th></tr>
+          <tr><td>Size:</td><th>${prettyBytes(this.status.sizeNew)}</th></tr>
+          <tr><td>Size Loaded:</td><th>${prettyBytes(this.status.sizeTotal)}</th></tr>
           <tr><td>Pages:</td><th>${this.status.numPages}</th></tr>
           <tr><td>URLs:</td><th>${this.status.numUrls}</th></tr>
         </table>` : html``}

src/ui.js

@@ -14,7 +14,7 @@ import fasReshare from '@fortawesome/fontawesome-free/svgs/solid/retweet.svg';
 import fasX from '@fortawesome/fontawesome-free/svgs/solid/times.svg';
 
 //import wrText from '../assets/webrecorder-text.svg';
-import wrLogo from '../assets/wr-logo.svg';
+import wrLogo from '../assets/awp-logo.svg';
 import wrRec from '../assets/recLogo.svg';
 
 
@@ -131,7 +131,7 @@ class ArchiveWebApp extends ReplayWebApp
   renderNavBrand() {
     return html`
       <span id="home" class="logo-text has-text-weight-bold is-size-6 has-allcaps wide-only">
-      <span class="has-text-black">archive</span>
+      <span class="" style="color: #8878c3">archive</span>
       <span class="has-text-link">web.page</span>
       <span class="is-sr-only">Home</span>
     </span>`;
@@ -143,15 +143,15 @@ class ArchiveWebApp extends ReplayWebApp
         <div class="columns">
           <div class="column">
             <div class="message is-small is-9">
-              <div class="message-header">New Web Archive</div>
+              <div class="message-header" style="background-color: #ddddff; color: black">New Web Archive</div>
               <div class="extra-padding message-body">
                 <form class="is-flex" @submit="${this.onNewColl}">
                   <div class="field has-addons">
                     <div class="control is-expanded">
                       <input class="input is-small" id="new-name" type="text" required placeholder="Enter New Archive Name">
                     </div>
                     <div class="control">
-                      <button class="button is-small is-success" type="submit">
+                      <button class="button is-small" type="submit">
                         <span class="icon">
                           <fa-icon .svg=${fasPlus}></fa-icon>
                         </span>

wr-ext/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Webrecorder ArchiveWeb.page",
   "description": "Create high-fidelity web archives directly in your browser",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
   "permissions": [
     "debugger",