Merge pull request #821 from safe-global/chore/normalize-tx-builder-t…

…heme

feat(transaction-builder-theme): Remove safe-react-components from transaction builder

.github/workflows/cla.yml

@@ -23,7 +23,7 @@ jobs:
           # branch should not be protected
           branch: 'main'
           # user names of users allowed to contribute without CLA
-          allowlist: rmeissner,germartinez,Uxio0,dasanra,francovenica,luarx,DaniSomoza,yagopv,JagoFigueroa,jmealy,usame-algan,bot*
+          allowlist: clovisdasilvaneto,rmeissner,germartinez,Uxio0,dasanra,francovenica,luarx,DaniSomoza,yagopv,JagoFigueroa,jmealy,usame-algan,bot*
 
           # the followings are the optional inputs - If the optional inputs are not given, then default values will be taken
           # enter the remote organization name where the signatures should be stored (Default is storing the signatures in the same repository)

apps/tx-builder/src/components/Accordion/index.tsx

@@ -0,0 +1,87 @@
+import { ReactElement } from 'react'
+import AccordionMUI, { AccordionProps as AccordionMUIProps } from '@material-ui/core/Accordion'
+import AccordionSummaryMUI, {
+  AccordionSummaryProps as AccordionSummaryMUIProps,
+} from '@material-ui/core/AccordionSummary'
+import styled from 'styled-components'
+import FixedIcon from '../FixedIcon'
+
+type AccordionProps = AccordionMUIProps & {
+  compact?: boolean
+}
+
+type StyledAccordionProps = AccordionMUIProps & {
+  $compact?: AccordionProps['compact']
+}
+
+const StyledAccordion = styled(AccordionMUI)<StyledAccordionProps>`
+  &.MuiAccordion-root {
+    border-radius: ${({ $compact }) => ($compact ? '8px' : '0')};
+    border: ${({ $compact, theme }) => ($compact ? '2px solid ' + theme.palette.divider : 'none')};
+    border-bottom: 2px solid ${({ theme }) => theme.palette.divider};
+    margin-bottom: ${({ $compact }) => ($compact ? '16px' : '0')};
+    overflow: hidden;
+
+    &:before {
+      height: 0;
+    }
+
+    &:first-child {
+      border-top: 2px solid ${({ theme }) => theme.palette.divider};
+    }
+
+    &.Mui-expanded {
+      margin: ${({ $compact }) => ($compact ? '0 0 16px 0' : '0')};
+    }
+
+    .MuiAccordionDetails-root {
+      padding: 16px;
+    }
+  }
+`
+
+const StyledAccordionSummary = styled(AccordionSummaryMUI)`
+  &.MuiAccordionSummary-root {
+    &.Mui-expanded {
+      min-height: 48px;
+      border-bottom: 2px solid ${({ theme }) => theme.palette.divider};
+      background-color: ${({ theme }) => theme.palette.background.default};
+    }
+
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.default};
+    }
+
+    .MuiAccordionSummary-content {
+      &.Mui-expanded {
+        margin: 0;
+      }
+    }
+    .MuiIconButton-root {
+      font-size: 0;
+      padding: 16px;
+    }
+  }
+`
+
+export const Accordion = ({ compact, children, ...props }: AccordionProps): ReactElement => {
+  return (
+    <StyledAccordion square elevation={0} $compact={compact} {...props}>
+      {children}
+    </StyledAccordion>
+  )
+}
+
+export const AccordionSummary = ({
+  children,
+  ...props
+}: AccordionSummaryMUIProps): ReactElement => {
+  return (
+    <StyledAccordionSummary expandIcon={<FixedIcon type="chevronDown" />} {...props}>
+      {children}
+    </StyledAccordionSummary>
+  )
+}
+
+export { default as AccordionActions } from '@material-ui/core/AccordionActions'
+export { default as AccordionDetails } from '@material-ui/core/AccordionDetails'