From 5523cfa3475d04e0e42d9b504395a22bec0d295c Mon Sep 17 00:00:00 2001
From: anantakumarghosh <antaghosh@gmail.com>
Date: Wed, 26 Jun 2024 19:41:22 +0530
Subject: [PATCH] style(core): :lipstick: style alignment polishing

style alignment polishing of basic info and contact info

Ref: #52
---
 app/components/basicInfo/BasicInfoCard.js     | 60 ++++++++++++++++---
 app/components/contactInfo/ContactInfoCard.js | 37 ++++++------
 2 files changed, 70 insertions(+), 27 deletions(-)

diff --git a/app/components/basicInfo/BasicInfoCard.js b/app/components/basicInfo/BasicInfoCard.js
index a180eb8..33bf3ab 100644
--- a/app/components/basicInfo/BasicInfoCard.js
+++ b/app/components/basicInfo/BasicInfoCard.js
@@ -2,8 +2,9 @@ import {
   CoreAvatar,
   CoreH6,
   CoreTypographyBody1,
-  CoreTypographyCaption,
+  CoreIconButton,
   CoreBox,
+  CoreIcon,
   CoreGrid,
   CoreClasses,
   getFullName,
@@ -19,7 +20,27 @@ export default function BasicInfoCard(props) {
   const {
     firstName, middleName, lastName, gender, dob, bio, photo
   } = props;
-
+  const CustomIconTooltipText = (props) =>{
+    return (
+      <CoreIconButton
+        disableFocusRipple={true}
+        disableRipple={true}
+        type={__IconTypes.MATERIAL_OUTLINED_ICON}
+        title={props?.tip}
+        disableElevation={true}
+        styleClasses={[CoreClasses.CURSOR.CURSOR_DEFAULT, CoreClasses.PADDING.P0]}
+        {...props}>
+  
+        {props?.icon !== undefined ? 
+          <CoreIcon>
+            {props?.icon}
+          </CoreIcon> : null
+        }
+  
+        {props?.children}
+      </CoreIconButton>
+    );
+  };
   const getGender = (gender, iconFlag = false) => {
     let genderTmp = "unknown";
 
@@ -75,14 +96,37 @@ export default function BasicInfoCard(props) {
         <CoreStack
           direction="row"
           spacing={1}
+          divider={true}
           styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_FLEX_START]}
         >
-          
-          <CoreIconText type={__IconTypes.MATERIAL_OUTLINED_ICON} icon="cake" text={getAge(dob)} />
-
-          <CoreTypographyCaption styleClasses={[CoreClasses.COLOR.TEXT_SECONDARY]}>{" | "}</CoreTypographyCaption>
-
-          <CoreIconText type={__IconTypes.MATERIAL_OUTLINED_ICON} icon={getGender(gender, true)} text={getGender(gender)} />
+          <CustomIconTooltipText
+            tip={getAge(dob)}
+            disableFocusRipple={true}
+            disableRipple={true}
+            type={__IconTypes.MATERIAL_OUTLINED_ICON}
+          >
+            <CoreIconButton
+              type={__IconTypes.MATERIAL_OUTLINED_ICON}
+              title=""
+              disabled={true}
+              disableFocusRipple={true}
+            >
+              <CoreIconText type={__IconTypes.MATERIAL_OUTLINED_ICON} icon="cake" text={getAge(dob)} />
+            </CoreIconButton>
+          </CustomIconTooltipText>
+
+          <CoreIconButton
+            type={__IconTypes.MATERIAL_OUTLINED_ICON}
+            title=""
+            disabled={true}
+            disableFocusRipple={true} >
+
+            <CoreIconText
+              type={__IconTypes.MATERIAL_OUTLINED_ICON}
+              icon={getGender(gender, true)}
+              text={getGender(gender)}
+            />
+          </CoreIconButton>
 
         </CoreStack>
       </CoreBox>
diff --git a/app/components/contactInfo/ContactInfoCard.js b/app/components/contactInfo/ContactInfoCard.js
index d05c32b..de0e17d 100644
--- a/app/components/contactInfo/ContactInfoCard.js
+++ b/app/components/contactInfo/ContactInfoCard.js
@@ -5,7 +5,6 @@ import {
   CoreIconButton,
   CoreBox,
   CoreGrid,
-  CoreCardHeader,
   CoreClasses,
   coreUseNavigate,
   CorePhoneLink,
@@ -21,26 +20,26 @@ export default function ContactInfoCard(props) {
   const { phone, email, profileLink, website } = props;
 
   return (
+
     <>
-      <CoreCardHeader
-        title={
-          <CoreTypographyBody1
-            styleClasses={[CoreClasses.TEXT.TEXT_WEIGHT_BOLD]}
-          >Contact Info</CoreTypographyBody1>
-        }
-        action={
-          <CoreIconButton
-            title={"Edit Contact Info"}
-            onClick={() => {
-              navigate("/settings#account");
-            }}
-          >
-            <CoreIcon>edit_note</CoreIcon>
-          </CoreIconButton>
-        }
-      />
+      <CoreBox styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN]}>
+        <CoreTypographyBody1
+          styleClasses={[CoreClasses.TEXT.TEXT_WEIGHT_BOLD]}
+        >Contact Info</CoreTypographyBody1>
+
+        <CoreIconButton
+          title={"Edit Contact Info"}
+          onClick={() => {
+            navigate("/settings#account");
+          }}
+          styleClasses={[CoreClasses.PADDING.PR0]}
+        >
+          <CoreIcon>edit_note</CoreIcon>
+        </CoreIconButton>
+      
+      </CoreBox>
 
-      <CoreGrid styleClasses={[CoreClasses.MARGIN.ML1]}>
+      <CoreGrid styleClasses={[CoreClasses.PADDING.PL0]}>
         <CoreBox
           gridProps={{ gridSize: { sm: 3 } }}
           styleClasses={[CoreClasses.FLEX.DIRECTION_COLUMN]}