diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultMulti/Components/index.test.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultMulti/Components/index.test.tsx
index a2a23d61..138c53c8 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultMulti/Components/index.test.tsx
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultMulti/Components/index.test.tsx
@@ -9,15 +9,15 @@ const props = {
maxHeightOfInput: 200,
};
-let wrapper;
-beforeEach(() => {
- wrapper = mount(
);
- expect(wrapper).toMatchSnapshot();
+ let wrapper;
+ beforeEach(() => {
+ wrapper = mount(
);
});
it('should contain buttons & textarea', () => {
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultSearchInput/Components/__snapshots__/index.test.tsx.snap b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultSearchInput/Components/__snapshots__/index.test.tsx.snap
index b16d64df..4068be0d 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultSearchInput/Components/__snapshots__/index.test.tsx.snap
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultSearchInput/Components/__snapshots__/index.test.tsx.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultSearchInput/Components/index.test.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultSearchInput/Components/index.test.tsx
index a65331d3..7e09ee6b 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultSearchInput/Components/index.test.tsx
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultSearchInput/Components/index.test.tsx
@@ -13,15 +13,15 @@ const props: InputTypes = {
const input = 'input[type="text"]';
-let wrapper;
-beforeEach(() => {
- wrapper = mount(
);
+it('should render', () => {
+ const tree = render(
);
+ expect(tree).toMatchSnapshot();
});
describe('
', () => {
- it('should render', () => {
- wrapper = render(
);
- expect(wrapper).toMatchSnapshot();
+ let wrapper;
+ beforeEach(() => {
+ wrapper = mount(
);
});
it('should render input with proper props passed', () => {
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultTag/Components/__snapshots__/defaultTag.test.tsx.snap b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultTag/Components/__snapshots__/defaultTag.test.tsx.snap
index 80c1c471..39490675 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultTag/Components/__snapshots__/defaultTag.test.tsx.snap
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultTag/Components/__snapshots__/defaultTag.test.tsx.snap
@@ -1,37 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`
should render 1`] = `
-.emotion-0 {
- background: #fff;
- color: #000;
- text-align: center;
- border-radius: 2rem;
- line-height: 1rem;
- padding: 1rem 2rem;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-pack: space-around;
- -webkit-justify-content: space-around;
- -ms-flex-pack: space-around;
- justify-content: space-around;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- margin: 0.5rem;
- cursor: pointer;
-}
-
-
- Label
-
-`;
-
exports[`
should render 1`] = `
.emotion-1 {
background: #fff;
@@ -92,3 +60,35 @@ exports[`
should render 1`] = `
Label
`;
+
+exports[`should rendered 1`] = `
+.emotion-0 {
+ background: #fff;
+ color: #000;
+ text-align: center;
+ border-radius: 2rem;
+ line-height: 1rem;
+ padding: 1rem 2rem;
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-pack: space-around;
+ -webkit-justify-content: space-around;
+ -ms-flex-pack: space-around;
+ justify-content: space-around;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin: 0.5rem;
+ cursor: pointer;
+}
+
+
+ Label
+
+`;
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultTag/Components/defaultTag.test.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultTag/Components/defaultTag.test.tsx
index 0a9f3c8a..7ba84e23 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultTag/Components/defaultTag.test.tsx
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultTag/Components/defaultTag.test.tsx
@@ -23,16 +23,16 @@ const styleCheck = () => {
expect(span).toHaveStyleRule('background', props.background);
};
+it('should rendered', () => {
+ const tree = render(
);
+ expect(tree).toMatchSnapshot();
+});
+
describe('
', () => {
beforeEach(() => {
wrapper = mount(
);
});
- it('should render', () => {
- wrapper = render(
);
- expect(wrapper).toMatchSnapshot();
- });
-
it('should render span tag with label', () => {
expect(wrapper.find('span').text()).toBe(props.label);
});
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-navDropdown/Components/index.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-navDropdown/Components/index.tsx
new file mode 100644
index 00000000..6650ec87
--- /dev/null
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-navDropdown/Components/index.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Layer } from '../../../ignitus-Organisms/ignitus-SideNavigation/Common/styles';
+import * as S from '../styles';
+import { Props } from '../types';
+import { AppIcon } from '../../../../types/iconsTypes/iconEnums';
+
+export const DashboardNavigationDropdown = ({ Options, Name }: Props) => {
+ const [content, setContent] = React.useState(false);
+ return (
+
+ setContent(!content)}>
+
+ {Name}
+
+
+ {content && (
+
+ {Options.map(({ title }, x) => (
+
+
+ {title}
+
+
+ ))}
+
+ )}
+
+ );
+};
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-navDropdown/styles.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-navDropdown/styles.ts
new file mode 100644
index 00000000..d4d5299c
--- /dev/null
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-navDropdown/styles.ts
@@ -0,0 +1,36 @@
+import styled from '@emotion/styled/macro';
+import { White, IgnitusBlue } from '../colors';
+import { Icon as I } from '../../../ignitus-Utilities/Components/icon';
+import { StyleProps } from './types';
+import { MD } from '../fonts';
+
+export const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 12rem;
+`;
+
+export const Column = styled.div`
+ background-color: ${White};
+ border-radius: 1rem;
+ margin-top: 1rem;
+`;
+
+export const NavigationHeading = styled.div`
+ align-items: center;
+ color: ${IgnitusBlue};
+ cursor: pointer;
+ display: flex;
+ font-size: ${MD};
+ justify-content: flex-end;
+`;
+
+export const Icon = styled(I)
`
+ height: 2rem;
+ fill: ${IgnitusBlue};
+ margin: 0 0.5rem;
+`;
+
+export const Text = styled.div`
+ text-align: center;
+`;
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-navDropdown/types.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-navDropdown/types.ts
new file mode 100644
index 00000000..93d7ae69
--- /dev/null
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-navDropdown/types.ts
@@ -0,0 +1,13 @@
+export type Props = {
+ Options: Option[];
+ Name: string;
+};
+
+type Option = {
+ title: string;
+};
+
+export type StyleProps = {
+ marginLeft?: boolean;
+ marginRight?: boolean;
+};
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/__snapshots__/index.test.tsx.snap b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/__snapshots__/index.test.tsx.snap
index 51c6609f..aa862e62 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/__snapshots__/index.test.tsx.snap
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/__snapshots__/index.test.tsx.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[` should rendered 1`] = `
+exports[`should rendered 1`] = `
.emotion-2 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.test.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.test.tsx
index 383b71b8..5508aab3 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.test.tsx
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.test.tsx
@@ -56,16 +56,15 @@ const searchHelper = (wrapper, searchValue, expectedResults) => {
}
};
-let wrapper;
-
-beforeEach(() => {
- wrapper = mount();
+it('should rendered', () => {
+ const tree = render();
+ expect(tree).toMatchSnapshot();
});
describe('', () => {
- it('should rendered', () => {
- wrapper = render();
- expect(wrapper).toMatchSnapshot();
+ let wrapper;
+ beforeEach(() => {
+ wrapper = mount();
});
it('should render input tags', () => {
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.tsx
index 6c8a24d0..ba79fcb1 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.tsx
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.tsx
@@ -24,7 +24,7 @@ export const SecondaryDropDown = ({ data }) => {
} else {
setShowOptions(false);
}
- }, [searchTerm]);
+ }, [searchTerm, data]);
return (
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Molecules/ignitus-Modal/ignitus-ModalHooray/Components/__snapshots__/index.test.tsx.snap b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Molecules/ignitus-Modal/ignitus-ModalHooray/Components/__snapshots__/index.test.tsx.snap
index f1c75571..95876a28 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Molecules/ignitus-Modal/ignitus-ModalHooray/Components/__snapshots__/index.test.tsx.snap
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Molecules/ignitus-Modal/ignitus-ModalHooray/Components/__snapshots__/index.test.tsx.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[` should render 1`] = `
+exports[`should render 1`] = `
.emotion-6 {
background-image: url('https://storage.googleapis.com/ignitus_assets/ig-assets/confetti.svg');
background-color: #ffffff;
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Molecules/ignitus-Modal/ignitus-ModalHooray/Components/index.test.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Molecules/ignitus-Modal/ignitus-ModalHooray/Components/index.test.tsx
index 947af116..69ba1c10 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Molecules/ignitus-Modal/ignitus-ModalHooray/Components/index.test.tsx
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Molecules/ignitus-Modal/ignitus-ModalHooray/Components/index.test.tsx
@@ -10,21 +10,20 @@ const props = {
buttonText: 'button text',
};
-let wrapper;
-
expect.addSnapshotSerializer(emotionSerializer);
expect.extend(matchers);
+it('should render', () => {
+ const tree = render();
+ expect(tree).toMatchSnapshot();
+});
+
describe('', () => {
+ let wrapper;
beforeEach(() => {
wrapper = mount();
});
- it('should render', () => {
- wrapper = render();
- expect(wrapper).toMatchSnapshot();
- });
-
it('should render button, h1, p tags', () => {
expect(wrapper.find('button').length).toBe(1);
expect(wrapper.find('h1').length).toBe(1);
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Molecules/ignitus-Overlay/Components/__snapshots__/index.test.tsx.snap b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Molecules/ignitus-Overlay/Components/__snapshots__/index.test.tsx.snap
new file mode 100644
index 00000000..abf4beae
--- /dev/null
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Molecules/ignitus-Overlay/Components/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,142 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render 1`] = `
+.emotion-4 {
+ position: relative;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ background-color: rgba(0,0,102,0.89);
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
+ width: 100%;
+ height: 100%;
+}
+
+.emotion-3 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+
+.emotion-0 {
+ margin-bottom: 4rem;
+ height: 7.5rem;
+}
+
+.emotion-0 path {
+ fill: white;
+}
+
+.emotion-1 {
+ font-weight: 500;
+ font-size: 32px;
+ color: #ffffff;
+ margin-bottom: 1.5rem;
+}
+
+.emotion-2 {
+ font-size: 16px;
+ font-weight: 400;
+ color: #ffffff;
+ margin: 0;
+}
+
+
+
+
+
+ primary text
+
+
+ secondary text
+
+
+
+
+
+
+ {name}
+ {position}
+
+
+
+ {numberMessages}
+ {dateSent}
+
+
+ ),
+);
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-MessageCard/styles.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-MessageCard/styles.ts
new file mode 100644
index 00000000..ea225cb3
--- /dev/null
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-MessageCard/styles.ts
@@ -0,0 +1,68 @@
+import styled from '@emotion/styled';
+import * as C from '../../ignitus-Atoms/colors';
+import * as T from '../../ignitus-Atoms/typography';
+import * as F from '../../ignitus-Atoms/fonts';
+import { flexibleRowDiv } from '../../shared';
+
+export const MessageContainer = styled(flexibleRowDiv)`
+ border-radius: 1rem;
+ box-shadow: 0 2px 4px 0 ${C.boxShadowColor};
+ background-color: ${C.White};
+ box-sizing: border-box;
+ padding: 1rem;
+ width: 100%;
+ margin-bottom: 1rem;
+`;
+
+export const ImageContainer = styled.div`
+ position: relative;
+ padding: 0.5rem;
+
+ img {
+ border-radius: 50%;
+ width: 4rem;
+ max-width: 100%;
+ max-height: 100%;
+ }
+
+ svg {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ stroke: ${C.White};
+ fill: #219653;
+ height: 2rem;
+ width: 2rem;
+ }
+`;
+
+export const MessageSubTitle = styled(T.Paragraph)`
+ margin-left: 1rem;
+`;
+
+export const Sender = styled(T.Paragraph)`
+ font-weight: ${F.Bold};
+ font-size: ${F.MD};
+ color: ${C.IgnitusBlue};
+ margin-bottom: 0.5rem;
+`;
+
+export const SenderPosition = styled(T.Paragraph)`
+ font-weight: ${F.Normal};
+ font-size: ${F.SM};
+ color: ${C.IgnitusBlue};
+ margin-bottom: 0.5rem;
+`;
+
+export const MessageDateTitle = styled.div`
+ text-align: right;
+ margin-left: auto;
+`;
+
+export const Details = styled(T.Paragraph)`
+ font-family: Open Sans;
+ font-weight: ${F.Normal};
+ font-size: ${F.SM};
+ color: ${C.GreyOne};
+ margin-bottom: 0.5rem;
+`;
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/Components/index.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/Components/index.tsx
index 37f1d442..df168b2d 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/Components/index.tsx
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/Components/index.tsx
@@ -18,6 +18,7 @@ const PureNavigation: React.FC = ({
? AuthenticatedNavigationItemsList
: NonAuthenticatedNavigationItemsList;
const [isExpanded, toogleIsExpanded] = useToggle(true);
+
return (
@@ -29,7 +30,21 @@ const PureNavigation: React.FC = ({
key={title}
transparentNavigation={transparentNavigation}
>
- {title}
+ {title !== 'Join' && (
+
+ {title}
+
+ )}
+ {title === 'Join' && (
+
+ {title}
+
+ )}
))}
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/constants.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/constants.ts
index 97302d10..b0ad98eb 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/constants.ts
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/constants.ts
@@ -13,7 +13,7 @@ export const NonAuthenticatedNavigationItemsList: NavigationItems[] = [
{
title: 'Join',
- route: 'https://bit.ly/2SaYXMO',
+ route: 'https://bit.ly/JoinIgnitusSlack',
},
{
@@ -40,7 +40,7 @@ export const AuthenticatedNavigationItemsList: NavigationItems[] = [
{
title: 'Join',
- route: 'https://bit.ly/2SaYXMO',
+ route: 'https://bit.ly/JoinIgnitusSlack',
},
{
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/styles.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/styles.ts
index 21e9d5b2..0ada8961 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/styles.ts
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/styles.ts
@@ -122,3 +122,11 @@ export const Burger = styled(Icon, { shouldForwardProp: isValidProps })<
top: 1.2rem;
}
`;
+
+export const Fullscreen = styled.div`
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100vh;
+ width: 100vw;
+`;
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/Components/index.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/Components/index.tsx
new file mode 100644
index 00000000..6afc7151
--- /dev/null
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/Components/index.tsx
@@ -0,0 +1,35 @@
+/* eslint-disable import/extensions */
+/* eslint-disable jsx-a11y/accessible-emoji */
+import React from 'react';
+import * as S from '../styles';
+import { withErrorBoundary } from '../../../../ignitus-ErrorHandlingComponents/errorBoundary';
+import { AppIcon } from '../../../../types/iconsTypes/iconEnums';
+import * as C from '../../../ignitus-Atoms/colors';
+import { InputTypes } from '../types';
+
+export const Notifications = withErrorBoundary(
+ ({
+ textColor,
+ titleColor,
+ bgColor,
+ picture,
+ title,
+ textLeft,
+ textRight,
+ ...rest
+ }: InputTypes) => (
+
+
+ {picture && }
+ {textLeft}
+ {title}
+ {textRight}
+
+
+
+
+
+
+
+ ),
+);
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/styles.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/styles.ts
new file mode 100644
index 00000000..ebf44d73
--- /dev/null
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/styles.ts
@@ -0,0 +1,47 @@
+import styled from '@emotion/styled';
+import { Icon as I } from '../../../ignitus-Utilities/Components/icon';
+import { StyledTagProps } from './types';
+import { Paragraph } from '../../..';
+import { Bold } from '../../ignitus-Atoms/fonts';
+
+export const Container = styled.span`
+ background: ${props => props.bgColor};
+ color: ${props => props.color};
+ border-radius: 0.5rem;
+ margin: 0.5rem;
+ cursor: pointer;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
+`;
+
+export const IconContainer = styled.div`
+ display: flex;
+`;
+
+export const Icon = styled(I)`
+ width: 1.5rem;
+ fill: ${props => props.color};
+ transition: 0.3s;
+`;
+
+export const Image = styled.img`
+ height: 3rem;
+ border-radius: 50%;
+ margin-right: 1rem;
+`;
+
+export const Text = styled(Paragraph)`
+ font-weight: ${Bold};
+ color: ${props => props.color};
+`;
+
+export const LeftContainer = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+`;
+
+export const RightContainer = styled.div``;
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/types.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/types.ts
new file mode 100644
index 00000000..ad43bd69
--- /dev/null
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/types.ts
@@ -0,0 +1,14 @@
+export type InputTypes = {
+ textColor: string;
+ titleColor: string;
+ bgColor: string;
+ picture?: string;
+ title?: string;
+ textLeft?: string;
+ textRight?: string;
+};
+
+export type StyledTagProps = {
+ bgColor: string;
+ color: string;
+};
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OpportunityList/Components/__snapshots__/index.test.tsx.snap b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OpportunityList/Components/__snapshots__/index.test.tsx.snap
index 7e4ceb7f..43628e94 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OpportunityList/Components/__snapshots__/index.test.tsx.snap
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OpportunityList/Components/__snapshots__/index.test.tsx.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[` should render 1`] = `
+exports[`should render 1`] = `
.emotion-12 {
display: -webkit-box;
display: -webkit-flex;
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OpportunityList/Components/index.test.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OpportunityList/Components/index.test.tsx
index aaa588e2..3c739e3d 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OpportunityList/Components/index.test.tsx
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OpportunityList/Components/index.test.tsx
@@ -4,21 +4,20 @@ import emotionSerializer, { matchers } from 'jest-emotion';
import { BtnWithIcon, Opportunity } from './index';
import * as S from '../styles';
-let wrapper;
-
expect.addSnapshotSerializer(emotionSerializer);
expect.extend(matchers);
+it('should render', () => {
+ const tree = render();
+ expect(tree).toMatchSnapshot();
+});
+
describe('', () => {
+ let wrapper;
beforeEach(() => {
wrapper = mount();
});
- it('should render', () => {
- wrapper = render();
- expect(wrapper).toMatchSnapshot();
- });
-
it('should render BtnWithIcon', () => {
expect(wrapper.find(BtnWithIcon).length).toBe(1);
expect(wrapper.find(S.BtnContainerIcon).length).toBe(1);
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OpportunitySideCard/Components/index.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OpportunitySideCard/Components/index.tsx
new file mode 100644
index 00000000..52267a36
--- /dev/null
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OpportunitySideCard/Components/index.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import * as S from '../styles';
+import { OpportunityType, CardType } from '../types';
+import { Paragraph } from '../../../ignitus-Atoms/typography';
+import { AppIcon } from '../../../../types/iconsTypes/iconEnums';
+
+export const InfoCard = ({ location, commitment, salary }: CardType) => {
+ const [applyButton, setStatus] = React.useState('Apply');
+ const handleClick = () => {
+ setStatus('Applied');
+ };
+ return (
+
+
+
+
+
+
+ {' '}
+
+ {applyButton}{' '}
+
+
+ {' '}
+ Save{' '}
+
+
+ Share Link
+
+
+
+ );
+};
+
+const Card = ({ title, description }: OpportunityType) => (
+
+ {title}
+
+ {description}
+
+);
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OpportunitySideCard/styles.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OpportunitySideCard/styles.ts
new file mode 100644
index 00000000..e67be6c7
--- /dev/null
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OpportunitySideCard/styles.ts
@@ -0,0 +1,48 @@
+import styled from '@emotion/styled';
+import { White, GreyBackground, IgnitusBlue } from '../../ignitus-Atoms/colors';
+import { SemiBold } from '../../ignitus-Atoms/fonts';
+import { Heading4 } from '../../ignitus-Atoms/typography';
+import { RoundedButton } from '../../ignitus-Atoms/buttons';
+import { Icon as I } from '../../../ignitus-Utilities/Components/icon';
+import { StatusType } from './types';
+
+export const Container = styled.div`
+ border-radius: 1rem;
+ background-color: ${White};
+ display: flex;
+ flex-direction: column;
+`;
+
+export const Wrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-width: 18rem;
+ padding: 2rem;
+ border-bottom: 0.2rem solid ${GreyBackground};
+`;
+
+export const ButtonsWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 2rem;
+`;
+
+export const Heading = styled(Heading4)`
+ font-weight: ${SemiBold};
+`;
+
+export const Button = styled(RoundedButton)`
+ width: 12rem;
+`;
+
+export const Share = styled(I)`
+ fill: ${IgnitusBlue};
+ margin-right: 0.2rem;
+`;
+
+export const ApplyStatus = styled(I)`
+ fill: ${White};
+ display: ${props => (props.status === 'Applied' ? 'inline-block' : 'none')};
+`;
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OpportunitySideCard/types.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OpportunitySideCard/types.ts
new file mode 100644
index 00000000..1ec4c017
--- /dev/null
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OpportunitySideCard/types.ts
@@ -0,0 +1,14 @@
+export type OpportunityType = {
+ title: string;
+ description: string;
+};
+
+export type CardType = {
+ location: string;
+ commitment: string;
+ salary: string;
+};
+
+export type StatusType = {
+ status: string;
+};
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-ProfileCard/Components/__snapshots__/index.test.tsx.snap b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-ProfileCard/Components/__snapshots__/index.test.tsx.snap
index 402cd556..1a52d390 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-ProfileCard/Components/__snapshots__/index.test.tsx.snap
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-ProfileCard/Components/__snapshots__/index.test.tsx.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[` should render 1`] = `
+exports[`should rendered 1`] = `
.emotion-35 {
display: -webkit-box;
display: -webkit-flex;
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-ProfileCard/Components/index.test.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-ProfileCard/Components/index.test.tsx
index 898202bc..a0db9edb 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-ProfileCard/Components/index.test.tsx
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-ProfileCard/Components/index.test.tsx
@@ -11,17 +11,16 @@ const props: Props = {
name: AppIcon.QuestionAnswerIcon,
};
-let wrapper;
-
expect.addSnapshotSerializer(emotionSerializer);
expect.extend(matchers);
-describe('', () => {
- it('should render', () => {
- wrapper = render();
- expect(wrapper).toMatchSnapshot();
- });
+it('should rendered', () => {
+ const tree = render();
+ expect(tree).toMatchSnapshot();
+});
+describe('', () => {
+ let wrapper;
it('should render Icon, Paragraph, Avatar', () => {
wrapper = mount();
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/Common/Layer.test.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/Common/Layer.test.tsx
index d6a9f921..f288677b 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/Common/Layer.test.tsx
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/Common/Layer.test.tsx
@@ -11,13 +11,13 @@ import { Layer } from './styles';
expect.addSnapshotSerializer(serializer);
expect.extend(matchers);
-let wrapper;
+it('should rendered', () => {
+ const tree = render();
+ expect(tree).toMatchSnapshot();
+});
describe('', () => {
- it('should render', () => {
- wrapper = render();
- expect(wrapper).toMatchSnapshot();
- });
+ let wrapper;
it('should render with default border-bottom style', () => {
wrapper = mount();
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/Common/__snapshots__/Layer.test.tsx.snap b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/Common/__snapshots__/Layer.test.tsx.snap
index 1ccf1870..c773d5e0 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/Common/__snapshots__/Layer.test.tsx.snap
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/Common/__snapshots__/Layer.test.tsx.snap
@@ -1,20 +1,21 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[` should render 1`] = `
+exports[`should rendered 1`] = `
.emotion-1 {
border-bottom: 1px solid #E0E0E0;
color: #000066;
cursor: pointer;
font-size: 18px;
font-weight: 400;
- margin-top: none;
- margin-bottom: none;
padding: 1rem 0;
width: 100%;
+ margin-top: none;
+ margin-bottom: none;
}
.emotion-1:hover {
background-color: #000066;
+ color: #ffffff;
}
.emotion-1:hover p {
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/Common/styles.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/Common/styles.ts
index 61935bec..e70dbedd 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/Common/styles.ts
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/Common/styles.ts
@@ -1,21 +1,24 @@
import styled from '@emotion/styled';
import { White, IgnitusBlue, GreyLight } from '../../../ignitus-Atoms/colors';
-import { MD, Normal } from '../../../ignitus-Atoms/fonts';
+import { MD, SemiBold, Normal } from '../../../ignitus-Atoms/fonts';
import { StyledLayerProps } from './types';
export const Layer = styled.div`
border-bottom: ${props => (props.border ? `1px solid ${GreyLight}` : 'null')};
color: ${IgnitusBlue};
cursor: pointer;
+
font-size: ${MD};
- font-weight: ${Normal};
- margin-top: ${props => (props.marginTop ? '0.5rem' : 'none')};
- margin-bottom: ${props => (props.marginBottom ? '0.5rem' : 'none')};
+ font-weight: ${props => (props.semiBold ? `${SemiBold}` : `${Normal}`)};
padding: 1rem 0;
width: 100%;
+ margin-top: ${props => (props.marginTop ? '0.5rem' : 'none')};
+ margin-bottom: ${props => (props.marginBottom ? '0.5rem' : 'none')};
+
&:hover {
background-color: ${IgnitusBlue};
+ color: ${White};
p {
color: ${White};
}
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/Common/types.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/Common/types.ts
index e6f5b584..5e18a869 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/Common/types.ts
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/Common/types.ts
@@ -3,6 +3,7 @@ export interface LayerProps {
border?: boolean;
marginTop?: boolean;
marginBottom?: boolean;
+ semiBold?: boolean;
prepend?: React.ReactNode;
append?: React.ReactNode;
[rest: string]: any;
@@ -10,7 +11,8 @@ export interface LayerProps {
export type StyledLayerProps = {
border: boolean;
- marginTop: boolean;
- marginBottom: boolean;
+ marginTop?: boolean;
+ marginBottom?: boolean;
containIcon?: boolean;
+ semiBold?: boolean;
};
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/style.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/style.ts
index 383c5900..8469e59f 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/style.ts
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/style.ts
@@ -14,6 +14,7 @@ export const SettingsContainer = styled(flexibleColDiv)`
border-radius: 16px;
box-shadow: 0 2px 4px 0 ${boxShadowColor};
width: 14rem;
+ overflow: hidden;
`;
export const Layer = styled(CommonLayer)`
@@ -21,6 +22,7 @@ export const Layer = styled(CommonLayer)`
align-items: center;
justify-content: flex-start;
flex-direction: row;
+ height: 100%;
`;
export const SideNavIcon = styled(Icon)`
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts
index f774ba77..8e2247e3 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts
@@ -10,6 +10,7 @@ export const MessageContainer = styled(flexibleColDiv)`
box-shadow: 0 2px 4px 0 ${boxShadowColor};
width: 14rem;
height: 16rem;
+ overflow: hidden;
`;
export const Layer = styled(CommonLayer)`
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/Components/index.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/Components/index.tsx
index 38f7f06c..3c1b47b9 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/Components/index.tsx
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/Components/index.tsx
@@ -5,12 +5,12 @@ import * as S from '../style';
export const UserSettingsSideNavigation = () => {
return (
-
+
-
+
);
};
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/style.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/style.ts
index 95c10df2..cb4d5f38 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/style.ts
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/style.ts
@@ -8,7 +8,7 @@ export const SettingsContainer = styled(flexibleColDiv)`
border-radius: 16px;
box-shadow: 0 2px 4px 0 ${boxShadowColor};
width: 14rem;
- height: 22rem;
+ height: 20rem;
`;
export const Layer = styled(CommonLayer)`
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideProfileCard/Components/__snapshots__/index.test.tsx.snap b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideProfileCard/Components/__snapshots__/index.test.tsx.snap
index 7f25f407..276d9959 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideProfileCard/Components/__snapshots__/index.test.tsx.snap
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideProfileCard/Components/__snapshots__/index.test.tsx.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[` should render 1`] = `
+exports[`should rendered 1`] = `
.emotion-11 {
background-color: #ffffff;
border-radius: 1rem;
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideProfileCard/Components/index.test.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideProfileCard/Components/index.test.tsx
index a71dead0..955e8c0c 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideProfileCard/Components/index.test.tsx
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideProfileCard/Components/index.test.tsx
@@ -12,21 +12,20 @@ const props: Props = {
trackingInformation: '10 students are tracking your progree',
};
-let wrapper;
-
expect.addSnapshotSerializer(emotionSerializer);
expect.extend(matchers);
+it('should rendered', () => {
+ const tree = render();
+ expect(tree).toMatchSnapshot();
+});
+
describe('', () => {
+ let wrapper;
beforeEach(() => {
wrapper = mount();
});
- it('should render', () => {
- wrapper = render();
- expect(wrapper).toMatchSnapshot();
- });
-
it('should render name, designation, trackingInformation correctly', () => {
expect(wrapper.find(S.Name).text()).toEqual(props.name);
expect(wrapper.find(S.Designation).text()).toEqual(props.designation);
diff --git a/src/ignitus-Shared/ignitus-Utilities/Components/icon.tsx b/src/ignitus-Shared/ignitus-Utilities/Components/icon.tsx
index 0262a6e1..db64d2a7 100644
--- a/src/ignitus-Shared/ignitus-Utilities/Components/icon.tsx
+++ b/src/ignitus-Shared/ignitus-Utilities/Components/icon.tsx
@@ -51,6 +51,8 @@ import { SearchIcon } from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Ic
import { StudentIcon } from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/studentIcon/index';
import { ProfessorIcon } from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/professorIcon/index';
import { RedditIcon } from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/redditIcon/index';
+import { ShareIcon } from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/shareIcon/index';
+import { CheckIcon } from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/checkIcon/index';
type Props = {
name: AppIcon;
@@ -85,6 +87,9 @@ export const Icon = ({ name, ...rest }: Props) => {
case AppIcon.CrossIcon:
return ;
+ case AppIcon.CheckIcon:
+ return ;
+
case AppIcon.SearchIcon:
return ;
@@ -185,6 +190,9 @@ export const Icon = ({ name, ...rest }: Props) => {
case AppIcon.SlackIcon:
return ;
+ case AppIcon.ShareIcon:
+ return ;
+
case AppIcon.MediumIcon:
return ;
diff --git a/src/ignitus-Shared/index.ts b/src/ignitus-Shared/index.ts
index 5dea2c27..62a7df47 100644
--- a/src/ignitus-Shared/index.ts
+++ b/src/ignitus-Shared/index.ts
@@ -53,6 +53,10 @@ export {
export {
SecondaryDropDown,
} from './ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components';
+
+export {
+ Loader,
+} from './ignitus-DesignSystem/ignitus-Atoms/ignitus-Loader/Components';
/**
* ignitus-Layout
*/
@@ -117,6 +121,10 @@ export {
UserProfileCard,
} from './ignitus-DesignSystem/ignitus-Organisms/ignitus-ProfileCard/Components';
+export {
+ MessageCard,
+} from './ignitus-DesignSystem/ignitus-Organisms/ignitus-MessageCard/Components';
+
export {
DashboardNavigation,
} from './ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/Components';
@@ -129,6 +137,9 @@ export {
UserSettingsSideNavigation,
} from './ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/Components';
+export {
+ Notifications,
+} from './ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/Components';
/**
* ignitus-Templates
*/
diff --git a/src/ignitus-Shared/types/iconsTypes/iconEnums.ts b/src/ignitus-Shared/types/iconsTypes/iconEnums.ts
index 3d1b338b..cd916764 100644
--- a/src/ignitus-Shared/types/iconsTypes/iconEnums.ts
+++ b/src/ignitus-Shared/types/iconsTypes/iconEnums.ts
@@ -6,6 +6,7 @@ export enum AppIcon {
CopyIcon = 'CopyIcon',
ContributionIcon = 'ContributionIcon',
CameraIcon = 'CameraIcon',
+ CheckIcon = 'CheckIcon',
LinkedInIcon = 'LinkedInIcon',
PlusIcon = 'PlusIcon',
HeartIcon = 'HeartIcon',
@@ -17,6 +18,7 @@ export enum AppIcon {
SaveIcon = 'SaveIcon',
StarCircleIcon = 'StarCircle',
StudentIcon = 'StudentIcon',
+ ShareIcon = 'ShareIcon',
MessageIcon = 'MessageIcon',
NetworkIcon = 'NetworkIcon',
MentorsIcon = 'MentorsIcon',
diff --git a/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceLoader/Components/index.tsx b/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceLoader/Components/index.tsx
new file mode 100644
index 00000000..3c241ad3
--- /dev/null
+++ b/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceLoader/Components/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Interface } from '../../../../styles';
+import { Heading2 } from '../../../../../ignitus-Shared';
+import { Loader } from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-Loader/Components';
+
+export const interfaceLoader: React.FC = () => (
+
+ Loader
+
+
+
+
+
+);
diff --git a/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceNavDropdown/Components/index.tsx b/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceNavDropdown/Components/index.tsx
new file mode 100644
index 00000000..47dd6567
--- /dev/null
+++ b/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceNavDropdown/Components/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { DashboardNavigationDropdown } from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-navDropdown/Components';
+import { Options, Name } from '../constants';
+import { Heading2 } from '../../../../../ignitus-Shared';
+import { Interface } from '../../../../styles';
+
+export const interfaceDashboardNavigationDropdown = () => (
+
+ Dashboard DropDown
+
+
+
+);
diff --git a/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceNavDropdown/constants.ts b/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceNavDropdown/constants.ts
new file mode 100644
index 00000000..e67049c4
--- /dev/null
+++ b/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceNavDropdown/constants.ts
@@ -0,0 +1,17 @@
+export const Options = [
+ {
+ title: 'Dashboard',
+ },
+ {
+ title: 'Profile',
+ },
+ {
+ title: 'Settings',
+ },
+ { title: 'Privacy Policy' },
+ {
+ title: 'Log out',
+ },
+];
+
+export const Name = 'Sophia';
diff --git a/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceMessageCard/Components/index.tsx b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceMessageCard/Components/index.tsx
new file mode 100644
index 00000000..d016bece
--- /dev/null
+++ b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceMessageCard/Components/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { MessageCard, Heading2 } from '../../../../../ignitus-Shared';
+import { Interface } from '../../../../styles';
+import { flexibleColDiv } from '../../../../../ignitus-Shared/ignitus-DesignSystem/shared';
+import { MessageData } from '../constants';
+
+export const MessageList = flexibleColDiv;
+
+export const interfaceMessageCard: React.FC = () => (
+
+ Message Card
+
+
+
+ {MessageData.map(({ name, ...rest }) => (
+
+
+
+ ))}
+
+
+
+);
diff --git a/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceMessageCard/constants.ts b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceMessageCard/constants.ts
new file mode 100644
index 00000000..7826058c
--- /dev/null
+++ b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceMessageCard/constants.ts
@@ -0,0 +1,22 @@
+import { MessageCardData } from './types';
+
+export const MessageData: MessageCardData[] = [
+ {
+ name: 'Donald Kunkel',
+ position: 'Professor',
+ numberMessages: '8 Messages',
+ dateSent: 'Thu, 8:23AM',
+ avatar:
+ 'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png',
+ online: true,
+ },
+ {
+ name: 'Victoria Hopper',
+ position: 'Professor',
+ numberMessages: '2 Messages',
+ dateSent: 'Wed, 12:02AM',
+ avatar:
+ 'https://storage.googleapis.com/ignitus_assets/ig-avatars/melanie.png',
+ online: false,
+ },
+];
diff --git a/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceMessageCard/types.ts b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceMessageCard/types.ts
new file mode 100644
index 00000000..55d564ad
--- /dev/null
+++ b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceMessageCard/types.ts
@@ -0,0 +1,8 @@
+export type MessageCardData = {
+ name: string;
+ position: string;
+ numberMessages: string;
+ dateSent: string;
+ avatar: string;
+ online: boolean;
+};
diff --git a/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components/index.tsx b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components/index.tsx
new file mode 100644
index 00000000..4687d5a8
--- /dev/null
+++ b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components/index.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+
+import { Heading2, Heading4 } from '../../../../../ignitus-Shared';
+import * as C from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors';
+import { Interface } from '../../../../styles';
+import * as S from '../style';
+
+export const InterfaceNotifications: React.FC = () => (
+
+ Notifications
+
+ Today
+
+
+
+
+
+
+
+
+
+ Yesterday
+
+
+
+);
diff --git a/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/style.ts b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/style.ts
new file mode 100644
index 00000000..8959a022
--- /dev/null
+++ b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/style.ts
@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+import { Notifications } from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/Components';
+
+export const StyledNotifications = styled(Notifications)`
+ padding: 1rem;
+ height: 2rem;
+`;
diff --git a/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceOpportunitySideCard/Components/index.tsx b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceOpportunitySideCard/Components/index.tsx
new file mode 100644
index 00000000..f72cbcc7
--- /dev/null
+++ b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceOpportunitySideCard/Components/index.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { InfoCard } from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OpportunitySideCard/Components';
+
+export const interfaceOpportunitySideCard = () => (
+
+);
diff --git a/src/ignitus-UserInterfaceBook/InterfaceSideNavigation/constants.ts b/src/ignitus-UserInterfaceBook/InterfaceSideNavigation/constants.ts
index 4e0e8074..270a7196 100644
--- a/src/ignitus-UserInterfaceBook/InterfaceSideNavigation/constants.ts
+++ b/src/ignitus-UserInterfaceBook/InterfaceSideNavigation/constants.ts
@@ -90,8 +90,16 @@ export const allEdges: Edges[] = [
title: 'Secondary',
route: '/interface/secondaryDropdown',
},
+ {
+ title: 'Dashboard Navigation',
+ route: '/interface/dashboardNavigationDropdown',
+ },
],
},
+ {
+ title: 'Loader',
+ route: '/interface/loader',
+ },
],
},
{
@@ -197,12 +205,20 @@ export const allEdges: Edges[] = [
title: 'Side Profile',
route: '/interface/sideProfile',
},
+ {
+ title: 'Message Card',
+ route: '/interface/messageCard',
+ },
],
},
{
title: 'Random Avatar',
route: '/interface/avatar',
},
+ {
+ title: 'Notifications',
+ route: '/interface/notifications',
+ },
],
},
{