Formatting improvements on search page

wurmlab · Sep 26, 2024 · e5c9449 · e5c9449
1 parent 57c4fc2
commit e5c9449
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 16 deletions.
diff --git a/public/js/databases.js b/public/js/databases.js
@@ -76,7 +76,7 @@ export class Databases extends Component {
 
         // Toggle button.
         var toggleState = '[Select all]';
-        var toggleClass = 'px-2 text-sm';
+        var toggleClass = 'px-2 text-lg';
         var toggleShown = this.databases(category).length > 1;
         var toggleDisabled = this.state.type && this.state.type !== category;
         if (toggleShown && toggleDisabled) {
@@ -94,7 +94,7 @@ export class Databases extends Component {
             <div className={columnClass} key={'DB_' + category}>
                 <div>
                     <div className="border-b border-seqorange mb-2">
-                        <h4 className="font-medium inline">
+                        <h4 className="font-medium inline text-lg">
                             {panelTitle}
                         </h4>
                         <button
@@ -108,12 +108,12 @@ export class Databases extends Component {
                             {toggleState}
                         </button>
                     </div>
-                    <ul className={'databases text-lg ' + category}>
+                    <ul className={'databases ' + category}>
                         {_.map(
                             this.databases(category),
                             _.bind(function (database, index) {
                                 return (
-                                    <li key={'DB_' + category + index} className="h-6">
+                                    <li key={'DB_' + category + index} className="h-6 text-lg">
                                         {this.renderDatabase(database)}
                                     </li>
                                 );

diff --git a/public/js/options.js b/public/js/options.js
@@ -72,9 +72,9 @@ export class Options extends Component {
         return (
             <div id="options-presets" className="w-full">
                 { Object.keys(this.props.predefinedOptions).length > 1 && <>
-                    <h3 className="text-base w-full font-medium border-b border-seqorange mb-2">Settings</h3>
+                    <h3 className="text-lg w-full font-medium border-b border-seqorange mb-2">Settings</h3>
 
-                    <p className="text-sm">Choose a predefined setting or customize BLAST parameters.</p>
+                    <p className="text-base">Choose a predefined setting or customize BLAST parameters.</p>
                     {this.presetListJSX()}
                 </>}
             </div>
@@ -83,7 +83,7 @@ export class Options extends Component {
 
     presetListJSX() {
         return (
-            <ul className="text-sm my-1">
+            <ul className="text-lg my-1">
                 {
                     Object.entries(this.props.predefinedOptions).map(
                         ([key, config], index) => {
@@ -119,8 +119,8 @@ export class Options extends Component {
         return(
              <div className={this.state.paramsMode !== 'advanced' ? 'w-full hidden' : 'w-full'}>
                 <div className="flex items-end">
-                    <label className="flex items-center text-lg" htmlFor="advanced">
-                        Advanced parameters
+                    <label className="flex items-center text-lg text-gray-600" htmlFor="advanced">
+                        Parameters
                     </label>
 
                     {this.props.blastMethod &&

diff --git a/public/js/query.js b/public/js/query.js
@@ -349,7 +349,7 @@ export class SearchQueryWidget extends Component {
                     className="sequence">
                     <textarea
                         id="sequence" ref={this.textareaRef}
-                        className="block w-full p-4 text-gray-900 border border-gray-300 rounded-l-lg rounded-tr-lg bg-gray-50 text-base font-mono min-h-52 resize-y"
+                        className="block w-full p-4 text-gray-900 border border-gray-300 rounded-l-lg rounded-tr-lg bg-gray-50 text-sm font-mono min-h-52 resize-y"
                         name="sequence" value={this.state.value}
                         rows="6"
                         required="required"

diff --git a/public/js/tests/form.spec.js b/public/js/tests/form.spec.js
@@ -12,7 +12,7 @@ export const setMockJSONResult = (result) => {
     global.$.getJSON = (_, cb) => cb(result);
 };
 
-describe('ADVANCED PARAMETERS', () => {
+describe('PARAMETERS', () => {
     let csrfMetaTag;
 
     beforeEach(() => {

diff --git a/public/sequenceserver-report.min.js.map b/public/sequenceserver-report.min.js.map
diff --git a/public/sequenceserver-search.min.js b/public/sequenceserver-search.min.js
diff --git a/public/sequenceserver-search.min.js.map b/public/sequenceserver-search.min.js.map
diff --git a/views/layout.erb b/views/layout.erb
@@ -41,7 +41,7 @@
           </li>
           <li>
             <a
-              class="text-seqblue flex items-center text-sm hover:text-seqorange"
+              class="text-seqblue flex items-center text-base hover:text-seqorange"
               target="_blank"
               href="https://sequenceserver.com/support">
 

diff --git a/views/search.erb b/views/search.erb
@@ -16,7 +16,7 @@
 
     <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-screen-md sm:w-full">
       <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 border-b">
-        <h3 class="text-xl leading-6 font-medium text-gray-900">Advanced Options</h3>
+        <h3 class="text-xl leading-6 font-medium text-gray-900">Options</h3>
       </div>
 
       <div class="overflow-y-scroll max-h-96 bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">