Jingwei/982 onboarding card compoent #1011

sky1122 · 2023-04-12T04:03:05Z

changes:
1. create OnboardingCard file in website/src/modules
2. create index.js
3. create OnboardingCard.js
4. StyledOnboardingCard.js
Issue:
1. import { Typography } from '@devlaunchers/components/components/atoms' seems I didn't use It correctly, so the font is not working.

How to use the component:
the demo of how to use this component is in user-profile/src/UserOnboardingModal/UserOnboardingModal.js

changeset-bot · 2023-04-12T04:03:08Z

⚠️ No Changeset found

Latest commit: fa2272e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

judeamos

I've reviewed your changes @sky1122, and left feedback below.

judeamos · 2023-04-12T17:06:32Z

apps/user-profile/src/components/modules/UserOnboardingModal/UserOnboardingModal.js

@@ -38,6 +41,22 @@ export default function UserOnboardingModal({isOpen}) {
                <ModalBody>
                <Typography type="p"> body</Typography>                    
                {/* Onboarding Card Component */}
+                {/* passing a prop to decide show checked or unchecked 


Move these comments to the OnboardingCard.js file.

judeamos · 2023-04-12T17:08:21Z

apps/website/src/components/modules/UserOnboardingModal/OnboardingCard/OnboardingCard.js

+    iconImg,
+    title,
+    subtitle,
+    checked,


rename this prop to "completed", this name follows the user story better, and reflect where necessary.

judeamos · 2023-04-12T17:08:43Z

apps/website/src/components/modules/UserOnboardingModal/OnboardingCard/OnboardingCard.js

+    subtitle,
+    checked,
+}) {
+    console.log({ iconImg });


remove console logs

judeamos · 2023-04-12T17:15:52Z

apps/website/src/components/modules/UserOnboardingModal/OnboardingCard/OnboardingCard.js

+
+
+
+            <CheckedWrapper >


Is there anyway of removing this "CheckedWrapper"?

I see you have added a padding-right: 34px, you can move this style into "OnboardingCardLayer".

The align-self: centre can be moved into the "OnbordingCardLayer" as align-items: centre.

judeamos · 2023-04-12T17:16:45Z

apps/website/src/components/modules/UserOnboardingModal/OnboardingCard/StyledOnboardingCard.js

+    display: flex;
+    justify-content: space-between;
+    radius: 10px;
+    width: 686px;


set width to 100%, should be responsive.

judeamos · 2023-04-12T17:19:43Z

apps/website/src/components/modules/UserOnboardingModal/OnboardingCard/StyledOnboardingCard.js

+    height: auto;
+    position: relative;
+    border-radius: 10px;
+    border: 1px solid #000000;


border is not needed.

judeamos · 2023-04-12T17:20:34Z

apps/website/src/components/modules/UserOnboardingModal/OnboardingCard/StyledOnboardingCard.js

+export const OnboardingCardLayer = styled.div`
+    display: flex;
+    justify-content: space-between;
+    radius: 10px;


you have radius & border-radius used here, should it not be radius?

judeamos · 2023-04-12T17:24:16Z

apps/website/src/components/modules/UserOnboardingModal/OnboardingCard/OnboardingCard.js

+    console.log({ title });
+    console.log({ checked });
+    return (
+        <OnboardingCardLayer checked = {checked}>


"OnboardingCardContainer" Would be a better name/description.

judeamos · 2023-04-12T17:27:19Z

apps/website/src/components/modules/UserOnboardingModal/OnboardingCard/OnboardingCard.js

+        <OnboardingCardLayer checked = {checked}>
+            {/* <img src={iconImg} alt="icon" /> */}
+            <PicWrapper>
+            <TextWrapper>


This "TextWrapper" is not needed here. You can add your paddings to the "PicWrapper" styled component. You can also utilise:

- gap: 10px; gap: 10px 20px; /* row-gap column gap */ row-gap: 10px; column-gap: 20px; css properties for flex boxes.

judeamos · 2023-04-12T17:28:08Z

apps/website/src/components/modules/UserOnboardingModal/OnboardingCard/StyledOnboardingCard.js

+)
+
+export const IconImg = ({iconImg}) => {
+    console.log("style");


remove console.logs

sky1122 · 2023-04-20T16:10:55Z

I make these changes, however, because the tag in the library cannot change the color, and after the typography component get this works. The color will be able to change.

HavreLoic

Hey Jingwei there is a merge conflict in apps\user-profile\src\components\modules\UserOnboardingModal\UserOnboardingModal.js I think that once it is solved this branch is good to go

sky1122 · 2023-04-23T14:49:55Z

I resolve this conflict, please take a look when you are free.

…rdCompoent

…aunchers/dev-launchers-platform into Jingwei/982-OnboardingCardCompoent

judeamos

Just two changes i need you to make. I've approved the PR, once you pushed the changes, you can then merge yourself 👍🏾

judeamos · 2023-04-23T18:35:23Z

apps/user-profile/src/pages/users/me.js

@@ -18,7 +18,8 @@ export default function UserProfilePage() {
   * More conditions will be applied when modal should be opened in the future.
   */
  const openUserOnboardingModal = () => {
-    return !(userData && userData.username)
+    return true;


revert your changes here. Do not push me.js

So just uncomment return !(userData...) , and delete the return true

judeamos · 2023-04-23T18:38:31Z

apps/user-profile/src/components/modules/UserOnboardingModal/OnboardingCard/OnboardingCard.js

+import React from 'react'
+import { Typography } from '@devlaunchers/components/components/atoms'
+import { OnboardingCardContainer, PicWrapper, TextWrapper, CheckedWrapper, CheckedSVG, IconImg } from './StyledOnboardingCard'
+export default function OnboardingCard({


Please can you add a component comment describing what the component does:

sky1122 added 2 commits April 11, 2023 22:58

OnboardingCard-v1

2b05bb1

OnboardingCard-v1

49afbac

sky1122 requested review from Enjoy2Live and pyxld-kris as code owners April 12, 2023 04:03

sky1122 requested review from judeamos and HavreLoic and removed request for Enjoy2Live and pyxld-kris April 12, 2023 04:03

judeamos requested changes Apr 12, 2023

View reviewed changes

sky1122 added 2 commits April 16, 2023 17:59

clean up css

a6a1b6b

fix text

35ecfb6

sky1122 requested a review from judeamos April 20, 2023 16:09

HavreLoic reviewed Apr 21, 2023

View reviewed changes

sky1122 requested a review from HavreLoic April 23, 2023 14:50

sky1122 and others added 4 commits April 23, 2023 11:19

Merge branch 'development/user-profile' into Jingwei/982-OnboardingCa…

57e44d6

…rdCompoent

demo into UserOnboardingModal

6be26bd

Merge branch 'Jingwei/982-OnboardingCardCompoent' of github.com:dev-l…

86842ad

…aunchers/dev-launchers-platform into Jingwei/982-OnboardingCardCompoent

merge remote conflic through vscode

c286c28

judeamos approved these changes Apr 23, 2023

View reviewed changes

fv

fa2272e

sky1122 merged commit a1acc2c into development/user-profile Apr 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Jingwei/982 onboarding card compoent #1011

Jingwei/982 onboarding card compoent #1011

sky1122 commented Apr 12, 2023 •

edited

Loading

changeset-bot bot commented Apr 12, 2023 •

edited

Loading

judeamos left a comment

judeamos Apr 12, 2023

judeamos Apr 12, 2023

judeamos Apr 12, 2023

judeamos Apr 12, 2023

judeamos Apr 12, 2023

judeamos Apr 12, 2023

judeamos Apr 12, 2023

judeamos Apr 12, 2023

judeamos Apr 12, 2023

judeamos Apr 12, 2023

sky1122 commented Apr 20, 2023 •

edited

Loading

HavreLoic left a comment

sky1122 commented Apr 23, 2023

judeamos left a comment •

edited

Loading

judeamos Apr 23, 2023

judeamos Apr 23, 2023

judeamos Apr 23, 2023

Jingwei/982 onboarding card compoent #1011

Jingwei/982 onboarding card compoent #1011

Conversation

sky1122 commented Apr 12, 2023 • edited Loading

changeset-bot bot commented Apr 12, 2023 • edited Loading

⚠️ No Changeset found

judeamos left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sky1122 commented Apr 20, 2023 • edited Loading

HavreLoic left a comment

Choose a reason for hiding this comment

sky1122 commented Apr 23, 2023

judeamos left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sky1122 commented Apr 12, 2023 •

edited

Loading

changeset-bot bot commented Apr 12, 2023 •

edited

Loading

sky1122 commented Apr 20, 2023 •

edited

Loading

judeamos left a comment •

edited

Loading