Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Onboarding Modal Styling #1038

Merged
merged 4 commits into from
Apr 18, 2023
Merged

Add Onboarding Modal Styling #1038

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cf599e9
Add Onboarding Modal Styling
HavreLoic Apr 15, 2023
a53cd9e
Merge branch 'development/user-profile' of https://github.com/dev-lau…
HavreLoic Apr 17, 2023
a733c48
Remove theme styling of font-weight, font-family and font-size
HavreLoic Apr 17, 2023
e31d72f
Put back username to close the modal by default
HavreLoic Apr 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 20 additions & 2 deletions apps/user-profile/src/components/modules/UserOnboardingModal/StyledUserOnboardingModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,34 @@ import styled from "styled-components";
export const ModalContainer = styled.div`
width: 100%;
height: 100%;
font-family: "Abel", sans-serif;
`;

export const ModalHeader = styled.div`
width: 100%;
display: flex;
align-items: center;
background-color: #000000;
color: #F0EDEE;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the color present in the Figma design and in packages\UI\src\styles\theme.ts
I wasn't able to use ${theme.color.GREYSCALE_OFF_WHITE} to get that because I am using the theme in the file path import theme from "../../../styles/theme";
I have tried using import {theme as theme1} from ... and import {theme as theme1} from ... but it was not working. that is why I am not using the build in colour from the theme file here

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

THis is fine, i will be configuring the styling system for user profile project later on

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@HavreLoic theme can used as follows

${({ theme }) =>theme.color.GREYSCALE_OFF_WHITE };

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes @Enjoy2Live we are first using hard-coded values until the issue of the duplicated them file is addressed

font-weight: 400;

img {
margin-right: 1rem;
margin-left: 1rem;
}
${'' /* Enter styling */}
`;

export const ModalBody = styled.div`
padding: 0 120px;
padding: 0 115px;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Padding from the Figma design


h2 {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gonna get you to make some changes here to reflect the changes I'm planning for next week, I'll speak to you about it.

color: #212429;

}

p {
color: #7B7B7B;
}
${'' /* Enter styling */}
`;

Expand Down
42 changes: 24 additions & 18 deletions apps/user-profile/src/components/modules/UserOnboardingModal/UserOnboardingModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import {useState, useEffect} from "react";
import { useState, useEffect } from "react";
import Modal from "react-modal";
import LogoMonogram from '../../../images/logo-monogram.png'


import PlatformOnboarding from "./PlatformOnboarding/PlatformOnboarding";
import Typography from "@devlaunchers/components/components/atoms/Typography";
Expand All @@ -10,7 +12,7 @@ Modal.setAppElement("#__next");
/**
* @description This is custom modal for the user onboarding.
*/
export default function UserOnboardingModal({isOpen}) {
export default function UserOnboardingModal({ isOpen }) {
const [modalIsOpen, setModalIsOpen] = useState(true);

const openModal = () => {
Expand All @@ -24,23 +26,27 @@ export default function UserOnboardingModal({isOpen}) {
}
return (
<>
{/* "modalIsOpen ? true : false" set this way until we start adding typescript for
{/* "modalIsOpen ? true : false" set this way until we start adding typescript for
boolean type */}
<Modal
isOpen={modalIsOpen ? true : false}
onRequestOpen={openModal}
onRequestClose={closeModal}
style={userUnboardingModalStyle}
contentLabel="User Onboarding"
>
<ModalContainer>
<ModalHeader><Typography type="h4"> Modal Title</Typography></ModalHeader>
<ModalBody>
<Typography type="p"> body</Typography>
{/* Onboarding Card Component */}
</ModalBody>
</ModalContainer>
</Modal>
<Modal
isOpen={modalIsOpen ? true : false}
onRequestOpen={openModal}
onRequestClose={closeModal}
style={userUnboardingModalStyle}
contentLabel="User Onboarding"
>
<ModalContainer>
<ModalHeader>
<img height="33.6px" src={LogoMonogram} alt="dev-launchers" />
<Typography type="h4">Dev Launchers</Typography>
</ModalHeader>
<ModalBody>
<Typography type="h2">Get Started with Devlaunchers</Typography>
<Typography type="p">Please complete the following onboarding tasks</Typography>
{/* Onboarding Card Component */}
</ModalBody>
</ModalContainer>
</Modal>
</>
);
}