UX Icon: Updated Icon for Disclosure (#17877)

* updated fa-add * updated summary icon * updated styles for disclosure * updated margin value
MetaMask · Mar 9, 2023 · bf06598 · bf06598
1 parent 0ac54e4
commit bf06598
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/ui/components/ui/disclosure/disclosure.js b/ui/components/ui/disclosure/disclosure.js
@@ -1,6 +1,8 @@
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { Icon, ICON_NAMES } from '../../component-library';
+import { Size } from '../../../helpers/constants/design-system';
 
 const Disclosure = ({ children, title, size }) => {
   const disclosureFooterEl = useRef(null);
@@ -23,7 +25,12 @@ const Disclosure = ({ children, title, size }) => {
       {title ? (
         <details>
           <summary className="disclosure__summary">
-            <i className="fa fa-plus" />
+            <Icon
+              className="disclosure__summary--icon"
+              name={ICON_NAMES.ADD}
+              size={Size.SM}
+              marginInlineEnd={2}
+            />
             {title}
           </summary>
           <div className={classnames('disclosure__content', size)}>

diff --git a/ui/components/ui/disclosure/disclosure.scss b/ui/components/ui/disclosure/disclosure.scss
@@ -4,14 +4,9 @@
 
   &__summary {
     position: relative;
-    padding-left: 24px;
     padding-bottom: 10px;
     font-weight: bold;
-
-    i {
-      margin-inline-start: -20px;
-      margin-inline-end: 10px;
-    }
+    display: flex;
 
     &::-webkit-details-marker,
     &::marker {