chore(tx-builder-theme): Remove safe-react components and theme from the tx-builder application

apps/tx-builder/src/components/Button.tsx

@@ -3,7 +3,7 @@ import ButtonMUI, { ButtonProps as ButtonMUIProps } from '@material-ui/core/Butt
 import { alpha } from '@material-ui/core/styles'
 
 import styled, { css, DefaultTheme, FlattenInterpolation, ThemeProps } from 'styled-components'
-import { Icon, IconProps, IconTypes } from './Icon'
+import { Icon, IconProps } from './Icon'
 
 type Colors = 'primary' | 'secondary' | 'error'
 type Variations = 'bordered' | 'contained' | 'outlined'
@@ -68,6 +68,10 @@ const customStyles: {
       &.Mui-disabled {
         color: ${({ theme }) => theme.palette.primary.main};
       }
+
+      &:hover {
+        background: ${({ theme }) => theme.palette.background.light};
+      }
     `,
   },
   secondary: {
@@ -114,12 +118,12 @@ const customStyles: {
   },
   error: {
     contained: css`
-      color: ${({ theme }) => theme.palette.common.white};
-      background-color: ${({ theme }) => theme.palette.error.main};
-      box-shadow: 1px 2px 10px ${alpha('#28363D', 0.18)};
+      color: ${({ theme }) => theme.palette.error.main};
+      background-color: ${({ theme }) => theme.palette.error.background};
 
       &:hover {
-        background-color: ${({ theme }) => theme.palette.error.dark};
+        background-color: ${({ theme }) => theme.palette.error.light};
+        color: ${({ theme }) => theme.palette.error.dark};
       }
     `,
     outlined: css`

apps/tx-builder/src/components/CreateNewBatchCard.tsx

@@ -1,5 +1,4 @@
 import { useRef } from 'react'
-import { ButtonLink, Icon, Text } from '@gnosis.pm/safe-react-components'
 import { alpha } from '@material-ui/core'
 import Hidden from '@material-ui/core/Hidden'
 import styled from 'styled-components'
@@ -8,6 +7,9 @@ import { useTheme } from '@material-ui/core/styles'
 import { ReactComponent as CreateNewBatchSVG } from '../assets/add-new-batch.svg'
 import useDropZone from '../hooks/useDropZone'
 import { useMediaQuery } from '@material-ui/core'
+import { Icon } from './Icon'
+import Text from './Text'
+import ButtonLink from './buttons/ButtonLink'
 
 type CreateNewBatchCardProps = {
   onFileSelected: (file: File | null) => void
@@ -47,14 +49,14 @@ const CreateNewBatchCard = ({ onFileSelected }: CreateNewBatchCardProps) => {
         error={isAcceptError}
       >
         {isAcceptError ? (
-          <StyledText size={'xl'} error={isAcceptError}>
+          <StyledText variant="body1" error={isAcceptError}>
             The uploaded file is not a valid JSON file
           </StyledText>
         ) : (
           <>
             <Icon type="termsOfUse" size="sm" />
-            <StyledText size={'xl'}>Drag and drop a JSON file or</StyledText>
-            <StyledButtonLink color="primary" onClick={handleBrowse}>
+            <StyledText variant="body1">Drag and drop a JSON file or</StyledText>
+            <StyledButtonLink color="secondary" onClick={handleBrowse}>
               choose a file
             </StyledButtonLink>
           </>
@@ -85,9 +87,11 @@ const StyledDragAndDropFileContainer = styled.div<{
 }>`
   box-sizing: border-box;
   max-width: ${({ fullWidth }) => (fullWidth ? '100%' : '420px')};
-  border: 2px dashed ${({ theme, error }) => (error ? theme.colors.error : '#008c73')};
+  border: 2px dashed
+    ${({ theme, error }) => (error ? theme.palette.error.main : theme.palette.secondary.dark)};
   border-radius: 8px;
-  background-color: ${({ theme, error }) => (error ? alpha(theme.colors.error, 0.7) : '#eaf7f4')};
+  background-color: ${({ theme, error }) =>
+    error ? alpha(theme.palette.error.main, 0.7) : theme.palette.secondary.background};
   padding: 24px;
   margin: 24px auto 0 auto;
 
@@ -104,22 +108,28 @@ const StyledDragAndDropFileContainer = styled.div<{
     }
 
     return `
-      border-color: ${error ? theme.colors.error : '#008c73'};
-      background-color: ${error ? alpha(theme.colors.error, 0.7) : '#eaf7f4'};
+      border-color: ${error ? theme.palette.error.main : theme.palette.secondary.dark};
+      background-color: ${
+        error ? alpha(theme.palette.error.main, 0.7) : theme.palette.secondary.background
+      };
     `
   }}
 `
 
 const StyledText = styled(Text)<{ error?: Boolean }>`
-  margin-left: 4px;
-  color: ${({ error }) => (error ? '#FFF' : '#566976')};
+  && {
+    margin-left: 4px;
+    color: ${({ error, theme }) =>
+      error ? theme.palette.common.white : theme.palette.text.secondary};
+  }
 `
 
 const StyledButtonLink = styled(ButtonLink)`
+  margin-left: 0.3rem;
   padding: 0;
   text-decoration: none;
 
   && > p {
-    font-size: 16px;
+    color: ${({ theme }) => theme.palette.secondary.dark};
   }
 `

apps/tx-builder/src/components/FixedIcon/images/plus.tsx

@@ -1,11 +1,16 @@
-import React from 'react'
-
 const icon = (
-  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.7895 4C12.3708 4 12.8421 4.47128 12.8421 5.05263L12.8421 18.9474C12.8421 19.5287 12.3708 20 11.7895 20C11.2081 20 10.7368 19.5287 10.7368 18.9474L10.7368 5.05263C10.7368 4.47128 11.2081 4 11.7895 4Z"
+      fill="#F4F4F4"
+    />
     <path
-      fill="#B2B5B2"
-      fillRule="evenodd"
-      d="M6 4h3c.552 0 1 .448 1 1s-.448 1-1 1H6v3c0 .552-.448 1-1 1s-1-.448-1-1V6H1c-.552 0-1-.448-1-1s.448-1 1-1h3V1c0-.552.448-1 1-1s1 .448 1 1v3z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M20 11.7895C20 12.3708 19.5287 12.8421 18.9474 12.8421L5.05263 12.8421C4.47128 12.8421 4 12.3708 4 11.7895C4 11.2081 4.47128 10.7368 5.05263 10.7368L18.9474 10.7368C19.5287 10.7368 20 11.2081 20 11.7895Z"
+      fill="#F4F4F4"
     />
   </svg>
 )