Adjusting the padding in Alert / error state (#13819)

app/_locales/de/messages.json

@@ -1738,9 +1738,6 @@
   "newNFTsDetected": {
     "message": "Neu! NFT-Erkennung"
   },
-  "newNFTsDetectedInfo": {
-    "message": "Erlaube der MetaMaske, NFTs automatisch von Opensea zu erkennen und in deiner MetaMask Wallet anzuzeigen."
-  },
   "newNetworkAdded": {
     "message": "“$1” wurde erfolgreich hinzugefügt!"
   },

app/_locales/el/messages.json

@@ -1738,9 +1738,6 @@
   "newNFTsDetected": {
     "message": "Νέο! Εντοπισμός NFT"
   },
-  "newNFTsDetectedInfo": {
-    "message": "Επιτρέψτε στο MetaMask να ανιχνεύει αυτόματα NFTs από το Opensea και να εμφανίζεται στο πορτοφόλι σας MetaMask."
-  },
   "newNetworkAdded": {
     "message": "Το “$1” προστέθηκε με επιτυχία!"
   },

app/_locales/en/messages.json

@@ -2009,12 +2009,12 @@
   "newContract": {
     "message": "New Contract"
   },
+  "newNFTDetectedMessage": {
+    "message": "Allow MetaMask to automatically detect NFTs from Opensea and display in your wallet."
+  },
   "newNFTsDetected": {
     "message": "New! NFT detection"
   },
-  "newNFTsDetectedInfo": {
-    "message": "Allow MetaMask to automatically detect NFTs from Opensea and display in your MetaMask wallet."
-  },
   "newNetworkAdded": {
     "message": "“$1” was successfully added!"
   },

app/_locales/es_419/messages.json

@@ -1787,9 +1787,6 @@
   "newNFTsDetected": {
     "message": "¡Nuevo! Detección NFT"
   },
-  "newNFTsDetectedInfo": {
-    "message": "Permitir que MetaMask detecte automáticamente NFT de Opensea y los muestre en su cartera MetaMask."
-  },
   "newNetworkAdded": {
     "message": "¡\"$1\" se añadió con éxito!"
   },

app/_locales/fr/messages.json

@@ -1738,9 +1738,6 @@
   "newNFTsDetected": {
     "message": "Nouveau ! Détection de NFT"
   },
-  "newNFTsDetectedInfo": {
-    "message": "Cela permet à MetaMask de détecter automatiquement les NFT d’Opensea et de les afficher dans votre portefeuille MetaMask."
-  },
   "newNetworkAdded": {
     "message": "« $1 » a été ajouté avec succès !"
   },

app/_locales/hi/messages.json

@@ -1738,9 +1738,6 @@
   "newNFTsDetected": {
     "message": "नया! NFT डिटेक्शन"
   },
-  "newNFTsDetectedInfo": {
-    "message": "MetaMask को Opensea से NFT का स्वचालित रूप से पता लगाने और अपने MetaMask वॉलेट में प्रदर्शित करने की अनुमति दें।"
-  },
   "newNetworkAdded": {
     "message": "\"$1\" सफलतापूर्वक जोड़ा गया था!"
   },

app/_locales/id/messages.json

@@ -1738,9 +1738,6 @@
   "newNFTsDetected": {
     "message": "Baru! Deteksi NFT"
   },
-  "newNFTsDetectedInfo": {
-    "message": "Izinkan MetaMask untuk mendeteksi NFT dari Opensea secara otomatis dan menampilkannya di dompet MetaMask Anda."
-  },
   "newNetworkAdded": {
     "message": "“$1” berhasil ditambahkan!"
   },

app/_locales/ja/messages.json

@@ -1738,9 +1738,6 @@
   "newNFTsDetected": {
     "message": "新機能! NFT検出"
   },
-  "newNFTsDetectedInfo": {
-    "message": "MetaMaskがOpenseからNFTを自動的に検出し、MetaMaskウォレットに表示できるようにします。"
-  },
   "newNetworkAdded": {
     "message": "「$1」が追加されました!"
   },

app/_locales/ko/messages.json

@@ -1738,9 +1738,6 @@
   "newNFTsDetected": {
     "message": "신규! NFT 감지"
   },
-  "newNFTsDetectedInfo": {
-    "message": "MetaMask가 Opensea에서 자동으로 NFT를 감지하고 MetaMask 지갑에 표시하도록 허용합니다."
-  },
   "newNetworkAdded": {
     "message": "“$1”가 성공적으로 추가되었습니다!"
   },

app/_locales/pt_BR/messages.json

@@ -1771,9 +1771,6 @@
   "newNFTsDetected": {
     "message": "Novidade! Detecção de NFT"
   },
-  "newNFTsDetectedInfo": {
-    "message": "Autorize que a MetaMask detecte NFTs automaticamente do Opensea e os exiba na sua carteira MetaMask."
-  },
   "newNetworkAdded": {
     "message": "“$1” foi adicionado com sucesso!"
   },

app/_locales/ru/messages.json

@@ -1738,9 +1738,6 @@
   "newNFTsDetected": {
     "message": "Новинка! Обнаружение NFT"
   },
-  "newNFTsDetectedInfo": {
-    "message": "Разрешите MetaMask автоматически обнаруживать NFT из Opensea и отображать их в вашем кошельке MetaMask."
-  },
   "newNetworkAdded": {
     "message": "«$1» успешно добавлен!"
   },

app/_locales/tl/messages.json

@@ -1738,9 +1738,6 @@
   "newNFTsDetected": {
     "message": "Bago! Pag-detect ng NFT"
   },
-  "newNFTsDetectedInfo": {
-    "message": "Payagan ang MetaMask na awtomatikong i-detect ang mga NFT mula sa Opensea at ipakita sa iyong MetaMask wallet."
-  },
   "newNetworkAdded": {
     "message": "Ang “$1” matagumpay na naidagdag!"
   },

app/_locales/tr/messages.json

@@ -1738,9 +1738,6 @@
   "newNFTsDetected": {
     "message": "Yeni! NFT algılama"
   },
-  "newNFTsDetectedInfo": {
-    "message": "MetaMask'in otomatik olarak Opensea'den NFT'leri algılamasına ve MetaMask cüzdanınızda görüntülemesine izin verin."
-  },
   "newNetworkAdded": {
     "message": "\"$1\" başarılı bir şekilde eklendi!"
   },

app/_locales/vi/messages.json

@@ -1738,9 +1738,6 @@
   "newNFTsDetected": {
     "message": "Mới! Phát hiện NFT"
   },
-  "newNFTsDetectedInfo": {
-    "message": "Cho phép MetaMask tự động phát hiện NFT từ Opensea và hiển thị trong ví MetaMask của bạn."
-  },
   "newNetworkAdded": {
     "message": "“$1” đã được thêm thành công!"
   },

app/_locales/zh_CN/messages.json

@@ -1738,9 +1738,6 @@
   "newNFTsDetected": {
     "message": "新功能！NFT 检测"
   },
-  "newNFTsDetectedInfo": {
-    "message": "允许 MetaMask自动检测Opensea 的 NFT，并在您的 MetaMask钱包中显示。"
-  },
   "newNetworkAdded": {
     "message": "成功添加了“$1”！"
   },

ui/components/app/collectibles-detection-notice/collectibles-detection-notice.js

@@ -20,22 +20,28 @@ export default function CollectiblesDetectionNotice() {
   const history = useHistory();
 
   return (
-    <Box marginBottom={4} className="collectibles-detection-notice">
+    <Box className="collectibles-detection-notice">
       <Dialog type="message" className="collectibles-detection-notice__message">
         <button
           onClick={() => setCollectiblesDetectionNoticeDismissed()}
-          className="collectibles-detection-notice__message__close-button"
+          className="fas fa-times collectibles-detection-notice__message__close-button"
           data-testid="collectibles-detection-notice-close"
         />
         <Box display={DISPLAY.FLEX}>
-          <Box paddingTop={2}>
+          <Box paddingTop={1}>
-            <i style={{ fontSize: '1rem' }} className="fa fa-info-circle" />
+            <i
+              style={{
+                fontSize: '1rem',
+                color: 'var(--color-primary-default)',
+              }}
+              className="fa fa-info-circle"
+            />
           </Box>
-          <Box paddingLeft={4}>
+          <Box paddingLeft={2}>
             <Typography
               color={COLORS.TEXT_DEFAULT}
               align={TEXT_ALIGN.LEFT}
-              variant={TYPOGRAPHY.H6}
+              variant={TYPOGRAPHY.H7}
               fontWeight={FONT_WEIGHT.BOLD}
             >
               {t('newNFTsDetected')}
@@ -43,10 +49,10 @@ export default function CollectiblesDetectionNotice() {
             <Typography
               color={COLORS.TEXT_DEFAULT}
               align={TEXT_ALIGN.LEFT}
-              variant={TYPOGRAPHY.H6}
+              variant={TYPOGRAPHY.H7}
               boxProps={{ marginBottom: 4 }}
             >
-              {t('newNFTsDetectedInfo')}
+              {t('newNFTDetectedMessage')}
             </Typography>
             <Button
               type="link"

ui/components/app/collectibles-detection-notice/index.scss

@@ -1,26 +1,20 @@
 .collectibles-detection-notice {
+  margin: 16px 16px 0 16px;
+
   &__message {
     position: relative;
-    padding: 0 1rem 1rem 1rem !important;
+    padding: 0.75rem 0.75rem 1rem 0.75rem !important;
-
-    &__close-button {
-      background-color: transparent;
 
-      &::after {
+    & &__close-button {
-        position: absolute;
+      color: var(--color-icon-default);
-        content: '\00D7';
+      background: none;
-        font-size: 29px;
+      position: absolute;
-        font-weight: 200;
+      cursor: pointer;
-        color: var(--color-icon-default);
+      right: 8px;
-        background-color: transparent;
-        top: 0;
-        right: 12px;
-        cursor: pointer;
-      }
     }
 
     a.collectibles-detection-notice__message__link {
-      @include H6;
+      @include H7;
 
       width: 100%;
       padding: 0;

ui/components/app/collectibles-tab/collectibles-tab.js

@@ -58,7 +58,7 @@ export default function CollectiblesTab({ onAddNFT }) {
   }
 
   return (
-    <div className="collectibles-tab">
+    <Box className="collectibles-tab">
       {Object.keys(collections).length > 0 ||
       previouslyOwnedCollection.collectibles.length > 0 ? (
         <CollectiblesItems
@@ -66,40 +66,42 @@ export default function CollectiblesTab({ onAddNFT }) {
           previouslyOwnedCollection={previouslyOwnedCollection}
         />
       ) : (
-        <Box padding={[6, 12, 6, 12]}>
+        <>
           {isMainnet &&
           !useCollectibleDetection &&
           !collectibleDetectionNoticeDismissed ? (
             <CollectiblesDetectionNotice />
           ) : null}
-          <Box justifyContent={JUSTIFY_CONTENT.CENTER}>
+          <Box padding={12}>
-            <img src="./images/no-nfts.svg" />
+            <Box justifyContent={JUSTIFY_CONTENT.CENTER}>
-          </Box>
+              <img src="./images/no-nfts.svg" />
-          <Box
+            </Box>
-            marginTop={4}
+            <Box
-            marginBottom={12}
+              marginTop={4}
-            justifyContent={JUSTIFY_CONTENT.CENTER}
+              marginBottom={12}
-            flexDirection={FLEX_DIRECTION.COLUMN}
+              justifyContent={JUSTIFY_CONTENT.CENTER}
-            className="collectibles-tab__link"
+              flexDirection={FLEX_DIRECTION.COLUMN}
-          >
+              className="collectibles-tab__link"
-            <Typography
-              color={COLORS.TEXT_MUTED}
-              variant={TYPOGRAPHY.H4}
-              align={TEXT_ALIGN.CENTER}
-              fontWeight={FONT_WEIGHT.BOLD}
             >
-              {t('noNFTs')}
+              <Typography
-            </Typography>
+                color={COLORS.TEXT_MUTED}
-            <Button
+                variant={TYPOGRAPHY.H4}
-              type="link"
+                align={TEXT_ALIGN.CENTER}
-              target="_blank"
+                fontWeight={FONT_WEIGHT.BOLD}
-              rel="noopener noreferrer"
+              >
-              href="https://metamask.zendesk.com/hc/en-us/articles/360058238591-NFT-tokens-in-MetaMask-wallet"
+                {t('noNFTs')}
-            >
+              </Typography>
-              {t('learnMoreUpperCase')}
+              <Button
-            </Button>
+                type="link"
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://metamask.zendesk.com/hc/en-us/articles/360058238591-NFT-tokens-in-MetaMask-wallet"
+              >
+                {t('learnMoreUpperCase')}
+              </Button>
+            </Box>
           </Box>
-        </Box>
+        </>
       )}
       <Box
         marginBottom={4}
@@ -152,7 +154,7 @@ export default function CollectiblesTab({ onAddNFT }) {
           </Box>
         </Box>
       </Box>
-    </div>
+    </Box>
   );
 }
 

ui/pages/add-collectible/add-collectible.js

@@ -93,7 +93,7 @@ export default function AddCollectible() {
       }}
       disabled={disabled}
       contentComponent={
-        <Box padding={[1, 4]}>
+        <Box>
           {isMainnet &&
           !useCollectibleDetection &&
           !collectibleDetectionNoticeDismissed ? (
@@ -122,7 +122,7 @@ export default function AddCollectible() {
               }
             />
           )}
-          <Box marginTop={4}>
+          <Box margin={4}>
             <FormField
               id="address"
               titleText={t('address')}

ui/pages/home/home.component.js

@@ -13,6 +13,7 @@ import TransactionList from '../../components/app/transaction-list';
 import MenuBar from '../../components/app/menu-bar';
 import Popover from '../../components/ui/popover';
 import Button from '../../components/ui/button';
+import Box from '../../components/ui/box';
 import ConnectedSites from '../connected-sites';
 import ConnectedAccounts from '../connected-accounts';
 import { Tabs, Tab } from '../../components/ui/tabs';
@@ -24,6 +25,7 @@ import Typography from '../../components/ui/typography/typography';
 import {
   TYPOGRAPHY,
   FONT_WEIGHT,
+  DISPLAY,
   ///: BEGIN:ONLY_INCLUDE_IN(flask)
   COLORS,
   ///: END:ONLY_INCLUDE_IN
@@ -310,8 +312,8 @@ export default class Home extends PureComponent {
             type="success"
             className="home__new-network-notification"
             message={
-              <div className="home__new-network-notification-message">
+              <Box display={DISPLAY.INLINE_FLEX}>
-                <i className="fa fa-check-circle home__new-network-notification-message--icon" />
+                <i className="fa fa-check-circle home__new-nft-notification-icon" />
                 <Typography
                   variant={TYPOGRAPHY.H7}
                   fontWeight={FONT_WEIGHT.NORMAL}
@@ -319,11 +321,11 @@ export default class Home extends PureComponent {
                   {t('newCollectibleAddedMessage')}
                 </Typography>
                 <button
-                  className="fas fa-times home__close"
+                  className="fas fa-times home__new-nft-notification-close"
                   title={t('close')}
                   onClick={() => setNewCollectibleAddedMessage('')}
                 />
-              </div>
+              </Box>
             }
           />
         ) : null}
@@ -332,8 +334,8 @@ export default class Home extends PureComponent {
             type="success"
             className="home__new-network-notification"
             message={
-              <div className="home__new-network-notification-message">
+              <Box display={DISPLAY.INLINE_FLEX}>
-                <i className="fa fa-check-circle home__new-network-notification-message--icon" />
+                <i className="fa fa-check-circle home__new-network-notification-icon" />
                 <Typography
                   variant={TYPOGRAPHY.H7}
                   fontWeight={FONT_WEIGHT.NORMAL}
@@ -341,11 +343,11 @@ export default class Home extends PureComponent {
                   {t('newNetworkAdded', [newNetworkAdded])}
                 </Typography>
                 <button
-                  className="fas fa-times home__close"
+                  className="fas fa-times home__new-network-notification-close"
                   title={t('close')}
                   onClick={() => setNewNetworkAdded('')}
                 />
-              </div>
+              </Box>
             }
           />
         ) : null}

ui/pages/home/index.scss

@@ -138,24 +138,42 @@
     margin-bottom: 50px;
   }
 
-  &__new-network-notification-message {
+  &__new-network-notification {
     display: flex;
     flex-direction: row;
     align-items: center;
 
-    &--icon {
+    &-icon {
       margin-right: 8px;
+      padding-top: 8px;
       color: var(--color-success-default);
     }
-  }
 
-  &__close {
+    &-close {
-    color: var(--color-text-default);
+      color: var(--color-icon-default);
-    background: none;
+      background: none;
-    margin-left: 20px;
+      margin-left: 20px;
+    }
   }
 
   &__error-message {
     left: 8px;
   }
+
+  &__new-nft-notification {
+    margin-bottom: 24px;
+    margin-right: 8px;
+
+    &-icon {
+      margin-right: 10px;
+      padding-top: 6px;
+      color: var(--color-success-default);
+    }
+
+    &-close {
+      color: var(--color-icon-default);
+      background: none;
+      margin-left: 44px;
+    }
+  }
 }