diff --git a/src/assets/icons/v.2.5/curve-mask-horizontal.svg b/src/assets/icons/v.2.5/curve-mask-horizontal.svg new file mode 100644 index 000000000..a41a3b06d --- /dev/null +++ b/src/assets/icons/v.2.5/curve-mask-horizontal.svg @@ -0,0 +1,13 @@ + + + + Path 2 + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/v.2.5/curve-mask-vertical.svg b/src/assets/icons/v.2.5/curve-mask-vertical.svg new file mode 100644 index 000000000..1cf737306 --- /dev/null +++ b/src/assets/icons/v.2.5/curve-mask-vertical.svg @@ -0,0 +1,11 @@ + + + + Path 2 + Created with Sketch. + + + + + + \ No newline at end of file diff --git a/src/assets/icons/oval.svg b/src/assets/icons/v.2.5/oval.svg similarity index 100% rename from src/assets/icons/oval.svg rename to src/assets/icons/v.2.5/oval.svg diff --git a/src/assets/icons/v.2.5/project-default.svg b/src/assets/icons/v.2.5/project-default.svg new file mode 100644 index 000000000..c59db2a4a --- /dev/null +++ b/src/assets/icons/v.2.5/project-default.svg @@ -0,0 +1,13 @@ + + + + F132D33D-66CF-486F-B17E-7687604A2B61 + Created with sketchtool. + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/v.2.5/project-type-solutions.svg b/src/assets/icons/v.2.5/project-type-solutions.svg new file mode 100644 index 000000000..37b404462 --- /dev/null +++ b/src/assets/icons/v.2.5/project-type-solutions.svg @@ -0,0 +1,13 @@ + + + + 860440EF-BD1B-4075-9DE3-0599DD630E0A + Created with sketchtool. + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/v.2.5/project-type-talent-as-a-service.svg b/src/assets/icons/v.2.5/project-type-talent-as-a-service.svg new file mode 100644 index 000000000..0c62eba1e --- /dev/null +++ b/src/assets/icons/v.2.5/project-type-talent-as-a-service.svg @@ -0,0 +1,13 @@ + + + + E7B0585A-A81D-4C77-9540-DB4CD57776D2 + Created with sketchtool. + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/curve-horizontal-2100x78.png b/src/assets/images/curve-horizontal-2100x78.png deleted file mode 100644 index e8d7e7145..000000000 Binary files a/src/assets/images/curve-horizontal-2100x78.png and /dev/null differ diff --git a/src/assets/images/curve-vertical-43x100.png b/src/assets/images/curve-vertical-43x100.png deleted file mode 100644 index 08f62082e..000000000 Binary files a/src/assets/images/curve-vertical-43x100.png and /dev/null differ diff --git a/src/components/ProjectTypeIcon.jsx b/src/components/ProjectTypeIcon.jsx index 157628008..3541b6bd6 100644 --- a/src/components/ProjectTypeIcon.jsx +++ b/src/components/ProjectTypeIcon.jsx @@ -6,39 +6,9 @@ import React from 'react' import PT from 'prop-types' -import IconAnalyticsAlgorithmOptimization from '../assets/icons/product-analytics-algorithm-optimization.svg' -import IconAnalyticsComputerVision from '../assets/icons/product-analytics-computer-vision.svg' -import IconAnalyticsDataExploration from '../assets/icons/product-analytics-data-exploration.svg' -import IconAnalyticsPredictiveAnalytics from '../assets/icons/product-analytics-predictive-analytics.svg' -import IconAppApp from '../assets/icons/product-app-app.svg' -import IconCatAnalytics from '../assets/icons/product-cat-analytics.svg' -import IconCatApp from '../assets/icons/product-cat-app.svg' -import IconCatChatbot from '../assets/icons/product-cat-chatbot.svg' -import IconCatDesign from '../assets/icons/product-cat-design.svg' -import IconCatDevelopment from '../assets/icons/product-cat-development.svg' -import IconCatQa from '../assets/icons/product-cat-qa.svg' -import IconCatWebsite from '../assets/icons/product-cat-website.svg' -import IconChatbotChatbot from '../assets/icons/product-chatbot-chatbot.svg' -import IconChatbotWatson from '../assets/icons/product-chatbot-watson.svg' -import IconDesignAppVisual from '../assets/icons/product-design-app-visual.svg' -import IconDesignInfographic from '../assets/icons/product-design-infographic.svg' -import IconDesignOther from '../assets/icons/product-design-other.svg' -import IconDesignWireframes from '../assets/icons/product-design-wireframes.svg' -import IconDevFrontendDev from '../assets/icons/product-dev-front-end-dev.svg' -import IconDevIntegration from '../assets/icons/product-dev-integration.svg' -import IconDevOther from '../assets/icons/product-dev-other.svg' -import IconDevPrototype from '../assets/icons/product-dev-prototype.svg' -import IconOtherDesign from '../assets/icons/product-other-design.svg' -import IconQaConsulting from '../assets/icons/product-qa-consulting.svg' -import IconQaCrowdTesting from '../assets/icons/product-qa-crowd-testing.svg' -import IconQaDigitalAccessability from '../assets/icons/product-qa-digital-accessability.svg' -import IconQaHelthCheck from '../assets/icons/product-qa-health-check.svg' -import IconQaMobilityTesting from '../assets/icons/product-qa-mobility-testing.svg' -import IconQaOsAutomation from '../assets/icons/product-qa-os-automation.svg' -import IconQaWebsitePrerfomance from '../assets/icons/product-qa-website-performance.svg' -import IconQaSFDCAccelerator from '../assets/icons/product-qa-sfdc-accelerator.svg' -import IconWebsiteWebsite from '../assets/icons/product-website-website.svg' -import IconOutlineWorkProject from '../assets/icons/tech-32px-outline-work-project.svg' +import IconProjectTypeSolutions from '../assets/icons/v.2.5/project-type-solutions.svg' +import IconProjectTypeTalentAsService from '../assets/icons/v.2.5/project-type-talent-as-a-service.svg' +import IconProjectDefault from '../assets/icons/v.2.5/project-default.svg' const ProjectTypeIcon = ({ type }) => { // if type is defined as a relative path to the icon, convert it to icon "id" @@ -48,75 +18,13 @@ const ProjectTypeIcon = ({ type }) => { } switch(type){ - case 'product-analytics-algorithm-optimization': - return - case 'product-analytics-computer-vision': - return - case 'product-analytics-data-exploration': - return - case 'product-analytics-predictive-analytics': - return - case 'product-app-app': - return - case 'product-cat-analytics': - return - case 'product-cat-app': - return - case 'product-cat-chatbot': - return - case 'product-cat-design': - return - case 'product-cat-development': - return - case 'product-cat-qa': - return - case 'product-cat-website': - return - case 'product-chatbot-chatbot': - return - case 'product-chatbot-watson': - return - case 'product-design-app-visual': - return - case 'product-design-infographic': - return - case 'product-design-other': - return - case 'product-design-wireframes': - return - case 'product-dev-front-end-dev': - return - case 'product-dev-integration': - return - case 'product-dev-other': - return - case 'product-dev-prototype': - return - case 'product-other-design': - return - case 'product-qa-consulting': - return - case 'product-qa-crowd-testing': - return - case 'product-qa-digital-accessability': - return - case 'product-qa-health-check': - return - case 'product-qa-mobility-testing': - return - case 'product-qa-os-automation': - return - case 'product-qa-website-performance': - return - case 'product-qa-sfdc-accelerator': - return - case 'product-website-website': - return - case 'tech-32px-outline-work-project': - return + case 'project-type-solutions': + return + case 'project-type-talent-as-a-service': + return default: // this will be default icon - return + return } } diff --git a/src/projects/create/components/IconOvalWrapper.jsx b/src/projects/create/components/IconOvalWrapper.jsx index ed38c485b..7586bffaf 100644 --- a/src/projects/create/components/IconOvalWrapper.jsx +++ b/src/projects/create/components/IconOvalWrapper.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import './IconOvalWrapper.scss' -import OvalBackgroundIcon from '../../../assets/icons/oval.svg' +import OvalBackgroundIcon from '../../../assets/icons/v.2.5/oval.svg' function IconOvalWrapper({ children }) { diff --git a/src/projects/create/components/SelectProjectTemplateCard.js b/src/projects/create/components/SelectProjectTemplateCard.js index 790f24fc4..21a3a9e64 100644 --- a/src/projects/create/components/SelectProjectTemplateCard.js +++ b/src/projects/create/components/SelectProjectTemplateCard.js @@ -5,8 +5,8 @@ import cn from 'classnames' import './SelectProjectTemplateCard.scss' import IconOvalWrapper from './IconOvalWrapper' -import curveVertical from '../../../assets/images/curve-vertical-43x100.png' -import curveHorizontal from '../../../assets/images/curve-horizontal-2100x78.png' +import CurveVertical from '../../../assets/icons/v.2.5/curve-mask-vertical.svg' +import CurveHorizontal from '../../../assets/icons/v.2.5/curve-mask-horizontal.svg' import IconArrowRight from '../../../assets/icons/arrows-16px-1_tail-right.svg' function SelectProjectTemplateCard(p) { @@ -55,8 +55,10 @@ function SelectProjectTemplateCard(p) { )} +
+ +
- vertical curve {(deliverables.length === 1) && (
{(deliverables.length > 0) && (
- horizontal curve +
+ +
{deliverables.map( (item, i) => diff --git a/src/projects/create/components/SelectProjectTemplateCard.scss b/src/projects/create/components/SelectProjectTemplateCard.scss index b9001457b..c4f03ee79 100644 --- a/src/projects/create/components/SelectProjectTemplateCard.scss +++ b/src/projects/create/components/SelectProjectTemplateCard.scss @@ -69,10 +69,17 @@ } .more-deliverable { + .top-card { + .vertical-curve-wrapper { + display: none; + } + + + + } .right-card { background: transparent; - .vertical-curve, .info-html { display: none; } @@ -148,7 +155,7 @@ @media screen and (max-width: $screen-md - 1px) { background: transparent; - .vertical-curve, + .vertical-curve-wrapper, .info-html { display: none; } @@ -194,20 +201,28 @@ background: #f4f4f4; } -.vertical-curve { - height: 100%; - position: absolute; - left: 0; - top: 0; - width: 20px; +.vertical-curve-wrapper { + + svg { + float: right; + background: #f4f4f4; + width: auto; + height: 100%; + } + + @media screen and (max-width: $screen-md - 1px) { + display: none; + } } -.horizontal-curve { - width: 100%; - height: 30px; - position: absolute; - top: 0; - left: 0; +.horizontal-curve-wrapper{ + height: 20px; + svg{ + width: 100%; + height: auto; + transform: scaleY(0.2); + transform-origin: top left; + } } .learn-more-container {