Update confirmation screen styling (#15136)

* Added 8px of margin to the top of the network display as it was touching the edge of the view
* Removed the SiteIcon component and passed the icon url to the SiteOrigin to display the icon next to the origin.

Co-authored-by: David Walsh <davidwalsh83@gmail.com>

ui/pages/confirmation/confirmation.js

@@ -11,7 +11,6 @@ import { isEqual } from 'lodash';
 import { produce } from 'immer';
 import Box from '../../components/ui/box';
 import MetaMaskTemplateRenderer from '../../components/app/metamask-template-renderer';
-import SiteIcon from '../../components/ui/site-icon';
 import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
 import {
   COLORS,
@@ -192,7 +191,7 @@ export default function ConfirmationPage() {
       )}
       <div className="confirmation-page__content">
         {templatedValues.networkDisplay ? (
-          <Box justifyContent="center">
+          <Box justifyContent="center" marginTop={2}>
             <NetworkDisplay
               indicatorSize={SIZES.XS}
               labelProps={{ color: COLORS.TEXT_DEFAULT }}
@@ -206,15 +205,12 @@ export default function ConfirmationPage() {
             padding={[1, 4, 4]}
             flexDirection={FLEX_DIRECTION.COLUMN}
           >
-            <SiteIcon
-              icon={originMetadata.iconUrl}
-              name={originMetadata.hostname}
-              size={36}
-            />
             <SiteOrigin
               chip
               siteOrigin={stripHttpsScheme(originMetadata.origin)}
               title={stripHttpsScheme(originMetadata.origin)}
+              iconSrc={originMetadata.iconUrl}
+              iconName={originMetadata.hostname}
             />
           </Box>
         )}