Updated origin pill component to match the new design (#15603)

ui/components/ui/site-origin/site-origin.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Chip from '../chip';
 import IconWithFallback from '../icon-with-fallback';
+import { COLORS } from '../../../helpers/constants/design-system';
 
 export default function SiteOrigin({
   siteOrigin,
@@ -17,10 +18,11 @@ export default function SiteOrigin({
     <div className={classnames('site-origin', className)} title={title}>
       {chip ? (
         <Chip
+          borderColor={COLORS.BORDER_MUTED}
           label={siteOrigin}
           maxContent={false}
           leftIcon={
-            <IconWithFallback icon={iconSrc} name={iconName} size={32} />
+            <IconWithFallback icon={iconSrc} name={iconName} size={24} />
           }
           rightIcon={rightIcon}
         />

ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js

@@ -4,15 +4,13 @@ import classnames from 'classnames';
 import copyToClipboard from 'copy-to-clipboard';
 import { getTokenTrackerLink, getAccountLink } from '@metamask/etherscan-link';
 import UrlIcon from '../../../components/ui/url-icon';
-import { addressSummary, getURLHostName } from '../../../helpers/utils/util';
+import { addressSummary } from '../../../helpers/utils/util';
 import { formatCurrency } from '../../../helpers/utils/confirm-tx.util';
-import { isBeta } from '../../../helpers/utils/build-types';
 import { ellipsify } from '../../send/send.utils';
 import Typography from '../../../components/ui/typography';
 import Box from '../../../components/ui/box';
 import Button from '../../../components/ui/button';
 import EditGasFeeButton from '../../../components/app/edit-gas-fee-button';
-import MetaFoxLogo from '../../../components/ui/metafox-logo';
 import Identicon from '../../../components/ui/identicon';
 import MultiLayerFeeMessage from '../../../components/app/multilayer-fee-message';
 import CopyIcon from '../../../components/ui/icon/copy-icon.component';
@@ -610,17 +608,11 @@ export default class ConfirmApproveContent extends Component {
           display={DISPLAY.FLEX}
           className="confirm-approve-content__icon-display-content"
         >
-          <Box className="confirm-approve-content__metafoxlogo">
-            <MetaFoxLogo useDark={isBeta()} />
-          </Box>
-          <Box
-            display={DISPLAY.FLEX}
-            className="confirm-approve-content__siteinfo"
-          >
+          <Box display={DISPLAY.FLEX}>
             <UrlIcon
               className="confirm-approve-content__siteimage-identicon"
               fallbackClassName="confirm-approve-content__siteimage-identicon"
-              name={getURLHostName(origin)}
+              name={origin}
               url={siteImage}
             />
             <Typography
@@ -629,7 +621,7 @@ export default class ConfirmApproveContent extends Component {
               color={COLORS.TEXT_ALTERNATIVE}
               boxProps={{ marginLeft: 1, marginTop: 2 }}
             >
-              {getURLHostName(origin)}
+              {origin}
             </Typography>
           </Box>
         </Box>

ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js

@@ -43,7 +43,9 @@ describe('ConfirmApproveContent Component', () => {
   it('should render Confirm approve page correctly', () => {
     const { queryByText, getByText, getAllByText, getByTestId } =
       renderComponent(props);
-    expect(queryByText('metamask.github.io')).toBeInTheDocument();
+    expect(
+      queryByText('https://metamask.github.io/test-dapp/'),
+    ).toBeInTheDocument();
     expect(getByTestId('confirm-approve-title').textContent).toStrictEqual(
       ' Give permission to access your TST? ',
     );

ui/pages/confirm-approve/confirm-approve-content/index.scss

@@ -18,12 +18,10 @@
   }
 
   &__icon-display-content {
-    display: flex;
-    height: 51px;
-    width: 65%;
+    height: 40px;
     margin-top: 16px;
     padding: 12px 12px 14px 12px;
-    border: 1px solid var(--color-border-default);
+    border: 1px solid var(--color-border-muted);
     box-sizing: border-box;
     border-radius: 100px;
     align-items: center;
@@ -35,22 +33,6 @@
     position: absolute;
   }
 
-  &__metafoxlogo {
-    .app-header {
-      &__metafox-logo--horizontal {
-        display: none;
-      }
-
-      &__metafox-logo--icon {
-        display: block;
-      }
-    }
-  }
-
-  &__siteinfo {
-    left: 39px;
-  }
-
   &__address-display-content {
     display: flex;
     height: 27px;
@@ -62,9 +44,11 @@
   }
 
   &__siteimage-identicon {
-    width: 33px;
-    height: 33px;
-    border: solid var(--color-border-muted);
+    width: 24px;
+    height: 24px;
+    margin-top: 4px;
+    box-shadow: none;
+    background: none;
   }
 
   &__address-identicon {

ui/pages/confirmation/confirmation.js

@@ -19,7 +19,6 @@ import {
   FLEX_DIRECTION,
   SIZES,
 } from '../../helpers/constants/design-system';
-import { stripHttpsScheme } from '../../helpers/utils/util';
 import { useI18nContext } from '../../hooks/useI18nContext';
 import { useOriginMetadata } from '../../hooks/useOriginMetadata';
 import { getUnapprovedTemplatedConfirmations } from '../../selectors';
@@ -219,8 +218,8 @@ export default function ConfirmationPage({
           >
             <SiteOrigin
               chip
-              siteOrigin={stripHttpsScheme(originMetadata.origin)}
-              title={stripHttpsScheme(originMetadata.origin)}
+              siteOrigin={originMetadata.origin}
+              title={originMetadata.origin}
               iconSrc={originMetadata.iconUrl}
               iconName={originMetadata.hostname}
             />

ui/pages/confirmation/confirmation.scss

@@ -64,6 +64,7 @@
 
   .chip {
     max-width: 100%;
+    height: 40px;
 
     &__label {
       word-break: break-all;