start adding compose icons, update seafoam style

bin/svgs.js

@@ -24,5 +24,8 @@ module.exports = [
   {id: 'fa-thumb-tack', src: 'node_modules/font-awesome-svg-png/white/svg/thumb-tack.svg', title: 'Thumbtack'},
   {id: 'fa-bars', src: 'node_modules/font-awesome-svg-png/white/svg/bars.svg', title: 'List'},
   {id: 'fa-volume-off', src: 'node_modules/font-awesome-svg-png/white/svg/volume-off.svg', title: 'Volume off'},
-  {id: 'fa-ban', src: 'node_modules/font-awesome-svg-png/white/svg/ban.svg', title: 'Ban'}
+  {id: 'fa-ban', src: 'node_modules/font-awesome-svg-png/white/svg/ban.svg', title: 'Ban'},
+  {id: 'fa-camera', src: 'node_modules/font-awesome-svg-png/white/svg/camera.svg', title: 'Camera'},
+  {id: 'fa-smile', src: 'node_modules/font-awesome-svg-png/white/svg/smile-o.svg', title: 'Smile'},
+  {id: 'fa-exclamation-triangle', src: 'node_modules/font-awesome-svg-png/white/svg/exclamation-triangle.svg', title: 'Warning'},
 ]

routes/_components/compose/ComposeBox.html

@@ -17,6 +17,12 @@
          style="transform: scaleX({{inputLengthAsFractionOfMaxRoundedAfterRaf || 0}});"
          aria-hidden="true"
     ></div>
+    <div class="compose-profile-toolbar">
+      <IconButton label="Insert emoji" href="#fa-smile" />
+      <IconButton label="Add media" href="#fa-camera" />
+      <IconButton label="Adjust privacy" href="#fa-globe" />
+      <IconButton label="Add content warning" href="#fa-exclamation-triangle" />
+    </div>
     <span class="compose-profile-length"
           aria-label="{{inputLengthLabel}}">
       {{inputLengthToDisplayAfterRaf || '0'}}
@@ -37,12 +43,12 @@
     display: grid;
     align-items: flex-start;
     grid-template-areas:
-      "avatar display-name handle"
+      "avatar display-name handle   handle"
-      "avatar input        input"
+      "avatar input        input    input"
-      "avatar gauge        gauge"
+      "avatar gauge        gauge    gauge"
-      "avatar length       length"
+      "avatar toolbar      toolbar  length"
-      "avatar button       button";
+      "avatar button       button   button";
-    grid-template-columns: min-content minmax(0, max-content) 1fr;
+    grid-template-columns: min-content minmax(0, max-content) 1fr 1fr;
     border-bottom: 1px solid var(--main-border);
     width: 560px;
     max-width: calc(100vw - 40px);
