Improve colours, hover states and UI for clearing input sequence

Author: tadast

public/css/app.min.css

@@ -68,10 +68,14 @@ export class Databases extends Component {
 
         // Toggle button.
         var toggleState = '[Select all]';
-        var toggleClass = 'px-2 text-seqblue text-sm';
+        var toggleClass = 'px-2 text-sm';
         var toggleShown = this.databases(category).length > 1;
         var toggleDisabled = this.state.type && this.state.type !== category;
-        if (toggleShown && toggleDisabled) toggleClass += ' text-gray-400';
+        if (toggleShown && toggleDisabled) {
+            toggleClass += ' text-gray-400';
+        } else {
+            toggleClass += ' text-seqblue';
+        }
         if (!toggleShown) toggleClass += ' hidden';
         if (this.nselected() === this.databases(category).length) {
             toggleState = '[Deselect all]';

public/js/databases.js

@@ -345,16 +345,16 @@ export class SearchQueryWidget extends Component {
                     </textarea>
                 </div>
                 <div
-                    className="hidden"
-                    style={{ position: 'absolute', top: '4px', right: '19px' }}
+                    className="hidden absolute top-2 right-2"
                     ref={this.controlsRef}>
                     <button
                         type="button"
-                        className="btn btn-sm btn-default" id="btn-sequence-clear"
+                        className="border border-gray-300 rounded bg-white hover:bg-gray-200" id="btn-sequence-clear"
                         title="Clear query sequence(s)."
                         onClick={this.clear}>
                         <span id="sequence-file"></span>
-                        <i className="fa fa-times"></i>
+                        <i className="fa fa-times w-6 h-6 p-1"></i>
+                        <span className="sr-only">Clear query sequence(s).</span>
                     </button>
                 </div>
             </div>

public/js/query.js

@@ -157,7 +157,7 @@ export class SearchButton extends Component {
             >
                 <button
                     type="submit"
-                    className="w-full md:w-auto flex text-xl justify-center py-2 px-16 border border-transparent rounded-md shadow-sm text-white bg-seqblue hover:bg-seqorange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-seqorange"
+                    className="uppercase w-full md:w-auto flex text-xl justify-center py-2 px-16 border border-transparent rounded-md shadow-sm text-white bg-seqblue hover:bg-seqorange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-seqorange"
                     id="method"
                     ref={this.submitButtonRef}
                     name="method"
@@ -179,9 +179,8 @@ export class SearchButton extends Component {
                         </button>
 
                         <div id="dropdown"
-                            className={`z-10 bg-blue-300 divide-y divide-gray-100 rounded-lg shadow absolute left-0 w-full text-xl text-center ${this.state.dropdownVisible ? '' : 'hidden'}`}>
-
-                            <ul className="py-2 text-gray-700" aria-labelledby="dropdownDefaultButton">
+                            className={`z-10 my-2 uppercase bg-blue-300 divide-y divide-gray-100 rounded-lg shadow absolute left-0 w-full text-xl text-center ${this.state.dropdownVisible ? '' : 'hidden'}`}>
+                            <ul className="text-gray-700" aria-labelledby="dropdownDefaultButton">
                                 {_.map(
                                     methods.slice(1),
                                     _.bind(function (method) {
@@ -192,7 +191,7 @@ export class SearchButton extends Component {
                                                     this.changeAlgorithm(method);
                                                 }, this)}
                                             >
-                                                <a href="#" className="block px-4 py-2 hover:bg-blue-400">{method}</a>
+                                                <a href="#" className="block px-4 py-2 hover:bg-blue-400 rounded-lg">{method}</a>
                                             </li>
                                         );
                                     }, this)

public/js/search_button.js

@@ -66,8 +66,8 @@
   <div class="mx-auto px-4">
     <div class="container">
       <p class="text-center">
-        Please cite data sources and <a style='vertical-align: baseline' href="https://doi.org/10.1093/molbev/msz185">the paper</a> describing <a href="https://wurmlab.com">our</a> <a href="https://sequenceserver.com">SequenceServer BLAST interface</a>.
-        <a style='vertical-align: baseline' href='https://sequenceserver.com'>
+        Please cite data sources and <a class="text-seqblue" href="https://doi.org/10.1093/molbev/msz185">the paper</a> describing <a class="text-seqblue" href="https://wurmlab.com">our</a> <a class="text-seqblue" href="https://sequenceserver.com">SequenceServer BLAST interface</a>.
+        <a class="text-seqblue" href='https://sequenceserver.com'>
           <em>
             <%=
               quote = [