added placeholders for error text

public/assets/css/general.css

@@ -1,3 +1,22 @@
+@font-face {
+	font-family: 'Lekton';
+	src: url('../font/Lekton/Lekton-Regular.ttf');
+}
+
+@font-face {
+	font-family: 'Lekton';
+	src: url('../font/Lekton/Lekton-Bold.ttf');
+	font-weight: bold;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Lekton';
+	src: url('../font/Lekton/Lekton-Italic.ttf');
+	font-weight: normal;
+	font-style: italic;
+}
+
 html, body {
 	margin: 0;
 	padding: 0;
@@ -13,8 +32,8 @@ html, body {
 /* TEXT */
 
 body, button, input, textarea, label, select, option {
-	font-family: monospace;
+	font-family: 'Lekton', monospace;
-	font-size: large;
+	font-size: medium;
 	word-wrap: break-word;
 }
 
@@ -92,7 +111,6 @@ h2 {
 }
 
 .h2--secondary {
-	font-weight: normal;
 	color: lightgrey;
 }
 
@@ -198,7 +216,7 @@ h3 {
 
 /* ERROR MESSAGES */
 
-.info-message {
+. info-message {
 	font-weight: bold;
 }
 
@@ -210,6 +228,11 @@ h3 {
 	color: red;
 }
 
+.info-message-placeholder {
+	display: block;
+	height: 2rem;
+}
+
 /* INPUT FIELDS */
 
 /* blocks */
@@ -397,6 +420,7 @@ table {
 }
 
 .nav-bar-link {
+	font-weight: normal;
 	border-bottom: 2px solid white;
 }
 .nav-bar-link:hover {
@@ -405,7 +429,7 @@ table {
 
 .nav-bar-link--active {
 	color: #1e90ff;
-	border-bottom: 2px solid #1e90ff;
+	border-bottom: 2px solid dodgerblue;
 }
 
 /* PUBLISH FORM */
@@ -418,13 +442,13 @@ table {
 
 .dropzone:hover {
 	border: 2px dashed #1e90ff;
-	background-color: lightgrey;
+	background-color: gainsboro;
 	cursor: pointer;
 }
 
 .dropzone--drag-over {
-	background-color: lightgrey;
+	background-color: gainsboro;
-	border: 2px dashed #1e90ff;
+	border: 2px dashed dodgerblue;
 }
 
 #primary-dropzone-wrapper, #publish-form-wrapper {

public/assets/font/Lekton/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2008-2010, Isia Urbino (http://www.isiaurbino.net)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

public/assets/js/validationFunctions.js

@@ -137,7 +137,7 @@ function checkChannelName(name){
     const successDisplayElement = document.getElementById('input-success-channel-name');
     const errorDisplayElement = document.getElementById('input-error-channel-name');
     name = `@${name}`;
-    checkAvailability(name, successDisplayElement, errorDisplayElement, validateChannelName, isNameAvailable, 'Sorry, that Channel name has been taken by another user', '/api/isChannelAvailable/');
+    checkAvailability(name, successDisplayElement, errorDisplayElement, validateChannelName, isNameAvailable, 'Sorry, that name has already been taken', '/api/isChannelAvailable/');
 }
 
 // validation function which checks all aspects of the publish submission

views/index.handlebars

@@ -5,12 +5,14 @@
     <div id="primary-dropzone-wrapper">
         <div id="primary-dropzone" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" ondragenter="dragenter_handler(event)" ondragleave="dragexit_handler(event)" onclick="triggerFileChooser('siofu_input', event)">
             <div id="primary-dropzone-instructions">
+                <div class="info-message-placeholder">
+                    <div class="info-message-placeholder"><div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div></div>
+                </div>
                 <div class="row">
                     <p>Drag & drop image or video here</p>
                     <p>OR</p>
                     <label class="input-file-label">CHOOSE FILE</label>
                 </div>
-                <div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
             </div>
         </div>
     </div>

views/partials/bugs.handlebars

@@ -1,4 +0,0 @@
-<div>
-	<h2>Bugs</h2>
-	<p>Spee.ch is young and under continuous development so it will have bugs.  Please leave an issue on our <a href="https://github.com/lbryio/spee.ch">github</a> if you experience a problem or have suggestions.</p>
-</div>

views/partials/channelCreationForm.handlebars

@@ -3,7 +3,9 @@
         <div class="column column--3 column--sml-10">
             <label class="label" for="new-channel-name">Name:</label>
         </div><div class="column column--6 column--sml-10">
-            <div id="input-error-channel-name" class="info-message info-message--failure"></div>
+            <div class="info-message-placeholder">
+                <div id="input-error-channel-name" class="info-message info-message--failure"></div>
+            </div>
             <div class="input-text--primary">
                 <span>@</span>
                 <input type="text" name="new-channel-name" id="new-channel-name" class="input-text" placeholder="exampleChannelName" value="" oninput="checkChannelName(event.target.value)">
@@ -15,7 +17,9 @@
         <div class="column column--3 column--sml-10">
             <label class="label" for="new-channel-password">Password:</label>
         </div><div class="column column--6 column--sml-10">
-            <div id="input-error-channel-password" class="info-message info-message--failure"></div>
+            <div class="info-message-placeholder">
+                <div id="input-error-channel-password" class="info-message info-message--failure"></div>
+            </div>
             <div class="input-text--primary">
                 <input type="password" name="new-channel-password" id="new-channel-password" class="input-text"  placeholder="" value="" >
             </div>

views/partials/channelLoginForm.handlebars

@@ -3,7 +3,9 @@
         <div class="column column--3 column--sml-10">
             <label class="label" for="channel-login-name-input">Name:</label>
         </div><div class="column column--6 column--sml-10">
-            <div id="login-error-display-element" class="info-message info-message--failure"></div>
+            <div class="info-message-placeholder">
+                <div id="login-error-display-element" class="info-message info-message--failure"></div>
+            </div>
             <div class="input-text--primary">
                 <span>@</span>
                 <input type="text" id="channel-login-name-input" class="input-text" placeholder="" value="">

views/partials/publishForm-Channel.handlebars

@@ -19,7 +19,9 @@
         <div class="column column--3 column--sml-10">
             <label class="label" for="channel-name-select">Channel:</label>
         </div><div class="column column--7 column--sml-10">
-            <div id="input-error-channel-select" class="info-message info-message--failure"></div>
+            <div class="info-message-placeholder">
+                <div id="input-error-channel-select" class="info-message info-message--failure"></div>
+            </div>
             <select type="text" id="channel-name-select" class="select select--primary select--arrow" onchange="toggleSelectedChannel(event.target.selectedOptions[0].value)">
             {{#if user}}
                 <option value="{{user.channelName}}" id="publish-channel-select-channel-option">{{user.channelName}}</option>

views/partials/publishForm-Url.handlebars

@@ -3,7 +3,9 @@
     <div class="column column--3 column--sml-10">
         <label class="label">URL:</label>
     </div><div class="column column--6 column--sml-10">
-        <div id="input-error-claim-name" class="info-message info-message--failure"  hidden="true"></div>
+        <div class="info-message-placeholder">
+            <div id="input-error-claim-name" class="info-message info-message--failure"  hidden="true"></div>
+        </div>
         <div class="input-text--primary">
             <span class="url-text url-text--secondary">Spee.ch /</span>
             <span id="url-channel" class="url-text url-text--secondary" {{#if user}}{{else}}hidden="true"{{/if}}>{{user.channelName}}:{{user.shortChannelId}}</span>