From a8bdc9609665f4aae97b9d6dbde90bb035dc1104 Mon Sep 17 00:00:00 2001 From: Dishebh Bhayana Date: Sat, 27 Jun 2020 13:53:44 +0530 Subject: [PATCH 1/6] added notifications route --- .../ignitus-UserInterfaceBookRoutes/index.tsx | 2 + .../Components/index.tsx | 79 ++++++++ .../ignitus-Notifications/styles.ts | 175 ++++++++++++++++++ .../ignitus-Notifications/types.ts | 11 ++ src/ignitus-Shared/index.ts | 3 + .../Components/index.tsx | 12 ++ .../Organisms/interfaceNotifications/style.ts | 8 + 7 files changed, 290 insertions(+) create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/Components/index.tsx create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/styles.ts create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/types.ts create mode 100644 src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components/index.tsx create mode 100644 src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/style.ts diff --git a/src/ignitus-Routes/ignitus-UserInterfaceBookRoutes/index.tsx b/src/ignitus-Routes/ignitus-UserInterfaceBookRoutes/index.tsx index 4fc45ea6..5ce967fd 100644 --- a/src/ignitus-Routes/ignitus-UserInterfaceBookRoutes/index.tsx +++ b/src/ignitus-Routes/ignitus-UserInterfaceBookRoutes/index.tsx @@ -28,6 +28,7 @@ import { interfaceOverlay } from '../../ignitus-UserInterfaceBook/Components/Mol import { interfaceTags } from '../../ignitus-UserInterfaceBook/Components/Atoms/interfaceTags/Components'; import { interfaceFilters } from '../../ignitus-UserInterfaceBook/Components/Templates/interfaceFilters/Components/index'; import { interfaceUserProfile } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceUserProfile/Components'; +import { interfaceNotifications } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components'; import { InterfaceAvatar } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceAvatar/Components'; import { interfaceSideProfile } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceSideProfile/Components/index'; import { InterfaceProgress } from '../../ignitus-UserInterfaceBook/Components/Molecules/interfaceProgress/index'; @@ -139,6 +140,7 @@ export const UserInterfaceBookRoutes: React.FunctionComponent = () => ( component={interfaceToggleButtons} /> + 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..1f82dcea --- /dev/null +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/Components/index.tsx @@ -0,0 +1,79 @@ +/* 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 { Props } from '../types'; + +export const UserProfileCard = withErrorBoundary(() => ( + + + Track Sophi progress + + + + + +
+ +
+ + Sophia Carter + Literature Student + + + + + + + + + + + + + + + + + + + + + + + + + + + +)); + +export const DropDownButton = () => ( + + + More ... + + Ask For Recommendation + Share Profile + Block + + + +); + +export const IconContent = ({ content, name }: Props) => ( + + + + {content} + + +); 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..e72142c7 --- /dev/null +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/styles.ts @@ -0,0 +1,175 @@ +import styled from '@emotion/styled'; +import * as C from '../../ignitus-Atoms/colors'; + +import { + flexibleColDiv, + flexibleRowDiv, + Link as L, + Paragraph as P, +} from '../../shared'; +import { Heading1, Heading4 } from '../../ignitus-Atoms/typography'; +import { XXXL, SemiBold, Normal } from '../../ignitus-Atoms/fonts'; + +import { Icon as I } from '../../../ignitus-Utilities/Components/icon'; +import { ParagraphProps } from './types'; + +export const Container = styled.div` + display: flex; + width: 60rem; + flex-direction: column; + padding: 1rem 2rem; + border-radius: 1rem; + box-shadow: 0 2px 4px 0 ${C.boxShadowColor}; + background-color: ${C.White}; + color: ${C.IgnitusBlue}; +`; + +export const TopSection = styled.div` + text-align: end; +`; + +export const BottomSection = styled.div` + display: flex; + flex-direction: row; + padding: 1rem; +`; + +export const LeftRow = styled.div` + display: flex; + flex-direction: row; + flex: 2; + justify-content: flex-start; +`; + +export const Avatar = styled.img` + width: 10rem; + border-radius: 1rem; +`; + +export const MiddleRow = styled.div` + display: flex; + flex-direction: column; +`; + +export const ImageContainer = styled(flexibleRowDiv)` + width: 200px; + height: 190px; + img { + width: 100%; + height: 100%; + border-radius: 15px; + } +`; + +export const Paragraph = styled(P)` + color: ${props => (props.primary ? C.IgnitusBlue : C.GreySecondaryText)}; + font-weight: ${Normal}; + display: inline; + margin: ${props => props.margin}; +`; + +export const Name = styled(Heading1)` + font-size: ${XXXL}; + font-weight: ${SemiBold}; +`; + +export const Designation = styled(Heading4)` + margin-bottom: 1rem; + margin-top: 1rem; +`; + +export const ProfileInformationContainer = styled.div` + margin-left: 4rem; +`; + +export const RightRow = styled(flexibleColDiv)` + flex: 1; + align-items: flex-start; +`; + +export const Contact = styled.div` + display: flex; + flex-direction: column; + width: 100%; +`; + +export const Icons = styled(flexibleRowDiv)` + margin-bottom: 2rem; +`; + +export const Link = styled(L)` + margin-right: 2rem; + display: inline-block; +`; + +export const Icon = styled(I)` + width: 1.5rem; + fill: ${C.IgnitusBlue}; + path { + } +`; + +export const Wrapper = styled.div` + display: flex; + margin: 0.6rem 0; + flex-direction: row; +`; + +export const DropDownBtnContainer = styled.div` + position: relative; + margin-top: 1rem; +`; + +export const DropDownBtn = styled.div` + font-weight: bold; + color: ${C.GreyOne}; + cursor: pointer; + display: inline-block; + padding-bottom: 10px; + transition: all 0.4s; + width: fit-content; + + &:hover { + ul { + display: block; + } + } +`; + +export const DropDownMenu = styled.ul` + z-index: 3; + position: absolute; + top: 30px; + left: 0; + border-radius: 10px 0 10px 10px; + box-shadow: 0 2px 4px 0 ${C.boxShadowColor}; + background-color: ${C.White}; + color: ${C.IgnitusBlue}; + display: none; + font-weight: 400; + + &:hover { + display: block; + } +`; + +export const DropDownMenuListItem = styled.li` + padding: 0.5em 1em; + font-size: 14px; + width: 200px; + + &:first-of-type { + border-top-left-radius: 10px; + } + + &:last-child { + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + } + + &:hover { + color: ${C.White}; + background-color: ${C.IgnitusBlue}; + cursor: pointer; + } +`; 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..fc5b6f6a --- /dev/null +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/types.ts @@ -0,0 +1,11 @@ +import { AppIcon } from '../../../types/iconsTypes/iconEnums'; + +export type Props = { + content: string; + name: AppIcon; +}; + +export type ParagraphProps = { + margin: string; + primary?: boolean; +}; diff --git a/src/ignitus-Shared/index.ts b/src/ignitus-Shared/index.ts index 5dea2c27..2a44d01e 100644 --- a/src/ignitus-Shared/index.ts +++ b/src/ignitus-Shared/index.ts @@ -129,6 +129,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-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components/index.tsx b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components/index.tsx new file mode 100644 index 00000000..9c405c73 --- /dev/null +++ b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components/index.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +import { Heading2 } from '../../../../../ignitus-Shared'; + +import { Interface } from '../../../../styles'; + +export const interfaceNavigation: React.FC = () => ( + + Navigation +
+ +); 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..6fabded9 --- /dev/null +++ b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/style.ts @@ -0,0 +1,8 @@ +import styled from '@emotion/styled'; + +export const NavigationContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: space-evenly; + flex: 1; +`; From 0a1ca87b6ede10af61daa41cd274fb376b559893 Mon Sep 17 00:00:00 2001 From: Dishebh Bhayana Date: Sat, 27 Jun 2020 13:56:32 +0530 Subject: [PATCH 2/6] added notifications route --- .../ignitus-UserInterfaceBookRoutes/index.tsx | 4 ++-- .../ignitus-Notifications/Components/index.tsx | 2 +- src/ignitus-Shared/index.ts | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/ignitus-Routes/ignitus-UserInterfaceBookRoutes/index.tsx b/src/ignitus-Routes/ignitus-UserInterfaceBookRoutes/index.tsx index 5ce967fd..a0007955 100644 --- a/src/ignitus-Routes/ignitus-UserInterfaceBookRoutes/index.tsx +++ b/src/ignitus-Routes/ignitus-UserInterfaceBookRoutes/index.tsx @@ -28,7 +28,7 @@ import { interfaceOverlay } from '../../ignitus-UserInterfaceBook/Components/Mol import { interfaceTags } from '../../ignitus-UserInterfaceBook/Components/Atoms/interfaceTags/Components'; import { interfaceFilters } from '../../ignitus-UserInterfaceBook/Components/Templates/interfaceFilters/Components/index'; import { interfaceUserProfile } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceUserProfile/Components'; -import { interfaceNotifications } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components'; +// import { interfaceNotifications } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components'; import { InterfaceAvatar } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceAvatar/Components'; import { interfaceSideProfile } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceSideProfile/Components/index'; import { InterfaceProgress } from '../../ignitus-UserInterfaceBook/Components/Molecules/interfaceProgress/index'; @@ -140,7 +140,7 @@ export const UserInterfaceBookRoutes: React.FunctionComponent = () => ( component={interfaceToggleButtons} /> - + {/* */} 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 index 1f82dcea..8cb63405 100644 --- 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 @@ -6,7 +6,7 @@ import { withErrorBoundary } from '../../../../ignitus-ErrorHandlingComponents/e import { AppIcon } from '../../../../types/iconsTypes/iconEnums'; import { Props } from '../types'; -export const UserProfileCard = withErrorBoundary(() => ( +export const Notifications = withErrorBoundary(() => ( Track Sophi progress diff --git a/src/ignitus-Shared/index.ts b/src/ignitus-Shared/index.ts index 2a44d01e..38cfc51c 100644 --- a/src/ignitus-Shared/index.ts +++ b/src/ignitus-Shared/index.ts @@ -129,9 +129,9 @@ export { UserSettingsSideNavigation, } from './ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/Components'; -export { - Notifications, -} from './ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/Components'; +// export { +// Notifications, +// } from './ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/Components'; /** * ignitus-Templates */ From 6966f21e8fc1345fe8ded45266997549a027d374 Mon Sep 17 00:00:00 2001 From: Dishebh Date: Mon, 6 Jul 2020 21:28:28 +0530 Subject: [PATCH 3/6] added notifications component --- .../ignitus-UserInterfaceBookRoutes/index.tsx | 5 + .../Components/index.tsx | 98 +++------ .../ignitus-Notifications/styles.ts | 189 ++++-------------- .../ignitus-Notifications/types.ts | 19 +- .../Components/index.tsx | 69 ++++++- .../Organisms/interfaceNotifications/style.ts | 27 +++ .../InterfaceSideNavigation/constants.ts | 4 + 7 files changed, 170 insertions(+), 241 deletions(-) diff --git a/src/ignitus-Routes/ignitus-UserInterfaceBookRoutes/index.tsx b/src/ignitus-Routes/ignitus-UserInterfaceBookRoutes/index.tsx index a0007955..c8df8355 100644 --- a/src/ignitus-Routes/ignitus-UserInterfaceBookRoutes/index.tsx +++ b/src/ignitus-Routes/ignitus-UserInterfaceBookRoutes/index.tsx @@ -31,6 +31,7 @@ import { interfaceUserProfile } from '../../ignitus-UserInterfaceBook/Components // import { interfaceNotifications } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components'; import { InterfaceAvatar } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceAvatar/Components'; import { interfaceSideProfile } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceSideProfile/Components/index'; +import { InterfaceNotifications } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components/index'; import { InterfaceProgress } from '../../ignitus-UserInterfaceBook/Components/Molecules/interfaceProgress/index'; import { interfaceSecondaryDropDown } from '../../ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/Components'; import { interfaceScrollBar } from '../../ignitus-UserInterfaceBook/Components/Molecules/interfaceScrollBar/Components'; @@ -143,6 +144,10 @@ export const UserInterfaceBookRoutes: React.FunctionComponent = () => ( {/* */} + 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 index 8cb63405..888aa311 100644 --- 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 @@ -4,76 +4,32 @@ import React from 'react'; import * as S from '../styles'; import { withErrorBoundary } from '../../../../ignitus-ErrorHandlingComponents/errorBoundary'; import { AppIcon } from '../../../../types/iconsTypes/iconEnums'; -import { Props } from '../types'; +import * as C from '../../../ignitus-Atoms/colors'; +import { InputTypes } from '../types'; -export const Notifications = withErrorBoundary(() => ( - - - Track Sophi progress - - - - - -
- -
- - Sophia Carter - Literature Student - - - - - - - - - - - - - - - - - - - - - - - - - - - -)); - -export const DropDownButton = () => ( - - - More ... - - Ask For Recommendation - Share Profile - Block - - - -); - -export const IconContent = ({ content, name }: Props) => ( - - - - {content} - - +export const Notifications = withErrorBoundary( + ({ + colorText, + colorTitle, + background, + image, + title, + textLeft, + textRight, + ...rest + }: InputTypes) => ( + + + {image && } + {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 index e72142c7..0dce84f8 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/styles.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/styles.ts @@ -1,175 +1,54 @@ import styled from '@emotion/styled'; -import * as C from '../../ignitus-Atoms/colors'; - -import { - flexibleColDiv, - flexibleRowDiv, - Link as L, - Paragraph as P, -} from '../../shared'; -import { Heading1, Heading4 } from '../../ignitus-Atoms/typography'; -import { XXXL, SemiBold, Normal } from '../../ignitus-Atoms/fonts'; - -import { Icon as I } from '../../../ignitus-Utilities/Components/icon'; -import { ParagraphProps } from './types'; - -export const Container = styled.div` - display: flex; - width: 60rem; - flex-direction: column; +import { Icon } from '../../../ignitus-Utilities/Components/icon'; +import { StyledTagProps } from './types'; + +export const StyledTag = styled.span` + background: ${props => props.background}; + color: ${props => props.color}; + text-align: center; + border-radius: 2rem; + line-height: 1rem; padding: 1rem 2rem; - border-radius: 1rem; - box-shadow: 0 2px 4px 0 ${C.boxShadowColor}; - background-color: ${C.White}; - color: ${C.IgnitusBlue}; -`; - -export const TopSection = styled.div` - text-align: end; -`; - -export const BottomSection = styled.div` + display: inline-flex; + align-items: center; + margin: 0.5rem; + cursor: pointer; + width: cover; display: flex; flex-direction: row; - padding: 1rem; + justify-content: space-between; + align-items: center; `; -export const LeftRow = styled.div` +export const IconContainer = styled.div` display: flex; flex-direction: row; - flex: 2; - justify-content: flex-start; -`; - -export const Avatar = styled.img` - width: 10rem; - border-radius: 1rem; -`; - -export const MiddleRow = styled.div` - display: flex; - flex-direction: column; -`; - -export const ImageContainer = styled(flexibleRowDiv)` - width: 200px; - height: 190px; - img { - width: 100%; - height: 100%; - border-radius: 15px; - } -`; - -export const Paragraph = styled(P)` - color: ${props => (props.primary ? C.IgnitusBlue : C.GreySecondaryText)}; - font-weight: ${Normal}; - display: inline; - margin: ${props => props.margin}; -`; - -export const Name = styled(Heading1)` - font-size: ${XXXL}; - font-weight: ${SemiBold}; -`; - -export const Designation = styled(Heading4)` - margin-bottom: 1rem; - margin-top: 1rem; + justify-content: space-between; `; -export const ProfileInformationContainer = styled.div` - margin-left: 4rem; +export const StyledIcon = styled(Icon)` + width: 1.4rem; + fill: ${props => props.color}; + transition: 0.3s; `; -export const RightRow = styled(flexibleColDiv)` - flex: 1; - align-items: flex-start; +export const Image = styled.img` + height: 3rem; + width: 3rem; + border-radius: 50%; + margin-right: 1rem; `; -export const Contact = styled.div` - display: flex; - flex-direction: column; - width: 100%; -`; - -export const Icons = styled(flexibleRowDiv)` - margin-bottom: 2rem; -`; - -export const Link = styled(L)` - margin-right: 2rem; - display: inline-block; -`; - -export const Icon = styled(I)` - width: 1.5rem; - fill: ${C.IgnitusBlue}; - path { - } +export const Text = styled.span` + font-weight: bold; + color: ${props => props.color}; `; -export const Wrapper = styled.div` +export const LeftContainer = styled.div` display: flex; - margin: 0.6rem 0; flex-direction: row; + justify-content: flex-start; + align-items: center; `; -export const DropDownBtnContainer = styled.div` - position: relative; - margin-top: 1rem; -`; - -export const DropDownBtn = styled.div` - font-weight: bold; - color: ${C.GreyOne}; - cursor: pointer; - display: inline-block; - padding-bottom: 10px; - transition: all 0.4s; - width: fit-content; - - &:hover { - ul { - display: block; - } - } -`; - -export const DropDownMenu = styled.ul` - z-index: 3; - position: absolute; - top: 30px; - left: 0; - border-radius: 10px 0 10px 10px; - box-shadow: 0 2px 4px 0 ${C.boxShadowColor}; - background-color: ${C.White}; - color: ${C.IgnitusBlue}; - display: none; - font-weight: 400; - - &:hover { - display: block; - } -`; - -export const DropDownMenuListItem = styled.li` - padding: 0.5em 1em; - font-size: 14px; - width: 200px; - - &:first-of-type { - border-top-left-radius: 10px; - } - - &:last-child { - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - } - - &:hover { - color: ${C.White}; - background-color: ${C.IgnitusBlue}; - cursor: pointer; - } -`; +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 index fc5b6f6a..6efad8e1 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/types.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/types.ts @@ -1,11 +1,14 @@ -import { AppIcon } from '../../../types/iconsTypes/iconEnums'; - -export type Props = { - content: string; - name: AppIcon; +export type InputTypes = { + colorText: string; + colorTitle: string; + background: string; + image?: string; + title?: string; + textLeft?: string; + textRight?: string; }; -export type ParagraphProps = { - margin: string; - primary?: boolean; +export type StyledTagProps = { + background: string; + color: string; }; diff --git a/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components/index.tsx b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components/index.tsx index 9c405c73..b73b1c87 100644 --- a/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components/index.tsx +++ b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components/index.tsx @@ -1,12 +1,67 @@ import React from 'react'; -import { Heading2 } from '../../../../../ignitus-Shared'; +import { Heading2, Heading4 } from '../../../../../ignitus-Shared'; +import * as C from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; +import * as S from '../style'; -import { Interface } from '../../../../styles'; - -export const interfaceNavigation: React.FC = () => ( - - Navigation +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 index 6fabded9..a02787c3 100644 --- a/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/style.ts +++ b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/style.ts @@ -1,4 +1,7 @@ import styled from '@emotion/styled'; +import { Notifications } from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/Components'; +import { Icon } from '../../../../ignitus-Shared/ignitus-Utilities/Components/icon'; +import { Interface } from '../../../styles'; export const NavigationContainer = styled.div` display: flex; @@ -6,3 +9,27 @@ export const NavigationContainer = styled.div` justify-content: space-evenly; flex: 1; `; + +export const StyledNotifications = styled(Notifications)` + height: 2rem; + width: 70%; + padding: 1rem; +`; + +export const Text = styled.span` + font-weight: bold; + color: ${props => props.color}; +`; + +export const StyledIcon = styled(Icon)` + width: 1.4rem; + fill: ${props => props.color}; + transition: 0.3s; + flex: 1; + margin: 0.03rem 0.03rem 0.03rem 10rem; +`; + +export const StyledInterface = styled(Interface)` + display: flex; + flex-direction: column; +`; diff --git a/src/ignitus-UserInterfaceBook/InterfaceSideNavigation/constants.ts b/src/ignitus-UserInterfaceBook/InterfaceSideNavigation/constants.ts index 4e0e8074..b33750d5 100644 --- a/src/ignitus-UserInterfaceBook/InterfaceSideNavigation/constants.ts +++ b/src/ignitus-UserInterfaceBook/InterfaceSideNavigation/constants.ts @@ -203,6 +203,10 @@ export const allEdges: Edges[] = [ title: 'Random Avatar', route: '/interface/avatar', }, + { + title: 'Notifications', + route: '/interface/notifications', + }, ], }, { From 51cec07aea3a42b97f0ba4623cb37004cdcf63fc Mon Sep 17 00:00:00 2001 From: Dishebh Date: Mon, 6 Jul 2020 21:37:36 +0530 Subject: [PATCH 4/6] removed notification comment --- src/ignitus-Shared/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ignitus-Shared/index.ts b/src/ignitus-Shared/index.ts index 38cfc51c..2a44d01e 100644 --- a/src/ignitus-Shared/index.ts +++ b/src/ignitus-Shared/index.ts @@ -129,9 +129,9 @@ export { UserSettingsSideNavigation, } from './ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/Components'; -// export { -// Notifications, -// } from './ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/Components'; +export { + Notifications, +} from './ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/Components'; /** * ignitus-Templates */ From 48b3763a8df6c92f3c7e7fa12b197a37a9e1e9d5 Mon Sep 17 00:00:00 2001 From: Dishebh Date: Thu, 9 Jul 2020 12:53:43 +0530 Subject: [PATCH 5/6] updated notification cards UI --- .../ignitus-Organisms/ignitus-Notifications/styles.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) 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 index 0dce84f8..37a9f030 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/styles.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/styles.ts @@ -1,12 +1,14 @@ import styled from '@emotion/styled'; import { Icon } from '../../../ignitus-Utilities/Components/icon'; import { StyledTagProps } from './types'; +import { Paragraph } from '../../..'; +import { Bold } from '../../ignitus-Atoms/fonts'; export const StyledTag = styled.span` background: ${props => props.background}; color: ${props => props.color}; text-align: center; - border-radius: 2rem; + border-radius: 0.5rem; line-height: 1rem; padding: 1rem 2rem; display: inline-flex; @@ -18,6 +20,7 @@ export const StyledTag = styled.span` 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` @@ -39,8 +42,8 @@ export const Image = styled.img` margin-right: 1rem; `; -export const Text = styled.span` - font-weight: bold; +export const Text = styled(Paragraph)` + font-weight: ${Bold}; color: ${props => props.color}; `; From 99d5a72f60fb705c69c1500e41d8ce2463ed5b38 Mon Sep 17 00:00:00 2001 From: Rawat Date: Sat, 11 Jul 2020 21:01:57 +0200 Subject: [PATCH 6/6] =?UTF-8?q?UI=20Updates=20=F0=9F=8E=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/index.tsx | 18 ++++---- .../ignitus-Notifications/styles.ts | 20 +++------ .../ignitus-Notifications/types.ts | 10 ++--- .../Components/index.tsx | 41 ++++++++++--------- .../Organisms/interfaceNotifications/style.ts | 30 +------------- 5 files changed, 41 insertions(+), 78 deletions(-) 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 index 888aa311..6afc7151 100644 --- 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 @@ -9,27 +9,27 @@ import { InputTypes } from '../types'; export const Notifications = withErrorBoundary( ({ - colorText, - colorTitle, - background, - image, + textColor, + titleColor, + bgColor, + picture, title, textLeft, textRight, ...rest }: InputTypes) => ( - + - {image && } + {picture && } {textLeft} -   {title}   +   {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 index 37a9f030..ebf44d73 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/styles.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/styles.ts @@ -1,21 +1,15 @@ import styled from '@emotion/styled'; -import { Icon } from '../../../ignitus-Utilities/Components/icon'; +import { Icon as I } from '../../../ignitus-Utilities/Components/icon'; import { StyledTagProps } from './types'; import { Paragraph } from '../../..'; import { Bold } from '../../ignitus-Atoms/fonts'; -export const StyledTag = styled.span` - background: ${props => props.background}; +export const Container = styled.span` + background: ${props => props.bgColor}; color: ${props => props.color}; - text-align: center; border-radius: 0.5rem; - line-height: 1rem; - padding: 1rem 2rem; - display: inline-flex; - align-items: center; margin: 0.5rem; cursor: pointer; - width: cover; display: flex; flex-direction: row; justify-content: space-between; @@ -25,19 +19,16 @@ export const StyledTag = styled.span` export const IconContainer = styled.div` display: flex; - flex-direction: row; - justify-content: space-between; `; -export const StyledIcon = styled(Icon)` - width: 1.4rem; +export const Icon = styled(I)` + width: 1.5rem; fill: ${props => props.color}; transition: 0.3s; `; export const Image = styled.img` height: 3rem; - width: 3rem; border-radius: 50%; margin-right: 1rem; `; @@ -50,7 +41,6 @@ export const Text = styled(Paragraph)` export const LeftContainer = styled.div` display: flex; flex-direction: row; - justify-content: flex-start; align-items: center; `; 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 index 6efad8e1..ad43bd69 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/types.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/types.ts @@ -1,14 +1,14 @@ export type InputTypes = { - colorText: string; - colorTitle: string; - background: string; - image?: string; + textColor: string; + titleColor: string; + bgColor: string; + picture?: string; title?: string; textLeft?: string; textRight?: string; }; export type StyledTagProps = { - background: string; + bgColor: string; color: string; }; diff --git a/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components/index.tsx b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components/index.tsx index b73b1c87..4687d5a8 100644 --- a/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components/index.tsx +++ b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components/index.tsx @@ -2,41 +2,42 @@ 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 index a02787c3..8959a022 100644 --- a/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/style.ts +++ b/src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/style.ts @@ -1,35 +1,7 @@ import styled from '@emotion/styled'; import { Notifications } from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/Components'; -import { Icon } from '../../../../ignitus-Shared/ignitus-Utilities/Components/icon'; -import { Interface } from '../../../styles'; - -export const NavigationContainer = styled.div` - display: flex; - flex-direction: row; - justify-content: space-evenly; - flex: 1; -`; export const StyledNotifications = styled(Notifications)` - height: 2rem; - width: 70%; padding: 1rem; -`; - -export const Text = styled.span` - font-weight: bold; - color: ${props => props.color}; -`; - -export const StyledIcon = styled(Icon)` - width: 1.4rem; - fill: ${props => props.color}; - transition: 0.3s; - flex: 1; - margin: 0.03rem 0.03rem 0.03rem 10rem; -`; - -export const StyledInterface = styled(Interface)` - display: flex; - flex-direction: column; + height: 2rem; `;