diff --git a/packages/widget/src/components/BookmarkLanding/BookmarkLandingButtonGroup.styled.tsx b/packages/widget/src/components/BookmarkLanding/BookmarkLandingButtonGroup.styled.tsx index 35504c93f..03fc52818 100644 --- a/packages/widget/src/components/BookmarkLanding/BookmarkLandingButtonGroup.styled.tsx +++ b/packages/widget/src/components/BookmarkLanding/BookmarkLandingButtonGroup.styled.tsx @@ -1,4 +1,4 @@ -import { Box, Button, ButtonGroup as MuiButtonGroup } from '@mui/material'; +import { Box, Button } from '@mui/material'; import type { ButtonProps } from '@mui/material/Button'; import { styled } from '@mui/material/styles'; @@ -7,7 +7,7 @@ interface SelectedButtonProps extends ButtonProps { selected: string; } -export const ButtonContainer = styled(Box)(({ theme }) => ({ +export const ButtonGroupContainer = styled(Box)(({ theme }) => ({ display: 'flex', padding: '4px', alignItems: 'center', @@ -17,7 +17,7 @@ export const ButtonContainer = styled(Box)(({ theme }) => ({ borderRadius: '20px', })); -export const SelectedButton = styled(Button)( +export const SelectButton = styled(Button)( ({ theme, selected }) => ({ borderRadius: '20px', flex: 1, @@ -32,5 +32,3 @@ export const SelectedButton = styled(Button)( boxShadow: selected === 'Custom' || selected === 'Bookmarks' ? 'none' : '', }), ); - -export const ButtonGroup = styled(MuiButtonGroup)(({ theme }) => ({})); diff --git a/packages/widget/src/components/BookmarkLanding/BookmarkLandingButtonGroup.tsx b/packages/widget/src/components/BookmarkLanding/BookmarkLandingButtonGroup.tsx index fb91875c7..340ab0049 100644 --- a/packages/widget/src/components/BookmarkLanding/BookmarkLandingButtonGroup.tsx +++ b/packages/widget/src/components/BookmarkLanding/BookmarkLandingButtonGroup.tsx @@ -1,8 +1,8 @@ import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { - ButtonContainer, - SelectedButton, + ButtonGroupContainer, + SelectButton, } from './BookmarkLandingButtonGroup.styled'; export const BookmarkLandingButtonGroup = () => { @@ -10,16 +10,16 @@ export const BookmarkLandingButtonGroup = () => { const [selected, setSelected] = useState('Custom'); return ( - - setSelected('Custom')}> + + setSelected('Custom')}> {t('button.custom')} - - + setSelected('Bookmarks')} > {t('button.bookmarks')} - - + + ); };