fix: Align the delete icon for change mutisig modal (#451)

ChainSafe · Dec 5, 2023 · f905d43 · f905d43
1 parent 1aa2781
commit f905d43
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 44 deletions.
diff --git a/packages/ui/src/components/modals/ChangeMultisig.tsx b/packages/ui/src/components/modals/ChangeMultisig.tsx
@@ -437,7 +437,7 @@ const ChangeMultisig = ({ onClose, className }: Props) => {
               spacing={2}
             >
               <Box className="loader">
-                {callError ? <ErrorOutlineIcon size={64} /> : <CircularProgress size={64} />}
+                {callError ? <ErrorOutlineIcon size={48} /> : <CircularProgress size={48} />}
                 {!!callError && (
                   <div className="callErrorMessage">
                     {callError.includes('multisig.NoTimepoint')
@@ -504,7 +504,11 @@ export default styled(ChangeMultisig)`
   }
 
   .subSection {
-    padding: 0 1.5rem;
+    padding: 0;
+
+    @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+      padding: 0 1.5rem;
+    }
   }
 
   .loader {

diff --git a/packages/ui/src/components/select/SignatorySelection.tsx b/packages/ui/src/components/select/SignatorySelection.tsx
@@ -7,12 +7,11 @@ import { HiOutlineTrash } from 'react-icons/hi2'
 import AccountDisplay from '../AccountDisplay'
 
 interface Props {
-  className?: string
   signatories: string[]
   setSignatories: React.Dispatch<React.SetStateAction<string[]>>
 }
 
-const SignatorySelection = ({ className, signatories, setSignatories }: Props) => {
+const SignatorySelection = ({ signatories, setSignatories }: Props) => {
   const addSignatory = useCallback(
     (newSignatory: string) => {
       const newSignatories = [...signatories, newSignatory]
@@ -30,31 +29,29 @@ const SignatorySelection = ({ className, signatories, setSignatories }: Props) =
   )
 
   return (
-    <Box className={className}>
+    <Box>
       {signatories.length > 0 && (
         <>
-          <div className="additionText">Selected:</div>
-          <Paper className="selectedList">
+          <HeadingStyled>Selected:</HeadingStyled>
+          <PaperStyled>
             {signatories.map((address, index) => (
-              <div
-                key={address}
-                className="selectedSignatory"
-              >
+              <SignatoryStyled key={address}>
                 <AccountDisplay address={address} />
-                <IconButton
-                  className="deleteButton"
-                  aria-label="delete"
-                  onClick={() => removeSignatory(index)}
-                >
-                  <HiOutlineTrash />
-                </IconButton>
-              </div>
+                <ButtonWrapperStyled>
+                  <DeleteButtonStyled
+                    aria-label="delete"
+                    onClick={() => removeSignatory(index)}
+                  >
+                    <HiOutlineTrash />
+                  </DeleteButtonStyled>
+                </ButtonWrapperStyled>
+              </SignatoryStyled>
             ))}
-          </Paper>
-          <div className="additionText">New signatory...</div>
+          </PaperStyled>
+          <HeadingStyled>New signatory:</HeadingStyled>
         </>
       )}
-      <Box className="addSignatoryField">
+      <AddSignatoryFieldStyled>
         <AccountSelection
           currentSelection={signatories}
           addAccount={addSignatory}
@@ -63,38 +60,64 @@ const SignatorySelection = ({ className, signatories, setSignatories }: Props) =
           //make sure the first state is empty
           value=""
         />
-      </Box>
+      </AddSignatoryFieldStyled>
     </Box>
   )
 }
 
-export default styled(SignatorySelection)`
-  .selectedList {
-    padding: 1rem;
-    margin-bottom: 2rem;
-  }
+const HeadingStyled = styled('h4')`
+  margin: 0.5rem 0;
+  font-weight: 500;
+`
 
-  .selectedSignatory {
-    margin-bottom: 1rem;
+const PaperStyled = styled(Paper)`
+  padding: 0;
+  margin-bottom: 2rem;
+  border: 1px solid ${({ theme }) => theme.custom.text.borderColor};
+  border-radius: ${({ theme }) => theme.custom.borderRadius};
+  box-shadow: none;
 
-    &:last-child {
-      margin-bottom: 0;
-    }
+  @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    padding: 0.5rem;
   }
+`
 
-  .deleteButton {
-    margin-left: 1rem;
-    height: 2.5rem;
-    align-self: center;
-  }
+const SignatoryStyled = styled('div')`
+  margin-bottom: 0.5rem;
+  display: flex;
+  padding: 0.5rem 0;
+  justify-content: space-between;
+  transition: background 0.3s linear;
+  border-radius: ${({ theme }) => theme.custom.borderRadius};
 
-  .selectedSignatory,
-  .addSignatoryField {
-    display: flex;
+  &:last-child {
+    margin-bottom: 0;
   }
 
-  .additionText {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
+  &:has(button:hover) {
+    background: ${({ theme }) => theme.custom.gray[300]};
+    border-radius: ${({ theme }) => theme.custom.borderRadius};
   }
 `
+
+const ButtonWrapperStyled = styled('div')`
+  display: flex;
+  flex: 1;
+  align-self: center;
+  justify-content: flex-end;
+`
+
+const DeleteButtonStyled = styled(IconButton)`
+  margin: 0 0.5rem;
+  height: 2.5rem;
+`
+
+const AddSignatoryFieldStyled = styled(Box)`
+  display: flex;
+  padding: 0.5rem 0;
+  justify-content: space-between;
+  transition: background 0.3s linear;
+  border-radius: ${({ theme }) => theme.custom.borderRadius};
+`
+
+export default SignatorySelection