Add horizontal header alignment

Signed-off-by: Olusegun Akintayo <akintayo.segun@gmail.com>
MetaMask · Jul 18, 2023 · 75d04be · 75d04be
1 parent 06a11b5
commit 75d04be
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 8 deletions.
diff --git a/...nt-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.tsx b/...nt-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.tsx
@@ -14,7 +14,7 @@ import Animated, {
 import { useStyles } from '../../../../../hooks';
 import Icon, { IconSize, IconName } from '../../../../Icons/Icon';
 import Text, { TextVariant } from '../../../../Texts/Text';
-import { ACCORDION_EXPAND_TRANSITION_DURATION } from '../../Accordion.constants';
+import { DEFAULT_ACCORDION_EXPANDDURATION } from '../../Accordion.constants';
 
 // Internal dependencies.
 import styleSheet from './AccordionHeader.styles';
@@ -49,7 +49,7 @@ const AccordionHeader = ({
 
   const onHeaderPressed = () => {
     rotation.value = withTiming(rotation.value + 180, {
-      duration: ACCORDION_EXPAND_TRANSITION_DURATION,
+      duration: DEFAULT_ACCORDION_EXPANDDURATION,
       easing: Easing.linear,
     });
     onPress?.();

diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx
@@ -10,17 +10,12 @@ import BannerAlert from '../../../component-library/components/Banners/Banner/va
 import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5';
 import Text from '../../../component-library/components/Texts/Text/Text';
 import AttributionLink from './AttributionLink';
+import { AccordionHeaderHorizontalAlignment } from 'app/component-library/components/Accordions/Accordion';
 
 const createStyles = (colors: any) =>
   StyleSheet.create({
     attributionLink: { color: colors.primary.default },
     shieldIcon: { marginRight: 5, color: colors.primary.default },
-    accordionHeader: {
-      flexDirection: 'row',
-      alignItems: 'flex-start',
-      justifyContent: 'flex-start',
-      backgroundColor: colors.transparent,
-    },
   });
 
 const getTitleDescription = (attackType: string) => {
@@ -92,6 +87,7 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => {
         title="See details"
         onPress={onToggleShowDetails}
         isExpanded={false}
+        horizontalAlignment={AccordionHeaderHorizontalAlignment.Start}
       >
         {renderAttackDetails()}
       </Accordion>