From 0e4290f54d3d9d4b853be838cdd98a8bd393ba92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Tue, 30 Mar 2021 15:45:55 -0300
Subject: [PATCH 1/7] add icon position prop

---
 src/dataDisplay/IconText/index.stories.tsx | 36 ++++++++++++++++++++++
 src/dataDisplay/IconText/index.tsx         | 27 +++++++++++-----
 2 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/src/dataDisplay/IconText/index.stories.tsx b/src/dataDisplay/IconText/index.stories.tsx
index a162f722..d0380842 100644
--- a/src/dataDisplay/IconText/index.stories.tsx
+++ b/src/dataDisplay/IconText/index.stories.tsx
@@ -21,3 +21,39 @@ export const Sizes = (): React.ReactElement => {
     </>
   );
 };
+
+export const IconPosition = (): React.ReactElement => {
+  return (
+    <>
+      <IconText
+        iconSize="sm"
+        textSize="sm"
+        iconType="add"
+        text="Some text"
+        icon="right"
+      />
+      <IconText
+        iconSize="sm"
+        textSize="xl"
+        iconType="add"
+        text="Some text"
+        icon="right"
+      />
+
+      <IconText
+        iconSize="md"
+        textSize="sm"
+        iconType="add"
+        text="Some text"
+        icon="right"
+      />
+      <IconText
+        iconSize="md"
+        textSize="xl"
+        iconType="add"
+        text="Some text"
+        icon="right"
+      />
+    </>
+  );
+};
diff --git a/src/dataDisplay/IconText/index.tsx b/src/dataDisplay/IconText/index.tsx
index 2bbfb49a..a415d1cc 100644
--- a/src/dataDisplay/IconText/index.tsx
+++ b/src/dataDisplay/IconText/index.tsx
@@ -12,6 +12,7 @@ type Props = {
   color?: ThemeColors;
   text: string;
   className?: string;
+  icon?: 'left' | 'right';
 };
 
 const StyledIconText = styled.div`
@@ -31,15 +32,25 @@ const IconText = ({
   textSize,
   iconType,
   text,
+  icon = 'left',
   color,
   className,
-}: Props): React.ReactElement => (
-  <StyledIconText className={className}>
-    <Icon size={iconSize} type={iconType} color={color} />
-    <Text size={textSize} color={color}>
-      {text}
-    </Text>
-  </StyledIconText>
-);
+}: Props): React.ReactElement => {
+  return icon === 'right' ? (
+    <StyledIconText className={className}>
+      <Text size={textSize} color={color}>
+        {text}
+      </Text>
+      <Icon size={iconSize} type={iconType} color={color} />
+    </StyledIconText>
+  ) : (
+    <StyledIconText className={className}>
+      <Icon size={iconSize} type={iconType} color={color} />
+      <Text size={textSize} color={color}>
+        {text}
+      </Text>
+    </StyledIconText>
+  );
+};
 
 export default IconText;

From 78d6fbf8a5eb5ae030351112cdba3e13ef6a0344 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Tue, 30 Mar 2021 16:25:36 -0300
Subject: [PATCH 2/7] rename prop to iconSide

---
 src/dataDisplay/IconText/index.stories.tsx | 8 ++++----
 src/dataDisplay/IconText/index.tsx         | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/dataDisplay/IconText/index.stories.tsx b/src/dataDisplay/IconText/index.stories.tsx
index d0380842..3507ba15 100644
--- a/src/dataDisplay/IconText/index.stories.tsx
+++ b/src/dataDisplay/IconText/index.stories.tsx
@@ -30,14 +30,14 @@ export const IconPosition = (): React.ReactElement => {
         textSize="sm"
         iconType="add"
         text="Some text"
-        icon="right"
+        iconSide="right"
       />
       <IconText
         iconSize="sm"
         textSize="xl"
         iconType="add"
         text="Some text"
-        icon="right"
+        iconSide="right"
       />
 
       <IconText
@@ -45,14 +45,14 @@ export const IconPosition = (): React.ReactElement => {
         textSize="sm"
         iconType="add"
         text="Some text"
-        icon="right"
+        iconSide="right"
       />
       <IconText
         iconSize="md"
         textSize="xl"
         iconType="add"
         text="Some text"
-        icon="right"
+        iconSide="right"
       />
     </>
   );
diff --git a/src/dataDisplay/IconText/index.tsx b/src/dataDisplay/IconText/index.tsx
index a415d1cc..ab214bed 100644
--- a/src/dataDisplay/IconText/index.tsx
+++ b/src/dataDisplay/IconText/index.tsx
@@ -12,7 +12,7 @@ type Props = {
   color?: ThemeColors;
   text: string;
   className?: string;
-  icon?: 'left' | 'right';
+  iconSide?: 'left' | 'right';
 };
 
 const StyledIconText = styled.div`
