Remove button backgroundColor prop

src/app/components/MainLayout/MainLayout.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { AncestorBackgroundHackProvider, useTheme } from '@akropolis-web/styles';
 
 import { useApi } from 'services/api';
 import { useSubscribable } from 'utils/react';
@@ -14,6 +15,7 @@ type Props = {
 
 export const MainLayout: React.FC<Props> = props => {
   const classes = useStyles();
+  const theme = useTheme();
 
   const api = useApi();
   const [account] = useSubscribable(() => api.web3Manager.account$, [], null);
@@ -22,12 +24,16 @@ export const MainLayout: React.FC<Props> = props => {
     <div className={classes.root}>
       {account && <Sidebar />}
       <div className={classes.headerAndContent}>
-        <div className={classes.header}>
-          <NewHeader />
-        </div>
-        <div className={classes.content}>
-          <props.Content />
-        </div>
+        <AncestorBackgroundHackProvider backgroundColor={theme.palette.background.paper}>
+          <div className={classes.header}>
+            <NewHeader />
+          </div>
+        </AncestorBackgroundHackProvider>
+        <AncestorBackgroundHackProvider backgroundColor={theme.palette.background.paper}>
+          <div className={classes.content}>
+            <props.Content />
+          </div>
+        </AncestorBackgroundHackProvider>
         <div className={classes.footer}>
           <AppFooter />
         </div>

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

@@ -11,7 +11,7 @@ import {
   Hint,
   Loading,
 } from 'components';
-import { makeStyles, useTheme } from 'utils/styles';
+import { makeStyles } from 'utils/styles';
 import { useSubscribable } from 'utils/react';
 import { useApi } from 'services/api';
 import { LiquidityAmount, PercentAmount } from 'model/entities';
@@ -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}
@@ -133,12 +129,8 @@ const makeColumns = (
 export function LoanProposalsTable(props: Props) {
   const { loanProposals, isStakingAllowed } = props;
   const classes = useStyles();
-  const theme = useTheme();
 
-  const columns = useMemo(() => makeColumns(isStakingAllowed, theme.palette.background.paper), [
-    isStakingAllowed,
-    theme,
-  ]);
+  const columns = useMemo(() => makeColumns(isStakingAllowed), [isStakingAllowed]);
 
   function renderTableHeader() {
     return (

src/features/auth/AuthButton/components/ProviderButton.tsx

@@ -7,7 +7,7 @@ import { useCommunication } from 'utils/react';
 import { ButtonBase, Loading, Typography, Box, ShortAddress, Grid, Button } from 'components';
 import { WalletType } from 'services/api';
 import { tKeys, useTranslate } from 'services/i18n';
-import { makeStyles, useTheme, Theme } from 'utils/styles';
+import { makeStyles, Theme } from 'utils/styles';
 import { zeroAddress } from 'utils/mock';
 import { Bitski, Fortmatic, Metamask, Portis, WalletConnect } from 'components/icons/wallets';
 
@@ -43,7 +43,6 @@ export function ProviderButton({
   fullWidth,
 }: ProviderButtonProps) {
   const classes = useStyles();
-  const theme = useTheme();
   const connecting = useCommunication(connect, [connect]);
   const Icon = iconByWallet[type];
 
@@ -80,13 +79,7 @@ export function ProviderButton({
             </Grid>
             <Box clone alignSelf="stretch">
               <Grid item>
-                <Button
-                  variant="outlined"
-                  color="primary"
-                  size="small"
-                  backgroundColor={theme.palette.background.paper}
-                  fullWidth
-                >
+                <Button variant="outlined" color="primary" size="small" fullWidth>
                   {t(tKeys.features.auth.modalTitle.disconnect.getKey())}
                 </Button>
               </Grid>