From 0f29316ada49713957b27117c8083cd66d3d17c5 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 20 Jan 2018 21:42:46 -0800
Subject: [PATCH] refactor toolbar, tweak colors, add pressed states for
 toolbar

---
 routes/_components/Status.html  | 54 ++-------------------------
 routes/_components/Toolbar.html | 66 +++++++++++++++++++++++++++++++++
 scss/themes/_base.scss          |  7 +++-
 scss/themes/scarlet.scss        |  2 +-
 templates/2xx.html              |  4 +-
 5 files changed, 78 insertions(+), 55 deletions(-)
 create mode 100644 routes/_components/Toolbar.html

diff --git a/routes/_components/Status.html b/routes/_components/Status.html
index ff63059..f82fb4c 100644
--- a/routes/_components/Status.html
+++ b/routes/_components/Status.html
@@ -24,28 +24,7 @@
   </div>
   <Avatar account={{originalAccount}} className="status-sidebar"/>
   <div class="status-content">{{{status.content}}}</div>
-  <div class="status-toolbar">
-    <button aria-label="Reply" aria-pressed="false" type="button">
-      <svg>
-        <use xlink:href="#fa-reply" />
-      </svg>
-    </button>
-    <button aria-label="Boost" aria-pressed="false" type="button">
-      <svg>
-        <use xlink:href="#fa-retweet" />
-      </svg>
-    </button>
-    <button aria-label="Favorite" aria-pressed="false" type="button">
-      <svg>
-        <use xlink:href="#fa-star" />
-      </svg>
-    </button>
-    <button aria-label="More" aria-pressed="false" type="button">
-      <svg>
-        <use xlink:href="#fa-ellipsis-h" />
-      </svg>
-    </button>
-  </div>
+  <Toolbar :status />
   <Media mediaAttachments="{{originalMediaAttachments}}" />
 </article>
 
@@ -155,37 +134,11 @@
     height: 18px;
     fill: var(--deemphasized-text-color)
   }
