Task/tsp 1119 (#6)

Contains changes related to list checkbox styling for step and sweep
components

Author: RajeshwriK

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

@@ -277,11 +277,29 @@
 .checkbox input {
   margin-top: 4.2vh;
   box-sizing: border-box;
-  // appearance: none;
+  appearance: none;
   padding: 1.3vh;
   border-radius: 3px;
 }
 
+.checkbox input[type="checkbox"]:checked {
+  border-color: var(--vscode-activityBar-activeBorder);
+}
+
+.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;
+}
+
 .h3 {
   padding: 0;
   display: flex;

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

@@ -161,39 +161,37 @@ h4 {
   margin-right: auto;
 }
 
-// .checkbox input[type="checkbox"]:checked {
-//   background-color: #2196f3; // or your preferred color
-//   border-color: #2196f3;
-// }
+.checkbox input[type="checkbox"]:checked {
+  border-color: var(--vscode-activityBar-activeBorder);
+}
 
-// .checkbox input[type="checkbox"]:checked::after {
-//   content: '';
-//   position: absolute;
-//   left: 5px;
-//   top: 1px;
-//   width: 5px;
-//   height: 10px;
-//   border: solid blue;
-//   border-width: 0 2px 2px 0;
-//   transform: rotate(45deg);
-//   display: block;
-// }
+.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;
+}
 
 .checkbox input {
   margin-top: 3.5vh;
   box-sizing: border-box;
-  // appearance: none;
   padding: 1.3vh;
-  border-radius: 3px;
-  // appearance: none;
+  border-radius: 4px;
 }
 
-// .checkbox input[type="checkbox"] {
-//   appearance: none;
-//   width: 18px;
-//   height: 18px;
-//   // border: 2px solid #888;
-// }
+.checkbox input[type="checkbox"] {
+  appearance: none;
+  width: 18px;
+  height: 18px;
+}
 
 .input-group input[type="checkbox"]:disabled {
   opacity: 0.6;