feat: add css for bulk check in Checkbox

Author: AbhishekA1509

src/assets/icons/ic-bulk-check.svg

@@ -123,6 +123,7 @@ export function Option(props) {
 export function DropdownIndicator(props) {
     return (
         <components.DropdownIndicator {...props}>
+            {/* FIXME: Why are we hard coding test id here? */}
             <ArrowDown className="icon-dim-20 icon-n5" data-testid="overview-project-edit-dropdown" />
         </components.DropdownIndicator>
     )

src/components/v2/common/ReactSelect.utils.tsx

@@ -2058,6 +2058,10 @@ button.anchor {
 
 .dc__border-dashed {
     border: 1px dashed var(--N200);
+
+    &--n3 {
+        border: 1px dashed var(--N300);
+    }
 }
 
 .dc__border-n1 {
@@ -2104,6 +2108,10 @@ button.anchor {
     border-bottom: 2px solid var(--N200);
 }
 
+.dc__border-bottom-b5-2 {
+    border-bottom: 2px solid var(--B500) !important;
+}
+
 .dc__border-left {
     border-left: solid 1px var(--N200);
 }
@@ -2207,6 +2215,10 @@ button.anchor {
     max-width: 200px !important;
 }
 
+.dc__mxw-250 {
+    max-width: 250px;
+}
+
 .dc__mxw-300 {
     max-width: 300px;
 }
@@ -2931,6 +2943,10 @@ textarea,
 }
 
 // Width in percentage
+.mw-100p {
+    min-width: 100%;
+}
+
 .w-25 {
     width: 25%;
 }
@@ -2997,6 +3013,10 @@ textarea,
     min-width: 200px;
 }
 
+.min-w-140 {
+    min-width: 140px;
+}
+
 .dc__mnw-100 {
     min-width: 100px;
 }
@@ -3446,6 +3466,10 @@ textarea,
     margin-bottom: -1px;
 }
 
+.mb-neg-2{
+    margin-bottom: -2px;
+}
+
 .m-0-imp {
     margin: 0 !important;
 }
@@ -3555,6 +3579,14 @@ textarea,
     overflow: scroll !important;
 }
 
+.dc__hide-hscroll {
+    overflow-x: hidden;
+}
+
+.dc__hscroll {
+    overflow-x: scroll;
+}
+
 .dc__no-svg-fill {
     path {
         fill: none !important;
@@ -4083,3 +4115,10 @@ textarea::placeholder {
 }
 
 // End: accouncement banner
+
+.bulk-selection-widget {
+    border: 1px solid var(--B500);
+    background: rgba(240, 247, 255, 0.80);
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.35);
+    backdrop-filter: blur(5px);
+}

src/css/base.scss

@@ -314,6 +314,10 @@ p.sentence-case:first-letter {
     background-image: url('../assets/icons/ic-checkbox-selected.svg');
 }
 
+.form__checkbox:checked[value='BULK_CHECKED']~.form__checkbox-container {
+    background-image: url('../assets/icons/ic-bulk-check.svg');
+}
+
 .any-selected {
 
     background-image: url('../assets/icons/ic-checkbox-intermediate.svg');