-
-  .status-toolbar {
-    grid-area: status-toolbar;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .status-toolbar button {
-    padding: 6px 10px;
-    background: none;
-    border: none;
-  }
-
-  .status-toolbar button svg {
-    width: 24px;
-    height: 24px;
-    fill: var(--action-button-fill-color);
-  }
-
-  .status-toolbar button:hover svg {
-    fill: var(--action-button-fill-color-hover);
-  }
-
-  .status-toolbar button:active svg {
-    fill: var(--action-button-fill-color-active);
-  }
-
 </style>
 <script>
   import Avatar from './Avatar.html'
   import Media from './Media.html'
+  import Toolbar from './Toolbar.html'
   import { mark, stop } from '../_utils/marks'
   import IntlRelativeFormat from 'intl-relativeformat'
   const relativeFormat = new IntlRelativeFormat('en-US');
@@ -193,7 +146,8 @@
   export default {
     components: {
       Avatar,
-      Media
+      Media,
+      Toolbar
     },
     computed: {
       createdAtDate: (status) => status.created_at,
diff --git a/routes/_components/Toolbar.html b/routes/_components/Toolbar.html
new file mode 100644
index 0000000..877c694
--- /dev/null
+++ b/routes/_components/Toolbar.html
@@ -0,0 +1,66 @@
+<div class="status-toolbar">
+  <button aria-label="Reply" type="button">
+    <svg>
+      <use xlink:href="#fa-reply" />
+    </svg>
+  </button>
+  <button aria-label="Boost" aria-pressed="{{status.reblogged}}" class="{{status.reblogged ? 'selected' : ''}}" type="button">
+    <svg>
+      <use xlink:href="#fa-retweet" />
+    </svg>
+  </button>
+  <button aria-label="Favorite" aria-pressed="{{status.favourited}}" class="{{status.favourited ? 'selected' : ''}}" type="button">
+    <svg>
+      <use xlink:href="#fa-star" />
+    </svg>
+  </button>
+  <button aria-label="More" type="button">
+    <svg>
+      <use xlink:href="#fa-ellipsis-h" />
+    </svg>
+  </button>
+</div>
+<style>
+  .status-toolbar {
+    grid-area: status-toolbar;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .status-toolbar button {
+    padding: 6px 10px;
+    background: none;
+    border: none;
+  }
+
+  .status-toolbar button svg {
+    width: 24px;
+    height: 24px;
+    fill: var(--action-button-fill-color);
+  }
+
+  .status-toolbar button:hover svg {
+    fill: var(--action-button-fill-color-hover);
+  }
+
+  .status-toolbar button:active svg {
+    fill: var(--action-button-fill-color-active);
+  }
+
+  .status-toolbar button.selected svg {
+    fill: var(--action-button-fill-color-pressed)
+  }
+
+  .status-toolbar button.selected:hover svg {
+    fill: var(--action-button-fill-color-pressed-hover);
+  }
+
+  .status-toolbar button.selected:active svg {
+    fill: var(--action-button-fill-color-pressed-active);
+  }
+
+</style>
+<script>
+  export default {
+  }
+</script>
\ No newline at end of file
diff --git a/scss/themes/_base.scss b/scss/themes/_base.scss
index 5288ae9..dd26c3e 100644
--- a/scss/themes/_base.scss
+++ b/scss/themes/_base.scss
@@ -37,9 +37,12 @@
   --nav-svg-fill-hover: $secondary-text-color;
   --nav-text-color-hover: $secondary-text-color;
 
-  --action-button-fill-color: lighten($main-theme-color, 15%);
-  --action-button-fill-color-hover: lighten($main-theme-color, 20%);
+  --action-button-fill-color: lighten($main-theme-color, 18%);
+  --action-button-fill-color-hover: lighten($main-theme-color, 22%);
   --action-button-fill-color-active: lighten($main-theme-color, 5%);
+  --action-button-fill-color-pressed: darken($main-theme-color, 7%);
+  --action-button-fill-color-pressed-hover: darken($main-theme-color, 2%);
+  --action-button-fill-color-pressed-active: $main-theme-color;
 
   --settings-list-item-bg: $main-bg-color;
   --settings-list-item-text: $main-theme-color;
diff --git a/scss/themes/scarlet.scss b/scss/themes/scarlet.scss
index b70e7f5..6e482a2 100644
--- a/scss/themes/scarlet.scss
+++ b/scss/themes/scarlet.scss
@@ -1,4 +1,4 @@
-$main-theme-color: crimson;
+$main-theme-color: darken(crimson, 5%);
 $body-bg-color: lighten($main-theme-color, 38%);
 $anchor-color: $main-theme-color;
 $main-text-color: #333;
diff --git a/templates/2xx.html b/templates/2xx.html
index 0048107..497011b 100644
--- a/templates/2xx.html
+++ b/templates/2xx.html
@@ -10,9 +10,9 @@
 
 	<style>
 /* auto-generated w/ build-sass.js */
-body{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#839deb;--action-button-fill-color-hover:#99afef;--action-button-fill-color-active:#577ae4;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--deemphasized-text-color:#666}
+body{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#90a8ee;--action-button-fill-color-hover:#a2b6f0;--action-button-fill-color-active:#577ae4;--action-button-fill-color-pressed:#2351dc;--action-button-fill-color-pressed-hover:#3862e0;--action-button-fill-color-pressed-active:#4169e1;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--deemphasized-text-color:#666}
 body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.3;color:var(--body-text-color);background:var(--body-bg);position:fixed;left:0;right:0;bottom:0;top:0}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:absolute;top:72px;left:0;right:0;bottom:0;will-change:transform}main{position:relative;width:602px;max-width:100vw;padding:15px 0;box-sizing:border-box;margin:15px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{margin:5px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}
-body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-oaken.offline,body.theme-scarlet.offline,body.theme-seafoam.offline{--button-primary-bg:#ababab;--button-primary-text:#fff;--button-primary-border:#4d4d4d;--button-primary-bg-active:#9c9c9c;--button-primary-bg-hover:#b0b0b0;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#999;--main-bg:#fff;--body-bg:#fafafa;--body-text-color:#333;--main-border:#dadada;--svg-fill:#999;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#999;--nav-border:gray;--nav-a-border:#999;--nav-a-selected-border:#fff;--nav-a-selected-bg:#b3b3b3;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#bfbfbf;--nav-a-bg-hover:#a6a6a6;--nav-a-border-hover:#999;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#bfbfbf;--action-button-fill-color-hover:#ccc;--action-button-fill-color-active:#a6a6a6;--settings-list-item-bg:#fff;--settings-list-item-text:#999;--settings-list-item-text-hover:#999;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--deemphasized-text-color:#666}
+body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-oaken.offline,body.theme-scarlet.offline,body.theme-seafoam.offline{--button-primary-bg:#ababab;--button-primary-text:#fff;--button-primary-border:#4d4d4d;--button-primary-bg-active:#9c9c9c;--button-primary-bg-hover:#b0b0b0;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#999;--main-bg:#fff;--body-bg:#fafafa;--body-text-color:#333;--main-border:#dadada;--svg-fill:#999;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#999;--nav-border:gray;--nav-a-border:#999;--nav-a-selected-border:#fff;--nav-a-selected-bg:#b3b3b3;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#bfbfbf;--nav-a-bg-hover:#a6a6a6;--nav-a-border-hover:#999;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#c7c7c7;--action-button-fill-color-hover:#d1d1d1;--action-button-fill-color-active:#a6a6a6;--action-button-fill-color-pressed:#878787;--action-button-fill-color-pressed-hover:#949494;--action-button-fill-color-pressed-active:#999;--settings-list-item-bg:#fff;--settings-list-item-text:#999;--settings-list-item-text-hover:#999;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--deemphasized-text-color:#666}
 
 </style>