From 3ec2c189b0998fc81f2804bf0730e2be0b277ea1 Mon Sep 17 00:00:00 2001
From: rohit kerkar <129620973+rohiiittttt@users.noreply.github.com>
Date: Mon, 5 Jun 2023 21:13:23 +0530
Subject: [PATCH] Part of #18714: Replacing deprecated constants in
 `Avatar-Base` folder (#19408)

Co-authored-by: George Marshall <george.marshall@consensys.net>
Co-authored-by: Brad Decker <bhdecker84@gmail.com>
---
 .../avatar-base/avatar-base.stories.tsx                | 10 +++++-----
 .../component-library/avatar-base/avatar-base.tsx      |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/ui/components/component-library/avatar-base/avatar-base.stories.tsx b/ui/components/component-library/avatar-base/avatar-base.stories.tsx
index 85852edde464..c7298892211c 100644
--- a/ui/components/component-library/avatar-base/avatar-base.stories.tsx
+++ b/ui/components/component-library/avatar-base/avatar-base.stories.tsx
@@ -2,7 +2,7 @@ import { ComponentMeta } from '@storybook/react';
 import React from 'react';
 import {
   AlignItems,
-  DISPLAY,
+  Display,
   TextColor,
   BackgroundColor,
   BorderColor,
@@ -60,7 +60,7 @@ export default {
       control: 'select',
     },
     display: {
-      options: Object.values(DISPLAY),
+      options: Object.values(Display),
       control: 'select',
       table: { category: 'box props' },
     },
@@ -99,7 +99,7 @@ export const DefaultStory = (args: AvatarBaseProps) => <AvatarBase {...args} />;
 DefaultStory.storyName = 'Default';
 
 export const Size = (args: AvatarBaseProps) => (
-  <Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
+  <Box display={Display.Flex} alignItems={AlignItems.baseline} gap={1}>
     <AvatarBase {...args} size={AvatarBaseSize.Xs} />
     <AvatarBase {...args} size={AvatarBaseSize.Sm} />
     <AvatarBase {...args} size={AvatarBaseSize.Md} />
@@ -109,7 +109,7 @@ export const Size = (args: AvatarBaseProps) => (
 );
 
 export const Children = (args: AvatarBaseProps) => (
-  <Box display={DISPLAY.FLEX} gap={1}>
+  <Box display={Display.Flex} gap={1}>
     <AvatarBase {...args}>
       <img src="./images/eth_logo.png" />
     </AvatarBase>
@@ -131,7 +131,7 @@ export const Children = (args: AvatarBaseProps) => (
 );
 
 export const ColorBackgroundColorAndBorderColor = (args: AvatarBaseProps) => (
-  <Box display={DISPLAY.FLEX} gap={1}>
+  <Box display={Display.Flex} gap={1}>
     <AvatarBase {...args}>B</AvatarBase>
     <AvatarBase
       {...args}
diff --git a/ui/components/component-library/avatar-base/avatar-base.tsx b/ui/components/component-library/avatar-base/avatar-base.tsx
index e2dde68709ad..164fdf5a4574 100644
--- a/ui/components/component-library/avatar-base/avatar-base.tsx
+++ b/ui/components/component-library/avatar-base/avatar-base.tsx
@@ -5,7 +5,7 @@ import {
   BackgroundColor,
   BorderColor,
   TextColor,
-  DISPLAY,
+  Display,
   JustifyContent,
   AlignItems,
   BorderRadius,
@@ -48,7 +48,7 @@ export const AvatarBase = forwardRef(
         )}
         ref={ref}
         as={ValidTag.Div}
-        display={DISPLAY.FLEX}
+        display={Display.Flex}
         justifyContent={JustifyContent.center}
         alignItems={AlignItems.center}
         borderRadius={BorderRadius.full}