diff --git a/bin/svgs.js b/bin/svgs.js
index 87e1254..c5f7f35 100644
--- a/bin/svgs.js
+++ b/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'},
]
diff --git a/routes/_components/compose/LiteComposeBox.html b/routes/_components/compose/ComposeBox.html
similarity index 88%
rename from routes/_components/compose/LiteComposeBox.html
rename to routes/_components/compose/ComposeBox.html
index 36127e7..515e233 100644
--- a/routes/_components/compose/LiteComposeBox.html
+++ b/routes/_components/compose/ComposeBox.html
@@ -17,6 +17,12 @@
style="transform: scaleX({{inputLengthAsFractionOfMaxRoundedAfterRaf || 0}});"
aria-hidden="true"
>
+
+
+
+
+
+
{{inputLengthToDisplayAfterRaf || '0'}}
@@ -37,12 +43,12 @@
display: grid;
align-items: flex-start;
grid-template-areas:
- "avatar display-name handle"
- "avatar input input"
- "avatar gauge gauge"
- "avatar length length"
- "avatar button button";
- grid-template-columns: min-content minmax(0, max-content) 1fr;
+ "avatar display-name handle handle"
+ "avatar input input input"
+ "avatar gauge gauge gauge"
+ "avatar toolbar toolbar length"
+ "avatar button button button";
+ 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: {
diff --git a/routes/index.html b/routes/index.html
index 87801d7..16bf974 100644
--- a/routes/index.html
+++ b/routes/index.html
@@ -5,7 +5,7 @@
{{#if $isUserLoggedIn}}
{{#if $currentVerifyCredentials}}
-
+
{{/if}}
{{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
}
}
diff --git a/scss/themes/seafoam.scss b/scss/themes/seafoam.scss
index 71796d1..4f91a40 100644
--- a/scss/themes/seafoam.scss
+++ b/scss/themes/seafoam.scss
@@ -1,5 +1,5 @@
-$main-theme-color: teal;
-$body-bg-color: lighten($main-theme-color, 70%);
+$main-theme-color: #177380;
+$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";
diff --git a/templates/2xx.html b/templates/2xx.html
index cc7d596..8954f53 100644
--- a/templates/2xx.html
+++ b/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
List
Volume off
Ban
+Camera
+Smile
+Warning