@@ -80,11 +86,10 @@
 
   :global(.compose-profile-input) {
     grid-area: input;
-    margin-left: 5px;
+    margin: 10px 0 0 5px;
     padding: 10px;
     border: 1px solid var(--input-border);
     min-height: 75px;
-    margin-top: 10px;
     resize: none;
     overflow: hidden;
     word-wrap: break-word;
@@ -105,9 +110,9 @@
 
   .compose-profile-length-gauge {
     grid-area: gauge;
+    margin: 0 0 5px 5px;
     height: 2px;
     background: var(--main-theme-color);
-    margin-left: 5px;
     transform-origin: left;
   }
   .compose-profile-length-gauge.should-animate {
@@ -116,10 +121,10 @@
 
   .compose-profile-length {
     grid-area: length;
-    margin-top: 5px;
     justify-self: right;
     color: var(--main-theme-color);
-    font-size: 1.1em;
+    font-size: 1.3em;
+    align-self: center;
   }
 
   .over-char-limit .compose-profile-length {
@@ -130,6 +135,13 @@
     background: var(--warning-color);
   }
 
+  .compose-profile-toolbar {
+    grid-area: toolbar;
+    align-self: center;
+    display: flex;
+    align-items: center;
+  }
+
   @media (max-width: 767px) {
     .compose-profile-current-user {
       padding: 10px 10px;
@@ -150,6 +162,7 @@
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
   import debounce from 'lodash/debounce'
   import { mark, stop } from '../../_utils/marks'
+  import IconButton from '../IconButton.html'
 
   const CHAR_LIMIT = 500
 
@@ -198,7 +211,8 @@
       inputText: ''
     }),
     components: {
-      Avatar
+      Avatar,
+      IconButton
     },
     store: () => store,
     computed: {

routes/index.html

@@ -5,7 +5,7 @@
 <Layout page='home'>
   {{#if $isUserLoggedIn}}
     {{#if $currentVerifyCredentials}}
-      <LiteComposeBox verifyCredentials="{{$currentVerifyCredentials}}"/>
+      <ComposeBox verifyCredentials="{{$currentVerifyCredentials}}"/>
     {{/if}}
     <LazyTimeline timeline='home' />
   {{else}}
@@ -18,7 +18,7 @@
   import Layout from './_components/Layout.html'
   import NotLoggedInHome from './_components/NotLoggedInHome.html'
   import LazyTimeline from './_components/timeline/LazyTimeline.html'
-  import LiteComposeBox from './_components/compose/LiteComposeBox.html'
+  import ComposeBox from './_components/compose/ComposeBox.html'
   import { store } from './_store/store.js'
 
 	export default {
@@ -27,7 +27,7 @@
 		  Layout,
       LazyTimeline,
 			NotLoggedInHome,
-      LiteComposeBox
+      ComposeBox
 		}
 	}
 </script>

scss/themes/seafoam.scss

@@ -1,5 +1,5 @@
-$main-theme-color: teal;
+$main-theme-color: #177380;
-$body-bg-color: lighten($main-theme-color, 70%);
+$body-bg-color: lighten($main-theme-color, 60%);
 $anchor-color: $main-theme-color;
 $main-text-color: #333;
 $border-color: #dadada;
@@ -7,7 +7,7 @@ $main-bg-color: white;
 $secondary-text-color: white;
 $toast-border: #fafafa;
 $toast-bg: #333;
-$focus-outline: lighten($main-theme-color, 30%);
+$focus-outline: lighten($main-theme-color, 50%);
 
 @import "_base.scss";
 

templates/2xx.html

@@ -39,7 +39,7 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
     window.__themeColors = {
 		  'default': "royalblue",
       scarlet:   "#e04e41",
-      seafoam:   "teal",
+      seafoam:   "#177380",
       hotpants:  "hotpink",
       oaken:     "saddlebrown",
       majesty:   "blueviolet",
@@ -90,6 +90,9 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
 <symbol id="fa-bars" viewBox="0 0 1792 1792"><title>List</title><path d="M1664 1344v128q0 26-19 45t-45 19H192q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19H192q-26 0-45-19t-19-45V832q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19H192q-26 0-45-19t-19-45V320q0-26 19-45t45-19h1408q26 0 45 19t19 45z"></path></symbol>
 <symbol id="fa-volume-off" viewBox="0 0 1792 1792"><title>Volume off</title><path d="M1280 352v1088q0 26-19 45t-45 19-45-19l-333-333H576q-26 0-45-19t-19-45V704q0-26 19-45t45-19h262l333-333q19-19 45-19t45 19 19 45z"></path></symbol>
 <symbol id="fa-ban" viewBox="0 0 1792 1792"><title>Ban</title><path d="M1440 893q0-161-87-295l-754 753q137 89 297 89 111 0 211.5-43.5T1281 1280t116-174.5 43-212.5zm-999 299l755-754q-135-91-300-91-148 0-273 73T425 619t-73 274q0 162 89 299zm1223-299q0 157-61 300t-163.5 246-245 164-298.5 61-298.5-61-245-164T189 1193t-61-300 61-299.5T352.5 348t245-164T896 123t298.5 61 245 164T1603 593.5t61 299.5z"></path></symbol>
+<symbol id="fa-camera" viewBox="0 0 2048 1792"><title>Camera</title><path d="M1024 672q119 0 203.5 84.5T1312 960t-84.5 203.5T1024 1248t-203.5-84.5T736 960t84.5-203.5T1024 672zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75H320q-106 0-181-75t-75-181V512q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5T768 0h512q53 0 103.5 35.5T1453 120l51 136h224zm-704 1152q185 0 316.5-131.5T1472 960t-131.5-316.5T1024 512 707.5 643.5 576 960t131.5 316.5T1024 1408z"></path></symbol>
+<symbol id="fa-smile" viewBox="0 0 1792 1792"><title>Smile</title><path d="M1262 1075q-37 121-138 195t-228 74-228-74-138-195q-8-25 4-48.5t38-31.5q25-8 48.5 4t31.5 38q25 80 92.5 129.5T896 1216t151.5-49.5T1140 1037q8-26 32-38t49-4 37 31.5 4 48.5zM768 640q0 53-37.5 90.5T640 768t-90.5-37.5T512 640t37.5-90.5T640 512t90.5 37.5T768 640zm512 0q0 53-37.5 90.5T1152 768t-90.5-37.5T1024 640t37.5-90.5T1152 512t90.5 37.5T1280 640zm256 256q0-130-51-248.5t-136.5-204-204-136.5T896 256t-248.5 51-204 136.5-136.5 204T256 896t51 248.5 136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5zm128 0q0 209-103 385.5T1281.5 1561 896 1664t-385.5-103T231 1281.5 128 896t103-385.5T510.5 231 896 128t385.5 103T1561 510.5 1664 896z"></path></symbol>
+<symbol id="fa-exclamation-triangle" viewBox="0 0 1792 1792"><title>Warning</title><path d="M1024 1375v-190q0-14-9.5-23.5T992 1152H800q-13 0-22.5 9.5T768 1185v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11H786q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17H128q-34 0-63.5-17T18 1601q-37-63-2-126L784 67q17-31 47-49t65-18 65 18 47 49z"></path></symbol>
 </svg><!-- end insert svg here -->
   </svg>
 	<!-- The application will be rendered inside this element,