Akroweb components replace

package.json

@@ -40,9 +40,9 @@
   "author": "Serdtsev Dmitriy",
   "license": "MIT",
   "dependencies": {
-    "@akropolis-web/components": "^0.5.3",
-    "@akropolis-web/primitives": "^0.2.0",
-    "@akropolis-web/styles": "^0.8.0",
+    "@akropolis-web/components": "^0.10.1",
+    "@akropolis-web/primitives": "^0.2.3",
+    "@akropolis-web/styles": "^0.9.0",
     "@apollo/react-common": "^3.1.3",
     "@apollo/react-hooks": "^3.1.3",
     "@erebos/bzz": "^0.13.0",

src/app/pages/Lend/views/LoanProposalsTable/LoanProposalsTable.tsx

@@ -52,10 +52,7 @@ function AdditionalInfoContent(props: Pick<LoanProposal, 'descriptionHash'>) {
   );
 }
 
-const makeColumns = (
-  isStakingAllowed: boolean,
-  backgroundColor: string,
-): Array<NewTable.models.Column<LoanProposal>> => [
+const makeColumns = (isStakingAllowed: boolean): Array<NewTable.models.Column<LoanProposal>> => [
   {
     renderTitle: () => 'Borrower',
     cellContent: {
@@ -106,7 +103,6 @@ const makeColumns = (
               variant="outlined"
               color="primary"
               size="small"
-              backgroundColor={backgroundColor}
               loanSize={x.loanRequested.toString()}
               proposalId={x.proposalId}
               borrower={x.borrower}
@@ -135,10 +131,7 @@ export function LoanProposalsTable(props: Props) {
   const classes = useStyles();
   const theme = useTheme();
 
-  const columns = useMemo(() => makeColumns(isStakingAllowed, theme.palette.background.paper), [
-    isStakingAllowed,
-    theme,
-  ]);
+  const columns = useMemo(() => makeColumns(isStakingAllowed), [isStakingAllowed, theme]);
 
   function renderTableHeader() {
     return (

src/components/AccountAddress/AccountAddress.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import Grid from '@material-ui/core/Grid';
 import Avatar from '@material-ui/core/Avatar';
-import Jazzicon, { jsNumberForAddress } from 'react-jazzicon';
 
-import {} from 'components';
 import { makeStyles } from 'utils/styles';
 
+import { AddressIcon } from '../AddressIcon';
 import { ShortAddress } from '../ShortAddress/ShortAddress';
 
 type Props = { address: string; size: 'big' | 'small' };
@@ -18,7 +17,7 @@ export function AccountAddress(props: Props) {
     <Grid container alignItems="center" spacing={1}>
       <Grid item>
         <Avatar classes={classes}>
-          <Jazzicon diameter={40} seed={jsNumberForAddress(address)} />
+          <AddressIcon address={address} />
         </Avatar>
       </Grid>
       <Grid item>

src/components/AddressIcon/index.ts

@@ -0,0 +1 @@
+export { AddressIcon } from '@akropolis-web/components';

src/components/ComingSoon/ComingSoon.tsx

@@ -1,52 +1 @@
-import * as React from 'react';
-import cn from 'classnames';
-
-import { makeStyles } from 'utils/styles';
-
-type Props = {
-  variant?: 'label' | 'default';
-};
-
-export function ComingSoon(props: Props) {
-  const classes = useStyles();
-  const { variant = 'default' } = props;
-
-  return (
-    <div
-      className={cn(classes.root, {
-        [classes.isLabel]: variant === 'label',
-      })}
-    >
-      <span className={classes.text}>Coming soon</span>
-    </div>
-  );
-}
-
-const useStyles = makeStyles(
-  theme => ({
-    root: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: 10,
-      background: theme.palette.background.hint,
-      borderRadius: 4,
-    },
-    isLabel: {
-      minWidth: 86,
-      padding: '6px 8px',
-      borderRadius: 12.5,
-
-      '& $text': {
-        fontSize: 12,
-        lineHeight: 1.1,
-        fontWeight: 300,
-        fontStyle: 'italic',
-      },
-    },
-    text: {
-      whiteSpace: 'nowrap',
-    },
-  }),
-  { name: 'ComingSoon' },
-);
+export { ComingSoon } from '@akropolis-web/components';

src/components/Label/Label.tsx

@@ -1,84 +1 @@
-import * as React from 'react';
-import cn from 'classnames';
-import Typography from '@material-ui/core/Typography';
-import Tooltip from '@material-ui/core/Tooltip';
-
-import { InfoIconV2 } from 'components/icons';
-import { ComingSoon } from 'components/ComingSoon/ComingSoon';
-import { makeStyles } from 'utils/styles';
-
-type Props = {
-  hint?: React.ReactNode;
-  fontSize?: 'inherit' | 'medium' | 'large';
-  icon?: React.ReactNode;
-  inline?: boolean;
-  withComingSoon?: boolean;
-};
-
-export const Label: React.FC<Props> = props => {
-  const { hint, inline, icon, children, withComingSoon, fontSize = 'inherit' } = props;
-  const classes = useStyles(props);
-
-  return (
-    <Typography
-      variant="h6"
-      component="h6"
-      className={cn(classes.title, classes[fontSize], { [classes.inline]: inline })}
-    >
-      {icon && <>{icon}&nbsp;</>}
-      {children}
-      {hint && (
-        <Tooltip title={hint} placement="right">
-          <span className={classes.infoIcon}>
-            <InfoIconV2 fontSize="small" />
-          </span>
-        </Tooltip>
-      )}
-      {withComingSoon && (
-        <span className={classes.comingSoonLabel}>
-          <ComingSoon variant="label" />
-        </span>
-      )}
-    </Typography>
-  );
-};
-
-const useStyles = makeStyles(
-  () => ({
-    title: {
-      display: 'flex',
-      alignItems: 'center',
-      lineHeight: 'normal',
-
-      '&$inherit': {
-        fontSize: 'inherit',
-        fontWeight: 400,
-      },
-      '&$medium': {
-        fontSize: 16,
-        fontWeight: 400,
-      },
-      '&$large': {
-        fontSize: 22,
-        fontWeight: 300,
-      },
-    },
-
-    inline: {
-      display: 'inline-flex',
-    },
-
-    infoIcon: {
-      marginLeft: 10,
-    },
-
-    comingSoonLabel: {
-      marginLeft: 13,
-    },
-
-    inherit: {},
-    medium: {},
-    large: {},
-  }),
-  { name: 'Label' },
-);
+export { Label } from '@akropolis-web/components';

src/components/Metric/Metric.tsx

@@ -1,54 +1 @@
-import * as React from 'react';
-
-import { makeStyles } from 'utils/styles';
-
-type Props = {
-  title: NonNullable<React.ReactNode>;
-  value: NonNullable<React.ReactNode>;
-  subValue?: React.ReactNode;
-  chart?: React.ReactNode;
-};
-
-export function Metric(props: Props) {
-  const { title, value, subValue, chart } = props;
-  const classes = useStyles();
-
-  return (
-    <div className={classes.root}>
-      <div className={classes.title}>{title}</div>
-      <div className={classes.value}>
-        {value}
-        {chart && <div className={classes.chart}>{chart}</div>}
-      </div>
-      {subValue && <div className={classes.subValue}>{subValue}</div>}
-    </div>
-  );
-}
-
-const useStyles = makeStyles(
-  () => ({
-    root: {},
-    title: {
-      marginBottom: 13,
-      fontSize: 16,
-    },
-    value: {
-      display: 'flex',
-      alignItems: 'center',
-      fontSize: 32,
-      fontWeight: 300,
-      lineHeight: 'normal',
-    },
-    subValue: {
-      marginTop: 8,
-      fontSize: 16,
-    },
-    chart: {
-      marginBottom: 8,
-      marginLeft: 10,
-      alignSelf: 'flex-end',
-      lineHeight: 0,
-    },
-  }),
-  { name: 'Metric' },
-);
+export { Metric } from '@akropolis-web/components';