Fix padding on dropdown select

Author: polegkashti

frontend/src/components/NavBar/NavBar.styled.ts

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import DiscordIcon from 'components/common/Icons/DiscordIcon';
 import GitHubIcon from 'components/common/Icons/GitHubIcon';
 import ProductHuntIcon from 'components/common/Icons/ProductHuntIcon';
+import Select from 'components/common/Select/Select';
 
 export const Navbar = styled.nav(
   ({ theme }) => css`
@@ -118,3 +119,8 @@ export const Hyperlink = styled(Link)(
     cursor: pointer;
   `
 );
+
+// Add the new styled component for Select with custom padding
+export const NoPaddingSelect = styled(Select)`
+  padding-left: 0 !important;
+`;

frontend/src/components/NavBar/NavBar.tsx

@@ -41,7 +41,7 @@ const options = [
 
 const NavBar: React.FC<Props> = ({ onBurgerClick }) => {
   const { themeMode, setThemeMode } = useContext(ThemeModeContext);
-  // const { data: supportUrl } = useSupportUrl();
+  const { data: supportUrl } = useSupportUrl();
 
   const handleSupportRedirect = () => {
     if (supportUrl) {
@@ -68,13 +68,13 @@ const NavBar: React.FC<Props> = ({ onBurgerClick }) => {
       <S.NavbarVersion>v1.1.4</S.NavbarVersion>
       <S.NavbarSocial>
       <Button buttonType="text" buttonSize="S" onClick={handleSupportRedirect}>
-        Docs<External_Link/>
+        Docs <External_Link/>
       </Button>
-        <Select
+        <S.NoPaddingSelect
           options={options}
           value={themeMode}
-          onChange={setThemeMode}
-          isThemeMode
+          onChange={(option) => setThemeMode(option as string | number)}
+          isThemeMode={true}
         />
         <UserInfo />
       </S.NavbarSocial>

frontend/src/components/common/Select/Select.styled.ts

@@ -35,7 +35,7 @@ export const Select = styled.ul<Props>`
   border-radius: 4px;
   font-size: 14px;
   width: fit-content;
-  padding-left: 0px;
+  padding-left: 16px;
   padding-right: 12px;
   color: ${({ theme, disabled }) =>
     disabled ? theme.select.color.disabled : theme.select.color.normal};