Replace AppButton for Button

src/components/app-button-menu/AppButtonMenu.styles.ts

@@ -3,15 +3,11 @@ import { TypographyVariantEnum } from '~/types'
 
 export const styles = {
   root: {
-    maxWidth: { xs: '200px', md: '300px' },
-    backgroundColor: 'primary.50',
-    display: 'flex',
-    alignItems: 'center',
-    px: '12px',
-    borderRadius: '100px'
+    overflow: 'hidden'
   },
-  text: { typography: TypographyVariantEnum.Subtitle1 },
+  text: { typography: TypographyVariantEnum.Subtitle1, mr: '10px' },
   chosenFilters: {
+    maxWidth: { xs: '50px', sm: '100px' },
     typography: TypographyVariantEnum.Subtitle1,
     fontWeight: 500,
     overflow: 'hidden',

src/components/app-button-menu/AppButtonMenu.tsx

@@ -13,18 +13,14 @@ import CircleIcon from '@mui/icons-material/Circle'
 import useAxios from '~/hooks/use-axios'
 import useMenu from '~/hooks/use-menu'
 import Loader from '~/components/loader/Loader'
-import AppButton from '~/components/app-button/AppButton'
 import AppMenuButton from '~/components/app-menu-button/AppMenuButton'
 import AppSelectButton from '~/components/app-select-button/AppSelectButton'
+import Button from '~scss-components/button/Button'
 
 import { defaultResponses } from '~/constants'
 import { spliceSx } from '~/utils/helper-functions'
 import { styles } from '~/components/app-button-menu/AppButtonMenu.styles'
-import {
-  ButtonVariantEnum,
-  CategoryNameInterface,
-  ServiceFunction
-} from '~/types'
+import { CategoryNameInterface, ServiceFunction } from '~/types'
 
 interface AppButtonMenuProps<T> extends Omit<MenuProps, 'open'> {
   title: string
@@ -146,16 +142,19 @@ const AppButtonMenu = <T extends Pick<CategoryNameInterface, '_id'>>({
 
   return (
     <>
-      <AppButton
+      <Button
+        endIcon={
+          <KeyboardArrowDownIcon sx={styles.arrowIcon(Boolean(anchorEl))} />
+        }
         onClick={openMenu}
+        size='sm'
+        startIcon={<CircleIcon sx={styles.unorderedListIcon} />}
         sx={spliceSx(styles.root, customSx?.root)}
-        variant={ButtonVariantEnum.Tonal}
+        variant='tonal'
       >
-        <CircleIcon sx={styles.unorderedListIcon} />
         <Typography sx={styles.text}>{title}:</Typography>
         <Typography sx={styles.chosenFilters}>{chosenFiltersText}</Typography>
-        <KeyboardArrowDownIcon sx={styles.arrowIcon(Boolean(anchorEl))} />
-      </AppButton>
+      </Button>
       {menu}
     </>
   )

src/components/app-menu-button/AppMenuButton.styles.ts

@@ -12,14 +12,8 @@ export const styles = {
     '& div': { pl: '10px' }
   },
   clearAll: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'end',
-    columnGap: '3px',
     typography: TypographyVariantEnum.Subtitle2,
-    m: '15px 20px 0 auto',
-    p: 0,
-    '&:hover': { backgroundColor: 'transparent' }
+    m: '15px 20px 0 auto'
   },
   clearIcon: { height: '18px', width: '18px' },
   divider: {

src/components/app-menu-button/AppMenuButton.tsx

@@ -3,11 +3,10 @@ import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Divider from '@mui/material/Divider'
 import ClearIcon from '@mui/icons-material/Clear'
-import AppButton from '~/components/app-button/AppButton'
 import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
+import Button from '~scss-components/button/Button'
 
 import { styles } from '~/components/app-menu-button/AppMenuButton.styles'
-import { ButtonVariantEnum } from '~/types'
 
 interface AppMenuButtonProps {
   selectedItems: string[]
@@ -45,17 +44,16 @@ const AppMenuButton: FC<AppMenuButtonProps> = ({
           value={inputValue}
         />
       </Box>
-      <AppButton
+      <Button
         disableRipple
         disabled={!selectedItems.length}
         onClick={onClearAll}
+        startIcon={<ClearIcon sx={styles.clearIcon} />}
         sx={styles.clearAll}
-        variant={ButtonVariantEnum.Text}
+        variant='text-secondary'
       >
-        <ClearIcon sx={styles.clearIcon} />
         {t('header.notifications.clearAll')}
-      </AppButton>
-
+      </Button>
       <Divider sx={styles.divider} />
       {children}
     </>

src/components/cards-list/CardsList.tsx

@@ -1,11 +1,10 @@
 import { FC, ReactElement } from 'react'
 import Box from '@mui/material/Box'
 
-import AppButton from '~/components/app-button/AppButton'
 import Loader from '~/components/loader/Loader'
+import Button from '~scss-components/button/Button'
 
 import { styles } from '~/components/cards-list/CardsList.styles'
-import { SizeEnum, ButtonVariantEnum } from '~/types'
 
 interface CardsListProps {
   btnText: string
@@ -33,15 +32,15 @@ const CardsList: FC<CardsListProps> = ({
       )}
 
       {isExpandable && (
-        <AppButton
+        <Button
           loading={loading}
           onClick={onClick}
-          size={SizeEnum.ExtraLarge}
+          size='md'
           sx={styles.btn}
-          variant={ButtonVariantEnum.Tonal}
+          variant='tonal'
         >
           {btnText}
-        </AppButton>
+        </Button>
       )}
     </Box>
   )

src/components/clickable-image/ClickableImage.tsx

@@ -1,9 +1,9 @@
 import { FC, ReactNode } from 'react'
 import Box, { BoxProps } from '@mui/material/Box'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
-import { ComponentEnum, ButtonVariantEnum, Media } from '~/types'
+import { ComponentEnum, Media } from '~/types'
 import { styles } from '~/components/clickable-image/ClickableImage.styles'
 
 interface ClickableImageProps extends Omit<BoxProps, 'onClick'> {
@@ -19,10 +19,10 @@ const ClickableImage: FC<ClickableImageProps> = ({
   ...props
 }) => {
   return (
-    <AppButton
+    <Button
       onClick={() => onClick?.(image)}
       sx={styles.imageButton}
-      variant={ButtonVariantEnum.Text}
+      variant='text-secondary'
     >
       <Box
         alt={image.name}
@@ -32,7 +32,7 @@ const ClickableImage: FC<ClickableImageProps> = ({
         {...props}
       />
       {children}
-    </AppButton>
+    </Button>
   )
 }
 

src/components/confirm-dialog/ConfirmDialog.tsx

@@ -7,11 +7,9 @@ import DialogContent from '@mui/material/DialogContent'
 import IconButton from '@mui/material/IconButton'
 import Typography from '@mui/material/Typography'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import { styles } from '~/components/confirm-dialog/ConfirmDialog.styles'
 
-import { ButtonVariantEnum } from '~/types'
-
 interface ConfirmDialogProps {
   message: string
   title: string
@@ -50,12 +48,10 @@ const ConfirmDialog: FC<ConfirmDialogProps> = ({
         <Typography>{t(message)}</Typography>
       </DialogContent>
       <DialogActions sx={styles.actions(revertButtons)}>
-        <AppButton onClick={onDismiss} variant={ButtonVariantEnum.Tonal}>
+        <Button onClick={onDismiss} variant='tonal'>
           {cancelButton || t('common.no')}
-        </AppButton>
-        <AppButton onClick={onConfirm}>
-          {confirmButton || t('common.yes')}
-        </AppButton>
+        </Button>
+        <Button onClick={onConfirm}>{confirmButton || t('common.yes')}</Button>
       </DialogActions>
     </Dialog>
   )

src/components/dropdown-add-btn/DropdownButton.styles.ts

@@ -1,7 +1,5 @@
 export const styles = {
   optionsButton: {
-    justifyContent: 'flex-start',
-    pl: '10px',
-    gap: '5px'
+    justifyContent: 'flex-start'
   }
 }

src/components/dropdown-add-btn/DropdownButton.tsx

@@ -1,9 +1,8 @@
 import { FC, ReactElement } from 'react'
 import { SxProps } from '@mui/material'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
-import { ButtonVariantEnum, SizeEnum } from '~/types'
 import { spliceSx } from '~/utils/helper-functions'
 import { styles } from '~/components/dropdown-add-btn/DropdownButton.styles'
 
@@ -21,17 +20,17 @@ const DropdownButton: FC<DropdownButtonProps> = ({
   value
 }) => {
   return (
-    <AppButton
+    <Button
       disableRipple
       fullWidth
       onClick={handleOnClick}
-      size={SizeEnum.Medium}
+      size='md'
+      startIcon={icon}
       sx={spliceSx(styles.optionsButton, sx)}
-      variant={ButtonVariantEnum.Text}
+      variant='text-secondary'
     >
-      {icon}
       {value}
-    </AppButton>
+    </Button>
   )
 }
 

src/components/enhanced-table/enhanced-table-pagination/EnhancedTablePagination.styles.ts

@@ -49,10 +49,5 @@ export const styles = {
         WebkitAppearance: 'none',
         margin: 0
       }
-  },
-  btn: {
-    borderColor: 'primary.100',
-    typography: 'body2',
-    color: 'basic.black'
   }
 }

src/components/enhanced-table/enhanced-table-pagination/EnhancedTablePagination.tsx

@@ -6,10 +6,10 @@ import TablePagination from '@mui/material/TablePagination'
 import TextField from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import { styles } from '~/components/enhanced-table/enhanced-table-pagination/EnhancedTablePagination.styles'
 
-import { ButtonVariantEnum, TablePaginationProps } from '~/types'
+import { TablePaginationProps } from '~/types'
 
 interface EnhancedTablePaginationProps {
   pagination: TablePaginationProps
@@ -78,13 +78,9 @@ const EnhancedTablePagination = ({
           type='number'
           value={pageInput}
         />
-        <AppButton
-          onClick={() => handlePageSubmit(pageCount)}
-          sx={styles.btn}
-          variant={ButtonVariantEnum.Contained}
-        >
+        <Button onClick={() => handlePageSubmit(pageCount)}>
           {t('table.go')}
-        </AppButton>
+        </Button>
       </Box>
     </Box>
   )

src/components/file-component/FileComponent.tsx

@@ -3,9 +3,9 @@ import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
-import { ButtonVariantEnum, File } from '~/types'
+import { File } from '~/types'
 import { getFormattedDate, spliceSx } from '~/utils/helper-functions'
 import { openInNewTab } from '~/components/file-component/FileComponent.constants'
 import { styles } from '~/components/file-component/FileComponent.styles'
@@ -30,10 +30,10 @@ const FileComponent: FC<FileComponentProps> = ({ file }) => {
 
   return (
     <Box sx={styles.fileWrapper}>
-      <AppButton
+      <Button
         onClick={() => openInNewTab(file)}
         sx={styles.file}
-        variant={ButtonVariantEnum.Text}
+        variant='text-secondary'
       >
         <Box sx={styles.formatFrame}>
           <Typography>{fileFormat}</Typography>
@@ -49,7 +49,7 @@ const FileComponent: FC<FileComponentProps> = ({ file }) => {
             <Typography>{formattedDate}</Typography>
           </Box>
         </Box>
-      </AppButton>
+      </Button>
     </Box>
   )
 }

src/components/file-uploader/FileUploader.tsx

@@ -10,14 +10,13 @@ import CloudUploadIcon from '@mui/icons-material/CloudUpload'
 import CloseIcon from '@mui/icons-material/Close'
 import { FormHelperText, SxProps } from '@mui/material'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import { styles } from '~/components/file-uploader/FileUploader.styles'
 
 import useUpload from '~/hooks/use-upload'
 
 import {
   AddDocuments,
-  ButtonVariantEnum,
   ComponentEnum,
   UploadFileEmitter,
   InputEnum,
@@ -36,8 +35,6 @@ interface FileUploaderProps {
     button?: SxProps
     error?: SxProps
   }
-  variant?: ButtonVariantEnum
-  size?: SizeEnum
   icon?: ReactElement
 }
 
@@ -49,8 +46,6 @@ const FileUploader: FC<FileUploaderProps> = ({
   validationData,
   isImages = false,
   sx = {},
-  variant,
-  size = SizeEnum.Medium,
   icon
 }) => {
   const { t } = useTranslation()
@@ -85,16 +80,16 @@ const FileUploader: FC<FileUploaderProps> = ({
   const acceptableFileTypes = validationData.filesTypes.join(', ')
 
   const uploadButton = (
-    <AppButton
+    <Button
       component={ComponentEnum.Label}
       onClick={handleClick}
-      size={size}
+      size='md'
+      startIcon={icon}
       sx={sx.button}
-      variant={variant}
+      variant='primary'
     >
       {isImages && <CloudUploadIcon sx={styles.icon} />}
       {buttonText}
-      {icon}
       <input
         accept={acceptableFileTypes}
         hidden
@@ -103,7 +98,7 @@ const FileUploader: FC<FileUploaderProps> = ({
         ref={inputRef}
         type={InputEnum.File}
       />
-    </AppButton>
+    </Button>
   )
 
   return (