Merge pull request #1325 from dev-launchers/rina/new1075-import-SVG-f…

…iles

rina/new1075-import-SVG-files

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

@@ -1,5 +1,5 @@
 import { Typography } from "@devlaunchers/components/components/atoms";
-import RoleCard from "./RoleCard/RoleCard.js";
+import RoleCard from "../../RoleCard/RoleCard.js";
 import { PageThereeContainer, ThreeRoleCards } from "./StyledPageThree.js";
 
 export default function PageThree(){
@@ -9,19 +9,19 @@ export default function PageThree(){
             <Typography type="subtitle">We'll use this to recommend open source projects for you to work on.</Typography>
             <ThreeRoleCards>
                 <RoleCard
-                    iconImg="Onboarding"
+                    iconImg="Developer"
                     title="Developer"
                     subtitle="You’re here to work on our codebase"
                     theme="theme1"
                 />
                 <RoleCard
-                    iconImg="Onboarding"
+                    iconImg="UX"
                     title="UX Designer"
                     subtitle="You’re here to make our platform user friendly"
                     theme="theme2"
                 />
                 <RoleCard
-                    iconImg="Onboarding"
+                    iconImg="Other"
                     title=" Other"
                     subtitle="You’re a surprise!"
                     theme="theme3"

apps/user-profile/src/components/modules/UserOnboardingModal/PlatformOnboarding/PageThree/StyledPageThree.js

@@ -1,10 +1,13 @@
 import styled from "styled-components";
 
 export const PageThereeContainer = styled.div`
+    padding: 10%;
     text-align: center;
 `
 
 export const ThreeRoleCards = styled.div`
+    padding-left: 5%;
+    padding-right: 5%;
     display: flex;
     flex-direction: row;
 `

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

@@ -1,25 +1,32 @@
 import styled from "styled-components";
 import React from 'react';
-import juniorExperienceSvg from '../../../../images/junior-experience.svg';
-import midExperienceSvg from '../../../../images/mid-experience.svg'
-import onboardingFoldersSvg from '../../../../images/onboarding-folders.svg';
-import seniorExperienceSvg from '../../../../images/senior-experience.svg'
-import userProfileSvg from '../../../../images/user-profile.svg';
+import Developer from '../../../.././images/Onboarding/RoleCard/developer.svg';
+import UX from '../../../.././images/Onboarding/RoleCard/ux-ui.svg';
+import Other from '../../../.././images/Onboarding/RoleCard/other.svg';
 
 export const IconImg = ({iconImg}) => {
     switch (iconImg) {
-        case 'Junior':
-            return <img src={juniorExperienceSvg}/>
-				case 'Mid-Level':
-					return <img src={midExperienceSvg}/>
-				case 'Senior':
-					return <img src={seniorExperienceSvg}/>	
-				case 'Onboarding':
-					return <img src={onboardingFoldersSvg}/>
+        case 'Developer':
+            return (
+                <img src={Developer}/>
+            )
+
+        case 'UX':
+            return (
+                <img src={UX}/>
+            )
+
+        case 'Other':
+            return (
+                <img src={Other}/>
+            )
+
         default:
-            return <img src={userProfileSvg} />
-      }
-} ;
+            return (
+            <img src={Developer} />
+            )
+    }
+};
 
 export const RoleCardContainer = styled.div`
     margin: 50px 10px 0px;
@@ -42,7 +49,11 @@ export const RoleCardContainer = styled.div`
 `;
 
 export const IconWrapper = styled.div`
-    width: 50%;
+    width: 100%;
+    img {
+        width: 50px;
+        height: 50px;
+    };
 `;
 
 

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

@@ -3,8 +3,9 @@ import Modal from "react-modal";
 import OnboardingCard from "./OnboardingCard/OnboardingCard.js";
 import PlatformOnboarding from "./PlatformOnboarding/PlatformOnboarding";
 import PageOne from "./PlatformOnboarding/PageOne";
+import PageThree from "./PlatformOnboarding/PageThree";
 import Typography from "@devlaunchers/components/components/atoms/Typography";
-import LogoMonogram from '../../../images/logo-monogram.png'
+import LogoMonogram from "../../../images/logo-monogram.png"
 import { ModalContainer, userUnboardingModalStyle, ModalHeader, ModalBody } from "./StyledUserOnboardingModal";
 
 Modal.setAppElement("#__next");
@@ -48,7 +49,8 @@ export default function UserOnboardingModal({ isOpen }) {
                         {/*<PlatformOnboarding/> (stepper) */}
 
                         {/* <PageOne name="any name"/> */}
-
+
+                        {/* <PageThree />                */}
                     </ModalBody>
                 </ModalContainer>
             </Modal>