From cf599e99cb09202791d8c5f67096ff34862d6f90 Mon Sep 17 00:00:00 2001 From: Havre Loic Date: Sat, 15 Apr 2023 16:10:24 +0100 Subject: [PATCH 1/3] Add Onboarding Modal Styling --- .../StyledUserOnboardingModal.js | 27 +++++++++++- .../UserOnboardingModal.js | 42 +++++++++++-------- 2 files changed, 50 insertions(+), 19 deletions(-) diff --git a/apps/user-profile/src/components/modules/UserOnboardingModal/StyledUserOnboardingModal.js b/apps/user-profile/src/components/modules/UserOnboardingModal/StyledUserOnboardingModal.js index 5d0439e10..977b5f6bb 100644 --- a/apps/user-profile/src/components/modules/UserOnboardingModal/StyledUserOnboardingModal.js +++ b/apps/user-profile/src/components/modules/UserOnboardingModal/StyledUserOnboardingModal.js @@ -1,4 +1,5 @@ import styled from "styled-components"; +import theme from "../../../styles/theme"; export const ModalContainer = styled.div` width: 100%; @@ -8,11 +9,35 @@ export const ModalContainer = styled.div` export const ModalHeader = styled.div` width: 100%; + display: flex; + align-items: center; + background-color: ${theme.colors.Black}; + color: #F0EDEE; + font-weight: 400; + + img { + margin-right: 1rem; + margin-left: 1rem; + } + /* GREYSCALE_OFF_WHITE */ ${'' /* Enter styling */} `; export const ModalBody = styled.div` - padding: 0 120px; + padding: 0 115px; + +h2 { + font-family: ${theme.fonts.normal}; + font-weight: 700; + color: #212429; + +} + + p { + font-family: ${theme.fonts.headline}; + color: #7B7B7B; + font-size: ${theme.fontSizes.small}; + } ${'' /* Enter styling */} `; diff --git a/apps/user-profile/src/components/modules/UserOnboardingModal/UserOnboardingModal.js b/apps/user-profile/src/components/modules/UserOnboardingModal/UserOnboardingModal.js index 8f525fb20..abe164a9d 100644 --- a/apps/user-profile/src/components/modules/UserOnboardingModal/UserOnboardingModal.js +++ b/apps/user-profile/src/components/modules/UserOnboardingModal/UserOnboardingModal.js @@ -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"; @@ -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 = () => { @@ -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 Title - - body - {/* Onboarding Card Component */} - - - + + + + dev-launchers + Dev Launchers + + + Get Started with Devlaunchers + Please complete the following onboarding tasks + {/* Onboarding Card Component */} + + + ); } \ No newline at end of file From a733c48b131c24c6a13050e11ee53bd3f80c1ed2 Mon Sep 17 00:00:00 2001 From: Havre Loic Date: Mon, 17 Apr 2023 08:36:34 +0100 Subject: [PATCH 2/3] Remove theme styling of font-weight, font-family and font-size --- .../UserOnboardingModal/StyledUserOnboardingModal.js | 9 +-------- apps/user-profile/src/context/UserDataContext.js | 2 +- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/apps/user-profile/src/components/modules/UserOnboardingModal/StyledUserOnboardingModal.js b/apps/user-profile/src/components/modules/UserOnboardingModal/StyledUserOnboardingModal.js index 977b5f6bb..606f4d604 100644 --- a/apps/user-profile/src/components/modules/UserOnboardingModal/StyledUserOnboardingModal.js +++ b/apps/user-profile/src/components/modules/UserOnboardingModal/StyledUserOnboardingModal.js @@ -1,17 +1,15 @@ import styled from "styled-components"; -import theme from "../../../styles/theme"; 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: ${theme.colors.Black}; + background-color: #000000; color: #F0EDEE; font-weight: 400; @@ -19,7 +17,6 @@ export const ModalHeader = styled.div` margin-right: 1rem; margin-left: 1rem; } - /* GREYSCALE_OFF_WHITE */ ${'' /* Enter styling */} `; @@ -27,16 +24,12 @@ export const ModalBody = styled.div` padding: 0 115px; h2 { - font-family: ${theme.fonts.normal}; - font-weight: 700; color: #212429; } p { - font-family: ${theme.fonts.headline}; color: #7B7B7B; - font-size: ${theme.fontSizes.small}; } ${'' /* Enter styling */} `; diff --git a/apps/user-profile/src/context/UserDataContext.js b/apps/user-profile/src/context/UserDataContext.js index d700ef341..4877488f2 100644 --- a/apps/user-profile/src/context/UserDataContext.js +++ b/apps/user-profile/src/context/UserDataContext.js @@ -7,7 +7,7 @@ import { env } from '../utils/EnvironmentVariables'; const DEFAULT_USER = { id: 1, name: 'Ethan Levin', - username: 'Ethan', + username: '', // Ethan email: '', bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque orci quam, gravida id erat ac, vulputate posuere mi. In elementum pulvinar elit. Nam diam felis, bibendum nec luctus id, ornare sit amet dui. ", profilePictureUrl: 'https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_1280.png', From e31d72f6fcf357916d1bedbfa37b9a01dab5dbf6 Mon Sep 17 00:00:00 2001 From: Havre Loic Date: Mon, 17 Apr 2023 08:38:43 +0100 Subject: [PATCH 3/3] Put back username to close the modal by default --- apps/user-profile/src/context/UserDataContext.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/user-profile/src/context/UserDataContext.js b/apps/user-profile/src/context/UserDataContext.js index 4877488f2..d700ef341 100644 --- a/apps/user-profile/src/context/UserDataContext.js +++ b/apps/user-profile/src/context/UserDataContext.js @@ -7,7 +7,7 @@ import { env } from '../utils/EnvironmentVariables'; const DEFAULT_USER = { id: 1, name: 'Ethan Levin', - username: '', // Ethan + username: 'Ethan', email: '', bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque orci quam, gravida id erat ac, vulputate posuere mi. In elementum pulvinar elit. Nam diam felis, bibendum nec luctus id, ornare sit amet dui. ", profilePictureUrl: 'https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_1280.png',