checkbox alignment correction (#8)

Contains changes related to the list checkbox and edit button alignment
and styling, for step as a local property and for sweep as a global
property with automation ids

---------

Co-authored-by: Rajeshwari Kiwad <[email protected]>

Author: RajeshwriK

script-gen-ui/src/app/components/main-sweep/main-sweep.component.html

@@ -7,7 +7,12 @@
 <div class="parent-container">
   <div
     class="input-container"
-    style="overflow: auto; max-height: 100vh; min-width: min-content; min-height: 40vh;"
+    style="
+      overflow: auto;
+      max-height: 100vh;
+      min-width: min-content;
+      min-height: 40vh;
+    "
   >
     <div class="timing-autorangebox">
       <div [attr.aria-label]="'timingTab'">
@@ -228,12 +233,20 @@ <h3>Sweep</h3>
               name="isListSweep"
               (change)="updateSweepGlobalParameters()"
             />
-            <label for="list" style="margin-top: 4.5vh; margin-left: 5px"
+            <label
+              for="list"
+              style="margin-top: auto; margin-left: 3px; margin-bottom: 1vh"
               >List</label
             >
           </div>
-          <div style="margin-top: 2.9vh">
-            <button class="timing" (click)="enableList()">Edit</button>
+          <div style="margin-top: auto; margin-bottom: 0.5vh">
+            <button
+              [attr.aria-label]="'EditSweepList'"
+              class="timing"
+              (click)="enableList()"
+            >
+              Edit
+            </button>
             <app-list
               *ngIf="showList"
               [listsWithNames]="sweepListsWithNames"

script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss

@@ -275,10 +275,10 @@
 }
 
 .checkbox input {
-  margin-top: 4.2vh;
+  margin-top: auto;
   box-sizing: border-box;
   appearance: none;
-  padding: 1.3vh;
+  padding: 10px;
   border-radius: 3px;
 }
 
@@ -287,17 +287,17 @@
 }
 
 .checkbox input[type="checkbox"]:checked::after {
-    content: "";
-    left: 5px;
-    top: 1px;
-    width: 5px;
-    height: 10px;
-    border: solid var(--vscode-activityBar-activeBorder);
-    border-width: 0 2px 2px 0;
-    transform: rotate(45deg);
-    display: block;
-    margin: -6.5px -3px -3px -2px;
-    margin-left: -2.5px;
+  content: "";
+  left: 5px;
+  top: 1px;
+  width: 5px;
+  height: 10px;
+  border: solid var(--vscode-activityBar-activeBorder);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  display: block;
+  margin: -6.5px -3px -3px -2px;
+  margin-left: -2.5px;
 }
 
 .h3 {

script-gen-ui/src/app/components/main-sweep/step/step.component.html

@@ -161,22 +161,27 @@ <h3>
       ></app-input-toggle>
     </div>
     <div class="checkbox">
-      <div style="display: inline-flex">
+      <div
+        style="display: inline-flex; margin-top: auto; margin-bottom: -0.3vh"
+      >
         <input
           type="checkbox"
-          id="listStep"
           [attr.aria-label]="'listStep'"
           [(ngModel)]="listStep"
           name="listStep"
           (change)="submitStepGlobalParamsData()"
-          style="margin-top: 4.2vh"
           [disabled]="!selectedDeviceOption?.isValid"
         />
-        <label for="list" style="margin-top: 4vh; margin-left: 5px">List</label>
+        <label
+          for="list"
+          style="margin-left: 3px; margin-top: auto; margin-bottom: auto"
+          >List</label
+        >
       </div>
-      <div style="margin-top: 2.7vh; margin-left: 3vw">
+      <div style="margin-top: auto; margin-bottom: 0.5vh; margin-left: 3vh">
         <button
           class="timing"
+          [attr.aria-label]="'EditStepList'"
           (click)="showStepListPopup()"
           [disabled]="!selectedDeviceOption?.isValid"
         >

script-gen-ui/src/app/components/main-sweep/step/step.component.scss

@@ -166,25 +166,26 @@ h4 {
 }
 
 .checkbox input[type="checkbox"]:checked::after {
-    content: "";
-    left: 5px;
-    top: 1px;
-    width: 5px;
-    height: 10px;
-    border: solid var(--vscode-activityBar-activeBorder);
-    border-width: 0 2px 2px 0;
-    transform: rotate(45deg);
-    display: block;
-    margin: -6.5px -3px -3px -1.6px;
-    margin-left: -3px;
-    margin-top: -7px;
+  content: "";
+  left: 5px;
+  top: 1px;
+  width: 5px;
+  height: 10px;
+  border: solid var(--vscode-activityBar-activeBorder);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  display: block;
+  margin: -6.5px -3px -3px -1.6px;
+  margin-left: -3px;
+  margin-top: -7px;
 }
 
 .checkbox input {
-  margin-top: 3.5vh;
+  margin-top: auto;
   box-sizing: border-box;
-  padding: 1.3vh;
-  border-radius: 4px;
+  appearance: none;
+  padding: 10px;
+  border-radius: 3px;
 }
 
 .checkbox input[type="checkbox"] {
@@ -204,16 +205,13 @@ h4 {
 }
 
 .timing {
-  border-radius: 10px;
-  background-color: var(--vscode-editor-background);
+  border-radius: 13px;
+  background-color: transparent;
   color: var(--vscode-activityBarBadge-foreground);
-  padding: 5px;
   border-color: var(--vscode-activityBar-activeBorder);
   border-style: solid;
   border-width: thin;
-  padding-left: 10px;
-  padding-right: 10px;
-  // margin-left: 8vh;
+  padding: 5px 15px;
 }
 
 button.timing:disabled {