bar-form mode variants

elixir-europe · Jan 26, 2024 · 037dba0 · 037dba0
1 parent 8bde79a
commit 037dba0
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -69,7 +69,7 @@ html {
   margin-bottom: 19px;
   margin-right: 46px;
   margin-top: 7px;
-  color: rgb(68, 99, 176) !important;
+  color: rgb(102 116 152) !important;
   font-weight: 700 !important;
 }
 
@@ -93,6 +93,20 @@ html {
   font-variant-caps: all-petite-caps;
 }
 
+.modeVariantsBarMode {
+  /* margin-bottom: 60px; */
+  margin-top: -15px;
+  margin-bottom: 31px;
+  color: rgba(12, 16, 64, 0.606);
+  font-size: 16px;
+  font-feature-settings: 'pcap', 'c2pc', "pcap", "c2pc";
+  font-variant-caps: all-petite-caps;
+}
+
+.modeVariantsBarMode:hover h2 {
+  color: rgb(236, 149, 0) !important;
+}
+
 .modeVariants:hover h2 {
   color: rgb(236, 149, 0) !important;
 }
@@ -1142,12 +1156,11 @@ h5 {
 
   .version {
     margin-bottom: 46px;
-    margin-right: 35px;
+    margin-right: 36px;
     margin-top: -35px;
-    color: rgb(68, 99, 176) !important;
+    color: rgb(102 116 152) !important;
     font-weight: 600;
   }
-
   .inputVariants {
     height: 24px;
     border: 1.5px solid #dfdfdf;

diff --git a/frontend/src/components/Layout/Layout.js b/frontend/src/components/Layout/Layout.js
@@ -596,6 +596,11 @@ function Layout (props) {
             setExpansionSection={setExpansionSection}
           />
         )}
+        {showVariants === true && showBar === false && (
+          <button className='modeVariantsBarMode' onClick={handleClick}>
+            <h2 className='modeVariantsQueries'>Change to FORM mode</h2>
+          </button>
+        )}
         <div className='container-fluid'>
           {cohorts === false &&
             props.collection !== 'Variant' &&
@@ -751,11 +756,6 @@ function Layout (props) {
           </div>
         )}
 
-        {showVariants === true && showBar === false && (
-          <button className='modeVariants' onClick={handleClick}>
-            <h2 className='modeVariantsQueries'>Change to FORM mode</h2>
-          </button>
-        )}
         {showVariants === true && showBar === true && (
           <button className='modeVariants' onClick={handleClick}>
             <h2 className='modeVariantsQueries2'>Change to BAR mode </h2>
@@ -1218,7 +1218,7 @@ function Layout (props) {
                 </div>
               </div>
             </div>
-            <form className="variantsForm" onSubmit={handleSubmit}>
+            <form className='variantsForm' onSubmit={handleSubmit}>
               <div className='tabset'>
                 <input
                   type='radio'