fix: fix styles

Signed-off-by: Yash Sharma <[email protected]>

Author: Yashsharma1911

src/custom/ShareModal/ShareModal.tsx

@@ -13,6 +13,7 @@ import {
 } from '../../base';
 import { ChainIcon, DeleteIcon, LockIcon, PublicIcon } from '../../icons';
 import { useTheme } from '../../theme';
+import { BLACK, WHITE } from '../../theme/colors';
 import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal';
 import { UserSearchField } from '../UserSearchField';
 import {
@@ -65,6 +66,8 @@ const AccessList: React.FC<AccessListProps> = ({
     window.open(url, '_blank', 'noreferrer');
   };
 
+  const theme = useTheme();
+
   return (
     <>
       {accessList.length > 0 && (
@@ -99,7 +102,7 @@ const AccessList: React.FC<AccessListProps> = ({
                     aria-label="delete"
                     onClick={() => handleDelete(actorData.email)}
                   >
-                    <DeleteIcon />
+                    <DeleteIcon fill={theme.palette.background.neutral?.default} />
                   </IconButton>
                 )}
               </ListItemSecondaryAction>
@@ -240,8 +243,6 @@ const ShareModal: React.FC<ShareModalProps> = ({
             }
             fetchSuggestions={fetchSuggestions}
           />
-        </ModalBody>
-        <ModalBody>
           <CustomListItemText>
             <Typography variant="h6">General Access</Typography>
           </CustomListItemText>
@@ -253,13 +254,13 @@ const ShareModal: React.FC<ShareModalProps> = ({
                     <PublicIcon
                       width={24}
                       height={24}
-                      stroke={theme.palette.mode === 'dark' ? '#fff' : 'black'}
+                      stroke={theme.palette.mode === 'dark' ? WHITE : BLACK}
                     />
                   ) : (
                     <LockIcon
                       width={24}
                       height={24}
-                      stroke={theme.palette.mode === 'dark' ? '#fff' : 'black'}
+                      stroke={theme.palette.mode === 'dark' ? WHITE : BLACK}
                     />
                   )}
                 </VisibilityIconWrapper>
@@ -291,15 +292,15 @@ const ShareModal: React.FC<ShareModalProps> = ({
         </ModalBody>
 
         <ModalFooter variant="filled">
-          <ModalButtonSecondary variant="outlined" onClick={handleCopy}>
+          <ModalButtonSecondary
+            variant="outlined"
+            onClick={handleCopy}
+            style={{ marginRight: '1rem', padding: '7px 16px' }}
+          >
             <IconButtonWrapper>
-              <ChainIcon
-                width={24}
-                height={24}
-                stroke={theme.palette.mode === 'dark' ? '#fff' : 'black'}
-              />
+              <ChainIcon width={24} height={24} fill={theme.palette.text.constant?.white} />
             </IconButtonWrapper>
-            Copy Link
+            <Typography>Copy Link</Typography>
           </ModalButtonSecondary>
           <ModalButtonPrimary
             disabled={isShareDisabled()}

src/custom/ShareModal/style.tsx

@@ -23,7 +23,7 @@ export const IconButtonWrapper = styled(`div`)(() => ({
 export const VisibilityIconWrapper = styled(`div`)(({ theme }) => ({
   width: '36px',
   height: '36px',
-  background: theme.palette.secondary.tabHover,
+  background: theme.palette.background.hover,
   borderRadius: '20px',
   display: 'flex',
   justifyContent: 'center',
@@ -35,14 +35,14 @@ export const FormControlWrapper = styled(FormControl)(() => ({
   width: '100%'
 }));
 
-export const ListWrapper = styled(`div`)(({ theme }) => ({
+export const ListWrapper = styled(`div`)(() => ({
   maxHeight: '16rem',
-  overflowY: 'auto',
-  color: theme.palette.secondary.text
+  overflowY: 'auto'
 }));
 
 export const CustomSelect = styled(Select)(() => ({
   width: '6rem',
+  boxShadow: 'none',
   '&:before': {
     display: 'none'
   },
@@ -52,6 +52,12 @@ export const CustomSelect = styled(Select)(() => ({
   fontFamily: 'Qanelas Soft, sans-serif',
   '&.MuiTypography-root': {
     fontFamily: 'Qanelas Soft, sans-serif'
+  },
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none'
+  },
+  '& .MuiSelect-select': {
+    padding: 0
   }
 }));
 

src/custom/UserSearchField/UserSearchField.tsx

@@ -89,15 +89,19 @@ const UserSearchField: React.FC<UserSearchFieldProps> = ({
   };
 
   const handleInputChange = (_event: React.SyntheticEvent<Element, Event>, value: string) => {
+    console.log('called handle change');
     if (value === '') {
       setOptions([]);
       setOpen(false);
     } else {
+      console.log('Inside else');
       setSearchUserLoading(true);
       fetchSuggestions(value).then((filteredData) => {
+        console.log('Inside then function', filteredData);
         setOptions(filteredData);
         setSearchUserLoading(false);
       });
+      console.log('last');
       setError(false);
       setOpen(true);
     }