Merge pull request #848 from amitamrutiya/fix-build

make visibility chip smaller and fix build failed issue
layer5io · Dec 13, 2024 · 12bded0 · 12bded0
2 parents 01d06d5 + dd6270e
commit 12bded0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/src/constants/iconsSizes.ts b/src/constants/iconsSizes.ts
@@ -1,5 +1,10 @@
 // icon styles, setting general height and width properties to solves scaling and consistency problems
 
+export const iconXSmall = {
+  height: 16,
+  width: 16
+};
+
 export const iconSmall = {
   height: 20,
   width: 20

diff --git a/src/custom/UserSearchField/UserSearchField.tsx b/src/custom/UserSearchField/UserSearchField.tsx
@@ -136,6 +136,8 @@ const UserShareSearch: React.FC<UserSearchFieldProps> = ({
       <Autocomplete
         id="user-search-field"
         sx={{ width: 'auto' }}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         filterOptions={(x) => x}
         options={options}
         disableClearable

diff --git a/src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx b/src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx
@@ -2,7 +2,7 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { Theme } from '@mui/material';
 import { MouseEvent, useState } from 'react';
 import { Button, Menu, MenuItem } from '../../base';
-import { iconSmall } from '../../constants/iconsSizes';
+import { iconXSmall } from '../../constants/iconsSizes';
 import { ALICE_BLUE, CHINESE_SILVER, NOT_FOUND, styled } from '../../theme';
 
 interface VisibilityChipMenuProps {
@@ -43,8 +43,9 @@ const StyledButton = styled(Button)(() => ({
 }));
 
 const StyledDiv = styled('div')(({ theme, enabled }: { theme?: Theme; enabled: boolean }) => ({
-  paddingLeft: '0.5rem',
-  paddingRight: enabled ? '0' : '0.5rem',
+  paddingLeft: '0.3rem',
+  height: '1.5rem',
+  paddingRight: enabled ? '0' : '0.3rem',
   borderRadius: '0.25rem',
   border: `1px solid ${NOT_FOUND}`,
   background:
@@ -55,7 +56,7 @@ const StyledDiv = styled('div')(({ theme, enabled }: { theme?: Theme; enabled: b
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  width: '4.5rem',
+  width: '3.8rem',
   fontSize: '0.75rem',
   fontFamily: theme?.typography.fontFamily
 }));
@@ -99,8 +100,8 @@ const VisibilityChipMenu: React.FC<VisibilityChipMenuProps> = ({
         data-testid={`design-visibility-${value.toLowerCase()}`}
       >
         <StyledDiv enabled={enabled}>
-          <span>{value}</span>
-          {enabled && <ArrowDropDownIcon {...iconSmall} />}
+          <span style={{ fontSize: '0.7rem' }}>{value}</span>
+          {enabled && <ArrowDropDownIcon style={{ ...iconXSmall }} />}
         </StyledDiv>
       </StyledButton>