fix: styling for button with selector

Author: eshankvaish

src/Shared/Components/ButtonWithSelector/ButtonWithSelector.tsx

@@ -29,7 +29,7 @@ const ButtonWithSelector = ({
     const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false)
 
     return (
-        <div className="flexbox">
+        <div className="flexbox bcb-5 br-4">
             <button
                 className={`cta flex h-28 ${showPopUp ? 'dc__no-right-radius' : ''} dc__no-border-imp fs-12 fw-6 lh-20-imp ${className}`}
                 type="button"
@@ -39,9 +39,9 @@ const ButtonWithSelector = ({
             </button>
             {showPopUp && (
                 <PopupMenu autoClose autoPosition onToggleCallback={setIsMenuOpen}>
-                    <PopupMenu.Button rootClassName="flex dc__transparent p-8 w-28 bcb-5 dc__right-radius-4 dc__no-left-radius dc__no-top-border dc__no-bottom-border dc__no-right-border button-with-selector">
+                    <PopupMenu.Button rootClassName="flex dc__transparent p-0 w-28 bcb-5 dc__right-radius-4 dc__no-left-radius dc__no-top-border dc__no-bottom-border dc__no-right-border button-with-selector">
                         <ICDropdown
-                            className="icon-dim-12 fcn-0 dc__no-shrink rotate"
+                            className="icon-dim-16 fcn-0 dc__no-shrink rotate"
                             style={{ ['--rotateBy' as any]: isMenuOpen ? '180deg' : '0deg' }}
                         />
                     </PopupMenu.Button>

src/Shared/Components/ButtonWithSelector/buttonWithSelector.scss

@@ -1,5 +1,9 @@
 .button-with-selector {
+    border-left: 1px solid rgba(255, 255, 255, 0.20);
+
     &:hover, &:active, &:focus {
-        border: 1px solid var(--N200);
+        border: none;
+        border-left: 1px solid rgba(255, 255, 255, 0.20);
+        background-color: var(--B600);
     }
-}
+}