fix(protocol-designer): various UI changes to increase usability and …

…center modals (#11754) closes RQA-366 RQA-398 RQA-397 RQA-367
Opentrons · Nov 17, 2022 · 8427b42 · 8427b42
1 parent ec89cc4
commit 8427b42
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/components/src/modals/modals.css b/components/src/modals/modals.css
@@ -9,13 +9,14 @@
     margin: 0 auto;
     padding: 1rem;
     border-radius: 0.5rem;
-    position: relative;
   }
 }
 
 .modal {
   @apply --modal;
 
+  align-items: flex-start;
+  position: fixed;
   z-index: 1;
   padding: 4rem;
 }

diff --git a/protocol-designer/src/components/FilePage.css b/protocol-designer/src/components/FilePage.css
@@ -23,11 +23,20 @@
   justify-content: center;
 }
 
-.edit_button,
 .swap_button {
   display: block;
   margin: 0 0.5rem;
   width: 8rem;
+
+  &:focus {
+    background-color: transparent;
+  }
+}
+
+.edit_button {
+  display: block;
+  margin: 0 0.5rem;
+  width: 8rem;
 }
 
 .update_button {

diff --git a/protocol-designer/src/components/modals/EditModulesModal/index.tsx b/protocol-designer/src/components/modals/EditModulesModal/index.tsx
@@ -259,7 +259,7 @@ const EditModulesModalComponent = (
         )}
         <Form>
           <div className={styles.form_row}>
-            <FormGroup label="Model*" className={styles.option_model}>
+            <FormGroup label="Model" className={styles.option_model}>
               <ModelDropdown
                 fieldName={'selectedModel'}
                 tabIndex={0}

diff --git a/protocol-designer/src/components/modules/styles.css b/protocol-designer/src/components/modules/styles.css
@@ -54,6 +54,10 @@
   display: inline-block;
   width: 6.75rem;
   margin-left: 1rem;
+
+  &:focus {
+    background-color: transparent;
+  }
 }
 
 .crash_info_container {