@@ -32,11 +32,11 @@ const IconText = ({
   textSize,
   iconType,
   text,
-  icon = 'left',
+  iconSide = 'left',
   color,
   className,
 }: Props): React.ReactElement => {
-  return icon === 'right' ? (
+  return iconSide === 'right' ? (
     <StyledIconText className={className}>
       <Text size={textSize} color={color}>
         {text}

From 76839ad09a501ffc25a040d98baf2e2987061f34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 31 Mar 2021 18:03:59 -0300
Subject: [PATCH 3/7] add margins via props

---
 src/dataDisplay/Icon/index.tsx             |  9 ++++--
 src/dataDisplay/IconText/index.stories.tsx | 36 +++++++++++++++++++---
 src/dataDisplay/IconText/index.tsx         | 17 +++++++---
 src/navigation/Tab/index.tsx               |  1 +
 src/theme.ts                               |  9 ++++++
 5 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/src/dataDisplay/Icon/index.tsx b/src/dataDisplay/Icon/index.tsx
index 21f7a180..c7f33842 100644
--- a/src/dataDisplay/Icon/index.tsx
+++ b/src/dataDisplay/Icon/index.tsx
@@ -76,10 +76,11 @@ import unlocked from './images/unlocked';
 import userEdit from './images/userEdit';
 import wallet from './images/wallet';
 
-import { ThemeColors, ThemeIconSize } from '../../theme';
+import { ThemeColors, ThemeIconSize, ThemeMargin } from '../../theme';
 
-const StyledIcon = styled.span<{ color?: ThemeColors }>`
+const StyledIcon = styled.span<{ color?: ThemeColors; margin?: ThemeMargin }>`
   display: inline-flex;
+  margin: 0 ${({ theme }) => theme.margin.xs}; /* TODO review this */
 
   .icon-color {
     fill: ${({ theme, color }) =>
@@ -168,6 +169,7 @@ export type IconTypes = keyof IconType;
 export type Props = {
   type: IconTypes;
   size: ThemeIconSize;
+  margin?: ThemeMargin;
   color?: ThemeColors;
   tooltip?: string;
   className?: string;
@@ -180,12 +182,13 @@ export type Props = {
 export const Icon = ({
   type,
   size,
+  margin,
   color,
   tooltip,
   className,
 }: Props): React.ReactElement => {
   const IconElement = (
-    <StyledIcon color={color} className={className}>
+    <StyledIcon color={color} margin={margin} className={className}>
       {icons[type][size]}
     </StyledIcon>
   );
diff --git a/src/dataDisplay/IconText/index.stories.tsx b/src/dataDisplay/IconText/index.stories.tsx
index 3507ba15..d5d3ea43 100644
--- a/src/dataDisplay/IconText/index.stories.tsx
+++ b/src/dataDisplay/IconText/index.stories.tsx
@@ -13,11 +13,35 @@ export default {
 export const Sizes = (): React.ReactElement => {
   return (
     <>
-      <IconText iconSize="sm" textSize="sm" iconType="add" text="Some text" />
-      <IconText iconSize="sm" textSize="xl" iconType="add" text="Some text" />
+      <IconText
+        iconSize="sm"
+        margin="md"
+        textSize="sm"
+        iconType="add"
+        text="Some text"
+      />
+      <IconText
+        iconSize="sm"
+        margin="md"
+        textSize="xl"
+        iconType="add"
+        text="Some text"
+      />
 
-      <IconText iconSize="md" textSize="sm" iconType="add" text="Some text" />
-      <IconText iconSize="md" textSize="xl" iconType="add" text="Some text" />
+      <IconText
+        iconSize="md"
+        margin="md"
+        textSize="sm"
+        iconType="add"
+        text="Some text"
+      />
+      <IconText
+        iconSize="md"
+        margin="xxl"
+        textSize="xl"
+        iconType="add"
+        text="Some text"
+      />
     </>
   );
 };
@@ -27,6 +51,7 @@ export const IconPosition = (): React.ReactElement => {
     <>
       <IconText
         iconSize="sm"
+        margin="md"
         textSize="sm"
         iconType="add"
         text="Some text"
@@ -34,6 +59,7 @@ export const IconPosition = (): React.ReactElement => {
       />
       <IconText
         iconSize="sm"
+        margin="md"
         textSize="xl"
         iconType="add"
         text="Some text"
@@ -42,6 +68,7 @@ export const IconPosition = (): React.ReactElement => {
 
       <IconText
         iconSize="md"
+        margin="md"
         textSize="sm"
         iconType="add"
         text="Some text"
@@ -49,6 +76,7 @@ export const IconPosition = (): React.ReactElement => {
       />
       <IconText
         iconSize="md"
+        margin="md"
         textSize="xl"
         iconType="add"
         text="Some text"
diff --git a/src/dataDisplay/IconText/index.tsx b/src/dataDisplay/IconText/index.tsx
index ab214bed..161d7b5d 100644
--- a/src/dataDisplay/IconText/index.tsx
+++ b/src/dataDisplay/IconText/index.tsx
@@ -1,13 +1,19 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { ThemeColors, ThemeIconSize, ThemeTextSize } from '../../theme';
+import {
+  ThemeColors,
+  ThemeIconSize,
+  ThemeMargin,
+  ThemeTextSize,
+} from '../../theme';
 import { Icon, IconType } from '../Icon';
 import Text from '../Text';
 
 type Props = {
   iconType: keyof IconType;
   iconSize: ThemeIconSize;
+  margin: ThemeMargin;
   textSize: ThemeTextSize;
   color?: ThemeColors;
   text: string;
@@ -19,9 +25,9 @@ const StyledIconText = styled.div`
   display: flex;
   align-items: center;
 
-  p {
+  /* p {
     margin-left: 6px;
-  }
+  } */
 `;
 
 /**
@@ -29,6 +35,7 @@ const StyledIconText = styled.div`
  */
 const IconText = ({
   iconSize,
+  margin = 'md',
   textSize,
   iconType,
   text,
@@ -41,11 +48,11 @@ const IconText = ({
       <Text size={textSize} color={color}>
         {text}
       </Text>
-      <Icon size={iconSize} type={iconType} color={color} />
+      <Icon size={iconSize} margin={margin} type={iconType} color={color} />
     </StyledIconText>
   ) : (
     <StyledIconText className={className}>
-      <Icon size={iconSize} type={iconType} color={color} />
+      <Icon size={iconSize} margin={margin} type={iconType} color={color} />
       <Text size={textSize} color={color}>
         {text}
       </Text>
diff --git a/src/navigation/Tab/index.tsx b/src/navigation/Tab/index.tsx
index aecedd9c..27c39809 100644
--- a/src/navigation/Tab/index.tsx
+++ b/src/navigation/Tab/index.tsx
@@ -115,6 +115,7 @@ const Tab = ({
       return (
         <IconText
           iconSize="sm"
+          margin="md"
           iconType={item.icon}
           textSize="sm"
           color={selectedTab === item.id ? 'primary' : 'text'}
diff --git a/src/theme.ts b/src/theme.ts
index 1fa91220..e6208ad3 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -54,6 +54,14 @@ const theme = {
     fontFamily: `'Averta', 'Roboto', 'Helvetica Neue', 'Arial', 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', '-apple-system', 'BlinkMacSystemFont', sans-serif`,
     fontFamilyCode: `source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace`,
   },
+  margin: {
+    xs: '4px',
+    sm: '8px',
+    md: '12px',
+    lg: '16px',
+    xl: '20px',
+    xxl: '24px',
+  },
   icons: {
     size: {
       sm: '16',
@@ -142,6 +150,7 @@ export type ThemeButtonSize = keyof Theme['buttons']['size'];
 export type ThemeColors = keyof Theme['colors'];
 export type ThemeIdenticonSize = keyof Theme['identicon']['size'];
 export type ThemeIconSize = keyof Theme['icons']['size'];
+export type ThemeMargin = keyof Theme['margin'];
 export type ThemeLoaderSize = keyof Theme['loader']['size'];
 export type ThemeStatusDotSize = keyof Theme['statusDot']['size'];
 export type ThemeTextSize = keyof Theme['text']['size'];

From 0cae06bee13b23d90f7be3ae72586a38063627c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Thu, 1 Apr 2021 14:42:30 -0300
Subject: [PATCH 4/7] add margin props to IconText component

---
 src/dataDisplay/Icon/index.tsx     |  9 +++------
 src/dataDisplay/IconText/index.tsx | 19 +++++++++++--------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/dataDisplay/Icon/index.tsx b/src/dataDisplay/Icon/index.tsx
index c7f33842..21f7a180 100644
--- a/src/dataDisplay/Icon/index.tsx
+++ b/src/dataDisplay/Icon/index.tsx
@@ -76,11 +76,10 @@ import unlocked from './images/unlocked';
 import userEdit from './images/userEdit';
 import wallet from './images/wallet';
 
-import { ThemeColors, ThemeIconSize, ThemeMargin } from '../../theme';
+import { ThemeColors, ThemeIconSize } from '../../theme';
 
-const StyledIcon = styled.span<{ color?: ThemeColors; margin?: ThemeMargin }>`
+const StyledIcon = styled.span<{ color?: ThemeColors }>`
   display: inline-flex;
-  margin: 0 ${({ theme }) => theme.margin.xs}; /* TODO review this */
 
   .icon-color {
     fill: ${({ theme, color }) =>
@@ -169,7 +168,6 @@ export type IconTypes = keyof IconType;
 export type Props = {
   type: IconTypes;
   size: ThemeIconSize;
-  margin?: ThemeMargin;
   color?: ThemeColors;
   tooltip?: string;
   className?: string;
@@ -182,13 +180,12 @@ export type Props = {
 export const Icon = ({
   type,
   size,
-  margin,
   color,
   tooltip,
   className,
 }: Props): React.ReactElement => {
   const IconElement = (
-    <StyledIcon color={color} margin={margin} className={className}>
+    <StyledIcon color={color} className={className}>
       {icons[type][size]}
     </StyledIcon>
   );
diff --git a/src/dataDisplay/IconText/index.tsx b/src/dataDisplay/IconText/index.tsx
index 161d7b5d..cbcca51c 100644
--- a/src/dataDisplay/IconText/index.tsx
+++ b/src/dataDisplay/IconText/index.tsx
@@ -21,13 +21,16 @@ type Props = {
   iconSide?: 'left' | 'right';
 };
 
-const StyledIconText = styled.div`
+const StyledIconText = styled.div<{ margin: ThemeMargin }>`
   display: flex;
   align-items: center;
+  svg {
+    margin: 0 ${({ theme }) => theme.margin.xs};
+  }
+`;
 
-  /* p {
-    margin-left: 6px;
-  } */
+const StyledIcon = styled(Icon)`
+  /* margin: 20px; */
 `;
 
 /**
@@ -44,15 +47,15 @@ const IconText = ({
   className,
 }: Props): React.ReactElement => {
   return iconSide === 'right' ? (
-    <StyledIconText className={className}>
+    <StyledIconText className={className} margin={margin}>
       <Text size={textSize} color={color}>
         {text}
       </Text>
-      <Icon size={iconSize} margin={margin} type={iconType} color={color} />
+      <StyledIcon size={iconSize} type={iconType} color={color} />
     </StyledIconText>
   ) : (
-    <StyledIconText className={className}>
-      <Icon size={iconSize} margin={margin} type={iconType} color={color} />
+    <StyledIconText className={className} margin={margin}>
+      <StyledIcon size={iconSize} type={iconType} color={color} />
       <Text size={textSize} color={color}>
         {text}
       </Text>

From c31d2540aa8da1cb27265621f01332babcd63744 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Mon, 5 Apr 2021 14:26:31 -0300
Subject: [PATCH 5/7] change margins theme and fix margin props

---
 src/dataDisplay/IconText/index.stories.tsx | 37 ++++++++++++++++++----
 src/dataDisplay/IconText/index.tsx         | 12 +++----
 src/theme.ts                               |  3 +-
 3 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/dataDisplay/IconText/index.stories.tsx b/src/dataDisplay/IconText/index.stories.tsx
index d5d3ea43..faa41579 100644
--- a/src/dataDisplay/IconText/index.stories.tsx
+++ b/src/dataDisplay/IconText/index.stories.tsx
@@ -15,14 +15,14 @@ export const Sizes = (): React.ReactElement => {
     <>
       <IconText
         iconSize="sm"
-        margin="md"
+        margin="xs"
         textSize="sm"
         iconType="add"
         text="Some text"
       />
       <IconText
         iconSize="sm"
-        margin="md"
+        margin="xs"
         textSize="xl"
         iconType="add"
         text="Some text"
@@ -30,14 +30,14 @@ export const Sizes = (): React.ReactElement => {
 
       <IconText
         iconSize="md"
-        margin="md"
+        margin="xs"
         textSize="sm"
         iconType="add"
         text="Some text"
       />
       <IconText
         iconSize="md"
-        margin="xxl"
+        margin="xs"
         textSize="xl"
         iconType="add"
         text="Some text"
@@ -51,7 +51,7 @@ export const IconPosition = (): React.ReactElement => {
     <>
       <IconText
         iconSize="sm"
-        margin="md"
+        margin="xs"
         textSize="sm"
         iconType="add"
         text="Some text"
@@ -59,7 +59,7 @@ export const IconPosition = (): React.ReactElement => {
       />
       <IconText
         iconSize="sm"
-        margin="md"
+        margin="xs"
         textSize="xl"
         iconType="add"
         text="Some text"
@@ -68,12 +68,35 @@ export const IconPosition = (): React.ReactElement => {
 
       <IconText
         iconSize="md"
-        margin="md"
+        margin="xs"
         textSize="sm"
         iconType="add"
         text="Some text"
         iconSide="right"
       />
+      <IconText
+        iconSize="md"
+        margin="xs"
+        textSize="xl"
+        iconType="add"
+        text="Some text"
+        iconSide="right"
+      />
+    </>
+  );
+};
+
+export const IconMargin = (): React.ReactElement => {
+  return (
+    <>
+      <IconText
+        iconSize="md"
+        margin="md"
+        textSize="md"
+        iconType="add"
+        text="Some text"
+        iconSide="left"
+      />
       <IconText
         iconSize="md"
         margin="md"
diff --git a/src/dataDisplay/IconText/index.tsx b/src/dataDisplay/IconText/index.tsx
index cbcca51c..a7f7dbe6 100644
--- a/src/dataDisplay/IconText/index.tsx
+++ b/src/dataDisplay/IconText/index.tsx
@@ -25,20 +25,16 @@ const StyledIconText = styled.div<{ margin: ThemeMargin }>`
   display: flex;
   align-items: center;
   svg {
-    margin: 0 ${({ theme }) => theme.margin.xs};
+    margin: 0 ${({ theme, margin }) => theme.margin[margin]};
   }
 `;
 
-const StyledIcon = styled(Icon)`
-  /* margin: 20px; */
-`;
-
 /**
  * The `IconText` renders an icon next to a text
  */
 const IconText = ({
   iconSize,
-  margin = 'md',
+  margin = 'xs',
   textSize,
   iconType,
   text,
@@ -51,11 +47,11 @@ const IconText = ({
       <Text size={textSize} color={color}>
         {text}
       </Text>
-      <StyledIcon size={iconSize} type={iconType} color={color} />
+      <Icon size={iconSize} type={iconType} color={color} />
     </StyledIconText>
   ) : (
     <StyledIconText className={className} margin={margin}>
-      <StyledIcon size={iconSize} type={iconType} color={color} />
+      <Icon size={iconSize} type={iconType} color={color} />
       <Text size={textSize} color={color}>
         {text}
       </Text>
diff --git a/src/theme.ts b/src/theme.ts
index e6208ad3..58e4a3e1 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -55,7 +55,8 @@ const theme = {
     fontFamilyCode: `source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace`,
   },
   margin: {
-    xs: '4px',
+    xxs: '4px',
+    xs: '6px',
     sm: '8px',
     md: '12px',
     lg: '16px',

From 5f2e8af90dda58ef173233257dc5025fe66a9bd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Fri, 9 Apr 2021 14:01:03 -0300
Subject: [PATCH 6/7] fix eslint error

---
 src/dataDisplay/IconText/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/dataDisplay/IconText/index.tsx b/src/dataDisplay/IconText/index.tsx
index a7f7dbe6..082a18dc 100644
--- a/src/dataDisplay/IconText/index.tsx
+++ b/src/dataDisplay/IconText/index.tsx
@@ -13,7 +13,7 @@ import Text from '../Text';
 type Props = {
   iconType: keyof IconType;
   iconSize: ThemeIconSize;
-  margin: ThemeMargin;
+  margin?: ThemeMargin;
   textSize: ThemeTextSize;
   color?: ThemeColors;
   text: string;

From 38dedb605c3828c75b7c21853e9d469aefd436e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Fri, 9 Apr 2021 14:25:07 -0300
Subject: [PATCH 7/7] margin added to one side of the icon based on the
 selected side (right or left)

---
 src/dataDisplay/IconText/index.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/dataDisplay/IconText/index.tsx b/src/dataDisplay/IconText/index.tsx
index 082a18dc..9a2a0f75 100644
--- a/src/dataDisplay/IconText/index.tsx
+++ b/src/dataDisplay/IconText/index.tsx
@@ -21,11 +21,19 @@ type Props = {
   iconSide?: 'left' | 'right';
 };
 
-const StyledIconText = styled.div<{ margin: ThemeMargin }>`
+const LeftIconText = styled.div<{ margin: ThemeMargin }>`
   display: flex;
   align-items: center;
   svg {
-    margin: 0 ${({ theme, margin }) => theme.margin[margin]};
+    margin: 0 ${({ theme, margin }) => theme.margin[margin]} 0 0;
+  }
+`;
+
+const RightIconText = styled.div<{ margin: ThemeMargin }>`
+  display: flex;
+  align-items: center;
+  svg {
+    margin: 0 0 0 ${({ theme, margin }) => theme.margin[margin]};
   }
 `;
 
@@ -43,19 +51,19 @@ const IconText = ({
   className,
 }: Props): React.ReactElement => {
   return iconSide === 'right' ? (
-    <StyledIconText className={className} margin={margin}>
+    <RightIconText className={className} margin={margin}>
       <Text size={textSize} color={color}>
         {text}
       </Text>
       <Icon size={iconSize} type={iconType} color={color} />
-    </StyledIconText>
+    </RightIconText>
   ) : (
-    <StyledIconText className={className} margin={margin}>
+    <LeftIconText className={className} margin={margin}>
       <Icon size={iconSize} type={iconType} color={color} />
       <Text size={textSize} color={color}>
         {text}
       </Text>
-    </StyledIconText>
+    </LeftIconText>
   );
 };