From a5300171b473d57e4a7e5d2c55e44e47b13f1a24 Mon Sep 17 00:00:00 2001 From: Prahitha Date: Wed, 25 Mar 2020 15:32:08 +0530 Subject: [PATCH 01/50] Added input field for First Name --- .../ignitus-UserInterfaceKitRoutes/index.jsx | 5 ++++ .../ignitus-Atoms/input.ts | 30 +++++++++++++++++++ .../Components/Atoms/interfaceCards/styles.ts | 2 +- .../Atoms/interfaceInputs/Components/index.ts | 1 + .../Components/interfaceInputs.tsx | 16 ++++++++++ .../Atoms/interfaceInputs/styles.ts | 5 ++++ 6 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/input.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/Atoms/interfaceInputs/Components/index.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/Atoms/interfaceInputs/Components/interfaceInputs.tsx create mode 100644 src/ignitus-UserInterfaceKit/Components/Atoms/interfaceInputs/styles.ts diff --git a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx index 89400294..093db679 100644 --- a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx +++ b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx @@ -6,6 +6,7 @@ import { KitSideNavigation } from '../../ignitus-UserInterfaceKit/InterfaceSideN import { interfaceButttons } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components'; import { interfaceNavigation } from '../../ignitus-UserInterfaceKit/Components/Organisms/interfaceNavigation/Components'; import { interfaceIcons } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components'; +import { interfaceInputs } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceInputs/Components'; import { interfaceTypography } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components'; import { interfaceCards } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components'; import { interfaceCardLayout } from '../../ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/Components'; @@ -42,6 +43,10 @@ const UserInterfaceKitRoutes = () => ( path="/interface/icons" component={interfaceIcons} /> + ( + + Input Fields ★ +
+ + +); + +export default interfaceInputs; \ No newline at end of file diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceInputs/styles.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceInputs/styles.ts new file mode 100644 index 00000000..fcc75a06 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceInputs/styles.ts @@ -0,0 +1,5 @@ +import styled from '@emotion/styled'; + +export const InputContainer = styled.div` + padding: 1rem; +`; From f979a71223989f789a8bf8a479e2dd3367ccb2b8 Mon Sep 17 00:00:00 2001 From: Prahitha <44160152+Prahitha@users.noreply.github.com> Date: Wed, 25 Mar 2020 15:36:47 +0530 Subject: [PATCH 02/50] Update styles.ts --- .../Components/Atoms/interfaceCards/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/styles.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/styles.ts index a60afc29..9bd819c2 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/styles.ts +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/styles.ts @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -export const CardsContainer = styled.input` +export const CardsContainer = styled.nav` padding: 2rem; `; From b6cef212d608aaa6a88510f825973b80ae74fccf Mon Sep 17 00:00:00 2001 From: Prahitha <44160152+Prahitha@users.noreply.github.com> Date: Wed, 25 Mar 2020 17:51:18 +0530 Subject: [PATCH 03/50] Update interfaceInputs.tsx --- .../interfaceInputs/Components/interfaceInputs.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceInputs/Components/interfaceInputs.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceInputs/Components/interfaceInputs.tsx index f9235e89..c3a0c3b3 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceInputs/Components/interfaceInputs.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceInputs/Components/interfaceInputs.tsx @@ -1,9 +1,7 @@ import React from 'react'; -import {InputContainer} from '../styles'; -import {StyledHeading2} from '../../../../styles'; -import { - InputField1 -} from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/input'; +import { InputContainer } from '../styles'; +import { StyledHeading2 } from '../../../../styles'; +import { InputField1 } from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/input'; const interfaceInputs = () => ( @@ -13,4 +11,4 @@ const interfaceInputs = () => ( ); -export default interfaceInputs; \ No newline at end of file +export default interfaceInputs; From 815d0e080863b8e795366b00a0ac20fb66f942b4 Mon Sep 17 00:00:00 2001 From: Prahitha <44160152+Prahitha@users.noreply.github.com> Date: Wed, 25 Mar 2020 18:40:08 +0530 Subject: [PATCH 04/50] Update input.ts --- .../ignitus-DesignSystem/ignitus-Atoms/input.ts | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/input.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/input.ts index 035fc352..e80335ea 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/input.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/input.ts @@ -13,18 +13,11 @@ export const InputField1 = styled.input` border: none; border-radius: 17px; - ::placeholder, - ::-webkit-input-placeholder { - color: ${C.GreySecondaryText}; - font-weight: ${F.SemiBold}; - font-size: ${F.XL}; - opacity: 0.5; - } - :-ms-input-placeholder { + ::placeholder { color: ${C.GreySecondaryText}; font-weight: ${F.SemiBold}; font-size: ${F.XL}; opacity: 0.5; } -`; \ No newline at end of file +`; From 691413cc6328d06ebba32c7909d50d0c17903cc7 Mon Sep 17 00:00:00 2001 From: gargshruti30 Date: Wed, 25 Mar 2020 19:05:00 +0530 Subject: [PATCH 05/50] Email Flow Page Migration --- .../Styles/style.scss | 1 - .../Components/EmailFlow.jsx | 48 ++++++++++ .../Components/EmailFlow.tsx | 40 --------- .../ignitus-EmailFlow/Components/index.js | 2 - .../ignitus-EmailFlow/Components/index.ts | 2 + .../ignitus-EmailFlow/Styles/style.scss | 89 ------------------- .../ignitus-EmailFlow/Styles/style.ts | 6 ++ .../Components/InterestFlow.jsx | 4 +- 8 files changed, 58 insertions(+), 134 deletions(-) create mode 100644 src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Components/EmailFlow.jsx delete mode 100644 src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Components/EmailFlow.tsx delete mode 100644 src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Components/index.js create mode 100644 src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Components/index.ts delete mode 100644 src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Styles/style.scss create mode 100644 src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Styles/style.ts diff --git a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Styles/style.scss b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Styles/style.scss index c5130e93..2e3ae7c9 100644 --- a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Styles/style.scss +++ b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Styles/style.scss @@ -1,6 +1,5 @@ // import ignitus token variables @import '../../../../ignitus-Shared/styles/ignitus-components-common.scss'; -@import '../../ignitus-EmailFlow/Styles/style.scss'; .emailConfirm { background-color: white; diff --git a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Components/EmailFlow.jsx b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Components/EmailFlow.jsx new file mode 100644 index 00000000..60857b64 --- /dev/null +++ b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Components/EmailFlow.jsx @@ -0,0 +1,48 @@ +/* eslint-disable jsx-a11y/click-events-have-key-events */ +/* eslint-disable jsx-a11y/no-static-element-interactions */ +import React from 'react'; +import {Link} from 'react-router-dom'; +import progress from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Images/img-Png/progressPage5.png'; +import newsletter from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Images/img-Png/newsletterIcon.png'; +import {withErrorBoundary} from '../../../../ignitus-Shared/ignitus-ErrorHandlingComponents/errorBoundary'; +import { + Paragraph, + Heading1, +} from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/typography'; +import * as T from '../../ignitus-WelcomeFlow/Styles/style'; +import * as C from '../Styles/style'; +import { + PrimaryButton, + WhiteButton, +} from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/buttons'; + +const EmailFlow = () => ( + + + + + Let’s confirm your email. + + {' '} + We recommend to confirm your email address to recieve further + communication. + + + Click the link we sent to sofia.carter@gmail.com to confirm you email. + + + + + + Email confirmed + + + I don’t see the email + + + I don’t want to confirm my email yet + + +); + +export default withErrorBoundary(EmailFlow); diff --git a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Components/EmailFlow.tsx b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Components/EmailFlow.tsx deleted file mode 100644 index 60e15b62..00000000 --- a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Components/EmailFlow.tsx +++ /dev/null @@ -1,40 +0,0 @@ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -import React from 'react'; -import { Link } from 'react-router-dom'; -import progress from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Images/img-Png/progressPage5.png'; -import newsletter from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Images/img-Png/newsletterIcon.png'; -import { withErrorBoundary } from '../../../../ignitus-Shared/ignitus-ErrorHandlingComponents/errorBoundary'; -import '../Styles/style.scss'; - -const EmailFlow = () => ( -
- progress-bar -
- newsletter -
-

Let’s confirm your email.

-

- We recommend to confirm your email address to recieve further - communication. -

-

- Click the link we sent to sofia.carter@gmail.com to confirm you email. -

-
- - -
-

I don’t want to confirm my email yet

-
-); - -export default withErrorBoundary(EmailFlow); diff --git a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Components/index.js b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Components/index.js deleted file mode 100644 index 143ec833..00000000 --- a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Components/index.js +++ /dev/null @@ -1,2 +0,0 @@ -/* eslint-disable import/prefer-default-export */ -export { default as EmailFlow } from './EmailFlow'; diff --git a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Components/index.ts b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Components/index.ts new file mode 100644 index 00000000..357b910b --- /dev/null +++ b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Components/index.ts @@ -0,0 +1,2 @@ +/* eslint-disable import/prefer-default-export */ +export {default as EmailFlow} from './EmailFlow'; diff --git a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Styles/style.scss b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Styles/style.scss deleted file mode 100644 index aed91cbc..00000000 --- a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Styles/style.scss +++ /dev/null @@ -1,89 +0,0 @@ -// import ignitus token variables -@import '../../../../ignitus-Shared/styles/ignitus-components-common.scss'; - - -.email { - background-color: white; - height: 52rem; -} - -.newsletter > img { - display: block; - margin: auto; - max-width: 100%; -} - -.welcome { - color: #000066; - font-family: Raleway; - font-size: 2.8rem; - font-style: normal; - font-weight: 600; - line-height: 3rem; - margin-top: 3rem; - text-align: center; - width: 100%; -} - -.paragraph { - color: #2d2d2d; - font-family: Raleway; - font-size: 1.5rem; - font-style: normal; - font-weight: 300; - line-height: 2rem; - text-align: center; - width: 100%; -} - -.progressBarSignup { - display: block; - margin: auto; - max-height: 100%; - max-width: 100%; - padding-left: 10rem; - padding-right: 10rem; - padding-top: 4rem; -} - -.emailConfirmContainer { - align-content: center; - display: flex; - flex-wrap: wrap; - justify-content: center; - padding: 1rem 0; -} - -.emailConfirmContainer > button { - border-radius: 9px; - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); - height: 2.5rem; - margin: 0.5rem; - width: 12rem; -} - -.emailConfirmed { - background: #000066; -} - -.noEmail { - background: #ffffff; -} - -.emailConfirmedText { - color: #ffffff; - font-family: Raleway; - font-size: 1rem; - font-style: normal; - font-weight: bold; - line-height: 0.8rem; -} - -.noEmailText { - color: #000066; - font-family: Raleway; - font-size: 1rem; - font-style: normal; - font-weight: bold; - line-height: 0.8rem; -} diff --git a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Styles/style.ts b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Styles/style.ts new file mode 100644 index 00000000..11f84561 --- /dev/null +++ b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailFlow/Styles/style.ts @@ -0,0 +1,6 @@ +import styled from '@emotion/styled'; +import {BottomRow} from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; + +export const NewsletterImage = styled.img``; + +export const ButtonContainer = styled(BottomRow)``; diff --git a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-InterestFlow/Components/InterestFlow.jsx b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-InterestFlow/Components/InterestFlow.jsx index d1f30b9d..0138d833 100644 --- a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-InterestFlow/Components/InterestFlow.jsx +++ b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-InterestFlow/Components/InterestFlow.jsx @@ -30,7 +30,7 @@ const InterestFlow = () => ( {' '}
- + @@ -39,7 +39,7 @@ const InterestFlow = () => ( - +
From 5c784d1b7bf03f9bec498c8e2638a989d8919e0c Mon Sep 17 00:00:00 2001 From: Abhushan Date: Wed, 25 Mar 2020 19:47:07 +0530 Subject: [PATCH 06/50] Removed the dependency of bootstrap from navigation with Cutom CSS --- .../Components/Navigation.jsx | 96 +++---- .../ignitus-Navigation/Styles/style.scss | 248 ++++++------------ 2 files changed, 121 insertions(+), 223 deletions(-) diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/Components/Navigation.jsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/Components/Navigation.jsx index a47506ee..2896b7cf 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/Components/Navigation.jsx +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/Components/Navigation.jsx @@ -6,87 +6,71 @@ import logo from '../../../ignitus-Assets/ignitus-Logos/logo-Svg/ignitusBlueLogo import blackLogo from '../../../ignitus-Assets/ignitus-Logos/logo-Svg/ignitusBlackLogo.svg'; import '../Styles/style.scss'; +const handleSmallerScreen = () => { + const burger = document.querySelector('#burger'); + const navlinks = document.querySelector('.navlinks'); + const lines = document.querySelectorAll('.line'); + lines.forEach(line => { + line.classList.toggle('mobile'); + }); + navlinks.classList.toggle('mobile'); +} const PureNavigation = ({ displayClass, dynamicLogo }) => ( -