feat(core): 💄 improve view mode

improve view mode as per design ref: #52
wrappid · Jun 25, 2024 · ae3f08c · ae3f08c
1 parent fd6b77e
commit ae3f08c
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 25 deletions.
diff --git a/app/components.registry.js b/app/components.registry.js
@@ -6,11 +6,13 @@ import EducationCard from "./components/education/EducationCard";
 import ProfileEducationSkeleton from "./components/education/ProfileEducationSkeleton";
 import ExperienceCard from "./components/experience/ExperienceCard";
 import ProfileExperienceSkeleton from "./components/experience/ProfileExperienceSkeleton";
+import ProfileCompletenessCard from "./components/ProfileCompletenessCard";
 import UserProfile from "./components/UserProfile";
 
 export const ComponentsRegistry = {
   BasicInfoCard            : { comp: BasicInfoCard },
   ProfileBasicSkeleton     : { comp: ProfileBasicSkeleton },
+  ProfileCompletenessCard  : { comp: ProfileCompletenessCard },
   ProfileContactSkeleton   : { comp: ProfileContactSkeleton },
   ProfileEducationSkeleton : { comp: ProfileEducationSkeleton },
   ProfileExperienceSkeleton: { comp: ProfileExperienceSkeleton },

diff --git a/app/components/UserProfile.js b/app/components/UserProfile.js
@@ -6,6 +6,7 @@ import {
   CoreBox,
   CoreCard,
   CoreCardContent,
+  CoreClasses,
   CoreComponent,
   CoreDivider,
   CoreForm,
@@ -52,7 +53,7 @@ function UserProfile() {
     <>
       <CoreLayoutItem id={AppContainerLayout.PLACEHOLDER.CONTENT}>
         <CoreGrid>
-          <CoreCard gridProps={{ gridSize: { sm: 12 } }}>
+          <CoreCard gridProps={{ gridSize: { sm: 12 } }} styleClasses={[CoreClasses.PADDING.P1]}>
             <CoreCardContent>
               <CoreGrid coreId="userProfileGrid">
                 <CoreForm

diff --git a/app/components/basicInfo/BasicInfoCard.js b/app/components/basicInfo/BasicInfoCard.js
@@ -55,9 +55,9 @@ export default function BasicInfoCard(props) {
   const degrees = useSelector((state) => state?.profile?.registration?.degrees);
 
   return (
-    <CoreGrid styleClasses={[]}>
+    <CoreGrid styleClasses={[CoreClasses.MARGIN.ML1, CoreClasses.MARGIN.MT_N5]}>
       <CoreBox
-        gridProps={{ gridSize: { md: 2, xs: 12 } }}
+        gridProps={{ gridSize: { md: 0.9, xs: 12 } }}
         styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER, CoreClasses.BORDER.BORDER_PRIMARY]}
       >
         <CoreAvatar

diff --git a/app/components/contactInfo/ContactInfoCard.js b/app/components/contactInfo/ContactInfoCard.js
@@ -23,13 +23,10 @@ export default function ContactInfoCard(props) {
   return (
     <>
       <CoreCardHeader
-        styleClasses={[CoreClasses.PADDING.P0, CoreClasses.PADDING.PR1]}
         title={
           <CoreTypographyBody1
             styleClasses={[CoreClasses.TEXT.TEXT_WEIGHT_BOLD]}
-          >
-            Contact Info
-          </CoreTypographyBody1>
+          >Contact Info</CoreTypographyBody1>
         }
         action={
           <CoreIconButton
@@ -43,7 +40,7 @@ export default function ContactInfoCard(props) {
         }
       />
 
-      <CoreGrid>
+      <CoreGrid styleClasses={[CoreClasses.MARGIN.ML1]}>
         <CoreBox
           gridProps={{ gridSize: { sm: 3 } }}
           styleClasses={[CoreClasses.FLEX.DIRECTION_COLUMN]}

diff --git a/app/components/education/EducationCard.js b/app/components/education/EducationCard.js
@@ -1,5 +1,5 @@
 import {
-  CoreTypographyBody1, CoreTypographyBody2, CoreTypographySubtitle2, CoreCardHeader, viewFormattedDate, CoreClasses, CoreStack 
+  CoreTypographyBody1, CoreTypographyBody2, CoreTypographySubtitle2, CoreCardHeader, viewFormattedDate, CoreClasses, CoreStack, CoreGrid 
 } from "@wrappid/core";
 
 export default function EducationCard(props) {
@@ -8,23 +8,25 @@ export default function EducationCard(props) {
   } = props;
 
   return (
-    <CoreCardHeader
-      title={
-        <CoreTypographyBody1 styleClasses={[CoreClasses.TEXT.TEXT_WEIGHT_BOLD]}>
-          {degree}
-        </CoreTypographyBody1>
-      }
-      subheader={
-        <CoreStack>
-          <CoreTypographySubtitle2>{school}</CoreTypographySubtitle2>
+    <CoreGrid>
+      <CoreCardHeader
+        title={ 
+          <CoreTypographyBody1 styleClasses={[CoreClasses.TEXT.TEXT_WEIGHT_BOLD]}>
+            {degree}
+          </CoreTypographyBody1>
+        }
+        subheader={
+          <CoreStack>
+            <CoreTypographySubtitle2>{school}</CoreTypographySubtitle2>
 
-          <CoreTypographySubtitle2>{board + ", " + location}</CoreTypographySubtitle2>
+            <CoreTypographySubtitle2>{board + ", " + location}</CoreTypographySubtitle2>
 
-          <CoreTypographyBody2>
-            {viewFormattedDate(startDate) + " - " + viewFormattedDate(endDate, "endDate")}
-          </CoreTypographyBody2>
-        </CoreStack>
-      }
-    />
+            <CoreTypographyBody2>
+              {viewFormattedDate(startDate) + " - " + viewFormattedDate(endDate, "endDate")}
+            </CoreTypographyBody2>
+          </CoreStack>
+        }
+      />
+    </CoreGrid>
   );
 }