Fix styles for input in OVE/Marvin editor [SCI-9256]

app/assets/stylesheets/shared_styles/elements/input_fields.scss

@@ -15,7 +15,7 @@
   .sci-input-field {
     @include font-button;
     animation-timing-function: $timing-function-sharp;
-    border: $border-secondary;
+    border: 1px solid var(--sn-light-grey);
     border-radius: $border-radius-default !important;
     box-shadow: none;
     height: 36px;
@@ -24,12 +24,18 @@
     transition: .3s;
     width: 100%;
 
+    &:hover {
+      border: 1px solid var(--sn-science-blue-hover);
+    }
+
     &:focus {
       border: $border-focus;
     }
 
     &:disabled {
-      background: transparent;
+      background-color: var(--sn-super-light-grey);
+      color: var(--sn-light-grey);
+      border: 1px solid var(--sn-light-grey);
     }
 
     &::placeholder {

app/assets/stylesheets/tailwind/inputs.css

@@ -29,6 +29,16 @@
     box-shadow: none;
   }
 
+  .sci-input-container-v2 input:hover {
+    border-color: var(--sn-science-blue-hover);
+  }
+
+  .sci-input-container-v2 input:disabled {
+    background-color: var(--sn-super-light-grey);
+    color: var(--sn-light-grey);
+    border: 1px solid var(--sn-light-grey);
+  }
+
   .sci-input-container-v2 .sn-icon {
     @apply m-2;
     color: var(--sn-black)

app/javascript/vue/ove/OpenVectorEditor.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="ove-wrapper flex flex-col h-screen">
     <div class="ove-header flex justify-between h-14 px-4 py-2">
-      <span class="file-name flex items-center ml-3">
-        <div class="sci-input-container">
+      <span class="file-name flex items-center ml-3 w-56">
+        <div class="sci-input-container-v2 w-full">
           <input v-model="sequenceName"
-                 class="border-sn-grey border-[1px] rounded-[4px] px-2 py-1 w-80 h-10 text-sm font-sans"
+                 class="sci-input-field"
                  type="text"
                  :disabled="readOnly"
                  :placeholder="i18n.t('open_vector_editor.sequence_name_placeholder')"/>
@@ -135,4 +135,4 @@
       }
     }
   }
- </script>
+ </script>

app/views/gene_sequence_assets/edit.html.erb

@@ -3,6 +3,7 @@
     <%= csp_meta_tag %>
     <%= javascript_include_tag 'i18n_bundle' %>
     <%= stylesheet_link_tag 'sn_icon_font' %>
+    <%= stylesheet_link_tag 'application' %>
     <%= stylesheet_link_tag 'tailwind' %>
     <%= stylesheet_link_tag 'open_vector_editor' %>
     <style>