CSS fixed

MetaMask · Sep 28, 2022 · 7dfa6e8 · 7dfa6e8
1 parent e72a68a
commit 7dfa6e8
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 19 deletions.
diff --git a/ui/components/app/modals/contract-details-modal/contract-details-modal.js b/ui/components/app/modals/contract-details-modal/contract-details-modal.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { getAccountLink } from '@metamask/etherscan-link';
 import { useSelector } from 'react-redux';
+import classnames from 'classnames';
 import Box from '../../../ui/box';
 import IconCopy from '../../../ui/icon/icon-copy';
 import IconBlockExplorer from '../../../ui/icon/icon-block-explorer';
@@ -170,8 +171,18 @@ export default function ContractDetailsModal({
           className="contract-details-modal__content__contract"
         >
           <UrlIcon
-            className="contract-details-modal__content__contract__identicon"
-            fallbackClassName="contract-details-modal__content__contract__identicon"
+            className={classnames({
+              'contract-details-modal__content__contract__identicon-for-unknown-contact':
+                addressBookEntry?.data?.name === undefined,
+              'contract-details-modal__content__contract__identicon':
+                addressBookEntry?.data?.name !== undefined,
+            })}
+            fallbackClassName={classnames({
+              'contract-details-modal__content__contract__identicon-for-unknown-contact':
+                addressBookEntry?.data?.name === undefined,
+              'contract-details-modal__content__contract__identicon':
+                addressBookEntry?.data?.name !== undefined,
+            })}
             name={origin}
             url={siteImage}
           />

diff --git a/ui/components/app/modals/contract-details-modal/index.scss b/ui/components/app/modals/contract-details-modal/index.scss
@@ -9,6 +9,10 @@
         margin: 16px 16px 38px 16px;
       }
 
+      &__identicon-for-unknown-contact {
+        margin: 16px;
+      }
+
       &__buttons {
         flex-grow: 1;
 

diff --git a/ui/pages/token-allowance/index.scss b/ui/pages/token-allowance/index.scss
@@ -1,6 +1,4 @@
 .token-allowance-container {
-  width: inherit;
-
   &__icon-display-content {
     width: fit-content;
     height: 40px;
@@ -12,7 +10,6 @@
     &__siteimage-identicon {
       width: 24px;
       height: 24px;
-      margin-top: 4px;
       box-shadow: none;
       background: none;
     }

diff --git a/ui/pages/token-allowance/token-allowance.js b/ui/pages/token-allowance/token-allowance.js
@@ -346,7 +346,7 @@ export default function TokenAllowance({
   };
 
   return (
-    <Box className="token-allowance-container">
+    <Box className="token-allowance-container page-container">
       <Box
         paddingLeft={4}
         paddingRight={4}
@@ -387,18 +387,22 @@ export default function TokenAllowance({
       />
       <Box
         display={DISPLAY.FLEX}
-        alignItems={ALIGN_ITEMS.CENTER}
-        marginTop={6}
-        marginRight={12}
-        marginBottom={8}
-        marginLeft={12}
-        paddingTop={2}
-        paddingRight={4}
-        paddingBottom={2}
-        paddingLeft={2}
-        className="token-allowance-container__icon-display-content"
+        flexDirection={FLEX_DIRECTION.ROW}
+        justifyContent={JUSTIFY_CONTENT.CENTER}
       >
-        <Box display={DISPLAY.FLEX}>
+        <Box
+          display={DISPLAY.FLEX}
+          alignItems={ALIGN_ITEMS.CENTER}
+          marginTop={6}
+          marginRight={12}
+          marginBottom={8}
+          marginLeft={12}
+          paddingTop={2}
+          paddingRight={4}
+          paddingBottom={2}
+          paddingLeft={2}
+          className="token-allowance-container__icon-display-content"
+        >
           <UrlIcon
             className="token-allowance-container__icon-display-content__siteimage-identicon"
             fallbackClassName="token-allowance-container__icon-display-content__siteimage-identicon"
@@ -432,7 +436,12 @@ export default function TokenAllowance({
           rpcPrefs={rpcPrefs}
         />
       </Box>
-      <Box marginTop={1}>
+      <Box
+        marginTop={1}
+        display={DISPLAY.FLEX}
+        flexDirection={FLEX_DIRECTION.ROW}
+        justifyContent={JUSTIFY_CONTENT.CENTER}
+      >
         <Button
           type="link"
           onClick={() => setShowContractDetails(true)}
@@ -464,7 +473,11 @@ export default function TokenAllowance({
           })}
         </Box>
       )}
-      <Box>
+      <Box
+        display={DISPLAY.FLEX}
+        flexDirection={FLEX_DIRECTION.ROW}
+        justifyContent={JUSTIFY_CONTENT.CENTER}
+      >
         <Button
           type="link"
           onClick={() => setShowFullTxDetails(!showFullTxDetails)}