fix(INJI-435): add padding and fix the activation status overflow in …

…all languages Signed-off-by: PuBHARGAVI <[email protected]>
mosip · Oct 20, 2023 · 86e7025 · 86e7025
1 parent 733e2ad
commit 86e7025
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 18 deletions.
diff --git a/components/VC/MosipVCItem/MosipVCItemActivationStatus.tsx b/components/VC/MosipVCItem/MosipVCItemActivationStatus.tsx
@@ -16,10 +16,8 @@ const WalletUnverifiedIcon: React.FC = () => {
       size={Theme.ICON_MID_SIZE}
       type="material-community"
       containerStyle={{
-        marginStart: 5,
-        marginEnd: 1,
+        marginEnd: 5,
         bottom: 1,
-        marginRight: -2,
       }}
     />
   );
@@ -32,10 +30,8 @@ const WalletVerifiedIcon: React.FC = () => {
       color={Theme.Colors.VerifiedIcon}
       size={Theme.ICON_MID_SIZE}
       containerStyle={{
-        marginStart: 5,
-        marginEnd: 1,
+        marginEnd: 5,
         bottom: 1,
-        marginRight: -2,
       }}
     />
   );
@@ -46,20 +42,19 @@ const WalletUnverifiedActivationDetails: React.FC<
 > = props => {
   const {t} = useTranslation('VcDetails');
   return (
-    <>
+    <Row style={Theme.Styles.vcActivationDetailsWrapper}>
       {props.verifiableCredential && <WalletUnverifiedIcon />}
       <Text
         color={Theme.Colors.Details}
         testID="activationPending"
         weight="regular"
-        margin="0 0 0 5"
         style={
           !props.verifiableCredential
             ? Theme.Styles.loadingTitle
             : Theme.Styles.statusLabel
         }
         children={t('offlineAuthDisabledHeader')}></Text>
-    </>
+    </Row>
   );
 };
 
@@ -68,7 +63,7 @@ const WalletVerifiedActivationDetails: React.FC<
 > = props => {
   const {t} = useTranslation('WalletBinding');
   return (
-    <>
+    <Row style={Theme.Styles.vcActivationDetailsWrapper}>
       <WalletVerifiedIcon />
       <Text
         color={Theme.Colors.statusLabel}
@@ -82,15 +77,15 @@ const WalletVerifiedActivationDetails: React.FC<
             : Theme.Styles.statusLabel
         }
         children={t('profileAuthenticated')}></Text>
-    </>
+    </Row>
   );
 };
 
 export const MosipVCItemActivationStatus: React.FC<
   ExistingMosipVCItemActivationStatusProps
 > = props => {
   return (
-    <Row style={Theme.Styles.vcActivationStatusWrapper}>
+    <Row style={Theme.Styles.vcActivationStatusContainer}>
       {props.emptyWalletBindingId ? (
         <WalletUnverifiedActivationDetails
           verifiableCredential={props.verifiableCredential}

diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts
@@ -134,6 +134,8 @@ export const DefaultTheme = {
     statusLabel: {
       color: Colors.Gray30,
       fontSize: 12,
+      flexWrap: 'wrap',
+      flexShrink: 1,
     },
     activationTab: {
       display: 'flex',
@@ -230,21 +232,26 @@ export const DefaultTheme = {
     },
     verticalLine: {
       width: 1,
-      height: 30,
       backgroundColor: Colors.Grey,
       marginVertical: 8,
     },
     verticalLineWrapper: {
-      flex: 0.1,
       display: 'flex',
+      flex: 0.1,
+      height: '100%',
       justifyContent: 'center',
     },
-    vcActivationStatusWrapper: {
+    vcActivationStatusContainer: {
       display: 'flex',
       flex: 7,
       alignItems: 'center',
       width: '100%',
       height: '100%',
+      padding: 5,
+    },
+    vcActivationDetailsWrapper: {
+      display: 'flex',
+      alignItems: 'flex-start',
     },
     closeCardBgContainer: {
       borderRadius: 10,

diff --git a/components/ui/themes/PurpleTheme.ts b/components/ui/themes/PurpleTheme.ts
@@ -136,6 +136,8 @@ export const PurpleTheme = {
     statusLabel: {
       color: Colors.Gray30,
       fontSize: 12,
+      flexWrap: 'wrap',
+      flexShrink: 1,
     },
     activationTab: {
       justifyContent: 'space-between',
@@ -233,21 +235,26 @@ export const PurpleTheme = {
     },
     verticalLine: {
       width: 1,
-      height: 30,
       backgroundColor: Colors.Grey,
       marginVertical: 8,
     },
     verticalLineWrapper: {
-      flex: 0.1,
       display: 'flex',
+      flex: 0.1,
+      height: '100%',
       justifyContent: 'center',
     },
-    vcActivationStatusWrapper: {
+    vcActivationStatusContainer: {
       display: 'flex',
       flex: 7,
       alignItems: 'center',
       width: '100%',
       height: '100%',
+      padding: 5,
+    },
+    vcActivationDetailsWrapper: {
+      display: 'flex',
+      alignItems: 'flex-start',
     },
     closeCardBgContainer: {
       borderRadius: 10,