Merge pull request #57 from asgeir-eth/asgeir/zodiac-ui-components-in…

…tegration

Remove local theming instead use the theme from zodiac-ui-components

package.json

@@ -23,7 +23,8 @@
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.4",
     "styled-components": "^5.1.1",
-    "timeago-react": "^3.0.2"
+    "timeago-react": "^3.0.2",
+    "zodiac-ui-components": "^0.0.28"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.4",

src/components/Collapsable.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { makeStyles, Paper, PaperProps } from "@material-ui/core";
+import { makeStyles, PaperProps } from "@material-ui/core";
+import { ZodiacPaper } from "zodiac-ui-components";
 import classNames from "classnames";
 
 interface CollapsableProps extends PaperProps {
@@ -37,7 +38,11 @@ export const Collapsable: React.FC<CollapsableProps> = ({
 }) => {
   const classes = useStyles();
   return (
-    <Paper {...props} className={classNames(classes.root, className)}>
+    <ZodiacPaper
+      {...props}
+      borderStyle="double"
+      className={classNames(classes.root, className)}
+    >
       {children}
       {content ? (
         <div
@@ -48,6 +53,6 @@ export const Collapsable: React.FC<CollapsableProps> = ({
           {content}
         </div>
       ) : null}
-    </Paper>
+    </ZodiacPaper>
   );
 };

src/components/ethereum/ParamInput.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { ParamType } from "@ethersproject/abi";
-import { TextField, TextFieldProps } from "../input/TextField";
+import { ZodiacTextField } from "zodiac-ui-components";
+import { TextFieldProps } from "../input/TextField";
 import { formatParamValue } from "../../utils/contracts";
 import { MenuItem } from "@material-ui/core";
 import { BigNumber } from "ethers";
@@ -70,7 +71,7 @@ export const ParamInput = ({
 
   if (param.baseType === "boolean") {
     return (
-      <TextField
+      <ZodiacTextField
         select
         color="secondary"
         label={getLabel(param)}
@@ -80,12 +81,12 @@ export const ParamInput = ({
       >
         <MenuItem value="true">True</MenuItem>
         <MenuItem value="false">True</MenuItem>
-      </TextField>
+      </ZodiacTextField>
     );
   }
 
   return (
-    <TextField
+    <ZodiacTextField
       color="secondary"
       label={getLabel(param)}
       value={value}

src/components/input/ArbitratorSelect.tsx

@@ -54,10 +54,6 @@ const useStyles = makeStyles((theme) => ({
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
     "& input": {
-      borderRightWidth: 1,
-      borderRightStyle: "solid",
-      borderRightColor: theme.palette.secondary.main,
-      paddingRight: theme.spacing(1),
       textAlign: "right",
     },
   },

src/components/input/DisplayField.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { makeStyles, Paper, Typography } from "@material-ui/core";
+import { makeStyles, Typography } from "@material-ui/core";
+import { ZodiacPaper } from "zodiac-ui-components";
 
 interface DisplayFieldProps {
   label: string;
@@ -26,9 +27,9 @@ export const DisplayField = ({ label, value }: DisplayFieldProps) => {
       <Typography noWrap className={classes.label}>
         {label}
       </Typography>
-      <Paper className={classes.field} elevation={0}>
+      <ZodiacPaper borderStyle="double" className={classes.field}>
         <Typography noWrap>{value}</Typography>
-      </Paper>
+      </ZodiacPaper>
     </div>
   );
 };

src/components/input/TextField.tsx

@@ -23,10 +23,6 @@ const StyledTextField = withStyles((theme) => ({
       marginTop: 0,
       minHeight: "37px",
     },
-    "& .MuiInputBase-root input": {
-      fontFamily: "Roboto Mono",
-      fontSize: ".75rem",
-    },
     "& .MuiSelect-select:focus": {
       backgroundColor: "transparent",
     },
@@ -41,7 +37,7 @@ const useStyles = makeStyles((theme) => ({
   },
   label: {
     color: theme.palette.text.primary,
-    marginBottom: theme.spacing(1),
+    marginBottom: "4px",
   },
   inputContainer: {
     flexGrow: 1,
@@ -50,10 +46,6 @@ const useStyles = makeStyles((theme) => ({
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
     "& input": {
-      borderRightWidth: 1,
-      borderRightStyle: "solid",
-      borderRightColor: theme.palette.secondary.main,
-      paddingRight: theme.spacing(1),
       textAlign: "right",
     },
   },

src/components/input/TimeSelect.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Box, makeStyles, MenuItem, Select } from "@material-ui/core";
 import { BigNumber, BigNumberish } from "ethers";
 import { ReactComponent as CheckmarkIcon } from "../../assets/icons/checkmark.svg";
-import { TextField } from "./TextField";
+import { TextField } from "./TextField"
 
 const unitConversion = {
   seconds: 1,

src/components/layout/AppLayout.tsx

@@ -1,33 +1,21 @@
 import React from "react";
-import { makeStyles, Paper } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core";
+import { ZodiacPaper } from "zodiac-ui-components";
 
 const useStyles = makeStyles((theme) => ({
   root: {
     display: "grid",
     height: "calc(100% - 70px)",
     gridTemplateColumns: "390px 1fr",
     gridGap: theme.spacing(0.5),
-    borderRadius: 0,
     overflow: "hidden",
     padding: theme.spacing(0.5),
-    background: "none",
-    "&::before": {
-      content: "none",
-    },
   },
   leftPanel: {
     overflowY: "auto",
-    borderRightStyle: "solid",
-    borderRightWidth: 1,
-    borderRightColor: theme.palette.divider,
-    backgroundColor: "none",
   },
   content: {
     overflowY: "auto",
-    background: "none",
-    "&::before": {
-      content: "none",
-    },
   },
 }));
 
@@ -38,11 +26,11 @@ interface AppLayoutProps {
 export const AppLayout: React.FC<AppLayoutProps> = ({ children, left }) => {
   const classes = useStyles();
   return (
-    <Paper className={classes.root}>
-      <Paper className={classes.content}>{left}</Paper>
-      <Paper id="app-content" className={classes.content}>
+    <ZodiacPaper variant="outlined" className={classes.root}>
+      <ZodiacPaper variant="outlined" className={classes.content}>{left}</ZodiacPaper>
+      <ZodiacPaper variant="outlined" id="app-content" className={classes.content}>
         {children}
-      </Paper>
-    </Paper>
+      </ZodiacPaper>
+    </ZodiacPaper>
   );
 };