style(core): 💄 style alignment polishing

style alignment polishing of basic info and contact info Ref: #52
wrappid · Jun 26, 2024 · 82e77b5 · 82e77b5
1 parent 2c01811
commit 82e77b5
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 18 deletions.
diff --git 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
@@ -21,26 +21,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={
+    <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]}