From 9a7a771325b508e5701ad42ffa5203ae01703557 Mon Sep 17 00:00:00 2001 From: tspuller <tspuller@umich.edu> Date: Sat, 5 Dec 2020 16:43:18 -0500 Subject: [PATCH] code cleanup --- src/components/Algolia/Algolia.js | 4 - .../Algolia/AlgoliaComponent.style.js | 901 ------------------ src/components/Algolia/Footer.js | 14 - src/components/Algolia/RangeSlider.js | 69 -- src/components/Algolia/Sidebar.js | 70 -- src/components/Algolia/VoiceRecognition.js | 61 -- src/components/Algolia/algolia.svg | 14 - src/components/AvatarCard/AvatarCard.js | 24 - src/components/AvatarCard/AvatarCard.style.js | 27 - src/components/Cart/SingleCart.js | 60 -- src/components/Cart/SingleCartModal.js | 37 - src/components/Cart/SingleCartModal.style.js | 88 -- src/components/Chat/InputName.js | 58 -- src/components/Chat/InputName.style.js | 33 - src/components/Chat/ViewProfile.js | 56 -- src/components/Chat/ViewProfile.style.js | 80 -- src/components/Contacts/ContactCard.style.js | 236 ----- src/components/Contacts/ContactList.js | 82 -- src/components/Contacts/ContactList.style.js | 201 ---- src/components/Contacts/DeleteButton.js | 30 - src/components/Contacts/EditView.js | 94 -- src/components/Contacts/SingleView.js | 29 - src/components/Contacts/upload.css | 18 - src/components/Feedback/Alert.js | 3 - src/components/Feedback/Alert.style.js | 69 -- src/components/Feedback/Message.js | 3 - src/components/Feedback/Message.style.js | 33 - src/components/Feedback/Modal.js | 3 - src/components/Feedback/Notification.js | 3 - src/components/Feedback/Popconfirm.js | 3 - src/components/Invoice/Address.js | 12 - src/components/Invoice/InvoiceTable.js | 146 --- src/components/Invoice/OrderStatus.js | 20 - src/components/Invoice/TableStyle.js | 61 -- src/components/Mail/ComposeAutoComplete.js | 74 -- .../Mail/ComposeAutoComplete.style.js | 157 --- src/components/Mail/ComposeMail.js | 90 -- src/components/Mail/ComposeMail.style.js | 83 -- src/components/Mail/MailBucket.style.js | 58 -- src/components/Mail/MailBuckets.js | 62 -- src/components/Mail/MailComposeBtn.js | 21 - src/components/Mail/MailComposeBtn.style.js | 38 - src/components/Mail/MailList.js | 70 -- src/components/Mail/MailList.style.js | 130 --- src/components/Mail/MailPagination.js | 25 - src/components/Mail/MailPagination.style.js | 50 - src/components/Mail/MailTags.js | 65 -- src/components/Mail/MailTags.style.js | 62 -- src/components/Mail/SingleMail.js | 92 -- src/components/Mail/SingleMail.style.js | 243 ----- src/components/Mail/SingleMailActions.js | 161 ---- .../Mail/SingleMailActions.style.js | 170 ---- src/components/Mail/reactTags.css | 57 -- src/components/PostCard/InstagramCard.js | 50 - .../PostCard/InstagramCard.style.js | 69 -- src/components/PostCard/index.js | 8 - src/components/ScrumBoard/AntFields.js | 75 -- src/components/ScrumBoard/Attachment.js | 60 -- src/components/ScrumBoard/CheckList.js | 113 --- .../ScrumBoard/Comments/Comments.js | 133 --- .../ScrumBoard/Comments/Comments.style.js | 47 - src/components/ScrumBoard/FieldFormats.js | 2 - .../HeadingWithIcon/HeadingWithIcon.js | 33 - src/components/ScrumBoard/IconSvg/IconSvg.js | 19 - .../ScrumBoard/RenderBoardForm/08-icon.svg | 39 - .../RenderBoardForm/RenderBoardForm.js | 99 -- .../RenderBoardForm/RenderBoardForm.style.js | 19 - .../ScrumBoard/RenderColumnForm/05-icon.svg | 17 - .../RenderColumnForm/RenderColumnForm.js | 52 - .../RenderColumnForm.style.js | 9 - .../ScrumBoard/SearchInput/07-icon.svg | 10 - .../ScrumBoard/SearchInput/10-icon.svg | 11 - .../ScrumBoard/SearchInput/SearchInput.js | 41 - .../SearchInput/SearchInput.style.js | 60 -- src/components/ScrumBoard/Title.js | 19 - src/components/ScrumBoard/ValidateFields.js | 30 - src/components/Tables/DeleteCell.js | 15 - src/components/Tables/EditableCell.js | 39 - src/components/Tables/FilterDropdown.js | 20 - src/components/Tables/HelperCells.js | 20 - src/components/Tables/ImageCell.js | 50 - .../YoutubeSearch/PlayYoutubeVideo.js | 24 - .../YoutubeSearch/PlayYoutubeVideo.style.js | 8 - src/components/YoutubeSearch/Result.js | 127 --- .../YoutubeSearch/YoutubeSearch.style.js | 207 ---- src/containers/Authentication/Auth0/Auth0.js | 53 -- .../Authentication/Auth0/Auth0Callback.js | 13 - src/containers/BlankPage.js | 15 - src/containers/Pages/SignIn/SignIn.js | 10 - src/containers/ThemeSwitcher/ThemeSwitcher.js | 75 ++ .../ThemeSwitcher/ThemeSwitcher.styles.js | 255 +++++ src/containers/ThemeSwitcher/config.js | 174 ++++ src/containers/Topbar/Topbar.js | 5 - src/containers/Topbar/TopbarAddToCart.js | 129 --- .../Topbar/TopbarDropdown.styles.js | 293 ------ src/containers/Topbar/TopbarMail.js | 93 -- src/containers/Topbar/TopbarMessage.js | 96 -- src/containers/Topbar/TopbarNotification.js | 79 -- src/containers/Topbar/TopbarSearch.js | 36 - .../Topbar/TopbarSearchModal.styles.js | 85 -- src/containers/Topbar/TopbarUser.js | 54 -- src/redux/card/config.js | 14 - src/redux/quiz/actions.js | 37 - src/redux/quiz/fakeQuestion.js | 128 --- src/redux/quiz/fakeQuizes.js | 26 - src/redux/quiz/reducer.js | 66 -- src/redux/quiz/saga.js | 24 - src/redux/root-reducer.js | 36 - src/redux/root-saga.js | 30 - 109 files changed, 504 insertions(+), 7197 deletions(-) delete mode 100644 src/components/Algolia/Algolia.js delete mode 100644 src/components/Algolia/AlgoliaComponent.style.js delete mode 100644 src/components/Algolia/Footer.js delete mode 100644 src/components/Algolia/RangeSlider.js delete mode 100644 src/components/Algolia/Sidebar.js delete mode 100644 src/components/Algolia/VoiceRecognition.js delete mode 100644 src/components/Algolia/algolia.svg delete mode 100644 src/components/AvatarCard/AvatarCard.js delete mode 100644 src/components/AvatarCard/AvatarCard.style.js delete mode 100644 src/components/Cart/SingleCart.js delete mode 100644 src/components/Cart/SingleCartModal.js delete mode 100644 src/components/Cart/SingleCartModal.style.js delete mode 100644 src/components/Chat/InputName.js delete mode 100644 src/components/Chat/InputName.style.js delete mode 100644 src/components/Chat/ViewProfile.js delete mode 100644 src/components/Chat/ViewProfile.style.js delete mode 100644 src/components/Contacts/ContactCard.style.js delete mode 100644 src/components/Contacts/ContactList.js delete mode 100644 src/components/Contacts/ContactList.style.js delete mode 100644 src/components/Contacts/DeleteButton.js delete mode 100644 src/components/Contacts/EditView.js delete mode 100644 src/components/Contacts/SingleView.js delete mode 100644 src/components/Contacts/upload.css delete mode 100644 src/components/Feedback/Alert.js delete mode 100644 src/components/Feedback/Alert.style.js delete mode 100644 src/components/Feedback/Message.js delete mode 100644 src/components/Feedback/Message.style.js delete mode 100644 src/components/Feedback/Modal.js delete mode 100644 src/components/Feedback/Notification.js delete mode 100644 src/components/Feedback/Popconfirm.js delete mode 100644 src/components/Invoice/Address.js delete mode 100644 src/components/Invoice/InvoiceTable.js delete mode 100644 src/components/Invoice/OrderStatus.js delete mode 100644 src/components/Invoice/TableStyle.js delete mode 100644 src/components/Mail/ComposeAutoComplete.js delete mode 100644 src/components/Mail/ComposeAutoComplete.style.js delete mode 100644 src/components/Mail/ComposeMail.js delete mode 100644 src/components/Mail/ComposeMail.style.js delete mode 100644 src/components/Mail/MailBucket.style.js delete mode 100644 src/components/Mail/MailBuckets.js delete mode 100644 src/components/Mail/MailComposeBtn.js delete mode 100644 src/components/Mail/MailComposeBtn.style.js delete mode 100644 src/components/Mail/MailList.js delete mode 100644 src/components/Mail/MailList.style.js delete mode 100644 src/components/Mail/MailPagination.js delete mode 100644 src/components/Mail/MailPagination.style.js delete mode 100644 src/components/Mail/MailTags.js delete mode 100644 src/components/Mail/MailTags.style.js delete mode 100644 src/components/Mail/SingleMail.js delete mode 100644 src/components/Mail/SingleMail.style.js delete mode 100644 src/components/Mail/SingleMailActions.js delete mode 100644 src/components/Mail/SingleMailActions.style.js delete mode 100644 src/components/Mail/reactTags.css delete mode 100644 src/components/PostCard/InstagramCard.js delete mode 100644 src/components/PostCard/InstagramCard.style.js delete mode 100644 src/components/PostCard/index.js delete mode 100644 src/components/ScrumBoard/AntFields.js delete mode 100644 src/components/ScrumBoard/Attachment.js delete mode 100644 src/components/ScrumBoard/CheckList.js delete mode 100644 src/components/ScrumBoard/Comments/Comments.js delete mode 100644 src/components/ScrumBoard/Comments/Comments.style.js delete mode 100644 src/components/ScrumBoard/FieldFormats.js delete mode 100644 src/components/ScrumBoard/HeadingWithIcon/HeadingWithIcon.js delete mode 100644 src/components/ScrumBoard/IconSvg/IconSvg.js delete mode 100644 src/components/ScrumBoard/RenderBoardForm/08-icon.svg delete mode 100644 src/components/ScrumBoard/RenderBoardForm/RenderBoardForm.js delete mode 100644 src/components/ScrumBoard/RenderBoardForm/RenderBoardForm.style.js delete mode 100644 src/components/ScrumBoard/RenderColumnForm/05-icon.svg delete mode 100644 src/components/ScrumBoard/RenderColumnForm/RenderColumnForm.js delete mode 100644 src/components/ScrumBoard/RenderColumnForm/RenderColumnForm.style.js delete mode 100644 src/components/ScrumBoard/SearchInput/07-icon.svg delete mode 100644 src/components/ScrumBoard/SearchInput/10-icon.svg delete mode 100644 src/components/ScrumBoard/SearchInput/SearchInput.js delete mode 100644 src/components/ScrumBoard/SearchInput/SearchInput.style.js delete mode 100644 src/components/ScrumBoard/Title.js delete mode 100644 src/components/ScrumBoard/ValidateFields.js delete mode 100644 src/components/Tables/DeleteCell.js delete mode 100644 src/components/Tables/EditableCell.js delete mode 100644 src/components/Tables/FilterDropdown.js delete mode 100644 src/components/Tables/HelperCells.js delete mode 100644 src/components/Tables/ImageCell.js delete mode 100644 src/components/YoutubeSearch/PlayYoutubeVideo.js delete mode 100644 src/components/YoutubeSearch/PlayYoutubeVideo.style.js delete mode 100644 src/components/YoutubeSearch/Result.js delete mode 100644 src/components/YoutubeSearch/YoutubeSearch.style.js delete mode 100644 src/containers/Authentication/Auth0/Auth0.js delete mode 100644 src/containers/Authentication/Auth0/Auth0Callback.js delete mode 100644 src/containers/BlankPage.js create mode 100644 src/containers/ThemeSwitcher/ThemeSwitcher.js create mode 100644 src/containers/ThemeSwitcher/ThemeSwitcher.styles.js create mode 100644 src/containers/ThemeSwitcher/config.js delete mode 100644 src/containers/Topbar/TopbarAddToCart.js delete mode 100644 src/containers/Topbar/TopbarDropdown.styles.js delete mode 100644 src/containers/Topbar/TopbarMail.js delete mode 100644 src/containers/Topbar/TopbarMessage.js delete mode 100644 src/containers/Topbar/TopbarNotification.js delete mode 100644 src/containers/Topbar/TopbarSearch.js delete mode 100644 src/containers/Topbar/TopbarSearchModal.styles.js delete mode 100644 src/containers/Topbar/TopbarUser.js delete mode 100644 src/redux/quiz/actions.js delete mode 100644 src/redux/quiz/fakeQuestion.js delete mode 100644 src/redux/quiz/fakeQuizes.js delete mode 100644 src/redux/quiz/reducer.js delete mode 100644 src/redux/quiz/saga.js diff --git a/src/components/Algolia/Algolia.js b/src/components/Algolia/Algolia.js deleted file mode 100644 index beafe86..0000000 --- a/src/components/Algolia/Algolia.js +++ /dev/null @@ -1,4 +0,0 @@ -import Sidebar from './Sidebar'; -import Footer from './Footer'; - -export { Sidebar, Footer }; diff --git a/src/components/Algolia/AlgoliaComponent.style.js b/src/components/Algolia/AlgoliaComponent.style.js deleted file mode 100644 index b9c4659..0000000 --- a/src/components/Algolia/AlgoliaComponent.style.js +++ /dev/null @@ -1,901 +0,0 @@ -import styled from 'styled-components'; -import { palette, font } from 'styled-theme'; -import { - transition, - borderRadius, - boxShadow, -} from '@imd/lib/helpers/style_utils'; -import WithDirection from '@imd/lib/helpers/rtl'; - -const WDSidebarWrapper = styled.div` - width: 340px; - display: flex; - flex-direction: column; - flex-shrink: 0; - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 0 0 30px' : '0 30px 0 0'}; - ${transition()}; - - @media only screen and (max-width: 767px) { - width: 100%; - margin-left: ${props => - props['data-rtl'] === 'rtl' ? '30px' : 'calc(-100% + -30px)'}; - margin-right: ${props => - props['data-rtl'] === 'rtl' ? 'calc(-100% + -30px)' : '30px'}; - } - - @media only screen and (min-width: 768px) and (max-width: 1199px) { - width: 270px; - } - - .ais-SearchBox__root { - width: 100%; - margin-bottom: 15px; - max-width: 100%; - - .ais-SearchBox__input { - padding: ${props => - props['data-rtl'] === 'rtl' ? '0 46px 0 36px' : '0 36px 0 46px'}; - border: 1px solid ${palette('border', 0)}; - ${borderRadius('3px')}; - ${boxShadow()}; - } - - .ais-SearchBox__submit { - right: ${props => (props['data-rtl'] === 'rtl' ? '0' : 'inherit')}; - left: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '0')}; - } - } - - .isoAlgoliaSidebarItem { - width: 100%; - display: flex; - flex-direction: column; - padding: 15px 25px; - margin-bottom: 15px; - background-color: #ffffff; - border: 1px solid ${palette('border', 0)}; - ${borderRadius('3px')}; - - .isoAlgoliaSidebarTitle { - font-size: 14px; - font-weight: 700; - color: ${palette('text', 0)}; - line-height: 1.3; - margin: 0 0 20px; - display: flex; - } - - &.isoInline { - flex-direction: row; - align-items: center; - justify-content: space-between; - - .isoAlgoliaSidebarTitle { - margin-bottom: 0; - } - } - - /* Radio */ - .ais-MultiRange__root { - .ais-MultiRange__item { - line-height: 1; - margin-top: 10px; - - &:first-child { - margin-top: 0; - } - - label { - align-items: center; - } - - .ais-MultiRange__itemBox { - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 0 0 8px' : '0 8px 0 0'}; - } - } - } - - /* rating */ - .ais-StarRating__root { - .ais-StarRating__ratingLink { - display: flex; - align-items: center; - text-decoration: none; - - &:first-child { - margin-top: 0; - } - - .ais-StarRating__ratingLabel { - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 10px 0 0' : '0 0 0 10px'}; - } - - .ais-StarRating__ratingCount { - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 auto 0 0' : '0 0 0 auto'}; - } - } - } - .isoAlRangeSlider { - width: 100%; - display: flex; - flex-direction: column; - margin-top: -25px; - - .isoAlRangeNumber { - display: flex; - justify-content: flex-end; - margin-bottom: 15px; - - span { - font-size: 13px; - font-weight: 400; - color: ${palette('text', 3)}; - line-height: 1.3; - padding: ${props => - props['data-rtl'] === 'rtl' ? '0 0 0 10px' : '0 10px 0 0'}; - - &:last-child { - padding: ${props => - props['data-rtl'] === 'rtl' ? '0 10px 0 0' : '0 0 0 10px'}; - } - } - } - - .rheostat-horizontal { - height: 15px; - - .rheostat-background { - width: 100%; - height: 6px; - background-color: ${palette('secondary', 1)}; - display: flex; - margin-top: 4px; - } - - .rheostat-progress { - position: absolute; - top: 4px; - height: 6px; - background-color: ${palette('primary', 9)}; - } - - button { - width: 14px; - height: 14px; - padding: 0; - border-radius: 7px; - background-color: ${palette('primary', 9)}; - border: 0px; - outline: 0px; - top: 0; - margin-left: -5px; - display: inline-block; - z-index: 1; - - &::before { - content: ''; - width: 6px; - height: 6px; - display: flex; - border-radius: 3px; - background-color: #fff; - position: absolute; - top: 4px; - left: 4px; - } - } - } - } - - .ais-RefinementList__root { - .ais-RefinementList__SearchBox { - .ais-SearchBox__root { - margin-bottom: 10px; - } - } - - .ais-RefinementList__item { - &:first-child { - margin-top: 0; - } - - label { - display: flex; - align-items: center; - font-size: 13px; - color: ${palette('text', 1)}; - - .ais-RefinementList__itemCount { - margin: ${props => - props['data-rtl'] === 'rtl' ? ' 0 auto 0 0' : '0 0 0 auto'}; - } - - .ais-RefinementList__itemBox { - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 0 0 8px' : '0 8px 0 0'}; - } - } - } - } - - .ais-HierarchicalMenu__root { - .ais-HierarchicalMenu__item { - margin-top: 8px; - float: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')}; - - &:after { - right: ${props => - props['data-rtl'] === 'rtl' ? 'inherit' : '-22px'}; - left: ${props => (props['data-rtl'] === 'rtl' ? '-22px' : 'inherit')}; - transform: ${props => - props['data-rtl'] === 'rtl' - ? 'translateY(-50%) rotate(180deg)' - : 'translateY(-50%) rotate(0deg)'}; - } - - &:first-child { - margin-top: 0; - } - - .ais-HierarchicalMenu__itemLink { - &:focus { - text-decoration: none; - } - } - - &.ais-HierarchicalMenu__itemParent { - .ais-HierarchicalMenu__item { - margin-top: 8px; - } - } - } - } - } - - .ais-ClearAll__root { - padding: 12px 8px; - display: block; - font-weight: 700; - text-transform: uppercase; - - @media only screen and (max-width: 358px) { - margin-top: 10px; - } - } -`; - -const WDContentWrapper = styled.div` - width: calc(100% - 370px); - display: flex; - flex-direction: column; - - @media only screen and (max-width: 767px) { - width: 100%; - margin-right: ${props => (props['data-rtl'] === 'rtl' ? '30px' : '0')}; - } - - @media only screen and (min-width: 768px) and (max-width: 1199px) { - width: calc(100% - 300px); - } - - .ais-Hits__root { - width: 100%; - display: flex; - flex-wrap: wrap; - } - - &.list { - .ais-Hits__root { - flex-direction: column; - } - } -`; - -const WDGridListViewWrapper = styled.div` - &.GridView { - width: calc(100% / 2 - 10px); - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - flex-direction: column; - padding: 0; - background-color: #fff; - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 0 20px 20px' : '0 20px 20px 0'}; - position: relative; - border: 1px solid ${palette('border', 0)}; - - &:nth-child(2n) { - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 0 20px 0' : '0 0 20px 0'}; - } - - @media only screen and (min-width: 1400px) { - width: calc(100% / 3 - 14px); - - &:nth-child(2n) { - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 0 20px 20px' : '0 20px 20px 0'}; - } - - &:nth-child(3n) { - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 0 20px' : '0 0 20px'}; - } - } - - @media only screen and (max-width: 550px) { - width: 100%; - margin: 0 0 20px; - } - - @media only screen and (min-width: 768px) and (max-width: 991px) { - width: 100%; - flex-shrink: 0; - } - - .isoAlGridImage { - width: 100%; - height: 260px; - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - flex-shrink: 0; - align-items: center; - -webkit-align-items: center; - justify-content: center; - -webkit-justify-content: center; - overflow: hidden; - background-color: #ffffff; - position: relative; - - &:after { - content: ''; - width: 100%; - height: 100%; - display: flex; - background-color: rgba(0, 0, 0, 0.6); - position: absolute; - top: 0; - left: 0; - opacity: 0; - ${transition()}; - } - - .ant-btn { - &.isoAlAddToCart { - background-color: #ffffff; - border-color: #ffffff !important; - color: ${palette('text', 0)}; - z-index: 1; - position: absolute !important; - height: 42px; - opacity: 0; - padding: 0 20px; - transform: scale(0.8); - ${transition()}; - - i { - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 0 0 10px' : '0 10px 0 0'}; - font-size: 14px; - } - - &:hover { - background-color: ${palette('grayscale', 4)}; - } - - &.ant-btn-loading { - i:not(.anticon-loading) { - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 10px 0 0' : '0 0 0 10px'}; - } - } - } - } - - img { - max-width: 100%; - } - - @media only screen and (max-width: 991px) { - width: 100%; - overflow: hidden; - } - } - - .isoAlGridContents { - width: 100%; - padding: 20px 25px; - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - flex-direction: column; - - @media only screen and (max-width: 991px) { - margin-top: 15px; - } - - .isoAlGridName { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - margin-bottom: 5px; - - .ais-Highlight__nonHighlighted { - font-size: 14px; - font-weight: 700; - color: ${palette('text', 0)}; - line-height: 1.3; - } - } - - .isoAlGridPriceRating { - display: flex; - align-items: center; - - .isoAlGridPrice { - font-size: 14px; - font-weight: 400; - color: #ffffff; - padding: 5px 10px; - line-height: 1; - position: absolute; - top: 30px; - right: 0px; - background-color: ${palette('primary', 9)}; - ${borderRadius('3px 0 0 3px')}; - } - - .isoAlGridRating { - display: none; - .ant-rate { - display: flex; - .ant-rate-star { - font-size: 9px; - margin-right: 2px; - } - } - } - } - - .isoAlGridDescription { - display: none; - - .ais-Highlight__nonHighlighted { - font-size: 13px; - font-weight: 400; - color: ${palette('text', 2)}; - line-height: 1.5; - } - } - } - - &:hover { - .isoAlGridImage { - &:after { - opacity: 1; - } - - .isoAlAddToCart { - opacity: 1; - transform: scale(1); - } - } - } - } - - &.ListView { - width: 100%; - display: flex; - padding: 10px; - background-color: #fff; - margin-bottom: 15px; - border: 1px solid ${palette('border', 0)}; - - @media only screen and (max-width: 991px) { - flex-direction: column; - } - - .isoAlGridImage { - width: 240px; - height: auto; - display: flex; - flex-shrink: 0; - align-items: center; - justify-content: center; - overflow: hidden; - position: relative; - background-color: #ffffff; - - &:after { - content: ''; - width: 100%; - height: 100%; - display: flex; - background-color: rgba(0, 0, 0, 0.6); - position: absolute; - top: 0; - left: 0; - opacity: 0; - ${transition()}; - } - - .isoAlAddToCart { - background-color: #ffffff; - border-color: #ffffff !important; - color: ${palette('text', 0)}; - z-index: 1; - position: absolute !important; - height: 42px; - opacity: 0; - padding: 0 20px; - direction: ${props => (props['data-rtl'] === 'rtl' ? 'rtl' : 'ltr')}; - transform: scale(0.8); - ${transition()}; - - i { - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 0 0 10px' : '0 10px 0 0'}; - font-size: 14px; - } - - &:hover { - background-color: ${palette('grayscale', 4)}; - } - } - - &:hover { - &:after { - opacity: 1; - } - - .isoAlAddToCart { - opacity: 1; - transform: scale(1); - } - } - - img { - max-width: 100%; - } - - @media only screen and (max-width: 991px) { - width: 100%; - height: auto; - overflow: hidden; - } - } - - .isoAlGridContents { - width: 100%; - padding: 30px 15px; - padding-left: 30px; - display: flex; - flex-direction: column; - - @media only screen and (max-width: 991px) { - margin-top: 15px; - } - - .isoAlGridName { - .ais-Highlight__nonHighlighted { - font-size: 16px; - font-weight: 700; - color: ${palette('text', 0)}; - line-height: 1.3; - margin-bottom: 10px; - display: flex; - } - } - - .isoAlGridPriceRating { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 20px; - - .isoAlGridPrice { - font-size: 14px; - font-weight: 400; - color: ${palette('text', 0)}; - line-height: 1; - } - - .isoAlGridRating { - .ant-rate { - display: flex; - .ant-rate-star { - font-size: 9px; - margin-right: 2px; - } - } - } - } - - .isoAlGridDescription { - .ais-Highlight__nonHighlighted { - font-size: 13px; - font-weight: 400; - color: ${palette('text', 2)}; - line-height: 1.5; - } - } - } - } -`; - -const WDTopbarWrapper = styled.div` - width: 100%; - display: flex; - align-items: center; - margin-bottom: 27px; - flex-wrap: wrap; - - .ais-Stats__root { - font-family: ${font('primary', 0)}; - font-size: 14px; - font-weight: 500; - color: ${palette('text', 0)}; - - @media only screen and (max-width: 991px) { - width: 100%; - margin-bottom: 15px; - } - } - - .ais-SortBy__root { - margin-left: ${props => (props['data-rtl'] === 'rtl' ? '20px' : 'auto')}; - margin-right: ${props => (props['data-rtl'] === 'rtl' ? 'auto' : '20px')}; - border: 1px solid ${palette('border', 0)}; - - &:focus { - background-color: #ffffff; - } - - @media only screen and (max-width: 991px) { - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 0 0 auto' : '0 auto 0 0'}; - } - } - - .isoViewChanger { - display: flex; - align-items: center; - - button { - font-size: 16px; - color: ${palette('secondary', 0)}; - text-align: center; - width: 35px; - height: 35px; - display: flex; - align-items: center; - justify-content: center; - background-color: #ffffff; - outline: 0; - padding: 0; - border: 1px solid ${palette('border', 0)}; - margin-left: -1px; - cursor: pointer; - ${transition()}; - - i { - font-size: 18px; - color: ${palette('secondary', 0)}; - width: 100%; - line-height: 33px; - ${transition()}; - } - - &.active { - background-color: ${palette('primary', 9)}; - border-color: ${palette('primary', 9)}; - i { - color: #ffffff; - } - } - - &:first-child { - margin-left: 0; - } - - &:hover { - color: #ffffff; - background-color: #265cda; - border-color: #265cda; - - i { - color: #ffffff; - } - } - } - } -`; - -const WDVoiceSearchWrapper = styled.div` - width: 100%; - padding: 10px 15px; - display: flex; - background-color: #ffffff; - margin-bottom: 15px; - border: 1px solid ${palette('border', 0)}; - ${borderRadius('3px')}; - - div { - width: 100%; - display: flex; - align-items: center; - } - - button { - width: 30px; - height: 30px; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - position: relative; - outline: 0; - cursor: pointer; - background-color: transparent; - border: 2px solid ${palette('border', 0)}; - ${transition()}; - ${borderRadius('50%')}; - - &:before { - content: ''; - font-size: 17px; - font-family: 'ionicons'; - color: ${palette('grayscale', 0)}; - -webkit-transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); - -moz-transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); - -ms-transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); - } - - &:hover { - border-color: ${palette('primary', 0)}; - - &:before { - color: ${palette('primary', 0)}; - } - } - } - - span { - font-size: 14px; - font-weight: 400; - color: ${palette('text', 2)}; - line-height: 1.4; - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 10px 0 0' : '0 0 0 10px'}; - } - - .isoVoiceSearchStart { - button { - &:before { - content: '\f2ec'; - } - } - } - - .isoVoiceSearchRunning { - button { - border-color: ${palette('primary', 0)}; - - &:before { - content: '\f24f'; - color: ${palette('primary', 0)}; - font-size: 13px; - } - } - } -`; - -const WDFooterWrapper = styled.footer` - display: flex; - width: 100%; - align-items: center; - justify-content: flex-end; - margin-top: 40px; - - span { - font-size: 14px; - font-weight: 700; - color: ${palette('text', 2)}; - line-height: 1.3; - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 0 0 20px' : '0 20px 0 0'}; - } - - .isoLogoWrapper { - max-width: 150px; - - img { - max-width: 100%; - } - } -`; - -const LoaderElement = styled.div` - width: 100%; - height: 80vh; - display: flex; - align-items: center; - justify-content: center; - - .loaderElement { - height: 3em; - width: 3em; - animation: rotation 1s infinite linear; - border: 2px solid rgba(51, 105, 231, 0.3); - border-top-color: rgb(51, 105, 231); - border-radius: 50%; - } - - @keyframes rotation { - to { - transform: rotate(360deg); - } - } -`; - -const PaginationStyleWrapper = styled.div` - .ais-Pagination__root { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - padding: 8px 16px; - border: 1px solid ${palette('border', 0)}; - ${borderRadius('3px')}; - ${boxShadow()}; - - .ais-Pagination__item { - padding: 3px; - - &.ais-Pagination__itemSelected { - &:hover { - background-color: ${palette('primary', 9)}; - a { - color: #ffffff; - } - } - } - - a { - text-decoration: none; - } - } - } -`; - -const SidebarWrapper = WithDirection(WDSidebarWrapper); -const ContentWrapper = WithDirection(WDContentWrapper); -const VoiceSearchWrapper = WithDirection(WDVoiceSearchWrapper); -const GridListViewWrapper = WithDirection(WDGridListViewWrapper); -const TopbarWrapper = WithDirection(WDTopbarWrapper); -const FooterWrapper = WithDirection(WDFooterWrapper); - -export { - SidebarWrapper, - ContentWrapper, - FooterWrapper, - GridListViewWrapper, - VoiceSearchWrapper, - LoaderElement, - TopbarWrapper, - PaginationStyleWrapper, -}; diff --git a/src/components/Algolia/Footer.js b/src/components/Algolia/Footer.js deleted file mode 100644 index a0391ff..0000000 --- a/src/components/Algolia/Footer.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import AlgoliaLogo from './algolia.svg'; -import { FooterWrapper } from './AlgoliaComponent.style'; - -const Footer = () => ( - <FooterWrapper className="isoAlgoliaFooter"> - <span>Powred by</span> - <div className="isoLogoWrapper"> - <img alt="#" src={process.env.PUBLIC_URL + AlgoliaLogo} /> - </div> - </FooterWrapper> -); - -export default Footer; diff --git a/src/components/Algolia/RangeSlider.js b/src/components/Algolia/RangeSlider.js deleted file mode 100644 index bc249e5..0000000 --- a/src/components/Algolia/RangeSlider.js +++ /dev/null @@ -1,69 +0,0 @@ -import PropTypes from 'prop-types'; -import React, { Component } from 'react'; -import { connectRange } from 'react-instantsearch/connectors'; -import 'rheostat/initialize'; -import 'rheostat/css/rheostat.css'; -import Rheostat from 'rheostat'; - -class Range extends Component { - static propTypes = { - min: PropTypes.number, - max: PropTypes.number, - currentRefinement: PropTypes.object, - refine: PropTypes.func.isRequired, - canRefine: PropTypes.bool.isRequired, - }; - - state = { currentValues: { min: this.props.min, max: this.props.max } }; - - componentWillReceiveProps(sliderState) { - if (sliderState.canRefine) { - this.setState({ - currentValues: { - min: sliderState.currentRefinement.min, - max: sliderState.currentRefinement.max, - }, - }); - } - } - - onValuesUpdated = sliderState => { - this.setState({ - currentValues: { min: sliderState.values[0], max: sliderState.values[1] }, - }); - }; - - onChange = sliderState => { - if ( - this.props.currentRefinement.min !== sliderState.values[0] || - this.props.currentRefinement.max !== sliderState.values[1] - ) { - this.props.refine({ - min: sliderState.values[0], - max: sliderState.values[1], - }); - } - }; - - render() { - const { min, max, currentRefinement } = this.props; - const { currentValues } = this.state; - return min !== max ? ( - <div className="isoAlRangeSlider"> - <div className="isoAlRangeNumber"> - <span>{currentValues.min}</span> -<span>{currentValues.max}</span> - </div> - <Rheostat - min={min} - max={max} - values={[currentRefinement.min, currentRefinement.max]} - onChange={this.onChange} - onValuesUpdated={this.onValuesUpdated} - /> - </div> - ) : null; - } -} - -const RangeSlider = connectRange(Range); -export default RangeSlider; diff --git a/src/components/Algolia/Sidebar.js b/src/components/Algolia/Sidebar.js deleted file mode 100644 index de31366..0000000 --- a/src/components/Algolia/Sidebar.js +++ /dev/null @@ -1,70 +0,0 @@ -import React from 'react'; -import { - RefinementList, - StarRating, - Toggle, - HierarchicalMenu, - SearchBox, - MultiRange, - ClearAll, -} from 'react-instantsearch/dom'; -import RangeSlider from './RangeSlider'; -import VoiceRecognition from './VoiceRecognition'; -import { SidebarWrapper } from './AlgoliaComponent.style'; - -export default ({ setVoice }) => ( - <SidebarWrapper className="isoAlgoliaSidebar"> - <SearchBox translations={{ placeholder: 'Search here' }} /> - <VoiceRecognition setVoice={setVoice} /> - - <div className="isoAlgoliaSidebarItem"> - <h3 className="isoAlgoliaSidebarTitle">Multi Range</h3> - <MultiRange - attributeName="price" - items={[ - { end: 10, label: '<$10' }, - { start: 10, end: 100, label: '$10-$100' }, - { start: 100, end: 500, label: '$100-$500' }, - { start: 500, label: '>$500' }, - ]} - /> - </div> - - <div className="isoAlgoliaSidebarItem"> - <h3 className="isoAlgoliaSidebarTitle" style={{ marginBottom: 10 }}> - Slider - </h3> - <RangeSlider attributeName="price" /> - </div> - - <div className="isoAlgoliaSidebarItem"> - <h3 className="isoAlgoliaSidebarTitle">Category</h3> - <RefinementList attributeName="categories" /> - </div> - - <div className="isoAlgoliaSidebarItem"> - <h3 className="isoAlgoliaSidebarTitle">Brand</h3> - <RefinementList attributeName="brand" withSearchBox /> - </div> - - <div className="isoAlgoliaSidebarItem"> - <HierarchicalMenu - attributes={[ - 'hierarchicalCategories.lvl0', - 'hierarchicalCategories.lvl1', - 'hierarchicalCategories.lvl2', - ]} - /> - </div> - <div className="isoAlgoliaSidebarItem"> - <h3 className="isoAlgoliaSidebarTitle">Rating</h3> - <StarRating attributeName="rating" style={{ background: '#ff0000' }} /> - </div> - <div className="isoAlgoliaSidebarItem isoInline"> - <h3 className="isoAlgoliaSidebarTitle">Toggle</h3> - <Toggle attributeName="free_shipping" label="Free Shipping" /> - </div> - - <ClearAll /> - </SidebarWrapper> -); diff --git a/src/components/Algolia/VoiceRecognition.js b/src/components/Algolia/VoiceRecognition.js deleted file mode 100644 index 4bc5ede..0000000 --- a/src/components/Algolia/VoiceRecognition.js +++ /dev/null @@ -1,61 +0,0 @@ -import React, { Component } from 'react'; -import { PropTypes } from 'prop-types'; -import SpeechRecognition from 'react-speech-recognition'; -import { VoiceSearchWrapper } from './AlgoliaComponent.style'; - -const propTypes = { - transcript: PropTypes.string, - resetTranscript: PropTypes.func, - browserSupportsSpeechRecognition: PropTypes.bool, -}; -const options = { - autoStart: false, -}; -class VoiceRecognition extends Component { - state = { - listening: false, - }; - render() { - const { - transcript, - resetTranscript, - browserSupportsSpeechRecognition, - startListening, - stopListening, - setVoice, - } = this.props; - if (!browserSupportsSpeechRecognition) { - return <div />; - } - return ( - <VoiceSearchWrapper className="isoVoiceSearch"> - {!this.state.listening ? ( - <div className="isoVoiceSearchStart"> - <button - onClick={() => { - startListening(); - this.setState({ listening: true }); - }} - /> - <span>Start Speaking</span> - </div> - ) : ( - <div className="isoVoiceSearchRunning"> - <button - onClick={() => { - setVoice(transcript); - resetTranscript(); - stopListening(); - this.setState({ listening: false }); - }} - /> - {/* <span>Search</span> */} - <span>{transcript}</span> - </div> - )} - </VoiceSearchWrapper> - ); - } -} -VoiceRecognition.propTypes = propTypes; -export default SpeechRecognition(options)(VoiceRecognition); diff --git a/src/components/Algolia/algolia.svg b/src/components/Algolia/algolia.svg deleted file mode 100644 index 586422d..0000000 --- a/src/components/Algolia/algolia.svg +++ /dev/null @@ -1,14 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<svg width="512px" height="127px" viewBox="0 0 512 127" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid"> - <defs> - <linearGradient x1="-37.754498%" y1="134.908438%" x2="130.272074%" y2="-27.6847754%" id="linearGradient-1"> - <stop stop-color="#00AEFF" offset="0%"></stop> - <stop stop-color="#3369E7" offset="100%"></stop> - </linearGradient> - </defs> - <g> - <path d="M16.7,0 L110,0 C119.2,0 126.7,7.5 126.7,16.7 L126.7,110.1 C126.7,119.3 119.2,126.8 110,126.8 L16.7,126.8 C7.5,126.8 0,119.3 0,110.1 L0,16.6 C0,7.5 7.5,0 16.7,0 Z" fill="url(#linearGradient-1)"></path> - <path d="M64.8,32 C45.1,32 29,48.1 29,67.9 C29,87.7 45,103.7 64.8,103.7 C84.6,103.7 100.6,87.7 100.6,67.9 C100.6,48.1 84.6,32 64.8,32 Z M64.8,93.1 C50.9,93.1 39.6,81.8 39.6,67.9 C39.6,54 50.9,42.7 64.8,42.7 C78.7,42.7 90,53.9 90,67.9 C90,81.9 78.8,93.1 64.8,93.1 Z M64.8,47.8 L64.8,66.6 C64.8,67.1 65.4,67.5 65.9,67.3 L82.6,58.6 C83,58.4 83.1,57.9 82.9,57.6 C79.4,51.5 73,47.4 65.6,47.1 C65.2,47.1 64.8,47.4 64.8,47.8 Z M41.4,34 L39.2,31.8 C37,29.6 33.6,29.6 31.4,31.8 L28.8,34.4 C26.6,36.6 26.6,40 28.8,42.2 L31,44.4 C31.3,44.7 31.8,44.7 32.2,44.3 C33.5,42.6 34.9,40.9 36.4,39.4 C38,37.8 39.6,36.4 41.4,35.2 C41.7,34.9 41.8,34.3 41.4,34 Z M76.6,28.3 L76.6,24 C76.6,21 74.1,18.5 71.1,18.5 L58.3,18.5 C55.3,18.5 52.8,21 52.8,24 L52.8,28.5 C52.8,29 53.3,29.3 53.8,29.2 C57.4,28.2 61.1,27.6 65,27.6 C68.7,27.6 72.3,28.1 75.8,29.1 C76.1,29.1 76.6,28.8 76.6,28.3 Z" fill="#FFFFFF"></path> - <path d="M316.9,97 C316.9,107.3 314.3,114.8 309,119.5 C303.7,124.3 295.7,126.7 284.9,126.7 C280.9,126.7 272.7,125.9 266.1,124.5 L268.5,112.6 C274,113.8 281.3,114.1 285.1,114.1 C291.1,114.1 295.4,112.9 298,110.4 C300.6,107.9 301.8,104.3 301.8,99.4 L301.8,96.9 C300.3,97.6 298.3,98.4 295.9,99.1 C293.5,99.8 290.7,100.2 287.5,100.2 C283.3,100.2 279.6,99.5 276.2,98.2 C272.8,96.9 269.8,95 267.4,92.4 C265,89.9 263.1,86.7 261.7,82.9 C260.3,79.1 259.7,72.3 259.7,67.3 C259.7,62.6 260.4,56.7 261.9,52.8 C263.4,48.9 265.4,45.5 268.2,42.7 C271,39.9 274.4,37.7 278.3,36.2 C282.3,34.6 286.9,33.6 291.9,33.6 C296.8,33.6 301.3,34.2 305.7,34.9 C310.1,35.6 313.8,36.4 316.9,37.2 L316.9,97 L316.9,97 Z M275.1,67.3 C275.1,73.6 276.5,80.6 279.3,83.5 C282.1,86.4 285.6,87.9 290,87.9 C292.4,87.9 294.7,87.6 296.8,86.9 C298.9,86.2 300.6,85.5 302,84.6 L302,47.2 C300.9,47 296.4,46 292.1,45.9 C286.6,45.7 282.5,48 279.6,51.6 C276.5,55.2 275.1,61.4 275.1,67.3 Z M388.2,67.3 C388.2,72.4 387.5,76.2 386,80.4 C384.5,84.6 382.4,88.2 379.7,91.1 C377,94 373.7,96.4 369.9,98 C366.1,99.6 360.1,100.5 357.2,100.5 C354.2,100.5 348.4,99.6 344.5,98 C340.7,96.3 337.4,94.1 334.7,91.1 C332,88.1 329.9,84.6 328.3,80.4 C326.8,76.2 326,72.4 326,67.3 C326,62.2 326.7,57.3 328.2,53.2 C329.7,49 331.9,45.5 334.7,42.5 C337.5,39.5 340.8,37.3 344.5,35.7 C348.3,34.1 352.5,33.3 357,33.3 C361.5,33.3 365.7,34.1 369.6,35.7 C373.4,37.3 376.8,39.6 379.4,42.5 C382.1,45.5 384.2,49 385.8,53.2 C387.4,57.3 388.2,62.2 388.2,67.3 Z M372.8,67.3 C372.8,60.8 371.4,55.4 368.6,51.6 C365.8,47.8 361.9,45.9 357,45.9 C352.1,45.9 348.2,47.8 345.4,51.6 C342.6,55.4 341.3,60.8 341.3,67.3 C341.3,73.9 342.7,78.3 345.5,82.1 C348.3,85.9 352.2,87.8 357.1,87.8 C362,87.8 365.9,85.9 368.7,82.1 C371.5,78.3 372.8,73.9 372.8,67.3 Z M421.7,100.5 C397.1,100.6 397.1,80.6 397.1,77.4 L397.1,6.3 L412.1,3.9 L412.1,74.5 C412.1,76.3 412.1,87.8 421.8,87.8 L421.7,100.5 L421.7,100.5 Z M448.2,100.5 L433.1,100.5 L433.1,35.6 L448.2,33.2 L448.2,100.5 Z M440.6,26.1 C445.6,26.1 449.8,22 449.8,17 C449.8,12 445.7,7.9 440.6,7.9 C435.5,7.9 431.4,12 431.4,17 C431.4,22 435.6,26.1 440.6,26.1 Z M485.8,33.3 C490.8,33.3 495,33.9 498.3,35.1 C501.7,36.3 504.4,38.1 506.4,40.3 C508.4,42.5 509.8,45.5 510.7,48.6 C511.6,51.8 512,55.2 512,59 L512,97.7 C509.7,98.2 506.2,98.8 501.5,99.5 C496.8,100.2 491.5,100.5 485.7,100.5 C481.8,100.5 478.2,100.1 475,99.4 C471.8,98.7 469,97.5 466.7,95.8 C464.4,94.1 462.7,92 461.4,89.4 C460.1,86.8 459.5,83.1 459.5,79.2 C459.5,75.5 460.2,73.2 461.7,70.6 C463.2,68.1 465.1,66 467.6,64.4 C470.1,62.8 472.9,61.6 476.2,60.9 C479.5,60.2 482.9,59.9 486.4,59.9 C488.1,59.9 489.8,60 491.6,60.2 C493.4,60.4 495.4,60.7 497.4,61.2 L497.4,58.7 C497.4,57 497.2,55.3 496.8,53.8 C496.4,52.2 495.6,50.9 494.6,49.7 C493.6,48.5 492.2,47.6 490.5,46.9 C488.8,46.2 486.7,45.7 484.1,45.7 C480.6,45.7 477.5,46.1 474.6,46.6 C471.7,47.1 469.3,47.7 467.5,48.3 L465.7,36 C467.6,35.3 470.4,34.7 474,34 C477.7,33.6 481.6,33.3 485.8,33.3 Z M487,87.9 C491.6,87.9 495,87.6 497.4,87.2 L497.4,71.8 C496.6,71.6 495.4,71.3 493.8,71.1 C492.2,70.9 490.5,70.7 488.6,70.7 C486.9,70.7 485.3,70.8 483.6,71.1 C481.9,71.3 480.4,71.8 479,72.4 C477.7,73.1 476.5,74 475.7,75.2 C474.9,76.4 474.5,77.1 474.5,78.9 C474.5,82.4 475.7,84.5 478,85.8 C480.2,87.2 483.2,87.9 487,87.9 Z M190.1,33.7 C195.1,33.7 199.3,34.3 202.6,35.5 C206,36.7 208.7,38.5 210.7,40.7 C212.7,42.9 214.1,45.9 215,49 C215.9,52.2 216.3,55.6 216.3,59.4 L216.3,98.1 C214,98.6 210.5,99.2 205.8,99.9 C201.1,100.6 195.8,100.9 190,100.9 C186.1,100.9 182.5,100.5 179.3,99.8 C176.1,99.1 173.3,97.9 171,96.2 C168.7,94.5 167,92.4 165.7,89.8 C164.4,87.2 163.8,83.5 163.8,79.6 C163.8,75.9 164.5,73.6 166,71 C167.5,68.5 169.4,66.4 171.9,64.8 C174.4,63.2 177.2,62 180.5,61.3 C183.8,60.6 187.2,60.3 190.7,60.3 C192.4,60.3 194.1,60.4 195.9,60.6 C197.7,60.8 199.7,61.1 201.7,61.6 L201.7,59.1 C201.7,57.4 201.5,55.7 201.1,54.2 C200.7,52.6 199.9,51.3 198.9,50.1 C197.9,48.9 196.5,48 194.8,47.3 C193.1,46.6 191,46.1 188.4,46.1 C184.9,46.1 181.8,46.5 178.9,47 C176,47.5 173.6,48.1 171.8,48.7 L170,36.4 C171.9,35.7 174.7,35.1 178.3,34.4 C182.1,34 186,33.7 190.1,33.7 Z M191.4,88.3 C196,88.3 199.4,88 201.8,87.6 L201.8,72.2 C201,72 199.8,71.7 198.2,71.5 C196.6,71.3 194.9,71.1 193,71.1 C191.3,71.1 189.7,71.2 188,71.5 C186.3,71.7 184.8,72.2 183.4,72.8 C182,73.4 180.9,74.4 180.1,75.6 C179.3,76.8 178.9,77.5 178.9,79.3 C178.9,82.8 180.1,84.9 182.4,86.2 C184.6,87.6 187.6,88.3 191.4,88.3 Z M252.4,100.5 C227.8,100.6 227.8,80.6 227.8,77.4 L227.8,6.3 L242.8,3.9 L242.8,74.5 C242.8,76.3 242.8,87.8 252.5,87.8 L252.5,100.5 L252.4,100.5 Z" fill="#182359"></path> - </g> -</svg> diff --git a/src/components/AvatarCard/AvatarCard.js b/src/components/AvatarCard/AvatarCard.js deleted file mode 100644 index d51484d..0000000 --- a/src/components/AvatarCard/AvatarCard.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import CardWrapper, { Avatar, Info } from './AvatarCard.style'; - -const AvatarCard = ({ className, avatar, name, username }) => { - return ( - <CardWrapper className={`avatar-card ${className ? className : ''}`}> - {avatar && ( - <Avatar className="avatar"> - <img src={avatar} alt={name} /> - </Avatar> - )} - {name || username ? ( - <Info className="info"> - {name && <h3 className="name">{name}</h3>} - {username && <p className="username">{username}</p>} - </Info> - ) : ( - '' - )} - </CardWrapper> - ); -}; - -export default AvatarCard; diff --git a/src/components/AvatarCard/AvatarCard.style.js b/src/components/AvatarCard/AvatarCard.style.js deleted file mode 100644 index 5e914b3..0000000 --- a/src/components/AvatarCard/AvatarCard.style.js +++ /dev/null @@ -1,27 +0,0 @@ -import styled from 'styled-components'; - -const CardWrapper = styled.div` - display: flex; - align-items: center; -`; - -export const Avatar = styled.div` - width: 170px; - height: 170px; - border-radius: 50%; - overflow: hidden; - flex-shrink: 0; - border: 4px solid #ffffff; - img { - width: 100%; - height: 100%; - object-fit: cover; - } -`; - -export const Info = styled.div` - width: calc(100% - 170px); - padding-left: 10px; -`; - -export default CardWrapper; diff --git a/src/components/Cart/SingleCart.js b/src/components/Cart/SingleCart.js deleted file mode 100644 index 2fec6d9..0000000 --- a/src/components/Cart/SingleCart.js +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; -import InputNumber from '../uielements/InputNumber'; -import { notification } from '../index'; - -export default function({ - price, - quantity, - image, - objectID, - cancelQuantity, - changeQuantity, - _highlightResult, -}) { - const onChange = value => { - if (!isNaN(value)) { - if (value !== quantity) { - changeQuantity(objectID, value); - } - } else { - notification('error', 'Please give valid number'); - } - }; - - const totalPrice = (price * quantity).toFixed(2); - return ( - <tr> - <td - className="isoItemRemove" - onClick={() => { - cancelQuantity(objectID); - }} - > - <a href="# "> - <i className="ion-android-close" /> - </a> - </td> - <td className="isoItemImage"> - <img alt="#" src={image} /> - </td> - <td className="isoItemName"> - <h3>{_highlightResult.name.value}</h3> - <p>{_highlightResult.description.value}</p> - </td> - <td className="isoItemPrice"> - <span className="itemPricePrefix">$</span> - {price.toFixed(2)} - </td> - <td className="isoItemQuantity"> - <InputNumber - min={1} - max={1000} - value={quantity} - step={1} - onChange={onChange} - /> - </td> - <td className="isoItemPriceTotal">${totalPrice}</td> - </tr> - ); -} diff --git a/src/components/Cart/SingleCartModal.js b/src/components/Cart/SingleCartModal.js deleted file mode 100644 index af62ac5..0000000 --- a/src/components/Cart/SingleCartModal.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import TopbarCartWrapper from './SingleCartModal.style'; - -export default function({ - price, - quantity, - image, - objectID, - cancelQuantity, - _highlightResult, -}) { - return ( - <TopbarCartWrapper className="isoCartItems"> - <div className="isoItemImage"> - <img alt="#" src={image} /> - </div> - <div className="isoCartDetails"> - <h3> - <a href="#!">{_highlightResult.name.value}</a> - </h3> - <p className="isoItemPriceQuantity"> - <span>$</span> - <span>{price.toFixed(2)}</span> - <span className="itemMultiplier">X</span> - <span className="isoItemQuantity">{quantity}</span> - </p> - </div> - <a - className="isoItemRemove" - onClick={() => cancelQuantity(objectID)} - href="#!" - > - <i className="ion-android-close" /> - </a> - </TopbarCartWrapper> - ); -} diff --git a/src/components/Cart/SingleCartModal.style.js b/src/components/Cart/SingleCartModal.style.js deleted file mode 100644 index f56ac19..0000000 --- a/src/components/Cart/SingleCartModal.style.js +++ /dev/null @@ -1,88 +0,0 @@ -import styled from 'styled-components'; -import { palette } from 'styled-theme'; -import { transition } from '@imd/lib/helpers/style_utils'; -import WithDirection from '@imd/lib/helpers/rtl'; -const TopbarCartWrapper = styled.div` - width: 100%; - display: flex; - align-items: center; - padding: 15px 30px; - flex-shrink: 0; - position: relative; - border-bottom: 1px solid ${palette('border', 2)}; - ${transition()}; - - .isoItemImage { - width: 50px; - height: 50px; - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - - img { - width: 100%; - height: 100%; - object-fit: cover; - } - } - - .isoCartDetails { - width: 100%; - display: flex; - padding: ${props => - props['data-rtl'] === 'rtl' ? '0 20px 0 0' : '0 0 0 20px'}; - flex-direction: column; - text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')}; - - h3 { - margin: 0 0 5px; - line-height: 1; - - a { - font-size: 13px; - font-weight: 500; - color: ${palette('text', 0)}; - line-height: 1.3; - text-decoration: none; - } - } - - p { - display: flex; - margin: 0; - - span { - font-size: 12px; - font-weight: 400; - color: ${palette('text', 2)}; - line-height: 1.2; - - &.itemMultiplier { - padding: 0 3px; - } - } - } - } - - .isoItemRemove { - position: absolute; - right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '15px')}; - left: ${props => (props['data-rtl'] === 'rtl' ? '15px' : 'inherit')}; - font-size: 13px; - font-weight: 500; - color: ${palette('text', 0)} !important; - opacity: 0; - ${transition()}; - } - - &:hover { - background-color: ${palette('grayscale', 3)}; - - .isoItemRemove { - opacity: 1; - } - } -`; - -export default WithDirection(TopbarCartWrapper); diff --git a/src/components/Chat/InputName.js b/src/components/Chat/InputName.js deleted file mode 100644 index 6cd9a32..0000000 --- a/src/components/Chat/InputName.js +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; -import AutoComplete, { AutoCompleteOption } from '../uielements/autocomplete'; -import UserItem from './InputName.style'; - -export default function(props) { - const [state, setState] = React.useState({ - value: '', - result: [], - }); - - const handleSearch = value => { - const result = []; - if (value) { - props.users.forEach(user => { - if (user.name.toLowerCase().indexOf(value.toLowerCase()) > -1) { - result.push(user); - } - }); - } - setState({ ...state, result, value }); - }; - const onSelect = id => { - if (id) { - state.result.forEach(user => { - if (user.id === id) { - setState({ ...state, value: user.name }); - } - }); - } - }; - const { result, value } = state; - return ( - <AutoComplete - value={value} - onSelect={onSelect} - onSearch={handleSearch} - placeholder="find your buddy" - style={{ marginBottom: 10 }} - > - {result.map(user => ( - <AutoCompleteOption key={user.id} style={{ display: 'flex' }}> - <UserItem - onClick={() => { - setState({ ...state, value: user.name, result: [] }); - props.setComposedId(user.id); - }} - > - <div className="userImg"> - <img alt="#" src={user.profileImageUrl} /> - </div> - - <span className="suggetionText">{user.name}</span> - </UserItem> - </AutoCompleteOption> - ))} - </AutoComplete> - ); -} diff --git a/src/components/Chat/InputName.style.js b/src/components/Chat/InputName.style.js deleted file mode 100644 index de85444..0000000 --- a/src/components/Chat/InputName.style.js +++ /dev/null @@ -1,33 +0,0 @@ -import styled from 'styled-components'; -import { palette } from 'styled-theme'; - -const UserItem = styled.div` - display: flex; - align-items: center; - - .userImg { - width: 35px; - height: 35px; - display: inline-flex; - align-items: center; - justify-content: center; - overflow: hidden; - border-radius: 50%; - margin-right: 15px; - - img { - width: 100%; - height: 100%; - object-fit: cover; - } - } - - .suggetionText { - font-size: 13px; - color: ${palette('text', 0)}; - font-weight: 500; - margin: 0; - } -`; - -export default UserItem; diff --git a/src/components/Chat/ViewProfile.js b/src/components/Chat/ViewProfile.js deleted file mode 100644 index c1800f8..0000000 --- a/src/components/Chat/ViewProfile.js +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; -import { ViewProfileWrapper, SingleInfoWrapper } from './ViewProfile.style'; - -const SingleInfo = ({ title, value }) => ( - <SingleInfoWrapper> - <span className="viewProfileTitle">{title}</span> - <span className="viewProfileValue">{value}</span> - </SingleInfoWrapper> -); -export default function({ - viewProfile, - toggleViewProfile, - toggleMobileProfile, -}) { - if (!viewProfile) { - return null; - } - const { - name, - dob, - mobileNo, - gender, - language, - profileImageUrl, - } = viewProfile; - return ( - <ViewProfileWrapper> - <div className="viewProfileTopBar"> - Contact Info - <span - onClick={() => { - if (toggleMobileProfile) { - toggleMobileProfile(false); - } - toggleViewProfile(false); - }} - > - <i className="ion-android-close" /> - </span> - </div> - <div className="viewProfileContent"> - <div className="viewProfileImage"> - <img alt="#" src={profileImageUrl} /> - <h1>{name}</h1> - </div> - <div className="viewProfileQuickInfo"> - <SingleInfo title="Name" value={name} /> - <SingleInfo title="Date of Birth" value={dob} /> - <SingleInfo title="Mobile No" value={mobileNo} /> - <SingleInfo title="Gender" value={gender} /> - <SingleInfo title="Language" value={language} /> - </div> - </div> - </ViewProfileWrapper> - ); -} diff --git a/src/components/Chat/ViewProfile.style.js b/src/components/Chat/ViewProfile.style.js deleted file mode 100644 index 4cf94b7..0000000 --- a/src/components/Chat/ViewProfile.style.js +++ /dev/null @@ -1,80 +0,0 @@ -import styled from 'styled-components'; -import { palette } from 'styled-theme'; - -const ViewProfileWrapper = styled.div` - background: #ffffff; - border: 1px solid ${palette('border', 0)}; - overflow: auto; - position: absolute; - right: 0; - width: 95%; - height: 100%; - - .viewProfileTopBar { - background: ${palette('grayscale', 4)}; - border-bottom: 1px solid ${palette('border', 0)}; - padding: 25px 20px 25px 30px; - display: flex; - justify-content: space-between; - line-height: 1; - - span { - margin: 0; - margin-left: 15px; - cursor: pointer; - i { - font-size: 14px; - font-weight: normal; - } - } - } - .viewProfileContent { - padding: 30px 30px 0; - } - .viewProfileImage { - display: flex; - flex-direction: column; - align-items: center; - } - h1 { - font-size: 21px; - text-align: center; - font-weight: 300; - margin-bottom: 30px; - margin-top: 10px; - color: #212121; - } - img { - height: 120px; - border-radius: 6px; - } - .viewProfileQuickInfo { - border-top: 1px solid ${palette('border', 2)}; - padding-top: 40px; - } - @media only screen and (min-width: 768px) { - width: 350px; - } -`; - -const SingleInfoWrapper = styled.div` - display: flex; - - .viewProfileTitle { - width: 35%; - font-size: 13px; - font-weight: 500; - font-weight: light; - color: ${palette('text', 0)}; - margin-bottom: 30px; - } - .viewProfileValue { - width: 65%; - text-align: right; - font-size: 13px; - color: ${palette('text', 1)}; - margin-bottom: 30px; - } -`; - -export { ViewProfileWrapper, SingleInfoWrapper }; diff --git a/src/components/Contacts/ContactCard.style.js b/src/components/Contacts/ContactCard.style.js deleted file mode 100644 index aba6d81..0000000 --- a/src/components/Contacts/ContactCard.style.js +++ /dev/null @@ -1,236 +0,0 @@ -import styled from 'styled-components'; -import { palette } from 'styled-theme'; -import { - transition, - borderRadius, - boxShadow, -} from '@imd/lib/helpers/style_utils'; -import WithDirection from '@imd/lib/helpers/rtl'; -const WDContactCardWrapper = styled.div` - width: 100%; - height: calc(100% - 145px); - padding: 0 35px; - display: -webkit-flex; - display: -ms-flex; - display: flex; - - @media only screen and (max-width: 600px) { - flex-direction: column; - } - - @media only screen and (max-width: 767px) { - padding: 0 20px; - } - - @media only screen and (min-width: 767px) and (max-width: 990px) { - flex-direction: column; - } - - .isoContactCardHead { - display: flex; - flex-direction: column; - align-items: center; - width: 120px; - flex-shrink: 0; - margin-right: ${props => - props['data-rtl'] === 'rtl' ? 'inherit' : '50px'}; - margin-left: ${props => (props['data-rtl'] === 'rtl' ? '50px' : 'inherit')}; - flex-shrink: 0; - - @media only screen and (max-width: 600px) { - margin-bottom: 20px; - } - - @media only screen and (min-width: 767px) and (max-width: 990px) { - margin-bottom: 20px; - } - - .isoPersonImage { - width: 120px; - height: 120px; - display: flex; - flex-shrink: 0; - align-items: center; - justify-content: center; - margin-bottom: 10px; - overflow: hidden; - ${borderRadius('5px')}; - - .avatar-uploader { - width: 100%; - height: 100%; - } - - img { - width: 100%; - height: 100%; - object-fit: cover; - } - } - - .isoPersonName { - font-size: 15px; - font-weight: 500; - color: ${palette('text', 0)}; - line-height: 1.5; - margin: 0; - } - } - - .isoContactInfoWrapper { - width: 100%; - display: flex; - flex-direction: column; - - @media only screen and (max-width: 767px) { - padding: 20px 0; - } - - .isoContactCardInfos { - width: 100%; - display: flex; - flex-shrink: 0; - align-items: baseline; - flex-direction: row; - margin-bottom: 15px; - - @media only screen and (max-width: 430px) { - flex-direction: column; - margin-bottom: 20px; - } - - .isoInfoLabel { - font-size: 14px; - font-weight: 500; - color: ${palette('text', 0)}; - line-height: 1.5; - margin: 0; - margin-right: ${props => - props['data-rtl'] === 'rtl' ? 'inherit' : '15px'}; - margin-left: ${props => - props['data-rtl'] === 'rtl' ? '15px' : 'inherit'}; - text-align: ${props => - props['data-rtl'] === 'rtl' ? 'right' : 'left'}; - min-width: 80px; - position: relative; - - @media only screen and (max-width: 430px) { - margin-bottom: 5px; - margin-right: ${props => - props['data-rtl'] === 'rtl' ? 'inherit' : '0'}; - margin-left: ${props => - props['data-rtl'] === 'rtl' ? '0' : 'inherit'}; - padding-right: ${props => - props['data-rtl'] === 'rtl' ? 'inherit' : '10px'}; - padding-left: ${props => - props['data-rtl'] === 'rtl' ? '10px' : 'inherit'}; - min-width: 0; - } - - &::after { - content: ':'; - position: absolute; - right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '0')}; - left: ${props => (props['data-rtl'] === 'rtl' ? '0' : 'inherit')}; - } - } - - .isoInfoDetails { - font-size: 14px; - font-weight: 400; - color: ${palette('text', 2)}; - line-height: 1.5; - margin: 0; - text-align: ${props => - props['data-rtl'] === 'rtl' ? 'right' : 'left'}; - } - - input { - font-size: 14px; - font-weight: 400; - color: ${palette('text', 2)}; - line-height: inherit; - height: 36px; - padding: 0 15px; - margin: 0; - border: 1px solid ${palette('border', 0)}; - outline: 0 !important; - overflow: hidden; - background-color: #ffffff; - ${boxShadow('none')}; - ${borderRadius('3px')}; - ${transition()}; - - &:focus { - border-color: ${palette('primary', 0)}; - ${boxShadow('0 0 0 2px rgba(68, 130, 255, 0.2)')}; - outline: 0; - } - - &:hover { - border-color: ${palette('primary', 0)}; - } - - &::-webkit-input-placeholder { - color: ${palette('grayscale', 0)}; - } - - &:-moz-placeholder { - color: ${palette('grayscale', 0)}; - } - - &::-moz-placeholder { - color: ${palette('grayscale', 0)}; - } - &:-ms-input-placeholder { - color: ${palette('grayscale', 0)}; - } - } - - textarea { - font-size: 14px; - font-weight: 400; - color: ${palette('text', 2)}; - line-height: 24px; - height: 210px; - padding: 10px 15px; - margin: 0; - border: 1px solid ${palette('border', 0)}; - outline: 0 !important; - background-color: #ffffff; - ${boxShadow('none')}; - ${borderRadius('3px')}; - ${transition()}; - - &:focus { - border-color: ${palette('primary', 0)}; - ${boxShadow('0 0 0 2px rgba(68, 130, 255, 0.2)')}; - outline: 0; - } - - &:hover { - border-color: ${palette('primary', 0)}; - } - - &::-webkit-input-placeholder { - color: ${palette('grayscale', 0)}; - } - - &:-moz-placeholder { - color: ${palette('grayscale', 0)}; - } - - &::-moz-placeholder { - color: ${palette('grayscale', 0)}; - } - &:-ms-input-placeholder { - color: ${palette('grayscale', 0)}; - } - } - } - } -`; - -const ContactCardWrapper = WithDirection(WDContactCardWrapper); - -export { ContactCardWrapper }; diff --git a/src/components/Contacts/ContactList.js b/src/components/Contacts/ContactList.js deleted file mode 100644 index 86ae607..0000000 --- a/src/components/Contacts/ContactList.js +++ /dev/null @@ -1,82 +0,0 @@ -import React, { Component } from 'react'; -import IntlMessages from '../utility/intlMessages'; -import { InputSearch } from '../uielements/input'; -import DeleteButton from './DeleteButton'; -import { PropTypes } from 'prop-types'; -import { ContactListWrapper } from './ContactList.style'; -import Scrollbar from '../utility/customScrollBar'; - -function filterContacts(contacts, search) { - search = search.toUpperCase(); - return search - ? contacts.filter(contact => contact.name.toUpperCase().includes(search)) - : contacts; -} - -export default class ContactList extends Component { - constructor(props) { - super(props); - this.singleContact = this.singleContact.bind(this); - this.onChange = this.onChange.bind(this); - this.state = { - search: '', - }; - } - singleContact(contact) { - const { seectedId, deleteContact, changeContact } = this.props; - const activeClass = seectedId === contact.id ? 'active' : ''; - const onChange = () => changeContact(contact.id); - return ( - <div - key={contact.id} - className={`${activeClass} isoSingleContact`} - onClick={onChange} - > - <div className="isoAvatar"> - {contact.avatar ? <img alt="#" src={contact.avatar} /> : ''} - </div> - <div className="isoContactName"> - <h3>{contact.name ? contact.name : 'No Name'}</h3> - </div> - <DeleteButton deleteContact={deleteContact} contact={contact} /> - </div> - ); - } - onChange(event) { - this.setState({ search: event.target.value }); - } - render() { - const { search } = this.state; - const contacts = filterContacts(this.props.contacts, search); - return ( - <ContactListWrapper className="isoContactListWrapper"> - <InputSearch - placeholder={this.context.intl.formatMessage({ - id: 'contactlist.searchContacts', - })} - value={search} - onChange={this.onChange} - className="isoSearchBar" - /> - {contacts && contacts.length > 0 ? ( - <div className="isoContactList"> - <Scrollbar - className="contactListScrollbar" - style={{ height: 'calc(100vh - 200px)' }} - > - {contacts.map(contact => this.singleContact(contact))} - </Scrollbar> - </div> - ) : ( - <span className="isoNoResultMsg"> - {<IntlMessages id="Component.contacts.noOption" />} - </span> - )} - </ContactListWrapper> - ); - } -} - -ContactList.contextTypes = { - intl: PropTypes.object.isRequired, -}; diff --git a/src/components/Contacts/ContactList.style.js b/src/components/Contacts/ContactList.style.js deleted file mode 100644 index 7fff2bd..0000000 --- a/src/components/Contacts/ContactList.style.js +++ /dev/null @@ -1,201 +0,0 @@ -import styled from 'styled-components'; -import { palette } from 'styled-theme'; -import { - transition, - borderRadius, - boxShadow, -} from '@imd/lib/helpers/style_utils'; -import WithDirection from '@imd/lib/helpers/rtl'; -const WDContactListWrapper = styled.div` - width: 100%; - display: flex; - flex-direction: column; - height: 100%; - - .isoNoResultMsg { - padding: 15px 20px; - text-align: center; - color: ${palette('secondary', 2)}; - font-weight: 500; - font-size: 14px; - } - - .isoSearchBar { - .ant-input { - width: 100%; - font-size: 14px; - font-weight: 400; - color: ${palette('text', 0)}; - line-height: inherit; - height: 69px; - padding: 0 20px; - padding-left: ${props => - props['data-rtl'] === 'rtl' ? 'inherit' : '35px'}; - padding-right: ${props => - props['data-rtl'] === 'rtl' ? '35px' : 'inherit'}; - border: 0; - border-bottom: 1px solid ${palette('border', 0)}; - outline: 0 !important; - overflow: hidden; - background-color: #ffffff; - ${boxShadow('none')}; - ${borderRadius()}; - ${transition()}; - - @media only screen and (max-width: 767px) { - height: 50px; - } - - &:hover, - &:focus { - border-color: ${palette('border', 0)} !important; - } - - &::-webkit-input-placeholder { - color: ${palette('grayscale', 0)}; - } - - &:-moz-placeholder { - color: ${palette('grayscale', 0)}; - } - - &::-moz-placeholder { - color: ${palette('grayscale', 0)}; - } - &:-ms-input-placeholder { - color: ${palette('grayscale', 0)}; - } - } - } - - .ant-input-suffix { - left: 10px; - right: auto; - color: ${palette('grayscale', 0)}; - } - - .isoContactList { - width: 100%; - display: flex; - flex-direction: column; - max-height: 100%; - overflow: hidden; - overflow-y: auto; - - .contactListScrollbar { - height: calc(100vh - 200px); - - @media only screen and (max-width: 767px) { - max-height: 60vh; - } - } - - .isoSingleContact { - width: 100%; - margin: 0; - display: flex; - align-items: center; - justify-content: flex-start; - flex-shrink: 0; - padding: 15px 20px; - padding-right: ${props => - props['data-rtl'] === 'rtl' ? '20px' : '35px'}; - padding-left: ${props => (props['data-rtl'] === 'rtl' ? '35px' : '20px')}; - border-bottom: 1px solid ${palette('border', 0)}; - text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')}; - position: relative; - cursor: pointer; - - &.active { - background-color: ${palette('secondary', 1)}; - } - - &:last-child { - border-bottom: 0; - } - - .isoAvatar { - width: 35px; - height: 35px; - display: flex; - align-items: center; - justify-content: center; - margin-right: ${props => - props['data-rtl'] === 'rtl' ? 'inherit' : '15px'}; - margin-left: ${props => - props['data-rtl'] === 'rtl' ? '15px' : 'inherit'}; - flex-shrink: 0; - overflow: hidden; - ${borderRadius('50%')}; - - img { - width: 100%; - height: 100%; - object-fit: cover; - } - } - - .isoContactName { - h3 { - font-size: 15px; - } - } - - .isoNoteText { - width: calc(100% - 60px); - margin-right: ${props => - props['data-rtl'] === 'rtl' ? 'inherit' : '20px'}; - margin-left: ${props => - props['data-rtl'] === 'rtl' ? '20px' : 'inherit'}; - padding: 20px 0; - cursor: pointer; - - h3 { - width: 100%; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - color: ${palette('secondary', 2)}; - font-weight: 500; - } - - .isoNoteCreatedDate { - font-size: 13px; - color: ${palette('grayscale', 0)}; - } - } - - .isoDeleteBtn { - width: 24px; - height: 24px; - background-color: transparent; - flex-shrink: 0; - position: absolute; - top: 20px; - right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '5px')}; - left: ${props => (props['data-rtl'] === 'rtl' ? '5px' : 'inherit')}; - padding: 0; - border: 0; - font-size: 14px; - color: ${palette('grayscale', 0)}; - ${transition()}; - - &:hover { - color: ${palette('primary', 0)}; - } - } - } - - .isoNotlistNotice { - font-size: 14px; - font-weight: 400; - color: ${palette('grayscale', 0)}; - line-height: inherit; - padding: 30px 0; - } - } -`; - -const ContactListWrapper = WithDirection(WDContactListWrapper); - -export { ContactListWrapper }; diff --git a/src/components/Contacts/DeleteButton.js b/src/components/Contacts/DeleteButton.js deleted file mode 100644 index 7073b7a..0000000 --- a/src/components/Contacts/DeleteButton.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import Popconfirm from '../Feedback/Popconfirm'; -import Button from '../uielements/button'; -import notification from '../Notification'; - -export default function({ contact, deleteContact }) { - let name = ''; - if (contact.firstName) { - name = `${contact.firstName} `; - } - if (contact.lastName) { - name = `${name}${contact.lastName}`; - } - if (!name) { - name = 'No Name'; - } - return ( - <Popconfirm - title={`Sure to delete ${name}?`} - okText="DELETE" - cancelText="No" - onConfirm={() => { - notification('error', `${name} Deleted`, ''); - deleteContact(contact.id); - }} - > - <Button icon="close" type="default" className="isoDeleteBtn" /> - </Popconfirm> - ); -} diff --git a/src/components/Contacts/EditView.js b/src/components/Contacts/EditView.js deleted file mode 100644 index 435f268..0000000 --- a/src/components/Contacts/EditView.js +++ /dev/null @@ -1,94 +0,0 @@ -import React from 'react'; -import { Icon } from 'antd'; -import Input, { Textarea } from '../uielements/input'; -import Upload from '../uielements/upload'; -import notification from '../Notification'; -import { ContactCardWrapper } from './ContactCard.style'; -import './upload.css'; - -function beforeUpload(file) { - const isJPG = file.type === 'image/jpeg'; - if (!isJPG) { - notification('error', 'You can only upload JPG file!', ''); - return false; - } - const isLt2M = file.size / 1024 / 1024 < 2; - if (!isLt2M) { - notification('error', 'Image must smaller than 2MB!', ''); - return false; - } - notification('success', 'Image uploaded successfully!', ''); - return true; -} -export default function({ contact, otherAttributes, editContact }) { - const name = contact.name ? contact.name : 'No Name'; - const extraInfos = []; - const names = [ - { value: 'firstName', title: 'First Name' }, - { value: 'lastName', title: 'Last Name' }, - ]; - [...names, ...otherAttributes].forEach(attribute => { - const value = contact[attribute.value]; - const handleEditContact = event => { - contact[attribute.value] = event.target.value; - let name = ''; - if (contact.firstName) { - name = `${contact.firstName} `; - } - if (contact.lastName) { - name = `${name}${contact.lastName}`; - } - contact.name = name; - editContact(contact); - }; - if (attribute.value === 'note') { - extraInfos.push( - <div className="isoContactCardInfos" key={attribute.value}> - <p className="isoInfoLabel">{`${attribute.title}`}</p> - <Textarea - placeholder={`${attribute.title}`} - value={value} - type="textarea" - rows={5} - onChange={handleEditContact} - /> - </div> - ); - } else { - extraInfos.push( - <div className="isoContactCardInfos" key={attribute.value}> - <p className="isoInfoLabel">{`${attribute.title}`}</p> - <Input - placeholder={`${attribute.title}`} - value={value} - onChange={handleEditContact} - /> - </div> - ); - } - }); - return ( - <ContactCardWrapper className="isoContactCard"> - <div className="isoContactCardHead"> - <div className="isoPersonImage"> - <Upload - className="avatar-uploader" - name="avatar" - showUploadList={false} - beforeUpload={beforeUpload} - action="" - > - {contact.avatar ? ( - <img src={contact.avatar} alt="" className="avatar" /> - ) : ( - '' - )} - <Icon type="plus" className="avatar-uploader-trigger" /> - </Upload> - </div> - <h1 className="isoPersonName">{name}</h1> - </div> - <div className="isoContactInfoWrapper">{extraInfos}</div> - </ContactCardWrapper> - ); -} diff --git a/src/components/Contacts/SingleView.js b/src/components/Contacts/SingleView.js deleted file mode 100644 index a569b61..0000000 --- a/src/components/Contacts/SingleView.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { ContactCardWrapper } from './ContactCard.style'; - -export default function({ contact, otherAttributes }) { - const name = contact.name ? contact.name : 'No Name'; - const extraInfos = []; - otherAttributes.forEach(attribute => { - const value = contact[attribute.value]; - if (value) { - extraInfos.push( - <div className="isoContactCardInfos" key={attribute.value}> - <p className="isoInfoLabel">{`${attribute.title}`}</p> - <p className="isoInfoDetails">{value}</p> - </div> - ); - } - }); - return ( - <ContactCardWrapper className="isoContactCard"> - <div className="isoContactCardHead"> - <div className="isoPersonImage"> - {contact.avatar ? <img alt="#" src={contact.avatar} /> : ''} - </div> - <h1 className="isoPersonName">{name}</h1> - </div> - <div className="isoContactInfoWrapper">{extraInfos}</div> - </ContactCardWrapper> - ); -} diff --git a/src/components/Contacts/upload.css b/src/components/Contacts/upload.css deleted file mode 100644 index 98aea69..0000000 --- a/src/components/Contacts/upload.css +++ /dev/null @@ -1,18 +0,0 @@ -.avatar-uploader, -.avatar-uploader-trigger, -.avatar { - width: 150px; - height: 150px; -} -.avatar-uploader { - display: block; - border: 1px dashed #d9d9d9; - border-radius: 6px; - cursor: pointer; -} -.avatar-uploader-trigger { - display: table-cell; - vertical-align: middle; - font-size: 28px; - color: #999; -} diff --git a/src/components/Feedback/Alert.js b/src/components/Feedback/Alert.js deleted file mode 100644 index 36f84d5..0000000 --- a/src/components/Feedback/Alert.js +++ /dev/null @@ -1,3 +0,0 @@ -import Alerts from './Alert.style'; - -export default Alerts; diff --git a/src/components/Feedback/Alert.style.js b/src/components/Feedback/Alert.style.js deleted file mode 100644 index 11b129b..0000000 --- a/src/components/Feedback/Alert.style.js +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; -import { Alert } from 'antd'; -import styled from 'styled-components'; -import { palette } from 'styled-theme'; -import WithDirection from '@imd/lib/helpers/rtl'; -const AntAlert = props => <Alert {...props} />; - -const Alerts = styled(AntAlert)` - && { - color: ${palette('text', 1)}; - font-size: 12px; - } - - &&.ant-alert-success { - .ant-alert-icon { - color: ${palette('success', 0)}; - } - } - - &&.ant-alert-error { - .ant-alert-icon { - color: ${palette('error', 0)}; - } - } - - &&.ant-alert-with-description { - padding: ${props => - props['data-rtl'] === 'rtl' - ? '16px 60px 16px 16px' - : '16px 16px 16px 60px'}; - .ant-alert-message { - font-weight: 500; - color: ${palette('text', 0)}; - } - - .ant-alert-description { - color: ${palette('text', 1)}; - font-size: 12px; - } - - .ant-alert-icon { - top: 20px; - left: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '20px')}; - right: ${props => (props['data-rtl'] === 'rtl' ? '20px' : 'inherit')}; - } - &&.ant-alert-no-icon { - padding: ${props => - props['data-rtl'] === 'rtl' - ? '12px 16px 12px 48px' - : '12px 48px 12px 16px'}; - } - .ant-alert-close-icon { - right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '16px')}; - left: ${props => (props['data-rtl'] === 'rtl' ? '16px' : 'inherit')}; - } - } - &&.ant-alert-no-icon { - padding: ${props => - props['data-rtl'] === 'rtl' - ? '12px 16px 12px 48px' - : '12px 48px 12px 16px'}; - } - .ant-alert-close-icon { - right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '16px')}; - left: ${props => (props['data-rtl'] === 'rtl' ? '16px' : 'inherit')}; - } -`; - -export default WithDirection(Alerts); diff --git a/src/components/Feedback/Message.js b/src/components/Feedback/Message.js deleted file mode 100644 index 55fa1de..0000000 --- a/src/components/Feedback/Message.js +++ /dev/null @@ -1,3 +0,0 @@ -import { message } from 'antd'; - -export default message; diff --git a/src/components/Feedback/Message.style.js b/src/components/Feedback/Message.style.js deleted file mode 100644 index 93de457..0000000 --- a/src/components/Feedback/Message.style.js +++ /dev/null @@ -1,33 +0,0 @@ -import styled from 'styled-components'; -import { palette } from 'styled-theme'; - -export default styled(message)` - &.ant-message { - .ant-message-notice-content { - padding: 12px 16px; - border-radius: 4px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); - background: #fff; - display: inline-block; - pointer-events: all; - - .ant-message-custom-content { - font-size: 13px; - color: ${palette('text', 1)}; - - .anticon { - margin-right: 8px; - font-size: 15px; - top: 1px; - position: relative; - } - - &.ant-message-error { - .anticon { - color: ${palette('error', 0)}; - } - } - } - } - } -`; diff --git a/src/components/Feedback/Modal.js b/src/components/Feedback/Modal.js deleted file mode 100644 index cb45482..0000000 --- a/src/components/Feedback/Modal.js +++ /dev/null @@ -1,3 +0,0 @@ -import { Modal } from 'antd'; - -export default Modal; diff --git a/src/components/Feedback/Notification.js b/src/components/Feedback/Notification.js deleted file mode 100644 index e750a8b..0000000 --- a/src/components/Feedback/Notification.js +++ /dev/null @@ -1,3 +0,0 @@ -import { notification } from 'antd'; - -export default notification; diff --git a/src/components/Feedback/Popconfirm.js b/src/components/Feedback/Popconfirm.js deleted file mode 100644 index b158706..0000000 --- a/src/components/Feedback/Popconfirm.js +++ /dev/null @@ -1,3 +0,0 @@ -import { Popconfirm } from 'antd'; - -export default Popconfirm; diff --git a/src/components/Invoice/Address.js b/src/components/Invoice/Address.js deleted file mode 100644 index b56ed05..0000000 --- a/src/components/Invoice/Address.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -export default ({ companyName, companyAddress }) => ( - <div> - <p className="NameEmail"> - <span className="Name">{companyName}</span> - <span className="Email" style={{ whiteSpace: 'pre-line' }}> - {companyAddress} - </span> - </p> - </div> -); diff --git a/src/components/Invoice/InvoiceTable.js b/src/components/Invoice/InvoiceTable.js deleted file mode 100644 index 44eacb2..0000000 --- a/src/components/Invoice/InvoiceTable.js +++ /dev/null @@ -1,146 +0,0 @@ -import React from 'react'; -import Input from '../uielements/input'; -import Button from '../uielements/button'; -import { stringToPosetiveInt } from '@imd/lib/helpers/utility'; -import Table from './TableStyle'; - -const viewColumns = [ - { - title: '#', - dataIndex: 'key', - width: '10%', - rowKey: 'key', - }, - { - title: 'Item Name', - dataIndex: 'itemName', - width: '40%', - rowKey: 'itemName', - }, - { - title: 'Unit Costs', - dataIndex: 'costs', - width: '15%', - rowKey: 'costs', - }, - { - title: 'Unit', - dataIndex: 'qty', - width: '15%', - rowKey: 'qty', - }, - { - title: 'Price', - dataIndex: 'price', - width: '20%', - rowKey: 'price', - }, -]; - -const ViewTable = ({ invoiceList }) => ( - <Table columns={viewColumns} dataSource={invoiceList} pagination={false} /> -); - -const EditTable = ({ editableInvoice, editInvoice, updateValues }) => { - const { invoiceList } = editableInvoice; - const editColumns = [ - { - title: '#', - dataIndex: 'key', - rowKey: 'key', - width: '10%', - render: (text, singleInvoice) => <span>{singleInvoice.key}</span>, - }, - { - title: 'Item Name', - dataIndex: 'itemName', - rowKey: 'itemName', - width: '40%', - render: (text, singleInvoice) => ( - <Input - placeholder="Item Name" - value={singleInvoice.itemName} - onChange={event => { - editableInvoice.invoiceList[singleInvoice.key - 1].itemName = - event.target.value; - editInvoice(editableInvoice); - }} - /> - ), - }, - { - title: 'Unit Costs', - dataIndex: 'costs', - rowKey: 'costs', - width: '20%', - render: (text, singleInvoice) => ( - <Input - placeholder="Unit Cost" - value={singleInvoice.costs} - onChange={event => { - editableInvoice.invoiceList[ - singleInvoice.key - 1 - ].costs = stringToPosetiveInt( - event.target.value, - singleInvoice.costs - ); - editInvoice(updateValues(editableInvoice)); - }} - /> - ), - }, - { - title: 'Unit', - dataIndex: 'qty', - rowKey: 'qty', - width: '10%', - render: (text, singleInvoice) => ( - <Input - placeholder="Units" - value={singleInvoice.qty} - onChange={event => { - editableInvoice.invoiceList[ - singleInvoice.key - 1 - ].qty = stringToPosetiveInt(event.target.value, singleInvoice.qty); - editInvoice(updateValues(editableInvoice)); - }} - /> - ), - }, - { - title: 'Price', - dataIndex: 'price', - rowKey: 'price', - width: '10%', - }, - { - title: '', - dataIndex: 'delete', - rowKey: 'delete', - width: '10%', - render: (text, singleInvoice) => - invoiceList.length === 1 ? ( - '' - ) : ( - <Button - onClick={() => { - const newInvoiceList = []; - invoiceList.forEach((invoice, i) => { - if (i !== singleInvoice.key - 1) { - newInvoiceList.push(invoice); - } - }); - editableInvoice.invoiceList = newInvoiceList; - editInvoice(updateValues(editableInvoice)); - }} - > - Delete - </Button> - ), - }, - ]; - return ( - <Table columns={editColumns} dataSource={invoiceList} pagination={false} /> - ); -}; -export { ViewTable, EditTable }; diff --git a/src/components/Invoice/OrderStatus.js b/src/components/Invoice/OrderStatus.js deleted file mode 100644 index 4e723d5..0000000 --- a/src/components/Invoice/OrderStatus.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { - DropdownButtons, - DropdownMenu, - MenuItem, -} from '../uielements/dropdown'; - -export default ({ value, onChange, orderStatusOptions }) => ( - <DropdownButtons - overlay={ - <DropdownMenu onClick={val => onChange(orderStatusOptions[val.key])}> - {orderStatusOptions.map((option, index) => ( - <MenuItem key={index}>{option}</MenuItem> - ))} - </DropdownMenu> - } - > - {value} - </DropdownButtons> -); diff --git a/src/components/Invoice/TableStyle.js b/src/components/Invoice/TableStyle.js deleted file mode 100644 index 66d2ba3..0000000 --- a/src/components/Invoice/TableStyle.js +++ /dev/null @@ -1,61 +0,0 @@ -import styled from 'styled-components'; -import { palette } from 'styled-theme'; -import Tables from '../uielements/table'; -import { transition } from '@imd/lib/helpers/style_utils'; - -const Table = styled(Tables)` - overflow: hidden; - overflow-x: auto; - background-color: #ffffff; - - .ant-table-thead > tr > th { - color: ${palette('secondary', 2)}; - font-size: 13px; - background-color: ${palette('secondary', 1)}; - border-bottom: 0; - - &.ant-table-column-sort { - background: ${palette('secondary', 1)}; - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 4px 0 0' : '0 0 0 4px'}; - } - } - - .ant-table-thead > tr > th, - .ant-table-tbody > tr > td { - padding: 16px 15px; - white-space: nowrap; - text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')}; - - p { - margin-bottom: 0; - } - - &:first-child { - text-align: center; - } - } - - .ant-table-tbody > tr > td { - font-size: 12px; - color: ${palette('text', 3)}; - border-bottom: 1px solid ${palette('border', 0)}; - - a { - color: ${palette('primary', 0)}; - ${transition()}; - - &:hover { - color: ${palette('primary', 4)}; - } - } - } - - .ant-table-thead > tr.ant-table-row-hover > td, - .ant-table-tbody > tr.ant-table-row-hover > td, - .ant-table-thead > tr:hover > td, - .ant-table-tbody > tr:hover > td { - background-color: transparent; - } -`; -export default Table; diff --git a/src/components/Mail/ComposeAutoComplete.js b/src/components/Mail/ComposeAutoComplete.js deleted file mode 100644 index 0090153..0000000 --- a/src/components/Mail/ComposeAutoComplete.js +++ /dev/null @@ -1,74 +0,0 @@ -import React from 'react'; -import { WithContext as ReactTags } from 'react-tag-input'; -import AutoComplete from './ComposeAutoComplete.style'; - -function createSuggestions(item) { - if (item && item.length > 0) { - return item.map(element => ({ - id: `${element.id}`, - text: `${element.name}<${element.email}>`, - })); - } - return []; -} - -const KeyCodes = { - comma: 188, - enter: 13, -}; - -const delimiters = [KeyCodes.comma, KeyCodes.enter]; - -export default class App extends React.Component { - constructor(props) { - super(props); - - this.state = { - tags: [], - suggestions: createSuggestions(props.allMails) || [], - }; - this.handleDelete = this.handleDelete.bind(this); - this.handleAddition = this.handleAddition.bind(this); - this.handleDrag = this.handleDrag.bind(this); - } - handleDelete(i) { - const { tags } = this.state; - this.setState({ - tags: tags.filter((tag, index) => index !== i), - }); - } - - handleAddition(tag) { - this.setState(state => ({ tags: [...state.tags, tag] })); - } - - handleDrag(tag, currPos, newPos) { - const tags = [...this.state.tags]; - const newTags = tags.slice(); - - newTags.splice(currPos, 1); - newTags.splice(newPos, 0, tag); - - // re-render - this.setState({ tags: newTags }); - } - - render() { - const { tags, suggestions } = this.state; - return ( - <AutoComplete> - <ReactTags - tags={tags} - suggestions={suggestions} - handleDelete={this.handleDelete} - handleAddition={this.handleAddition} - handleDrag={this.handleDrag} - delimiters={delimiters} - placeholder={this.props.placeholder} - minQueryLength={1} - autofocus={this.props.autofocus || false} - /> - </AutoComplete> - ); - } -} diff --git a/src/components/Mail/ComposeAutoComplete.style.js b/src/components/Mail/ComposeAutoComplete.style.js deleted file mode 100644 index 3158d30..0000000 --- a/src/components/Mail/ComposeAutoComplete.style.js +++ /dev/null @@ -1,157 +0,0 @@ -import styled from 'styled-components'; -import { palette } from 'styled-theme'; -import { - transition, - borderRadius, - boxShadow, -} from '@imd/lib/helpers/style_utils'; - -const ComposeAutoCompleteStyleWrapper = styled.div` - .ReactTags__ { - &tags { - min-height: 36px; - width: 100%; - position: relative; - margin-bottom: 10px; - padding: 0 15px; - border: 1px solid ${palette('border', 0)}; - ${borderRadius('3px')}; - } - - &selected { - width: 100%; - padding: 4px 0; - } - - &tag { - font-size: 13px; - font-weight: 400; - line-height: 1; - color: ${palette('text', 0)}; - display: inline-flex; - align-items: center; - padding: 0 7px 0 10px; - margin: 2px 5px 2px 0; - margin-right: ${props => (props['data-rtl'] === 'rtl' ? '0' : '5px')}; - margin-left: ${props => (props['data-rtl'] === 'rtl' ? '5px' : '0')}; - text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')}; - height: 22px; - word-break: break-word; - background-color: ${palette('grayscale', 10)}; - border: 1px solid ${palette('border', 3)}; - ${borderRadius('3px')}; - } - - &remove { - background: none; - background-color: transparent; - border: 0; - outline: 0; - color: ${palette('grayscale', 0)}; - padding: 0; - margin-left: 8px; - margin-right: ${props => (props['data-rtl'] === 'rtl' ? '8px' : '0')}; - margin-left: ${props => (props['data-rtl'] === 'rtl' ? '0' : '8px')}; - line-height: 1; - font-size: 14px; - font-weight: bold; - cursor: pointer; - ${transition()}; - - &:hover { - color: ${palette('text', 3)}; - } - } - - &tagInput { - width: 100%; - display: inline; - - &Field { - font-size: 14px; - font-weight: 400; - color: ${palette('text', 0)}; - line-height: inherit; - text-align: ${props => - props['data-rtl'] === 'rtl' ? 'right' : 'left'}; - height: 22px; - min-width: 240px; - padding: 0; - border: 0; - outline: 0 !important; - overflow: hidden; - background-color: transparent; - - &::-webkit-input-placeholder { - text-align: ${props => - props['data-rtl'] === 'rtl' ? 'right' : 'left'}; - color: ${palette('grayscale', 0)}; - } - - &:-moz-placeholder { - text-align: ${props => - props['data-rtl'] === 'rtl' ? 'right' : 'left'}; - color: ${palette('grayscale', 0)}; - } - - &::-moz-placeholder { - text-align: ${props => - props['data-rtl'] === 'rtl' ? 'right' : 'left'}; - color: ${palette('grayscale', 0)}; - } - &:-ms-input-placeholder { - text-align: ${props => - props['data-rtl'] === 'rtl' ? 'right' : 'left'}; - color: ${palette('grayscale', 0)}; - } - } - } - - &suggestions { - z-index: 999; - display: -webkit-flex; - display: -ms-flex; - display: flex; - flex-direction: column; - background-color: #fff; - margin: 3px 0 0; - overflow: hidden; - word-break: break-word; - border: 1px solid rgba(0, 0, 0, 0.2); - text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')}; - position: absolute; - right: ${props => (props['data-rtl'] === 'rtl' ? '0' : 'auto')}; - left: ${props => (props['data-rtl'] === 'rtl' ? 'auto' : '0')}; - top: 100%; - ${borderRadius()}; - ${boxShadow('0 2px 4px rgba(0,0,0,0.2)')}; - - li { - font-size: 14px; - font-weight: 400; - color: ${palette('text', 0)}; - border-bottom: ${palette('border', 0)}; - line-height: 1.5; - width: 100%; - padding: 10px 15px; - margin: 0; - cursor: pointer; - ${transition()}; - - &:hover { - background-color: ${palette('grayscale', 3)}; - } - - &:last-of-type { - border-bottom: 0; - } - } - } - - &activeSuggestion { - background-color: ${palette('grayscale', 3)}; - } - } -`; - -export default ComposeAutoCompleteStyleWrapper; diff --git a/src/components/Mail/ComposeMail.js b/src/components/Mail/ComposeMail.js deleted file mode 100644 index 207fae8..0000000 --- a/src/components/Mail/ComposeMail.js +++ /dev/null @@ -1,90 +0,0 @@ -import React from 'react'; -import Button from '../uielements/button'; -import Input from '../uielements/input'; -import ComposeAutoComplete from './ComposeAutoComplete'; -import notification from '../Notification'; -import IntlMessages from '../utility/intlMessages'; -import ComposeForm from './ComposeMail.style'; -import Editor from '../uielements/editor'; - -function uploadCallback(file) { - return new Promise((resolve, reject) => { - const xhr = new XMLHttpRequest(); - xhr.open('POST', 'https://api.imgur.com/3/image'); - xhr.setRequestHeader('Authorization', 'Client-ID 8d26ccd12712fca'); - const data = new FormData(); - data.append('image', file); - xhr.send(data); - xhr.addEventListener('load', () => { - const response = JSON.parse(xhr.responseText); - resolve(response); - }); - xhr.addEventListener('error', () => { - const error = JSON.parse(xhr.responseText); - reject(error); - }); - }); -} -export default function ComposeMail(props) { - const [state, setState] = React.useState({ - editorState: null, - loading: false, - iconLoading: false, - }); - const onEditorStateChange = editorState => { - setState({ ...state, editorState }); - }; - const ComposeAutoCompleteTO = { - allMails: props.allMails, - updateData: () => {}, - placeholder: 'To', - autofocus: true, - }; - const ComposeAutoCompleteCC = { - allMails: props.allMails, - updateData: () => {}, - placeholder: 'CC', - }; - const editorOption = { - style: { width: '90%', height: '70%' }, - editorState: state.editorState, - toolbarClassName: 'home-toolbar', - wrapperClassName: 'home-wrapper', - editorClassName: 'home-editor', - onEditorStateChange: onEditorStateChange, - uploadCallback: uploadCallback, - toolbar: { image: { uploadCallback: uploadCallback } }, - }; - - return ( - <ComposeForm className="isoComposeMailWrapper"> - <ComposeAutoComplete {...ComposeAutoCompleteTO} /> - <ComposeAutoComplete {...ComposeAutoCompleteCC} /> - <Input placeholder="Subject" className="isoInputBox" /> - <Editor {...editorOption} /> - <div className="isoComposeMailBtnWrapper"> - {props.mobileView || props.tabView ? ( - <Button - type="primary" - onClick={() => { - props.changeComposeMail(false); - }} - className="isoCancelMailBtn" - > - <IntlMessages id="email.cancel" /> - </Button> - ) : ( - '' - )} - - <Button - type="primary" - onClick={e => notification('success', `Mail has been sent`, '')} - className="isoSendMailBtn" - > - <IntlMessages id="email.send" /> - </Button> - </div> - </ComposeForm> - ); -} diff --git a/src/components/Mail/ComposeMail.style.js b/src/components/Mail/ComposeMail.style.js deleted file mode 100644 index 716bced..0000000 --- a/src/components/Mail/ComposeMail.style.js +++ /dev/null @@ -1,83 +0,0 @@ -import styled from 'styled-components'; -import { palette } from 'styled-theme'; -import { - transition, - borderRadius, - boxShadow, -} from '@imd/lib/helpers/style_utils'; - -const ComposeForm = styled.div` - padding: 35px; - text-align: left; - height: 100%; - width: 100%; - overflow-y: auto; - - .isoInputBox { - font-size: 14px; - font-weight: 400; - color: ${palette('text', 0)}; - line-height: inherit; - height: 36px; - padding: 0 15px; - margin-bottom: 10px; - border: 1px solid ${palette('border', 0)}; - outline: 0 !important; - overflow: hidden; - background-color: #ffffff; - ${borderRadius('3px')}; - ${boxShadow()}; - ${transition()}; - - &:focus, - &:hover { - border-color: ${palette('border', 0)}; - box-shadow: none; - } - - &::-webkit-input-placeholder { - color: ${palette('grayscale', 0)}; - } - - &:-moz-placeholder { - color: ${palette('grayscale', 0)}; - } - - &::-moz-placeholder { - color: ${palette('grayscale', 0)}; - } - &:-ms-input-placeholder { - color: ${palette('grayscale', 0)}; - } - } - - .isoComposeMailBtnWrapper { - margin-top: 10px; - display: flex; - align-items: center; - justify-content: space-between; - - .isoSendMailBtn, - .isoCancelMailBtn { - height: 36px; - padding: 0 30px; - background-color: ${palette('primary', 0)}; - border: 0; - ${transition()}; - - &:hover { - background-color: ${palette('primary', 1)}; - } - } - - .isoCancelMailBtn { - background-color: ${palette('error', 0)}; - - &:hover { - background-color: ${palette('error', 1)}; - } - } - } -`; - -export default ComposeForm; diff --git a/src/components/Mail/MailBucket.style.js b/src/components/Mail/MailBucket.style.js deleted file mode 100644 index 6746cf4..0000000 --- a/src/components/Mail/MailBucket.style.js +++ /dev/null @@ -1,58 +0,0 @@ -import styled from 'styled-components'; -import { palette } from 'styled-theme'; -import { transition } from '@imd/lib/helpers/style_utils'; -import WithDirection from '@imd/lib/helpers/rtl'; - -const MailBucket = styled.ul` - padding: 35px 0 0; - - .isoSingleBucket { - width: 100%; - display: flex; - padding: 0 30px; - margin-bottom: 15px; - align-items: center; - cursor: pointer; - justify-content: space-between; - - span { - font-size: 14px; - font-weight: 400; - color: ${palette('secondary', 2)}; - cursor: pointer; - text-transform: capitalize; - line-height: 1.1; - ${transition()}; - } - - .isoMailBadge { - font-size: 12px; - font-weight: 500; - color: ${palette('secondary', 2)}; - line-height: normal; - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 auto 0 0' : '0 0 0 auto'}; - display: -webkit-inline-flex; - display: -ms-inline-flex; - display: inline-flex; - align-items: center; - justify-content: center; - text-align: center; - } - - &.active { - span:not(.isoMailBadge) { - font-weight: 500; - color: ${palette('primary', 0)}; - } - } - - span:not(.isoMailBadge) { - &:hover { - color: ${palette('primary', 0)}; - } - } - } -`; - -export default WithDirection(MailBucket); diff --git a/src/components/Mail/MailBuckets.js b/src/components/Mail/MailBuckets.js deleted file mode 100644 index 808b887..0000000 --- a/src/components/Mail/MailBuckets.js +++ /dev/null @@ -1,62 +0,0 @@ -import React from 'react'; -import MailBucket from './MailBucket.style'; - -const buckets = [ - 'Inbox', - 'Sent', - 'Drafts', - 'Trash', - 'Important', - 'spam', - 'Starred', -]; - -function getUnread(mails) { - const unread = {}; - mails.forEach(mail => { - if (!unread[mail.bucket]) { - unread[mail.bucket] = 0; - } - if (!mail.read) { - unread[mail.bucket] += 1; - } - }); - return unread; -} - -export default function mailbuckets( - mails, - filterAction, - filterAttr, - onDrawerClose -) { - const unread = getUnread(mails); - const renderSinglebucket = (bucket, key) => { - const onClick = () => { - filterAction({ bucket }); - if (onDrawerClose) { - onDrawerClose(); - } - }; - const selectedBucket = bucket === filterAttr.bucket; - const activeClass = selectedBucket ? 'active' : ''; - return ( - <li - key={`bucket${key}`} - onClick={onClick} - className={`isoSingleBucket ${activeClass}`} - > - <span>{bucket}</span> - <span className="isoMailBadge"> - {unread[bucket] ? unread[bucket] : ''} - </span> - </li> - ); - }; - return ( - <MailBucket className="isoBucketList"> - {buckets.map((bucket, index) => renderSinglebucket(bucket, index))} - </MailBucket> - ); -} -export { buckets }; diff --git a/src/components/Mail/MailComposeBtn.js b/src/components/Mail/MailComposeBtn.js deleted file mode 100644 index a655b75..0000000 --- a/src/components/Mail/MailComposeBtn.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import IntlMessages from '../utility/intlMessages'; -import MailComposeBtnWrapper from './MailComposeBtn.style'; - -export default function(props) { - return ( - <MailComposeBtnWrapper className="isoComposeBtnWrapper"> - <button - type="button" - onClick={event => { - props.changeComposeMail(true); - if (props.onDrawerClose) { - props.onDrawerClose(); - } - }} - > - <IntlMessages id="email.compose" /> - </button> - </MailComposeBtnWrapper> - ); -} diff --git a/src/components/Mail/MailComposeBtn.style.js b/src/components/Mail/MailComposeBtn.style.js deleted file mode 100644 index 5896fc0..0000000 --- a/src/components/Mail/MailComposeBtn.style.js +++ /dev/null @@ -1,38 +0,0 @@ -import styled from 'styled-components'; -import { palette } from 'styled-theme'; -import { borderRadius, transition } from '@imd/lib/helpers/style_utils'; - -const MailComposeBtnWrapper = styled.div` - width: 100%; - padding: 0px 30px; - height: 80px; - display: flex; - align-items: center; - flex-shrink: 0; - background-color: ${palette('grayscale', 6)}; - border-bottom: 1px solid ${palette('border', 4)}; - - button { - font-size: 14px; - font-weight: 400; - color: #ffffff; - background-color: ${palette('primary', 0)}; - width: 100%; - height: 40px; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - border: 0; - outline: 0; - cursor: pointer; - ${borderRadius('3px')}; - ${transition()}; - - &:hover { - background-color: ${palette('primary', 1)}; - } - } -`; - -export default MailComposeBtnWrapper; diff --git a/src/components/Mail/MailList.js b/src/components/Mail/MailList.js deleted file mode 100644 index 8ac0a90..0000000 --- a/src/components/Mail/MailList.js +++ /dev/null @@ -1,70 +0,0 @@ -import React from 'react'; -import { timeDifference } from '@imd/lib/helpers/utility'; -import { tags, tagColor } from './MailTags.js'; -import MailListWrapper from './MailList.style'; -import { direction } from '@imd/lib/helpers/rtl'; - -export default function mailList( - mails, - selectMail, - selectedMail, - toggleListVisible -) { - const renderSingleMail = (mail, key) => { - const onClick = () => { - selectMail(mail.id); - if (toggleListVisible) { - toggleListVisible(); - } - }; - const isSelected = selectedMail === mail.id; - const recpName = mail.name; - const signature = { - splitLet: recpName - .match(/\b(\w)/g) - .join('') - .split('', 2), - }; - const activeClass = isSelected ? 'activeMail' : ''; - const unreadClass = !mail.read ? 'unreadMail' : ''; - const tagOption = mail.tags - ? tagColor[tags.findIndex(tags => tags === mail.tags)] - : 'transparent'; - return ( - <div - key={`list${key}`} - onClick={onClick} - className={`${activeClass} ${unreadClass} isoMailList`} - > - <span - className="isoLabelIndicator" - style={ - direction === 'rtl' - ? { borderRightColor: tagOption } - : { borderTopColor: tagOption } - } - /> - <div className="isoRecipentsImg"> - {mail.img ? ( - <img alt="#" src={mail.img} /> - ) : ( - <span>{signature.splitLet}</span> - )} - </div> - - <div className="isoMailInfo"> - <div className="infoHead"> - <p className="isoRecipents">{mail.name}</p> - <span className="isoReceiveDate">{timeDifference(mail.date)}</span> - </div> - <p className="isoSubject">{mail.subject}</p> - </div> - </div> - ); - }; - return ( - <MailListWrapper className="isoMailListWrapper"> - {mails.map((mail, index) => renderSingleMail(mail, index))} - </MailListWrapper> - ); -} diff --git a/src/components/Mail/MailList.style.js b/src/components/Mail/MailList.style.js deleted file mode 100644 index 7187919..0000000 --- a/src/components/Mail/MailList.style.js +++ /dev/null @@ -1,130 +0,0 @@ -import styled from 'styled-components'; -import { palette } from 'styled-theme'; -import { borderRadius, transition } from '@imd/lib/helpers/style_utils'; -import WithDirection from '@imd/lib/helpers/rtl'; - -const MailListWrapper = styled.div` - width: 100%; - display: flex; - flex-direction: column; - height: 100%; - overflow-y: auto; - - .isoMailList { - width: 100%; - padding: 30px; - display: flex; - flex-shrink: 0; - border-bottom: 1px solid ${palette('border', 0)}; - overflow: hidden; - position: relative; - text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')}; - cursor: pointer; - ${transition()}; - - .isoLabelIndicator { - width: 0; - height: 0; - border-style: solid; - border-width: ${props => - props['data-rtl'] === 'rtl' ? '0 15px 15px 0;' : '15px 15px 0 0'}; - border-color: transparent transparent transparent transparent; - position: absolute; - top: 0; - left: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '0')}; - right: ${props => (props['data-rtl'] === 'rtl' ? '0' : 'inherit')}; - } - - &:last-child { - border-bottom: 0; - } - - .isoRecipentsImg { - width: 48px; - height: 48px; - display: -webkit-inline-flex; - display: -ms-inline-flex; - display: inline-flex; - align-items: center; - justify-content: center; - overflow: hidden; - flex-shrink: 0; - ${borderRadius('50%')}; - - img { - width: 100%; - height: 100%; - object-fit: cover; - } - - span { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - background-color: ${palette('color', 4)}; - font-size: 16px; - font-weight: 300; - color: #fff; - letter-spacing: 1px; - } - } - - .isoMailInfo { - width: 100%; - padding: ${props => - props['data-rtl'] === 'rtl' ? '0 20px 0 0' : '0 0 0 20px'}; - - .infoHead { - width: 100%; - display: flex; - align-items: baseline; - justify-content: space-between; - margin-bottom: 3px; - - .isoRecipents { - font-size: 13px; - font-weight: 400; - color: ${palette('secondary', 2)}; - } - - .isoReceiveDate { - font-size: 11px; - font-weight: 400; - color: ${palette('secondary', 2)}; - flex-shrink: 0; - } - } - - .isoSubject { - font-size: 14px; - font-weight: 500; - color: ${palette('secondary', 0)}; - margin: 0; - } - } - - &.unreadMail { - background-color: ${palette('secondary', 8)}; - } - - &:hover { - background-color: ${palette('secondary', 8)}; - } - - &.activeMail { - background-color: ${palette('secondary', 9)}; - } - } - - .isoDescription { - white-space: nowrap; - text-overflow: ellipsis; - padding: 0 30px; - width: 100%; - overflow: hidden; - } -`; - -export default WithDirection(MailListWrapper); diff --git a/src/components/Mail/MailPagination.js b/src/components/Mail/MailPagination.js deleted file mode 100644 index 89c84e1..0000000 --- a/src/components/Mail/MailPagination.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import MailPagination from './MailPagination.style'; -import { direction } from '@imd/lib/helpers/rtl'; - -export default function() { - return ( - <MailPagination className="isoMailPagination"> - <button type="button" className="prevPage"> - <i - className={ - direction === 'rtl' ? 'ion-ios-arrow-forward' : 'ion-ios-arrow-back' - } - /> - </button> - - <button type="button" className="nextPage"> - <i - className={ - direction === 'rtl' ? 'ion-ios-arrow-back' : 'ion-ios-arrow-forward' - } - /> - </button> - </MailPagination> - ); -} diff --git a/src/components/Mail/MailPagination.style.js b/src/components/Mail/MailPagination.style.js deleted file mode 100644 index 4c6a07f..0000000 --- a/src/components/Mail/MailPagination.style.js +++ /dev/null @@ -1,50 +0,0 @@ -import styled from 'styled-components'; -import { palette } from 'styled-theme'; -import { transition } from '@imd/lib/helpers/style_utils'; -import WithDirection from '@imd/lib/helpers/rtl'; -const MailPagination = styled.div` - display: -webkit-flex; - display: -ms-flex; - display: flex; - align-items: center; - - button { - font-size: 16px; - color: ${palette('secondary', 0)}; - width: 35px; - height: 35px; - padding: 0; - display: flex; - align-items: center; - justify-content: center; - background-color: #ffffff; - outline: 0; - border: 1px solid ${palette('border', 0)}; - cursor: pointer; - ${transition()}; - - i { - font-size: 18px; - width: 100%; - height: 100%; - color: ${palette('secondary', 0)}; - ${transition()}; - } - - &.nextPage { - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 -1px 0 0' : '0 0 0 -1px'}; - } - - &:hover { - color: ${palette('primary', 0)}; - background-color: darken(#ffffff, 1%); - - i { - color: ${palette('primary', 0)}; - } - } - } -`; - -export default WithDirection(MailPagination); diff --git a/src/components/Mail/MailTags.js b/src/components/Mail/MailTags.js deleted file mode 100644 index ef4fa7c..0000000 --- a/src/components/Mail/MailTags.js +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import MailTagsList from './MailTags.style'; -const tags = [ - 'Friend', - 'Family', - 'Colleague', - 'Teachers', - 'Students', - 'ClassMates', -]; -const tagColor = [ - '#CD3131', - '#74B49B', - '#0962EA', - '#141829', - '#FFCD38', - '#61105E', -]; - -function gettags(mails, filterAttr) { - const tags = {}; - mails.forEach(mail => { - if (mail.tags && mail.bucket === filterAttr.bucket) { - mail.tags.split(' ').forEach(tag => (tags[tag] = 1)); - } - }); - return tags; -} - -export default function mailtags( - mails, - filterAction, - filterAttr, - onDrawerClose -) { - const Tags = gettags(mails, filterAttr); - const renderSingleTag = (tag, key) => { - const onClick = () => { - filterAction({ tag }); - if (onDrawerClose) { - onDrawerClose(); - } - }; - const selectedTag = tag === filterAttr.tag; - const activeClass = selectedTag ? 'active' : ''; - const background = tagColor[tags.findIndex(tags => tags === tag)]; - return ( - <li - key={`tag${key}`} - onClick={onClick} - className={`isoMailTag ${activeClass}`} - > - <span className="isoLabelIndicatorColor" style={{ background }} /> - <span>{tag}</span> - </li> - ); - }; - return ( - <MailTagsList className="isoMailTagList"> - <p className="isoSectionLabel">Label</p> - {Object.keys(Tags).map((tag, index) => renderSingleTag(tag, index))} - </MailTagsList> - ); -} -export { tags, tagColor }; diff --git a/src/components/Mail/MailTags.style.js b/src/components/Mail/MailTags.style.js deleted file mode 100644 index c87653b..0000000 --- a/src/components/Mail/MailTags.style.js +++ /dev/null @@ -1,62 +0,0 @@ -import styled from 'styled-components'; -import { palette } from 'styled-theme'; -import { borderRadius, transition } from '@imd/lib/helpers/style_utils'; -import WithDirection from '@imd/lib/helpers/rtl'; -const MailTagsList = styled.ul` - padding: 30px 0; - text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')}; - - .isoSectionLabel { - font-size: 16px; - font-weight: 500; - color: ${palette('secondary', 2)}; - line-height: 1.1; - margin-bottom: 20px; - padding: 15px 30px; - background-color: ${palette('grayscale', 6)}; - } - - .isoMailTag { - width: 100%; - display: flex; - margin-bottom: 15px; - padding: 0 30px; - align-items: center; - cursor: pointer; - - .isoLabelIndicatorColor { - width: 10px; - height: 10px; - display: flex; - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 5px 0 0' : '0 0 0 5px'}; - ${borderRadius('50%')}; - } - - span { - font-size: 14px; - font-weight: 400; - color: ${palette('secondary', 2)}; - cursor: pointer; - line-height: 1.1; - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 20px 0 0' : '0 0 0 20px'}; - ${transition()}; - } - - &.active { - span { - font-weight: 500; - color: ${palette('primary', 0)}; - } - } - - &:hover { - span { - color: ${palette('primary', 0)}; - } - } - } -`; - -export default WithDirection(MailTagsList); diff --git a/src/components/Mail/SingleMail.js b/src/components/Mail/SingleMail.js deleted file mode 100644 index 31aef21..0000000 --- a/src/components/Mail/SingleMail.js +++ /dev/null @@ -1,92 +0,0 @@ -import React from 'react'; -import ComposeMail from './ComposeMail'; -import { timeDifference } from '@imd/lib/helpers/utility'; -import MailAction from './SingleMailActions'; -import { tags, tagColor } from './MailTags.js'; -import { - SingleMailContents, - SingleMailHeader, - SingleMailInfo, - SingleMailBody, - SingleMailReply, -} from './SingleMail.style'; - -export default function singleMail( - allMail, - filterMails, - index, - replyMail, - changeReplyMail, - selectMail, - toggleListVisible -) { - const mail = allMail[index]; - const recpName = mail.name; - const signature = { - splitLet: recpName - .match(/\b(\w)/g) - .join('') - .split('', 2), - }; - - const labelColor = mail.tags - ? tagColor[tags.findIndex(tags => tags === mail.tags)] - : ''; - - return ( - <SingleMailContents className="isoSingleMailContents"> - <MailAction - mail={mail} - filterMails={filterMails} - selectMail={selectMail} - toggleListVisible={toggleListVisible} - /> - <div className="isoSingleMail"> - <SingleMailHeader className="isoMailHeader"> - <h2>{mail.subject}</h2> - <span className="label" style={{ backgroundColor: labelColor }}> - {mail.tags ? mail.tags : mail.bucket} - </span> - </SingleMailHeader> - - <SingleMailInfo className="isoMailInfo"> - <div className="isoRecipentsImg"> - {mail.img ? ( - <img alt="#" src={mail.img} /> - ) : ( - <span>{signature.splitLet}</span> - )} - </div> - <div className="isoMailAddress"> - <div className="isoAddress"> - <h3> - {mail.name} <span><{mail.email}></span> - </h3> - <span className="mailDate">{timeDifference(mail.date)}</span> - </div> - <p> - to <span>me</span> - </p> - </div> - </SingleMailInfo> - - <SingleMailBody className="isoMailBody"> - <p>{mail.body}</p> - </SingleMailBody> - - <SingleMailReply className="isoReplyMail"> - {replyMail ? ( - <ComposeMail allMail={allMail} /> - ) : ( - <div - onClick={event => changeReplyMail(true)} - className="isoReplyMailBtn" - > - Click here to <span>Reply</span> - </div> - )} - </SingleMailReply> - </div> - </SingleMailContents> - ); -} diff --git a/src/components/Mail/SingleMail.style.js b/src/components/Mail/SingleMail.style.js deleted file mode 100644 index dcc56e0..0000000 --- a/src/components/Mail/SingleMail.style.js +++ /dev/null @@ -1,243 +0,0 @@ -import styled from 'styled-components'; -import { palette } from 'styled-theme'; -import { borderRadius, transition } from '@imd/lib/helpers/style_utils'; -import WithDirection from '@imd/lib/helpers/rtl'; -const SingleMailContents = styled.div` - display: flex; - flex-direction: column; - flex-shrink: 0; - height: 100%; - - .isoSingleMail { - width: 100%; - display: flex; - flex-direction: column; - height: 100%; - overflow-y: auto; - } -`; - -const WDSingleMailHeader = styled.div` - width: 100%; - display: flex; - align-items: center; - padding: 35px; - flex-shrink: 0; - border-bottom: 1px solid ${palette('border', 0)}; - - @media only screen and (max-width: 767px) { - padding: 35px 20px; - } - - h2 { - font-size: 18px; - font-weight: 400; - color: ${palette('secondary', 2)}; - line-height: 1.5; - margin: 0; - text-align: left; - } - - .label { - font-size: 12px; - font-weight: 400; - color: #ffffff; - line-height: 1; - padding: 0 15px; - height: 25px; - line-height: 25px; - background-color: ${palette('primary', 0)}; - text-transform: capitalize; - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 25px 0 0' : '0 0 0 25px'}; - } -`; - -const WDSingleMailInfo = styled.div` - width: 100%; - display: flex; - align-items: center; - flex-shrink: 0; - padding: 25px 35px; - border-bottom: 1px solid ${palette('border', 0)}; - - @media only screen and (max-width: 767px) { - padding: 25px 20px; - } - - .isoRecipentsImg { - width: 48px; - height: 48px; - display: -webkit-inline-flex; - display: -ms-inline-flex; - display: inline-flex; - align-items: center; - justify-content: center; - overflow: hidden; - flex-shrink: 0; - ${borderRadius('50%')}; - - img { - width: 100%; - height: 100%; - object-fit: cover; - } - - span { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - background-color: ${palette('color', 4)}; - font-size: 16px; - font-weight: 300; - color: #fff; - letter-spacing: 1px; - } - } - - .isoMailAddress { - width: 100%; - padding: ${props => - props['data-rtl'] === 'rtl' ? '0 20px 0 0' : '0 0 0 20px'}; - display: flex; - flex-direction: column; - text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')}; - - .isoAddress { - width: 100%; - display: flex; - justify-content: space-between; - align-items: baseline; - position: relative; - - h3 { - font-size: 14px; - font-weight: 700; - color: ${palette('text', 0)}; - line-height: 1.1; - margin: 0 0 8px; - - @media only screen and (max-width: 767px) { - line-height: 1.5; - } - - span { - font-size: inherit; - font-weight: 400; - color: ${palette('secondary', 2)}; - padding: ${props => - props['data-rtl'] === 'rtl' ? '0 5px 0 0' : '0 0 0 5px'}; - display: -webkit-inline-flex; - display: -ms-inline-flex; - display: inline-flex; - } - } - - .mailDate { - font-size: 13px; - font-weight: 400; - color: ${palette('secondary', 2)}; - flex-shrink: 0; - - @media only screen and (max-width: 767px) { - position: absolute; - right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '0')}; - left: ${props => (props['data-rtl'] === 'rtl' ? '0' : 'inherit')}; - } - } - } - - p { - font-size: 13px; - font-weight: 400; - color: ${palette('secondary', 2)}; - line-height: 1.1; - - span { - font-size: inherit; - font-weight: 700; - color: ${palette('text', 0)}; - } - } - } -`; - -const WDSingleMailBody = styled.div` - padding: 30px 35px; - text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')}; - flex-shrink: 0; - border-bottom: 1px solid ${palette('border', 0)}; - - @media only screen and (max-width: 767px) { - padding: 30px 20px; - } - - p { - font-size: 14px; - font-weight: 400; - color: ${palette('text', 3)}; - line-height: 1.5; - margin-bottom: 21px; - } -`; - -const WDSingleMailReply = styled.div` - width: 100%; - display: flex; - align-items: center; - padding: 35px; - flex-shrink: 0; - - @media only screen and (max-width: 767px) { - padding: 35px 20px; - } - - .isoComposeMailWrapper { - padding: 0; - height: auto; - overflow: hidden; - } - - .isoReplyMailBtn { - width: 100%; - height: 80px; - display: -webkit-flex; - display: -ms-flex; - display: flex; - justify-content: flex-start; - align-items: flex-start; - font-size: 14px; - color: ${palette('text', 2)}; - border: 1px solid ${palette('border', 0)}; - padding: 10px 15px; - - span { - font-size: inherit; - color: ${palette('text', 2)}; - text-decoration: underline; - padding: ${props => - props['data-rtl'] === 'rtl' ? '0 3px 0 0' : '0 0 0 3px'}; - cursor: pointer; - ${transition()}; - - &:hover { - color: ${palette('primary', 0)}; - } - } - } -`; - -const SingleMailHeader = WithDirection(WDSingleMailHeader); -const SingleMailInfo = WithDirection(WDSingleMailInfo); -const SingleMailBody = WithDirection(WDSingleMailBody); -const SingleMailReply = WithDirection(WDSingleMailReply); - -export { - SingleMailContents, - SingleMailHeader, - SingleMailInfo, - SingleMailBody, - SingleMailReply, -}; diff --git a/src/components/Mail/SingleMailActions.js b/src/components/Mail/SingleMailActions.js deleted file mode 100644 index 867d8a6..0000000 --- a/src/components/Mail/SingleMailActions.js +++ /dev/null @@ -1,161 +0,0 @@ -import React from 'react'; -import Popover from '../uielements/popover'; -import Popconfirm from '../Feedback/Popconfirm'; -import notification from '../Notification'; -import { buckets } from './MailBuckets'; -import { tags } from './MailTags'; -import { - SingleMailActions, - MailActionsWrapper, - MailCategoryWrapper, - MailPaginationWrapper, - MailActionDropdown, -} from './SingleMailActions.style'; -import { direction } from '@imd/lib/helpers/rtl'; - -function DeleteButton() { - return ( - <Popconfirm - title={`Sure to delete This mail?`} - okText="DELETE" - cancelText="No" - onConfirm={() => { - notification('error', `Deleted selected mail`, ''); - }} - > - <button type="button" className="mailDelete"> - <i className="ion-android-delete" /> - </button> - </Popconfirm> - ); -} - -function MoveMailButton() { - const bucketOptions = buckets.map(bucket => ( - <li - onClick={() => { - notification('success', `Massage Moved Successfully`, ''); - }} - key={bucket} - > - {bucket} - </li> - )); - const content = <MailActionDropdown>{bucketOptions}</MailActionDropdown>; - return ( - <Popover - title={`Move mail`} - content={content} - overlayClassName="mailMoveDropdown" - > - <button type="button" className="mailArchive"> - <i className="ion-android-folder" /> - </button> - </Popover> - ); -} - -function SelectTagButton() { - const tagOptions = tags.map(tag => ( - <li - onClick={() => { - notification('success', `Label Added`, ''); - }} - key={tag} - > - {tag} - </li> - )); - const content = <MailActionDropdown>{tagOptions}</MailActionDropdown>; - return ( - <Popover - title={`Select tag`} - content={content} - overlayClassName="mailMoveDropdown" - > - <button type="button" className="mailReport"> - <i className="ion-pricetags" /> - </button> - </Popover> - ); -} - -export default function({ mail, filterMails, selectMail, toggleListVisible }) { - const index = filterMails.findIndex(filterMail => filterMail.id === mail.id); - const toggleView = () => { - toggleListVisible(); - }; - return ( - <SingleMailActions className="isoMailActionsController"> - {toggleListVisible ? ( - <button className="mailBackBtn" onClick={toggleView}> - Inbox - </button> - ) : ( - '' - )} - <MailActionsWrapper className="isoMailActions"> - <button - type="button" - className="mailArchive" - onClick={() => { - notification('success', 'this mail archived'); - }} - > - <i className="ion-android-archive" /> - </button> - - <button - type="button" - className="mailReport" - onClick={() => { - notification('success', 'Reported as spam'); - }} - > - <i className="ion-android-alert" /> - </button> - - <DeleteButton /> - </MailActionsWrapper> - - <MailCategoryWrapper className="isoMailMove"> - <MoveMailButton /> - <SelectTagButton /> - </MailCategoryWrapper> - - <MailPaginationWrapper className="isoSingleMailPagination"> - {index === 0 ? ( - '' - ) : ( - <button - type="button" - className="prevPage" - onClick={() => selectMail(filterMails[index - 1].id)} - > - <i - className={ - direction === 'rtl' ? 'ion-chevron-right' : 'ion-chevron-left' - } - /> - </button> - )} - - {index + 1 === filterMails.length ? ( - '' - ) : ( - <button - type="button" - className="nextPage" - onClick={() => selectMail(filterMails[index + 1].id)} - > - <i - className={ - direction === 'rtl' ? 'ion-chevron-left' : 'ion-chevron-right' - } - /> - </button> - )} - </MailPaginationWrapper> - </SingleMailActions> - ); -} diff --git a/src/components/Mail/SingleMailActions.style.js b/src/components/Mail/SingleMailActions.style.js deleted file mode 100644 index 9f0d207..0000000 --- a/src/components/Mail/SingleMailActions.style.js +++ /dev/null @@ -1,170 +0,0 @@ -import styled from 'styled-components'; -import { palette } from 'styled-theme'; -import { transition } from '@imd/lib/helpers/style_utils'; -import WithDirection from '@imd/lib/helpers/rtl'; -const WDSingleMailActions = styled.div` - width: 100%; - height: 80px; - display: flex; - flex-shrink: 0; - align-items: center; - justify-content: flex-start; - padding: 0px 30px; - background-color: ${palette('grayscale', 6)}; - border-bottom: 1px solid ${palette('border', 0)}; - - @media only screen and (max-width: 767px) { - padding: 0 15px; - height: 60px; - overflow: hidden; - overflow-x: auto; - } - - .mailBackBtn { - color: ${palette('secondary', 0)}; - width: auto; - height: 35px; - padding: 0 10px; - font-size: 14px; - font-weight: 500; - display: flex; - align-items: center; - justify-content: center; - background-color: #ffffff; - outline: 0; - border: 1px solid ${palette('border', 0)}; - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 -1px 0 15px' : '0 15px 0 -1px'}; - cursor: pointer; - ${transition()}; - - @media only screen and (max-width: 479px) { - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 -1px 0 5px' : '0 5px 0 -1px'}; - } - - i { - font-size: 16px; - color: ${palette('secondary', 0)}; - ${transition()}; - } - - &:hover { - color: ${palette('primary', 0)}; - background-color: darken(#ffffff, 1%); - - i { - color: ${palette('primary', 0)}; - } - } - } - - .mailMoveDropdown { - .ant-popover-inner-content { - li { - cursor: pointer; - padding: 3px 0; - - &:hover { - color: ${palette('primary', 0)}; - } - } - } - } -`; - -const WDMailActionsWrapper = styled.div` - display: -webkit-flex; - display: -ms-flex; - display: flex; - - button { - font-size: 16px; - color: ${palette('secondary', 0)}; - text-align: center; - width: 35px; - height: 35px; - padding: 0; - display: flex; - align-items: center; - justify-content: center; - background-color: #ffffff; - outline: 0; - border: 1px solid ${palette('border', 0)}; - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 -1px 0 0' : '0 0 0 -1px'}; - cursor: pointer; - ${transition()}; - - i { - font-size: 16px; - color: ${palette('secondary', 0)}; - width: 100%; - ${transition()}; - } - - &:first-child { - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 0 0 -1px' : '0 -1px 0 0'}; - } - - &:hover { - color: ${palette('primary', 0)}; - background-color: #fcfcfc; - - i { - color: ${palette('primary', 0)}; - } - } - - &.mailBackBtn { - width: auto; - padding: 0 10px; - font-size: 14px; - } - } -`; - -const WDMailCategoryWrapper = styled(WDMailActionsWrapper)` - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 20px 0 0' : '0 0 0 20px'}; - - @media only screen and (max-width: 767px) { - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 auto 0 10px' : '0 10px 0 auto'}; - } - - @media only screen and (max-width: 479px) { - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 0 0 5px' : '0 5px 0 0'}; - } -`; - -const WDMailPaginationWrapper = styled(WDMailActionsWrapper)` - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 auto 0 0' : '0 0 0 auto'}; -`; - -const MailActionDropdown = styled.ul` - li { - cursor: pointer; - padding: 3px 0; - - &:hover { - color: ${palette('primary', 0)}; - } - } -`; - -const SingleMailActions = WithDirection(WDSingleMailActions); -const MailCategoryWrapper = WithDirection(WDMailCategoryWrapper); -const MailPaginationWrapper = WithDirection(WDMailPaginationWrapper); -const MailActionsWrapper = WithDirection(WDMailActionsWrapper); - -export { - SingleMailActions, - MailActionsWrapper, - MailCategoryWrapper, - MailPaginationWrapper, - MailActionDropdown, -}; diff --git a/src/components/Mail/reactTags.css b/src/components/Mail/reactTags.css deleted file mode 100644 index 9763fd7..0000000 --- a/src/components/Mail/reactTags.css +++ /dev/null @@ -1,57 +0,0 @@ -div.ReactTags__tags { - position: relative; -} - -div.ReactTags__tagInput { - width: 200px; - border-radius: 2px; - display: inline-block; -} -div.ReactTags__tagInput input.ReactTags__tagInputField, -div.ReactTags__tagInput input.ReactTags__tagInputField:focus { - height: 31px; - margin: 0; - font-size: 12px; - width: 100%; - border: 1px solid #eee; -} - -div.ReactTags__selected span.ReactTags__tag { - border: 1px solid #ddd; - background: #eee; - font-size: 12px; - display: inline-block; - padding: 5px; - margin: 0 5px; - cursor: move; - border-radius: 2px; -} -div.ReactTags__selected a.ReactTags__remove { - color: #aaa; - margin-left: 5px; - cursor: pointer; -} - -div.ReactTags__suggestions { - position: absolute; -} -div.ReactTags__suggestions ul { - list-style-type: none; - box-shadow: 0.05em 0.01em 0.5em rgba(0, 0, 0, 0.2); - background: white; - width: 200px; -} -div.ReactTags__suggestions li { - border-bottom: 1px solid #ddd; - padding: 5px 10px; - margin: 0; -} -div.ReactTags__suggestions li mark { - text-decoration: underline; - background: none; - font-weight: 600; -} -div.ReactTags__suggestions ul li.ReactTags__activeSuggestion { - background: #b7cfe0; - cursor: pointer; -} diff --git a/src/components/PostCard/InstagramCard.js b/src/components/PostCard/InstagramCard.js deleted file mode 100644 index acf7edb..0000000 --- a/src/components/PostCard/InstagramCard.js +++ /dev/null @@ -1,50 +0,0 @@ -import React from 'react'; -import { - IoIosImages, - IoIosVideocam, - IoIosPlay, - IoIosHeart, - IoIosChatbubbles, -} from 'react-icons/io'; -import CardWrapper from './InstagramCard.style'; - -const InstagramCard = ({ - key, - type, - image, - numberOfView, - numberOfcomment, - numberOflike, - onClick, - className, -}) => { - return ( - <CardWrapper - className={`post-card instagram ${className ? className : ''}`} - key={key} - onClick={onClick} - > - <img src={image} alt="instagram post" /> - {type === 'gallery' && <IoIosImages />} - {type === 'video' && <IoIosVideocam />} - <figcaption> - <ul> - {type === 'video' ? ( - <li> - {numberOfView} <IoIosPlay /> - </li> - ) : ( - <li> - {numberOflike} <IoIosHeart /> - </li> - )} - <li> - {numberOfcomment} <IoIosChatbubbles /> - </li> - </ul> - </figcaption> - </CardWrapper> - ); -}; - -export default InstagramCard; diff --git a/src/components/PostCard/InstagramCard.style.js b/src/components/PostCard/InstagramCard.style.js deleted file mode 100644 index 44bbc38..0000000 --- a/src/components/PostCard/InstagramCard.style.js +++ /dev/null @@ -1,69 +0,0 @@ -import styled from 'styled-components'; - -const CardWrapper = styled.figure` - max-width: 370px; - width: 100%; - position: relative; - img { - max-width: 100%; - height: auto; - border-radius: 4px; - } - img + svg { - position: absolute; - top: 15px; - right: 15px; - width: auto; - height: 18px; - fill: #ffffff; - z-index: 2; - } - figcaption { - position: absolute; - top: 0; - left: 0; - border-radius: 4px; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - background-color: rgba(0, 0, 0, 0.4); - opacity: 0; - visibility: hidden; - transition: all 0.1s ease; - ul { - margin: 0; - padding: 0; - display: flex; - align-items: center; - li { - display: inline-flex; - align-items: center; - margin: 0 20px; - color: #ffffff; - font-size: 16px; - font-weight: 400; - svg { - width: auto; - height: 18px; - margin-left: 10px; - } - &:first-child { - margin-left: 0; - } - &:last-child { - margin-right: 0; - } - } - } - } - &:hover { - figcaption { - opacity: 1; - visibility: visible; - } - } -`; - -export default CardWrapper; diff --git a/src/components/PostCard/index.js b/src/components/PostCard/index.js deleted file mode 100644 index c80fe87..0000000 --- a/src/components/PostCard/index.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import InstagramCard from './InstagramCard'; - -const PostCard = ({ variant, ...props }) => { - return <>{variant === 'instagram' && <InstagramCard {...props} />}</>; -}; - -export default PostCard; diff --git a/src/components/ScrumBoard/AntFields.js b/src/components/ScrumBoard/AntFields.js deleted file mode 100644 index a305848..0000000 --- a/src/components/ScrumBoard/AntFields.js +++ /dev/null @@ -1,75 +0,0 @@ -import map from 'lodash/map'; -import React from 'react'; -import { - DatePicker, - Form, - Input, - TimePicker, - Select, - Badge, - Switch, -} from 'antd'; - -const FormItem = Form.Item; -const { Option } = Select; -const { TextArea } = Input; -const CreateAntField = Component => ({ - field, - form, - hasFeedback, - label, - tasklabel, - selectOptions, - submitCount, - type, - formitem, - className, - ...props -}) => { - const touched = form.touched[field.name]; - const submitted = submitCount > 0; - const hasError = form.errors[field.name]; - const submittedError = hasError && submitted; - const touchedError = hasError && touched; - const onInputChange = ({ target: { value } }) => - form.setFieldValue(field.name, value); - const onChange = value => form.setFieldValue(field.name, value); - const onBlur = () => form.setFieldTouched(field.name, true); - return ( - <div className="field-container"> - <FormItem - label={label} - colon={false} - className={className} - hasFeedback={ - (hasFeedback && submitted) || (hasFeedback && touched) ? true : false - } - help={submittedError || touchedError ? hasError : false} - validateStatus={submittedError || touchedError ? 'error' : 'success'} - {...formitem} - > - {tasklabel && tasklabel} - <Component - {...field} - {...props} - onBlur={onBlur} - onChange={type ? onInputChange : onChange} - > - {selectOptions && - map(selectOptions, name => ( - <Option key={name}> - <Badge status={name} text={name} /> - </Option> - ))} - </Component> - </FormItem> - </div> - ); -}; - -export const AntSelect = CreateAntField(Select); -export const AntDatePicker = CreateAntField(DatePicker); -export const AntInput = CreateAntField(Input); -export const AntTimePicker = CreateAntField(TimePicker); -export const AntTextArea = CreateAntField(TextArea); -export const AntSwitch = CreateAntField(Switch); diff --git a/src/components/ScrumBoard/Attachment.js b/src/components/ScrumBoard/Attachment.js deleted file mode 100644 index 7002da8..0000000 --- a/src/components/ScrumBoard/Attachment.js +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; - -import { Upload, Icon, Modal } from 'antd'; - -export default class PicturesWall extends React.Component { - state = { - previewVisible: false, - previewImage: '', - fileList: [ - { - uid: '-1', - name: 'xxx.png', - status: 'done', - url: - 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', - }, - ], - }; - - handleCancel = () => this.setState({ previewVisible: false }); - - handlePreview = file => { - this.setState({ - previewImage: file.url || file.thumbUrl, - previewVisible: true, - }); - }; - - handleChange = ({ fileList }) => this.setState({ fileList }); - - render() { - const { previewVisible, previewImage, fileList } = this.state; - const uploadButton = ( - <div> - <Icon type="plus" /> - <div className="ant-upload-text">Upload</div> - </div> - ); - return ( - <div className="clearfix"> - <Upload - action="" - listType="picture-card" - fileList={fileList} - onPreview={this.handlePreview} - onChange={this.handleChange} - > - {fileList.length >= 3 ? null : uploadButton} - </Upload> - <Modal - visible={previewVisible} - footer={null} - onCancel={this.handleCancel} - > - <img alt="example" style={{ width: '100%' }} src={previewImage} /> - </Modal> - </div> - ); - } -} diff --git a/src/components/ScrumBoard/CheckList.js b/src/components/ScrumBoard/CheckList.js deleted file mode 100644 index 965f68f..0000000 --- a/src/components/ScrumBoard/CheckList.js +++ /dev/null @@ -1,113 +0,0 @@ -import React from 'react'; -import { Form, Input, Icon, Button } from 'antd'; - -let id = 0; - -class DynamicFieldSet extends React.Component { - remove = k => { - const { form } = this.props; - // can use data-binding to get - const keys = form.getFieldValue('keys'); - // We need at least one passenger - if (keys.length === 1) { - return; - } - - // can use data-binding to set - form.setFieldsValue({ - keys: keys.filter(key => key !== k), - }); - }; - - add = () => { - const { form } = this.props; - // can use data-binding to get - const keys = form.getFieldValue('keys'); - const nextKeys = keys.concat(++id); - // can use data-binding to set - // important! notify form to detect changes - form.setFieldsValue({ - keys: nextKeys, - }); - }; - - handleSubmit = e => { - e.preventDefault(); - this.props.form.validateFields((err, values) => { - if (!err) { - console.log('Received values of form: ', values); - } - }); - }; - - render() { - const { getFieldDecorator, getFieldValue } = this.props.form; - const formItemLayout = { - labelCol: { - xs: { span: 24 }, - sm: { span: 4 }, - }, - wrapperCol: { - xs: { span: 24 }, - sm: { span: 20 }, - }, - }; - const formItemLayoutWithOutLabel = { - wrapperCol: { - xs: { span: 24, offset: 0 }, - sm: { span: 20, offset: 4 }, - }, - }; - getFieldDecorator('keys', { initialValue: [] }); - const keys = getFieldValue('keys'); - const formItems = keys.map((k, index) => ( - <Form.Item - {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)} - label={index === 0 ? 'Passengers' : ''} - required={false} - key={k} - > - {getFieldDecorator(`names[${k}]`, { - validateTrigger: ['onChange', 'onBlur'], - rules: [ - { - required: true, - whitespace: true, - message: "Please input passenger's name or delete this field.", - }, - ], - })( - <Input - placeholder="passenger name" - style={{ width: '60%', marginRight: 8 }} - /> - )} - {keys.length > 1 ? ( - <Icon - className="dynamic-delete-button" - type="minus-circle-o" - disabled={keys.length === 1} - onClick={() => this.remove(k)} - /> - ) : null} - </Form.Item> - )); - return ( - <Form onSubmit={this.handleSubmit}> - {formItems} - <Form.Item {...formItemLayoutWithOutLabel}> - <Button type="dashed" onClick={this.add} style={{ width: '60%' }}> - <Icon type="plus" /> Add field - </Button> - </Form.Item> - <Form.Item {...formItemLayoutWithOutLabel}> - <Button type="primary" htmlType="submit"> - Submit - </Button> - </Form.Item> - </Form> - ); - } -} - -export default Form.create()(DynamicFieldSet); diff --git a/src/components/ScrumBoard/Comments/Comments.js b/src/components/ScrumBoard/Comments/Comments.js deleted file mode 100644 index b85f31c..0000000 --- a/src/components/ScrumBoard/Comments/Comments.js +++ /dev/null @@ -1,133 +0,0 @@ -import React from 'react'; -import { Comment, Avatar, Form, Button, List, Input, Tooltip } from 'antd'; -import moment from 'moment'; - -import { CommentListWrapper } from './Comments.style'; - -const TextArea = Input.TextArea; - -const CommentList = ({ comments }) => ( - <CommentListWrapper> - <List - dataSource={comments} - // header={`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`} - itemLayout="horizontal" - renderItem={props => <Comment {...props} />} - /> - </CommentListWrapper> -); - -const Editor = ({ onChange, onSubmit, submitting, value }) => ( - <div> - <Form.Item> - <TextArea rows={4} onChange={onChange} value={value} /> - </Form.Item> - <Form.Item> - <Button - htmlType="submit" - loading={submitting} - onClick={onSubmit} - type="primary" - > - Add Comment - </Button> - </Form.Item> - </div> -); - -class Comments extends React.Component { - state = { - comments: [ - { - actions: [<span>Reply to</span>], - author: 'Han Solo', - avatar: - 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', - content: ( - <p> - We supply a series of design principles, practical patterns and high - quality design resources (Sketch and Axure), to help people create - their product prototypes beautifully and efficiently. - </p> - ), - datetime: ( - <Tooltip - title={moment() - .subtract(1, 'days') - .format('YYYY-MM-DD HH:mm:ss')} - > - <span> - {moment() - .subtract(1, 'days') - .fromNow()} - </span> - </Tooltip> - ), - }, - ], - submitting: false, - value: '', - }; - - handleSubmit = () => { - if (!this.state.value) { - return; - } - - this.setState({ - submitting: true, - }); - - setTimeout(() => { - this.setState({ - submitting: false, - value: '', - comments: [ - { - actions: [<span>Reply to</span>], - author: 'Han Solo', - avatar: - 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', - content: <p>{this.state.value}</p>, - datetime: moment().fromNow(), - }, - ...this.state.comments, - ], - }); - }, 1000); - }; - - handleChange = e => { - this.setState({ - value: e.target.value, - }); - }; - - render() { - const { comments, submitting, value } = this.state; - - return ( - <div> - {comments.length > 0 && <CommentList comments={comments} />} - <Comment - avatar={ - <Avatar - src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" - alt="Han Solo" - /> - } - content={ - <Editor - onChange={this.handleChange} - onSubmit={this.handleSubmit} - submitting={submitting} - value={value} - /> - } - /> - </div> - ); - } -} - -export default Comments; diff --git a/src/components/ScrumBoard/Comments/Comments.style.js b/src/components/ScrumBoard/Comments/Comments.style.js deleted file mode 100644 index 6207247..0000000 --- a/src/components/ScrumBoard/Comments/Comments.style.js +++ /dev/null @@ -1,47 +0,0 @@ -import styled from 'styled-components'; - -export const CommentListWrapper = styled.div` - border-top: 1px solid #e2e2e2; - margin-top: 30px; - .ant-comment-inner { - padding: 30px 0 16px; - } - .ant-comment-avatar { - flex-shrink: 0; - position: relative; - margin-right: 16px; - cursor: pointer; - width: 35px; - height: 35px; - } - .ant-comment-content-author { - margin-bottom: 4px; - font-size: 14px; - display: flex; - justify-content: flex-start; - } - .ant-comment-content-author > a, - .ant-comment-content-author > span { - height: auto; - padding-right: 8px; - font-size: 16px; - line-height: 30px; - color: #788195; - font-family: 'Roboto'; - font-weight: 500; - } - .ant-comment-content-author-time > span { - font-size: 14px; - line-height: 30px; - color: #8c90b5; - font-family: 'Roboto'; - font-weight: 400; - } - .ant-comment-content-detail { - font-size: 14px; - line-height: 22px; - color: #797979; - font-family: 'Roboto'; - font-weight: 400; - } -`; diff --git a/src/components/ScrumBoard/FieldFormats.js b/src/components/ScrumBoard/FieldFormats.js deleted file mode 100644 index 4d25f95..0000000 --- a/src/components/ScrumBoard/FieldFormats.js +++ /dev/null @@ -1,2 +0,0 @@ -export const dateFormat = 'MM-DD-YYYY'; -export const timeFormat = 'HH:mm'; diff --git a/src/components/ScrumBoard/HeadingWithIcon/HeadingWithIcon.js b/src/components/ScrumBoard/HeadingWithIcon/HeadingWithIcon.js deleted file mode 100644 index f8b8baa..0000000 --- a/src/components/ScrumBoard/HeadingWithIcon/HeadingWithIcon.js +++ /dev/null @@ -1,33 +0,0 @@ -import styled from 'styled-components'; -import React from 'react'; - -const HeadingSecondary = styled.h2` - margin: 10px 0; - font-size: ${props => (props.size ? props.size : '16px')}; - color: ${props => (props.color ? props.color : '#788195')}; - font-family: 'Roboto'; - font-weight: 500; -`; - -const IconSvg = styled.img` - width: 16px; - height: 20px; - margin-right: 10px; - vertical-align: middle; - /* background-color: #a8aabd; */ -`; - -export default function HeadingWithIcon({ - heading, - iconSrc, - width, - height, - color, -}) { - return ( - <HeadingSecondary color={color}> - {iconSrc && <IconSvg src={iconSrc} width={width} height={height} />} - {heading} - </HeadingSecondary> - ); -} diff --git a/src/components/ScrumBoard/IconSvg/IconSvg.js b/src/components/ScrumBoard/IconSvg/IconSvg.js deleted file mode 100644 index 2bc0d0c..0000000 --- a/src/components/ScrumBoard/IconSvg/IconSvg.js +++ /dev/null @@ -1,19 +0,0 @@ -import styled from 'styled-components'; - -export const IconSvg = styled.img` - width: ${props => (props.width ? props.width : '30')}px; - height: ${props => (props.height ? props.height : '30')}px; - padding: ${props => (props.padding ? props.padding : '5')}px; - background-color: ${props => (props.bg ? props.bg : 'transparent')}; - cursor: pointer; - border: ${props => (props.border ? props.border : '1px dashed #a8aabd')}; - border-radius: ${props => (props.radius ? props.radius : '5px')}; - margin-right: ${props => (props.mr ? props.mr : '10')}px; - margin-left: ${props => (props.ml ? props.ml : '10')}px; - vertical-align: middle; - - @media only screen and (max-width: 767px) { - margin-right: 0; - margin-left: 0; - } -`; diff --git a/src/components/ScrumBoard/RenderBoardForm/08-icon.svg b/src/components/ScrumBoard/RenderBoardForm/08-icon.svg deleted file mode 100644 index e9310eb..0000000 --- a/src/components/ScrumBoard/RenderBoardForm/08-icon.svg +++ /dev/null @@ -1,39 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> -<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" - viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve"> -<style type="text/css"> - .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#00C7E6;} - .st1{fill:#5243AA;} - .st2{fill:#6555C0;} - .st3{fill:#8777D9;} - .st4{fill:#FFFFFF;} - .st5{opacity:0.15;fill:#7F4CBF;enable-background:new ;} - .st6{fill:#00C7E6;} - .st7{fill:#403294;} -</style> -<g id="Page-1"> - <g id="project_avatar_alien"> - <g id="Default"> - <g> - <rect id="Rectangle" y="0" class="st0" width="128" height="128"/> - <path id="Shape" class="st1" d="M40.3,109.7h-2.1c-1.8,0-3.2-1.4-3.2-3.2V93.9c0-1.8,1.4-3.2,3.2-3.2h2.1c1.8,0,3.2,1.4,3.2,3.2 - v12.5C43.5,108.2,42,109.7,40.3,109.7z"/> - <path class="st1" d="M89,109.7h-2.1c-1.8,0-3.2-1.4-3.2-3.2V93.9c0-1.8,1.4-3.2,3.2-3.2H89c1.8,0,3.2,1.4,3.2,3.2v12.5 - C92.2,108.2,90.8,109.7,89,109.7z"/> - <ellipse id="Oval" class="st2" cx="63.8" cy="74.7" rx="43.6" ry="30"/> - <ellipse class="st3" cx="64" cy="67.7" rx="50.3" ry="30"/> - <path class="st4" d="M94.8,48.6c0-0.6,0.1-1.3,0.1-1.9c0-17.2-14-31.2-31.2-31.2c-16.9,0-30.7,13.4-31.2,30.2h0v8.3h0 - c0.3,9.7,5.1,16.4,12.4,20.4l37.7,0c7.5-4,12.4-11,12.4-21.2c0-0.6,0-1.3-0.1-1.9V48.6L94.8,48.6z"/> - <path class="st5" d="M32.5,44.3c0,0.5-0.1,0.9-0.1,1.4h0v8.3h0c0.5,16.7,14.2,24.5,31.2,24.5c17.2,0,31.2-8.1,31.2-25.4 - c0-0.6,0-1.3-0.1-1.9v-2.6c0-0.6,0.1-1.3,0.1-1.9c0-0.9,0-1.9-0.1-2.8C86.2,40,75.5,37.6,64,37.6C52,37.6,41.1,40.1,32.5,44.3z" - /> - <path class="st6" d="M63.6,28.3L63.6,28.3c-10.4,0-18.8,8.5-18.8,18.8v6.1v15v6.1c5.2,2.8,11.8,4.2,18.8,4.2s13.6-1.4,18.8-4.2 - v-6.1v-15v-6.1C82.4,36.7,74,28.3,63.6,28.3z"/> - <circle class="st4" cx="63.9" cy="50.7" r="11.1"/> - <circle class="st7" cx="63.5" cy="50.6" r="4.4"/> - </g> - </g> - </g> -</g> -</svg> diff --git a/src/components/ScrumBoard/RenderBoardForm/RenderBoardForm.js b/src/components/ScrumBoard/RenderBoardForm/RenderBoardForm.js deleted file mode 100644 index 75bdd3b..0000000 --- a/src/components/ScrumBoard/RenderBoardForm/RenderBoardForm.js +++ /dev/null @@ -1,99 +0,0 @@ -import React from 'react'; -import { Form, Field } from 'formik'; -import { Button, Tooltip } from 'antd'; -import { AntInput, AntSelect, AntSwitch } from '../AntFields'; -import { isRequired } from '../ValidateFields'; -import ThumbIcon from './08-icon.svg'; -import { Wrapper } from './RenderBoardForm.style'; -const formItemLayout = { - labelCol: { - sm: { span: 12 }, - md: { span: 12, push: 3 }, - style: { textAlign: 'left' }, - }, - wrapperCol: { sm: { span: 12 }, md: { span: 3, pull: 12 } }, - colon: false, -}; -export default ({ handleSubmit, values, submitCount }) => ( - <Wrapper> - <Form onSubmit={handleSubmit}> - <Field - component={AntInput} - name="title" - type="text" - label="Project Name*" - validate={isRequired} - submitCount={submitCount} - hasFeedback - placeholder="Enter project name..." - size="large" - /> - - <Field - component={AntSelect} - name="category" - label="Project Category*" - placeholder="Select a Category" - defaultValue={values.category} - selectOptions={values.selectOptions} - validate={isRequired} - submitCount={submitCount} - hasFeedback - dropdownClassName="project-category" - size="large" - /> - - <Field - component={AntSwitch} - className="switch-form-item" - defaultChecked={values.open_to_company} - name="open_to_company" - label=" Public To RedQ Studio" - formitem={formItemLayout} - /> - - <Field - component={AntSwitch} - className="switch-form-item" - name="open_to_members" - defaultChecked={values.open_to_members} - formitem={formItemLayout} - label=" Private To Project Members" - /> - - <div - style={{ - display: 'flex', - alignItems: 'center', - color: '#1890FF', - fontSize: '16px', - fontWeight: 500, - }} - className={'field-container'} - > - <img - src={ThumbIcon} - alt="Project" - width={40} - height={40} - style={{ marginRight: 10, borderRadius: 6 }} - /> - <Tooltip - title="Please Implements Your Own Avatar Methods" - placement="right" - > - <div>Select Avatar</div> - </Tooltip> - </div> - - <Button - htmlType="submit" - type="primary" - style={{ width: '100%', marginTop: 20 }} - size="large" - > - {!values.editing ? 'Create Project' : 'Update Task'} - </Button> - </Form> - </Wrapper> -); diff --git a/src/components/ScrumBoard/RenderBoardForm/RenderBoardForm.style.js b/src/components/ScrumBoard/RenderBoardForm/RenderBoardForm.style.js deleted file mode 100644 index 52016b6..0000000 --- a/src/components/ScrumBoard/RenderBoardForm/RenderBoardForm.style.js +++ /dev/null @@ -1,19 +0,0 @@ -import styled from 'styled-components'; - -export const Wrapper = styled.div` - font-size: 16px; - line-height: 30px; - color: #2d3446; - font-family: 'Roboto'; - font-weight: 500; - && label { - font-size: 16px; - line-height: 30px; - color: #2d3446; - font-family: 'Roboto'; - font-weight: 500; - } - .field-container { - margin-bottom: 20px; - } -`; diff --git a/src/components/ScrumBoard/RenderColumnForm/05-icon.svg b/src/components/ScrumBoard/RenderColumnForm/05-icon.svg deleted file mode 100644 index 5df72b2..0000000 --- a/src/components/ScrumBoard/RenderColumnForm/05-icon.svg +++ /dev/null @@ -1,17 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> -<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" - viewBox="0 0 16.2 13.2" style="enable-background:new 0 0 16.2 13.2;" xml:space="preserve"> -<style type="text/css"> - .st0{fill:#788195;} -</style> -<g> - <g> - <path class="st0" d="M15.7,0.5c-0.3-0.3-0.6-0.4-0.9-0.4H1.5c-0.4,0-0.7,0.1-0.9,0.4c-0.3,0.3-0.4,0.6-0.4,1v10.3 - c0,0.4,0.1,0.7,0.4,1c0.3,0.3,0.6,0.4,0.9,0.4h13.3c0.4,0,0.7-0.1,0.9-0.4c0.3-0.3,0.4-0.6,0.4-1V1.5C16.1,1.1,16,0.8,15.7,0.5z - M15.1,11.8c0,0.1,0,0.1-0.1,0.2c-0.1,0.1-0.1,0.1-0.2,0.1H1.5c-0.1,0-0.1,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2V6.6h13.9V11.8z - M15.1,3.4H1.2V1.5c0-0.1,0-0.1,0.1-0.2c0.1-0.1,0.1-0.1,0.2-0.1h13.3c0.1,0,0.1,0,0.2,0.1c0.1,0.1,0.1,0.1,0.1,0.2V3.4z M4.4,9.9 - H2.3V11h2.1V9.9z M8.7,9.9H5.5V11h3.2V9.9z"/> - </g> -</g> -</svg> diff --git a/src/components/ScrumBoard/RenderColumnForm/RenderColumnForm.js b/src/components/ScrumBoard/RenderColumnForm/RenderColumnForm.js deleted file mode 100644 index 7bbad48..0000000 --- a/src/components/ScrumBoard/RenderColumnForm/RenderColumnForm.js +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import { Button } from 'antd'; -import { AntInput } from '../AntFields'; -import { isRequired } from '../ValidateFields'; -import { Form, Field } from 'formik'; -import HeadingWithIcon from '../HeadingWithIcon/HeadingWithIcon'; -import FolderIcon from './05-icon.svg'; -import RenderColumnWrapper from './RenderColumnForm.style'; - -const RenderColumnForm = props => { - const { handleSubmit, onCancel, submitCount, values } = props; - return ( - <RenderColumnWrapper className="render-form-wrapper"> - {!props.initials && ( - <HeadingWithIcon - iconSrc={FolderIcon} - heading={'Column Name'} - size={'20px'} - /> - )} - <Form onSubmit={handleSubmit}> - <Field - component={AntInput} - name="title" - type="text" - defaultValue={values.title} - placeholder="Column Name" - validate={isRequired} - submitCount={submitCount} - hasFeedback - size="large" - formitem={{ - colon: false, - }} - /> - <Button type="default" onClick={onCancel} size="large"> - Cancel - </Button> - <Button - type="primary" - htmlType="submit" - style={{ marginLeft: 10 }} - size="large" - > - {props.initials && props.initials.editing ? 'Update Column' : 'Save'} - </Button> - </Form> - </RenderColumnWrapper> - ); -}; - -export default RenderColumnForm; diff --git a/src/components/ScrumBoard/RenderColumnForm/RenderColumnForm.style.js b/src/components/ScrumBoard/RenderColumnForm/RenderColumnForm.style.js deleted file mode 100644 index 29a8ab4..0000000 --- a/src/components/ScrumBoard/RenderColumnForm/RenderColumnForm.style.js +++ /dev/null @@ -1,9 +0,0 @@ -import styled from 'styled-components'; - -const RenderColumnWrapper = styled.div` - form { - padding: 20px; - } -`; - -export default RenderColumnWrapper; diff --git a/src/components/ScrumBoard/SearchInput/07-icon.svg b/src/components/ScrumBoard/SearchInput/07-icon.svg deleted file mode 100644 index d4de96b..0000000 --- a/src/components/ScrumBoard/SearchInput/07-icon.svg +++ /dev/null @@ -1,10 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> -<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" - viewBox="0 0 14.5 14.4" style="enable-background:new 0 0 14.5 14.4;" xml:space="preserve"> -<style type="text/css"> - .st0{fill:#788195;} -</style> -<path class="st0" d="M14.2,1.6l-1.4-1.4L7.2,5.8L1.6,0.2L0.2,1.6l5.6,5.6l-5.6,5.6l1.4,1.4l5.6-5.6l5.6,5.6l1.4-1.4L8.6,7.2 - L14.2,1.6z"/> -</svg> diff --git a/src/components/ScrumBoard/SearchInput/10-icon.svg b/src/components/ScrumBoard/SearchInput/10-icon.svg deleted file mode 100644 index d9f65f0..0000000 --- a/src/components/ScrumBoard/SearchInput/10-icon.svg +++ /dev/null @@ -1,11 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> -<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" - viewBox="0 0 20.4 20.5" style="enable-background:new 0 0 20.4 20.5;" xml:space="preserve"> -<style type="text/css"> - .st0{fill:#788195;} -</style> -<path class="st0" d="M19.9,18.8L15.1,14c1.2-1.5,1.9-3.3,1.9-5.3c0-4.7-3.8-8.4-8.4-8.4C3.9,0.3,0.2,4,0.2,8.7s3.8,8.4,8.4,8.4 - c2,0,3.9-0.7,5.3-1.9l4.8,4.8c0.3,0.3,0.9,0.3,1.2,0C20.3,19.7,20.3,19.2,19.9,18.8L19.9,18.8z M8.6,15.4c-3.7,0-6.8-3-6.8-6.8 - s3-6.8,6.8-6.8c3.7,0,6.8,3,6.8,6.8S12.3,15.4,8.6,15.4L8.6,15.4z M8.6,15.4"/> -</svg> diff --git a/src/components/ScrumBoard/SearchInput/SearchInput.js b/src/components/ScrumBoard/SearchInput/SearchInput.js deleted file mode 100644 index 409eecb..0000000 --- a/src/components/ScrumBoard/SearchInput/SearchInput.js +++ /dev/null @@ -1,41 +0,0 @@ -import React, { useState } from 'react'; -import { - SearchIcon, - ClearIcon, - SearchWrapper, - Input, - ClearButton, -} from './SearchInput.style'; -import ClearSvg from './07-icon.svg'; -import SearchSvg from './10-icon.svg'; - -export default function SearchInput({ - onChange = console.log, - onFocus, - onBlur, -}) { - const [searchData, setSearchData] = useState(''); - const handleSearch = event => { - setSearchData(event.target.value); - onChange(event.target.value); - }; - - return ( - <SearchWrapper> - <SearchIcon src={SearchSvg} /> - <Input - type="search" - placeholder="Search ..." - value={searchData} - onChange={handleSearch} - onFocus={onFocus} - onBlur={onBlur} - /> - {searchData && ( - <ClearButton onClick={() => setSearchData('')}> - <ClearIcon src={ClearSvg} /> - </ClearButton> - )} - </SearchWrapper> - ); -} diff --git a/src/components/ScrumBoard/SearchInput/SearchInput.style.js b/src/components/ScrumBoard/SearchInput/SearchInput.style.js deleted file mode 100644 index b421406..0000000 --- a/src/components/ScrumBoard/SearchInput/SearchInput.style.js +++ /dev/null @@ -1,60 +0,0 @@ -import styled from 'styled-components'; - -export const SearchWrapper = styled.div` - width: 400px; - display: flex; - justify-content: space-between; - align-items: center; - position: relative; - - @media only screen and (max-width: 767px) { - width: 100%; - } -`; - -export const Input = styled.input` - box-sizing: border-box; - position: relative; - width: 100%; - height: 30px; - font-family: inherit; - font-size: 100%; - border: none; - background: none; - -webkit-appearance: none; - vertical-align: middle; - font-size: 16px; - border-bottom: 1px solid transparent; - transition: border 0.2s ease; - &:focus { - border-bottom: 1px solid #e8e8e8; - outline: none; - } - &::placeholder { - color: #788195; - } -`; - -export const SearchIcon = styled.img` - width: 20px; - margin-right: 1rem; -`; - -export const ClearButton = styled.button` - margin-left: -1rem; - cursor: pointer; - border: 0; - background-color: transparent; - position: absolute; - right: 0; - top: auto; - &:hover, - &:focus { - outline: none; - } -`; - -export const ClearIcon = styled.img` - width: 10px; - height: 15px; -`; diff --git a/src/components/ScrumBoard/Title.js b/src/components/ScrumBoard/Title.js deleted file mode 100644 index 6549bbd..0000000 --- a/src/components/ScrumBoard/Title.js +++ /dev/null @@ -1,19 +0,0 @@ -import styled from 'styled-components'; -import { colors, grid } from '@imd/assets/styles/constants'; - -export default styled.h4` - /* padding: ${grid}px; */ - margin: 0; - transition: background-color ease 0.2s; - flex-grow: 1; - user-select: none; - position: relative; - font-size: 20px; - color: #2d3446; - font-family: 'Roboto'; - font-weight: 500; - &:focus { - outline: 2px solid ${colors.purple}; - outline-offset: 2px; - } -`; diff --git a/src/components/ScrumBoard/ValidateFields.js b/src/components/ScrumBoard/ValidateFields.js deleted file mode 100644 index 11d6446..0000000 --- a/src/components/ScrumBoard/ValidateFields.js +++ /dev/null @@ -1,30 +0,0 @@ -import moment from 'moment'; -import { dateFormat } from './FieldFormats'; - -export const validateDate = value => { - let errors; - - if (!value) { - errors = 'Required!'; - } else if ( - moment(value).format(dateFormat) < moment(Date.now()).format(dateFormat) - ) { - errors = 'Invalid date!'; - } - - return errors; -}; - -export const validateEmail = value => { - let errors; - - if (!value) { - errors = 'Required!'; - } else if (!/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value)) { - errors = 'Invalid email address!'; - } - - return errors; -}; - -export const isRequired = value => (!value ? 'Required!' : ''); diff --git a/src/components/Tables/DeleteCell.js b/src/components/Tables/DeleteCell.js deleted file mode 100644 index 917b3d3..0000000 --- a/src/components/Tables/DeleteCell.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import Popconfirm from '../Feedback/Popconfirm'; - -export default function({ index, onDeleteCell }) { - return ( - <Popconfirm - title="Sure to delete?" - okText="DELETE" - cancelText="No" - onConfirm={() => onDeleteCell(index)} - > - <a href="# ">Delete</a> - </Popconfirm> - ); -} diff --git a/src/components/Tables/EditableCell.js b/src/components/Tables/EditableCell.js deleted file mode 100644 index 7846029..0000000 --- a/src/components/Tables/EditableCell.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import Input from '../uielements/input'; -import { Icon } from 'antd'; - -export default function(props) { - const [state, setState] = React.useState({ - value: props.value, - editable: false, - }); - const handleChange = event => { - const value = event.target.value; - setState({ ...state, value }); - }; - const check = () => { - setState({ ...state, editable: false }); - if (props.onChange) { - props.onChange(state.value, props.columnsKey, props.index); - } - }; - const edit = () => { - setState({ ...state, editable: true }); - }; - const { value, editable } = state; - return ( - <div className="isoEditData"> - {editable ? ( - <div className="isoEditDataWrapper"> - <Input value={value} onChange={handleChange} onPressEnter={check} /> - <Icon type="check" className="isoEditIcon" onClick={check} /> - </div> - ) : ( - <p className="isoDataWrapper"> - {value || ' '} - <Icon type="edit" className="isoEditIcon" onClick={edit} /> - </p> - )} - </div> - ); -} diff --git a/src/components/Tables/FilterDropdown.js b/src/components/Tables/FilterDropdown.js deleted file mode 100644 index 0923a9f..0000000 --- a/src/components/Tables/FilterDropdown.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import Input from '../uielements/input'; -import Button from '../uielements/button'; - -export default function({ searchText, onInputChange, onSearch }) { - return ( - <div className="isoTableSearchBox"> - <Input - id="tableFilterInput" - placeholder="Search name" - value={searchText} - onChange={onInputChange} - onPressEnter={onSearch} - /> - <Button type="primary" onClick={onSearch}> - Search - </Button> - </div> - ); -} diff --git a/src/components/Tables/HelperCells.js b/src/components/Tables/HelperCells.js deleted file mode 100644 index 53f4160..0000000 --- a/src/components/Tables/HelperCells.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import ImageCellView from './ImageCell'; -import DeleteCell from './DeleteCell'; -import EditableCell from './EditableCell'; -import FilterDropdown from './FilterDropdown'; - -const DateCell = data => <p>{data.toLocaleString()}</p>; -const ImageCell = src => <ImageCellView src={src} />; -const LinkCell = (link, href) => <a href={href ? href : '#'}>{link}</a>; -const TextCell = text => <p>{text}</p>; - -export { - DateCell, - ImageCell, - LinkCell, - TextCell, - EditableCell, - DeleteCell, - FilterDropdown, -}; diff --git a/src/components/Tables/ImageCell.js b/src/components/Tables/ImageCell.js deleted file mode 100644 index aa6eb08..0000000 --- a/src/components/Tables/ImageCell.js +++ /dev/null @@ -1,50 +0,0 @@ -import React from 'react'; - -const PendingPool = {}; -const ReadyPool = {}; - -export default function ImageCell({ src }) { - const [srcState, setSrcState] = React.useState(false); - - React.useEffect(() => { - loadImage(src); - }); - function loadImage(src) { - if (ReadyPool[src]) { - setSrcState(src); - return; - } - - if (PendingPool[src]) { - PendingPool[src].push(onLoadImage); - return; - } - PendingPool[src] = [onLoadImage]; - - const img = new Image(); - img.onload = () => { - PendingPool[src].forEach(callback => { - callback(src); - }); - delete PendingPool[src]; - img.onload = null; - src = undefined; - }; - img.src = srcState; - } - function onLoadImage(source) { - ReadyPool[src] = true; - if (source === src) { - setSrcState(source); - } - } - const style = src - ? { - backgroundImage: `url(${src})`, - width: '70px', - height: '70px', - backgroundSize: 'cover', - } - : undefined; - return <div className="exampleImage" style={style} />; -} diff --git a/src/components/YoutubeSearch/PlayYoutubeVideo.js b/src/components/YoutubeSearch/PlayYoutubeVideo.js deleted file mode 100644 index 7189f14..0000000 --- a/src/components/YoutubeSearch/PlayYoutubeVideo.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import YouTube from 'react-youtube'; -import DefaultModal from '../Feedback/Modal'; -import { YoutubeModal } from './YoutubeSearch.style'; - -const Modal = YoutubeModal(DefaultModal); - -export default function({ selectedVideo, handleCancel }) { - const ops = { playerVars: { autoplay: 1 } }; - return ( - <Modal - title={selectedVideo.snippet.tittle} - visible={true} - footer={null} - onCancel={handleCancel} - cancelText="Cancel" - className="youtubeVideoModal" - width="670px" - > - <div className="isoCardWrapper" /> - <YouTube videoId={selectedVideo.id.videoId} opts={ops} /> - </Modal> - ); -} diff --git a/src/components/YoutubeSearch/PlayYoutubeVideo.style.js b/src/components/YoutubeSearch/PlayYoutubeVideo.style.js deleted file mode 100644 index f891c77..0000000 --- a/src/components/YoutubeSearch/PlayYoutubeVideo.style.js +++ /dev/null @@ -1,8 +0,0 @@ -import styled from 'styled-components'; - -const styledModal = ComponentName => - styled(ComponentName)` - color: #0f0; - `; - -export { styledModal }; diff --git a/src/components/YoutubeSearch/Result.js b/src/components/YoutubeSearch/Result.js deleted file mode 100644 index 8bb6f7c..0000000 --- a/src/components/YoutubeSearch/Result.js +++ /dev/null @@ -1,127 +0,0 @@ -import React from 'react'; -import Loader from '../utility/loader'; -import HelperText from '../utility/helper-text'; -import Button from '../uielements/button'; -import PlayYoutubeVideo from './PlayYoutubeVideo'; -import { - YoutubeSearchListStyleWrapper, - YoutubeSearchStyleWrapper, -} from './YoutubeSearch.style'; - -function SearchList(result, handleSelectedVideo) { - return ( - <YoutubeSearchListStyleWrapper className="isoYoutubeResultList"> - {result.map(item => { - const { - publishedAt, - title, - description, - channelTitle, - thumbnails, - channelId, - } = item.snippet; - const id = item.id.videoId; - const updateDate = new Date(publishedAt).toDateString(); - const onClick = event => { - event.preventDefault(); - handleSelectedVideo(item); - }; - const onChannelClick = event => { - event.preventDefault(); - event.stopPropagation(); - window.open(`https://www.youtube.com/channel/${channelId}`, '_blank'); - }; - return ( - <div key={id} className="isoSingleVideoResult" onClick={onClick}> - <div className="videoThumb"> - <img alt="#" src={thumbnails.default.url} /> - </div> - - <div className="videoDescription"> - <h3 className="videoName"> - <a href="# ">{`${title} `}</a> - </h3> - - <div className="ChannelNameAndDate"> - <a onClick={onChannelClick} className="channelTitle" href="# "> - {`${channelTitle} `} - </a> - <span className="uploadDate">{updateDate}</span> - </div> - - {description ? <p>{description}</p> : ''} - </div> - </div> - ); - })} - </YoutubeSearchListStyleWrapper> - ); -} -function YoutubeResult({ YoutubeSearch, onPageChange }) { - const [selectedVideo, setSelectrdVideo] = React.useState(null); - - const handleCancel = () => { - handleSelectedVideo(null); - }; - const handleSelectedVideo = selectedVideo => { - setSelectrdVideo(selectedVideo); - }; - - const { - searcText, - result, - loading, - error, - nextPageToken, - prevPageToken, - total_count, - } = YoutubeSearch; - if (!searcText) { - return null; - } - if (loading) { - return <Loader />; - } - if (error || !total_count) { - return <HelperText text="THERE ARE SOME ERRORS" />; - } - if (result.length === 0) { - return <HelperText text="No Result Found" />; - } - return ( - <YoutubeSearchStyleWrapper className="isoYoutubeSearchResult"> - <p className="isoTotalResultFind"> - <span>{`${total_count}`} videos found</span> - </p> - - {selectedVideo ? ( - <PlayYoutubeVideo - selectedVideo={selectedVideo} - handleCancel={handleCancel} - /> - ) : ( - '' - )} - {SearchList(result, handleSelectedVideo)} - - <div className="youtubeSearchPagination"> - {prevPageToken ? ( - <Button onClick={() => onPageChange(searcText, prevPageToken)}> - Previous - </Button> - ) : ( - '' - )} - {nextPageToken ? ( - <Button onClick={() => onPageChange(searcText, nextPageToken)}> - Next - </Button> - ) : ( - '' - )} - </div> - </YoutubeSearchStyleWrapper> - ); -} - -export default YoutubeResult; diff --git a/src/components/YoutubeSearch/YoutubeSearch.style.js b/src/components/YoutubeSearch/YoutubeSearch.style.js deleted file mode 100644 index cb82f7c..0000000 --- a/src/components/YoutubeSearch/YoutubeSearch.style.js +++ /dev/null @@ -1,207 +0,0 @@ -import styled from 'styled-components'; -import { palette } from 'styled-theme'; -import { borderRadius, transition } from '@imd/lib/helpers/style_utils'; -import WithDirection from '@imd/lib/helpers/rtl'; -const WDYoutubeSearchListStyleWrapper = styled.div` - width: 100%; - display: flex; - flex-direction: column; - - .isoSingleVideoResult { - padding: 20px 0; - border-bottom: 1px solid ${palette('border', 2)}; - display: flex; - width: 100%; - - &:last-of-type { - border-bottom: 0; - } - - .videoThumb { - width: 100px; - height: 100px; - display: -webkit-inline-flex; - display: -ms-inline-flex; - display: inline-flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - overflow: hidden; - - @media only screen and (max-width: 420px) { - width: 70px; - height: 70px; - } - - img { - width: 100%; - height: 100%; - object-fit: cover; - } - } - - .videoDescription { - display: flex; - flex-direction: column; - width: 100%; - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 20px 0 0' : '0 0 0 20px'}; - cursor: pointer; - - h3.videoName { - width: 70%; - flex-shrink: 0; - margin: 0; - - @media only screen and (max-width: 767px) { - width: 100%; - } - - @media only screen and (min-width: 768px) and (max-width: 1199px) { - flex-shrink: 1; - } - - a { - font-size: 18px; - font-weight: 400; - color: ${palette('text', 0)}; - line-height: 1.3; - word-break: break-word; - display: inline-block; - text-decoration: none; - ${transition('')}; - - &:hover { - color: ${palette('primary', 0)}; - } - } - } - - .ChannelNameAndDate { - width: 100%; - display: flex; - align-items: center; - margin-top: 3px; - - @media only screen and (max-width: 420px) { - flex-direction: column; - align-items: flex-start; - } - - .channelTitle { - width: auto; - flex-shrink: 0; - display: inline-block; - align-items: center; - font-size: 13px; - font-weight: 400; - color: ${palette('text', 2)}; - line-height: 1.3; - ${transition('')}; - - &:hover { - color: ${palette('primary', 11)}; - } - } - - .uploadDate { - font-size: 13px; - font-weight: 400; - color: ${palette('text', 2)}; - line-height: 1.3; - display: inline-block; - padding-left: 20px; - position: relative; - - &:before { - content: ''; - width: 4px; - height: 4px; - display: inline-block; - background-color: ${palette('grayscale', 0)}; - position: absolute; - top: 6px; - left: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '8px')}; - right: ${props => - props['data-rtl'] === 'rtl' ? '8px' : 'inherit'}; - ${borderRadius('50%')}; - } - - @media only screen and (max-width: 420px) { - padding: ${props => - props['data-rtl'] === 'rtl' ? '0 13px 0 0' : '0 0 0 13px'}; - - &:before { - left: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '0')}; - right: ${props => - props['data-rtl'] === 'rtl' ? '0' : 'inherit'}; - } - } - } - } - - p { - font-size: 14px; - font-weight: 400; - color: ${palette('text', 3)}; - line-height: 1.3; - margin-bottom: 0; - margin-top: 10px; - display: block; - word-break: break-word; - } - } - } -`; -const YoutubeSearchStyleWrapper = styled.div` - margin-top: 30px; - - .isoTotalResultFind { - font-size: 18px; - font-weight: 700; - color: ${palette('text', 0)}; - line-height: 1.3; - padding-bottom: 15px; - border-bottom: 1px solid ${palette('border', 2)}; - } - - .youtubeSearchPagination { - display: -webkit-flex; - display: -ms-flex; - display: flex; - align-items: center; - justify-content: center; - margin: 25px 0 10px; - - button { - margin: 0 10px; - } - } -`; - -const YoutubeModal = ComponentName => styled(ComponentName)` - .ant-modal-close-x { - width: 35px; - height: 35px; - line-height: 35px; - background-color: #fff; - border-radius: 0 0 0 5px; - } - - .ant-modal-body { - padding: 15px; - iframe { - width: 100%; - } - } -`; - -const YoutubeSearchListStyleWrapper = WithDirection( - WDYoutubeSearchListStyleWrapper -); - -export { - YoutubeSearchListStyleWrapper, - YoutubeSearchStyleWrapper, - YoutubeModal, -}; diff --git a/src/containers/Authentication/Auth0/Auth0.js b/src/containers/Authentication/Auth0/Auth0.js deleted file mode 100644 index 755c1a5..0000000 --- a/src/containers/Authentication/Auth0/Auth0.js +++ /dev/null @@ -1,53 +0,0 @@ -import { EventEmitter } from 'events'; -import Auth0Lock from 'auth0-lock'; -import history from '@imd/lib/helpers/history'; -import Auth0Config from '@imd/config/auth0.config'; -import { notification } from '@imd/components'; - -class Auth0 extends EventEmitter { - lock = new Auth0Lock( - Auth0Config.clientID, - Auth0Config.domain, - Auth0Config.options - ); - - login = () => { - if (!this.lock) { - return; - } - this.lock.show(); - }; - handleAuthentication = () => { - // Add callback Lock's `authenticated` event - this.lock.on('authenticated', this.setSession); - // Add callback for Lock's `authorization_error` event - this.lock.on('authorization_error', error => - notification('error', 'Wrong mail or password') - ); - }; - setSession = authResult => { - // Set the time that the access token will expire at - let expiresAt = JSON.stringify( - authResult.expiresIn * 1000 + new Date().getTime() - ); - localStorage.setItem('access_token', authResult.accessToken); - localStorage.setItem('id_token', authResult.idToken); - localStorage.setItem('expires_at', expiresAt); - // navigate to the dashboard route - history.replace('/dashboard'); - }; - logout = () => { - // Clear access token and ID token from local storage - localStorage.removeItem('access_token'); - localStorage.removeItem('id_token'); - localStorage.removeItem('expires_at'); - // navigate to the home route - history.replace('/'); - }; - - isAuthenticated = () => { - let expiresAt = JSON.parse(localStorage.getItem('expiresAt')); - return new Date().getTime() < expiresAt; - }; -} -export default new Auth0(); diff --git a/src/containers/Authentication/Auth0/Auth0Callback.js b/src/containers/Authentication/Auth0/Auth0Callback.js deleted file mode 100644 index 9a8a949..0000000 --- a/src/containers/Authentication/Auth0/Auth0Callback.js +++ /dev/null @@ -1,13 +0,0 @@ -import React, { useEffect } from 'react'; -import Auth0 from './Auth0'; -import authActions from '@imd/redux/auth/actions'; -const Auth0Callback = () => { - useEffect(() => { - Auth0.handleAuthentication(); - authActions.login(); - }, []); - - return <p>Loading ...</p>; -}; - -export default Auth0Callback; diff --git a/src/containers/BlankPage.js b/src/containers/BlankPage.js deleted file mode 100644 index 23ca1ae..0000000 --- a/src/containers/BlankPage.js +++ /dev/null @@ -1,15 +0,0 @@ -import React, { Component } from 'react'; -import LayoutContentWrapper from '@imd/components/utility/layoutWrapper'; -import LayoutContent from '@imd/components/utility/layoutContent'; - -export default class extends Component { - render() { - return ( - <LayoutContentWrapper style={{ height: '100vh' }}> - <LayoutContent> - <h1>Blank Page</h1> - </LayoutContent> - </LayoutContentWrapper> - ); - } -} diff --git a/src/containers/Pages/SignIn/SignIn.js b/src/containers/Pages/SignIn/SignIn.js index b418b69..cfe64b5 100644 --- a/src/containers/Pages/SignIn/SignIn.js +++ b/src/containers/Pages/SignIn/SignIn.js @@ -7,7 +7,6 @@ import Button from '@imd/components/uielements/button'; import IntlMessages from '@imd/components/utility/intlMessages'; import authAction from '@imd/redux/auth/actions'; import appAction from '@imd/redux/app/actions'; -import Auth0 from '../../Authentication/Auth0/Auth0'; import { signInWithGoogle, signInWithFacebook, @@ -102,15 +101,6 @@ export default function SignIn() { <IntlMessages id="page.signInGooglePlus" /> </Button> - <Button - onClick={() => { - Auth0.login(); - }} - type="primary" - className="btnAuthZero" - > - <IntlMessages id="page.signInAuth0" /> - </Button> </div> <div className="isoCenterComponent isoHelperWrapper"> <Link to="/forgotpassword" className="isoForgotPass"> diff --git a/src/containers/ThemeSwitcher/ThemeSwitcher.js b/src/containers/ThemeSwitcher/ThemeSwitcher.js new file mode 100644 index 0000000..662e30d --- /dev/null +++ b/src/containers/ThemeSwitcher/ThemeSwitcher.js @@ -0,0 +1,75 @@ +import React from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import Actions from '@iso/redux/themeSwitcher/actions'; +import Switcher from '@iso/components/ThemeSwitcher/ThemeSwitcher'; +import LanguageSwitcher from '../LanguageSwitcher/LanguageSwitcher'; +import Themes from './config'; +import bucketSVG from '@iso/assets/images/bucket.svg'; +import IntlMessages from '@iso/components/utility/intlMessages'; +import ThemeSwitcherStyle from './ThemeSwitcher.styles'; + +const { switchActivation, changeTheme } = Actions; + +export default function ThemeSwitcher() { + const { isActivated, topbarTheme, sidebarTheme, layoutTheme } = useSelector( + state => state.ThemeSwitcher + ); + const dispatch = useDispatch(); + const styleButton = { background: sidebarTheme.buttonColor }; + + return ( + <ThemeSwitcherStyle + className={isActivated ? 'isoThemeSwitcher active' : 'isoThemeSwitcher'} + > + <div className="componentTitleWrapper" style={styleButton}> + <h3 className="componentTitle"> + <IntlMessages id="themeSwitcher.settings" /> + </h3> + </div> + + <div className="SwitcherBlockWrapper"> + <Switcher + config={Themes.sidebarTheme} + changeTheme={(attr, theme) => dispatch(changeTheme(attr, theme))} + selectedId={sidebarTheme.themeName} + /> + + <Switcher + config={Themes.topbarTheme} + changeTheme={(attr, theme) => dispatch(changeTheme(attr, theme))} + selectedId={topbarTheme.themeName} + /> + + <Switcher + config={Themes.layoutTheme} + changeTheme={(attr, theme) => dispatch(changeTheme(attr, theme))} + selectedId={layoutTheme.themeName} + /> + <LanguageSwitcher /> + </div> + + <div className="purchaseBtnWrapper"> + <a + href="https://themeforest.net/item/isomorphic-react-redux-admin-dashboard/20262330?ref=redqteam" + className="purchaseBtn" + target="_blank" + rel="noopener noreferrer" + style={styleButton} + > + <IntlMessages id="themeSwitcher.purchase" /> + </a> + </div> + + <button + type="primary" + className="switcherToggleBtn" + style={styleButton} + onClick={() => { + dispatch(switchActivation()); + }} + > + <img src={bucketSVG} alt="bucket" /> + </button> + </ThemeSwitcherStyle> + ); +} diff --git a/src/containers/ThemeSwitcher/ThemeSwitcher.styles.js b/src/containers/ThemeSwitcher/ThemeSwitcher.styles.js new file mode 100644 index 0000000..804c1de --- /dev/null +++ b/src/containers/ThemeSwitcher/ThemeSwitcher.styles.js @@ -0,0 +1,255 @@ +import styled from 'styled-components'; +import { palette } from 'styled-theme'; +import { + transition, + borderRadius, + boxShadow, +} from '@iso/lib/helpers/style_utils'; +import WithDirection from '@iso/lib/helpers/rtl'; + +const ThemeSwitcherStyle = styled.div` + background-color: #ffffff; + width: 340px; + height: calc(100% - 70px); + padding: 0 0 50px; + flex-shrink: 0; + position: fixed; + top: 70px; + right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '-340px')}; + left: ${props => (props['data-rtl'] === 'rtl' ? '-340px' : 'inherit')}; + z-index: 1001; + ${transition()}; + ${boxShadow('-1px 0 5px rgba(0,0,0,0.25)')}; + + @media only screen and (max-width: 767px) { + width: 270px; + right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '-270px')}; + left: ${props => (props['data-rtl'] === 'rtl' ? '-270px' : 'inherit')}; + } + + &.active { + right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '0')}; + left: ${props => (props['data-rtl'] === 'rtl' ? '0' : 'inherit')}; + } + + .switcher { + right: ${props => (props['data-rtl'] === 'rtl' ? '-98px' : 'inherit')}; + left: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '-98px')}; + } + + .componentTitleWrapper { + padding: 25px 15px; + height: 70px; + background-color: ${palette('text', 0)}; + + .componentTitle { + font-size: 21px; + font-weight: 700; + color: #fff; + line-height: 1; + width: 100%; + text-align: center; + display: flex; + justify-content: center; + } + } + + .SwitcherBlockWrapper { + width: 100%; + height: 100%; + padding-bottom: 105px; + overflow: hidden; + overflow-y: auto; + display: flex; + flex-direction: column; + + .themeSwitchBlock { + width: 100%; + display: -webkit-flex; + display: -ms-flex; + display: flex; + flex-shrink: 0; + flex-direction: column; + margin-top: 30px; + + h4 { + font-size: 14px; + font-weight: 700; + color: ${palette('text', 0)}; + line-height: 1.3; + margin-bottom: 0; + padding: 0 15px; + text-transform: uppercase; + } + + .themeSwitchBtnWrapper { + width: 100%; + display: flex; + align-items: center; + padding: 15px 20px; + + button { + width: 20px; + height: 20px; + display: flex; + margin: ${props => + props['data-rtl'] === 'rtl' ? '0 0 0 10px' : '0 10px 0 0'}; + border: 1px solid #e4e4e4; + outline: 0; + padding: 0; + background: none; + justify-content: center; + position: relative; + cursor: pointer; + ${borderRadius('3px')}; + + &.languageSwitch { + border: 0; + width: 30px; + height: auto; + + &.selectedTheme { + &:before, + &:after { + top: 2px; + left: ${props => + props['data-rtl'] === 'rtl' ? 'inherit' : '-3px'}; + right: ${props => + props['data-rtl'] === 'rtl' ? '-3px' : 'inherit'}; + } + } + } + + img { + width: 100%; + } + + &.selectedTheme { + &:before { + content: ''; + width: 6px; + height: 6px; + display: -webkit-inline-flex; + display: -ms-inline-flex; + display: inline-flex; + background-color: ${palette('color', 13)}; + position: absolute; + top: -2px; + left: ${props => + props['data-rtl'] === 'rtl' ? 'inherit' : '-2px'}; + right: ${props => + props['data-rtl'] === 'rtl' ? '-2px' : 'inherit'}; + ${borderRadius('50%')}; + } + + &:after { + content: ''; + width: 6px; + height: 6px; + display: -webkit-inline-flex; + display: -ms-inline-flex; + display: inline-flex; + border: 1px solid ${palette('color', 13)}; + background-color: ${palette('color', 13)}; + position: absolute; + top: -2px; + left: ${props => + props['data-rtl'] === 'rtl' ? 'inherit' : '-2px'}; + right: ${props => + props['data-rtl'] === 'rtl' ? '-2px' : 'inherit'}; + -webkit-animation: selectedAnimation 1.2s infinite ease-in-out; + animation: selectedAnimation 1.2s infinite ease-in-out; + ${borderRadius('50%')}; + } + } + } + } + } + } + + .switcherToggleBtn { + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + background-color: #ffffff; + outline: 0; + border: 0; + position: absolute; + text-align: center; + top: 200px; + left: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '-50px')}; + right: ${props => (props['data-rtl'] === 'rtl' ? '-50px' : 'inherit')}; + cursor: pointer; + border-radius: ${props => + props['data-rtl'] === 'rtl' ? '0 3px 3px 0' : '3px 0 0 3px'}; + ${boxShadow('-2px 0 5px rgba(0,0,0,0.2)')}; + + img { + width: 23px; + } + } + + .purchaseBtnWrapper { + width: 100%; + padding: 25px 0; + display: flex; + align-items: center; + justify-content: center; + bottom: 0px; + position: absolute; + background-color: #ffffff; + + .purchaseBtn { + width: calc(100% - 50px); + height: 42px; + font-size: 14px; + font-weight: 700; + color: #fff; + text-decoration: none; + background-color: ${palette('primary', 0)}; + text-transform: uppercase; + line-height: 1; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + ${borderRadius('5px')}; + ${transition()}; + + &:hover { + background-color: ${palette('primary', 13)}; + } + } + } + + @-webkit-keyframes selectedAnimation { + 0% { + -webkit-transform: scale(0.8); + transform: scale(0.8); + opacity: 0.5; + } + 100% { + -webkit-transform: scale(2.4); + transform: scale(2.4); + opacity: 0; + } + } + @keyframes selectedAnimation { + 0% { + -webkit-transform: scale(0.8); + transform: scale(0.8); + opacity: 0.5; + } + 100% { + -webkit-transform: scale(2.4); + transform: scale(2.4); + opacity: 0; + } + } +`; + +export default WithDirection(ThemeSwitcherStyle); diff --git a/src/containers/ThemeSwitcher/config.js b/src/containers/ThemeSwitcher/config.js new file mode 100644 index 0000000..697a342 --- /dev/null +++ b/src/containers/ThemeSwitcher/config.js @@ -0,0 +1,174 @@ +import { themeConfig } from '@iso/config/theme/theme.config'; +const changeThemes = { + id: 'changeThemes', + label: 'themeSwitcher', + defaultTheme: themeConfig.theme, + options: [ + { + themeName: 'defaultTheme', + buttonColor: '#ffffff', + textColor: '#323332', + }, + { + themeName: 'theme2', + buttonColor: '#ffffff', + textColor: '#323332', + }, + ], +}; +const topbarTheme = { + id: 'topbarTheme', + label: 'themeSwitcher.Topbar', + defaultTheme: themeConfig.topbar, + options: [ + { + themeName: 'defaultTheme', + buttonColor: '#ffffff', + textColor: '#323332', + }, + { + themeName: 'theme1', + buttonColor: '#e0364c', + backgroundColor: '#e0364c', + textColor: '#ffffff', + }, + { + themeName: 'theme2', + buttonColor: '#6534ff', + backgroundColor: '#6534ff', + textColor: '#ffffff', + }, + { + themeName: 'theme3', + buttonColor: '#4482FF', + backgroundColor: '#4482FF', + textColor: '#ffffff', + }, + { + themeName: 'theme4', + buttonColor: '#422e62', + backgroundColor: '#422e62', + textColor: '#ffffff', + }, + { + themeName: 'theme5', + buttonColor: '#22144c', + backgroundColor: '#22144c', + textColor: '#ffffff', + }, + { + themeName: 'theme6', + buttonColor: '#4670a2', + backgroundColor: '#4670a2', + textColor: '#ffffff', + }, + { + themeName: 'theme7', + buttonColor: '#494982', + backgroundColor: '#494982', + textColor: '#ffffff', + }, + ], +}; +const sidebarTheme = { + id: 'sidebarTheme', + label: 'themeSwitcher.Sidebar', + defaultTheme: themeConfig.sidebar, + options: [ + { + themeName: 'defaultTheme', + buttonColor: '#323332', + backgroundColor: undefined, + textColor: '#788195', + }, + { + themeName: 'theme1', + buttonColor: '#e0364c', + backgroundColor: '#e0364c', + textColor: '#ffffff', + }, + { + themeName: 'theme2', + buttonColor: '#6534ff', + backgroundColor: '#6534ff', + textColor: '#ffffff', + }, + { + themeName: 'theme3', + buttonColor: '#4482FF', + backgroundColor: '#4482FF', + textColor: '#ffffff', + }, + { + themeName: 'theme4', + buttonColor: '#422e62', + backgroundColor: '#422e62', + textColor: '#ffffff', + }, + { + themeName: 'theme5', + buttonColor: '#22144c', + backgroundColor: '#22144c', + textColor: '#ffffff', + }, + { + themeName: 'theme6', + buttonColor: '#4670a2', + backgroundColor: '#4670a2', + textColor: '#ffffff', + }, + { + themeName: 'theme7', + buttonColor: '#494982', + backgroundColor: '#494982', + textColor: '#ffffff', + }, + ], +}; +const layoutTheme = { + id: 'layoutTheme', + label: 'themeSwitcher.Background', + defaultTheme: themeConfig.layout, + options: [ + { + themeName: 'defaultTheme', + buttonColor: '#ffffff', + backgroundColor: '#F1F3F6', + textColor: undefined, + }, + { + themeName: 'theme1', + buttonColor: '#ffffff', + backgroundColor: '#ffffff', + textColor: '#323232', + }, + { + themeName: 'theme2', + buttonColor: '#F9F9F9', + backgroundColor: '#F9F9F9', + textColor: '#ffffff', + }, + { + themeName: 'theme3', + buttonColor: '#ebebeb', + backgroundColor: '#ebebeb', + textColor: '#ffffff', + }, + ], +}; +const customizedThemes = { + changeThemes, + topbarTheme, + sidebarTheme, + layoutTheme, +}; +export function getCurrentTheme(attribute, selectedThemename) { + let selecetedTheme = {}; + customizedThemes[attribute].options.forEach(theme => { + if (theme.themeName === selectedThemename) { + selecetedTheme = theme; + } + }); + return selecetedTheme; +} +export default customizedThemes; diff --git a/src/containers/Topbar/Topbar.js b/src/containers/Topbar/Topbar.js index b27083c..7ddad91 100644 --- a/src/containers/Topbar/Topbar.js +++ b/src/containers/Topbar/Topbar.js @@ -2,11 +2,6 @@ import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { Layout } from 'antd'; import appActions from '@imd/redux/app/actions'; -import TopbarNotification from './TopbarNotification'; -import TopbarMessage from './TopbarMessage'; -import TopbarSearch from './TopbarSearch'; -import TopbarUser from './TopbarUser'; -import TopbarAddtoCart from './TopbarAddToCart'; import TopbarWrapper from './Topbar.styles'; const { Header } = Layout; diff --git a/src/containers/Topbar/TopbarAddToCart.js b/src/containers/Topbar/TopbarAddToCart.js deleted file mode 100644 index 0c1f376..0000000 --- a/src/containers/Topbar/TopbarAddToCart.js +++ /dev/null @@ -1,129 +0,0 @@ -import React from 'react'; -import { Link, useRouteMatch } from 'react-router-dom'; -import { useDispatch, useSelector } from 'react-redux'; -import IntlMessages from '@imd/components/utility/intlMessages'; -import Scrollbar from '@imd/components/utility/customScrollBar'; -import Popover from '@imd/components/uielements/popover'; -import SingleCart from '@imd/components/Cart/SingleCartModal'; -import ecommerceAction from '@imd/redux/ecommerce/actions'; -import TopbarDropdownWrapper from './TopbarDropdown.styles'; - -const { - initData, - changeViewTopbarCart, - changeProductQuantity, -} = ecommerceAction; -let totalPrice; -export default function TopbarAddtoCart() { - let { url } = useRouteMatch(); - const dispatch = useDispatch(); - const customizedTheme = useSelector(state => state.ThemeSwitcher.topbarTheme); - const { - productQuantity, - products, - loadingInitData, - viewTopbarCart, - } = useSelector(state => state.Ecommerce); - - function hide() { - dispatch(changeViewTopbarCart(false)); - } - function handleVisibleChange() { - dispatch(changeViewTopbarCart(!viewTopbarCart)); - } - React.useEffect(() => { - if (!loadingInitData) { - dispatch(initData()); - } - }, [dispatch, loadingInitData]); - - function renderProducts() { - totalPrice = 0; - if (!productQuantity || productQuantity.length === 0) { - return ( - <div className="isoNoItemMsg"> - <span>No item found</span> - </div> - ); - } - return productQuantity.map(product => { - totalPrice += product.quantity * products[product.objectID].price; - return ( - <SingleCart - key={product.objectID} - quantity={product.quantity} - changeQuantity={changeQuantity} - cancelQuantity={cancelQuantity} - {...products[product.objectID]} - /> - ); - }); - } - function changeQuantity(objectID, quantity) { - const newProductQuantity = []; - productQuantity.forEach(product => { - if (product.objectID !== objectID) { - newProductQuantity.push(product); - } else { - newProductQuantity.push({ - objectID, - quantity, - }); - } - }); - dispatch(changeProductQuantity(newProductQuantity)); - } - function cancelQuantity(objectID) { - const newProductQuantity = []; - productQuantity.forEach(product => { - if (product.objectID !== objectID) { - newProductQuantity.push(product); - } - }); - dispatch(changeProductQuantity(newProductQuantity)); - } - - const content = ( - <TopbarDropdownWrapper className="topbarAddtoCart"> - <div className="isoDropdownHeader"> - <h3> - <IntlMessages id="sidebar.cart" /> - </h3> - </div> - <div className="isoDropdownBody isoCartItemsWrapper"> - <Scrollbar style={{ height: 300 }}>{renderProducts()}</Scrollbar> - </div> - <div className="isoDropdownFooterLinks"> - <Link to={`${url}/cart`} onClick={hide}> - <IntlMessages id="topbar.viewCart" /> - </Link> - - <h3> - <IntlMessages id="topbar.totalPrice" />:{' '} - <span>${totalPrice.toFixed(2)}</span> - </h3> - </div> - </TopbarDropdownWrapper> - ); - return ( - <Popover - content={content} - trigger="click" - visible={viewTopbarCart} - onVisibleChange={handleVisibleChange} - placement="bottomLeft" - > - <div className="isoIconWrapper"> - <i - className="ion-android-cart" - style={{ color: customizedTheme.textColor }} - /> - {productQuantity.length === 0 ? ( - '' - ) : ( - <span>{productQuantity.length}</span> - )} - </div> - </Popover> - ); -} diff --git a/src/containers/Topbar/TopbarDropdown.styles.js b/src/containers/Topbar/TopbarDropdown.styles.js deleted file mode 100644 index b338f7f..0000000 --- a/src/containers/Topbar/TopbarDropdown.styles.js +++ /dev/null @@ -1,293 +0,0 @@ -import styled from 'styled-components'; -import { palette } from 'styled-theme'; -import { - transition, - borderRadius, - boxShadow, -} from '@imd/lib/helpers/style_utils'; -import WithDirection from '@imd/lib/helpers/rtl'; - -const TopbarDropdownWrapper = styled.div` - display: flex; - flex-direction: column; - background-color: #ffffff; - margin: -12px -16px; - width: 360px; - min-width: 160px; - flex-shrink: 0; - ${borderRadius('5px')}; - ${boxShadow('0 2px 10px rgba(0,0,0,0.2)')}; - ${transition()}; - cursor: pointer; - @media only screen and (max-width: 767px) { - width: 310px; - } - - .isoDropdownHeader { - border-bottom: 1px solid #f1f1f1; - margin-bottom: 0px; - padding: 15px 30px; - width: 100%; - display: flex; - align-items: center; - justify-content: center; - - h3 { - font-size: 14px; - font-weight: 500; - color: ${palette('text', 0)}; - text-align: center; - text-transform: uppercase; - margin: 0; - } - } - - .isoDropdownBody { - width: 100%; - height: 300px; - display: flex; - flex-direction: column; - margin-bottom: 10px; - background-color: ${palette('grayscale', 6)}; - - a { - text-decoration: none; - } - - .isoDropdownListItem { - padding: 15px 30px; - flex-shrink: 0; - text-decoration: none; - display: flex; - flex-direction: column; - text-decoration: none; - text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')}; - width: 100%; - border-bottom: 1px solid ${palette('border', 2)}; - ${transition()}; - - &:hover { - background-color: ${palette('grayscale', 3)}; - } - - .isoListHead { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 5px; - } - - h5 { - font-size: 13px; - font-weight: 500; - color: ${palette('text', 0)}; - margin-top: 0; - } - - p { - font-size: 12px; - font-weight: 400; - color: ${palette('text', 2)}; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - .isoDate { - font-size: 11px; - color: ${palette('grayscale', 1)}; - flex-shrink: 0; - } - } - } - - .isoViewAllBtn { - font-size: 13px; - font-weight: 500; - color: ${palette('text', 2)}; - padding: 10px 15px 20px; - display: flex; - text-decoration: none; - align-items: center; - justify-content: center; - text-align: center; - ${transition()}; - - &:hover { - color: ${palette('primary', 0)}; - } - } - - .isoDropdownFooterLinks { - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px 30px 20px; - - a { - font-size: 13px; - font-weight: 500; - color: ${palette('text', 0)}; - text-decoration: none; - padding: 10px 20px; - line-height: 1; - border: 1px solid ${palette('border', 1)}; - display: flex; - align-items: center; - justify-content: center; - ${transition()}; - - &:hover { - background-color: ${palette('primary', 0)}; - border-color: ${palette('primary', 0)}; - color: #ffffff; - } - } - - h3 { - font-size: 14px; - font-weight: 500; - color: ${palette('text', 0)}; - line-height: 1.3; - } - } - - &.withImg { - .isoDropdownListItem { - display: flex; - flex-direction: row; - - .isoImgWrapper { - width: 35px; - height: 35px; - overflow: hidden; - margin: ${props => - props['data-rtl'] === 'rtl' ? '0 0 0 15px' : '0 15px 0 0'}; - display: -webkit-inline-flex; - display: -ms-inline-flex; - display: inline-flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - background-color: ${palette('grayscale', 9)}; - ${borderRadius('50%')}; - - img { - width: 100%; - height: 100%; - object-fit: cover; - } - } - - .isoListContent { - width: 100%; - display: flex; - flex-direction: column; - - .isoListHead { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 10px; - } - - h5 { - margin-bottom: 0; - padding: ${props => - props['data-rtl'] === 'rtl' ? '0 0 0 15px' : '0 15px 0 0'}; - } - - .isoDate { - font-size: 11px; - color: ${palette('grayscale', 1)}; - flex-shrink: 0; - } - - p { - white-space: normal; - line-height: 1.5; - } - } - } - } - - &.topbarMail { - @media only screen and (max-width: 519px) { - right: -170px; - } - } - - &.topbarMessage { - @media only screen and (max-width: 500px) { - right: -69px; - } - } - - &.topbarNotification { - @media only screen and (max-width: 500px) { - right: -120px; - } - } - - &.topbarAddtoCart { - @media only screen and (max-width: 465px) { - right: -55px; - } - - .isoDropdownHeader { - margin-bottom: 0; - } - - .isoDropdownBody { - background-color: ${palette('grayscale', 6)}; - display: flex; - flex-direction: column; - - .isoNoItemMsg { - height: 100%; - min-height: 260px; - display: flex; - align-items: center; - justify-content: center; - - span { - font-size: 30px; - font-weight: 300; - color: ${palette('grayscale', 1)}; - line-height: 1.2; - } - } - } - } - - &.isoUserDropdown { - padding: 7px 0; - display: flex; - flex-direction: column; - background-color: #ffffff; - width: 220px; - min-width: 160px; - flex-shrink: 0; - ${borderRadius('5px')}; - ${boxShadow('0 2px 10px rgba(0,0,0,0.2)')}; - ${transition()}; - - .isoDropdownLink { - font-size: 13px; - color: ${palette('text', 1)}; - line-height: 1.1; - padding: 7px 15px; - background-color: transparent; - text-decoration: none; - display: flex; - justify-content: flex-start; - ${transition()}; - - &:hover { - background-color: ${palette('secondary', 6)}; - } - } - } -`; - -export default WithDirection(TopbarDropdownWrapper); diff --git a/src/containers/Topbar/TopbarMail.js b/src/containers/Topbar/TopbarMail.js deleted file mode 100644 index 0609244..0000000 --- a/src/containers/Topbar/TopbarMail.js +++ /dev/null @@ -1,93 +0,0 @@ -import React from 'react'; -import { Link, useRouteMatch } from 'react-router-dom'; -import { useSelector } from 'react-redux'; -import IntlMessages from '@imd/components/utility/intlMessages'; -import Scrollbar from '@imd/components/utility/customScrollBar'; -import Popover from '@imd/components/uielements/popover'; -import TopbarDropdownWrapper from './TopbarDropdown.styles'; - -const demoMails = [ - { - id: 1, - name: 'David Doe', - time: '3 minutes ago', - desc: - 'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner', - }, - { - id: 2, - name: 'Navis Doe', - time: '4 minutes ago', - desc: - 'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner', - }, - { - id: 3, - name: 'Emanual Doe', - time: '5 minutes ago', - desc: - 'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner', - }, - { - id: 4, - name: 'Dowain Doe', - time: '6 minutes ago', - desc: - 'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner', - }, -]; - -export default function TopbarMail() { - let { url } = useRouteMatch(); - - const customizedTheme = useSelector(state => state.ThemeSwitcher.topbarTheme); - const [visible, setVisibility] = React.useState(false); - function hide() { - setVisibility(false); - } - function handleVisibleChange() { - setVisibility(visible => !visible); - } - - const content = ( - <TopbarDropdownWrapper className="topbarMail"> - <div className="isoDropdownHeader"> - <h3> - <IntlMessages id="sidebar.email" /> - </h3> - </div> - <div className="isoDropdownBody"> - <Scrollbar style={{ height: 300 }}> - {demoMails.map(mail => ( - <Link to={`${url}/mailbox`} onClick={hide} key={mail.id}> - <div className="isoDropdownListItem"> - <div className="isoListHead"> - <h5>{mail.name}</h5> - <span className="isoDate">{mail.time}</span> - </div> - <p>{mail.desc}</p> - </div> - </Link> - ))} - </Scrollbar> - </div> - <div className="isoViewAllBtn"> - <IntlMessages id="topbar.viewAll" /> - </div> - </TopbarDropdownWrapper> - ); - return ( - <Popover - content={content} - trigger="click" - visible={visible} - onVisibleChange={handleVisibleChange} - placement="bottomLeft" - > - <div className="isoIconWrapper"> - <i className="ion-email" style={{ color: customizedTheme.textColor }} /> - <span>{demoMails.length}</span> - </div> - </Popover> - ); -} diff --git a/src/containers/Topbar/TopbarMessage.js b/src/containers/Topbar/TopbarMessage.js deleted file mode 100644 index 3e5ea2f..0000000 --- a/src/containers/Topbar/TopbarMessage.js +++ /dev/null @@ -1,96 +0,0 @@ -import React from 'react'; -import { Popover } from 'antd'; -import { useSelector } from 'react-redux'; -import IntlMessages from '@imd/components/utility/intlMessages'; -import Scrollbar from '@imd/components/utility/customScrollBar'; -import TopbarDropdownWrapper from './TopbarDropdown.styles'; - -import Image from '@imd/assets/images/user3.png'; - -const demoMassage = [ - { - id: 1, - name: 'David Doe', - time: '3 minutes ago', - massage: - 'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner', - }, - { - id: 2, - name: 'Navis Doe', - time: '4 minutes ago', - massage: - 'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner', - }, - { - id: 3, - name: 'Emanual Doe', - time: '5 minutes ago', - massage: - 'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner', - }, - { - id: 4, - name: 'Dowain Doe', - time: '6 minutes ago', - massage: - 'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner', - }, -]; - -export default function TopbarMessage() { - const [visible, setVisiblity] = React.useState(false); - const customizedTheme = useSelector(state => state.ThemeSwitcher.topbarTheme); - - function handleVisibleChange() { - setVisiblity(visible => !visible); - } - const content = ( - <TopbarDropdownWrapper className="topbarMessage withImg"> - <div className="isoDropdownHeader"> - <h3> - <IntlMessages id="sidebar.message" /> - </h3> - </div> - <div className="isoDropdownBody"> - <Scrollbar style={{ height: 300 }}> - {demoMassage.map(massage => ( - <a className="isoDropdownListItem" key={massage.id} href="# "> - <div className="isoImgWrapper"> - <img alt="#" src={Image} /> - </div> - - <div className="isoListContent"> - <div className="isoListHead"> - <h5>{massage.name}</h5> - <span className="isoDate">{massage.time}</span> - </div> - <p>{massage.massage}</p> - </div> - </a> - ))} - </Scrollbar> - </div> - <a className="isoViewAllBtn" href="# "> - <IntlMessages id="topbar.viewAll" /> - </a> - </TopbarDropdownWrapper> - ); - return ( - <Popover - content={content} - trigger="click" - visible={visible} - onVisibleChange={handleVisibleChange} - placement="bottomLeft" - > - <div className="isoIconWrapper"> - <i - className="ion-chatbubbles" - style={{ color: customizedTheme.textColor }} - /> - <span>{demoMassage.length}</span> - </div> - </Popover> - ); -} diff --git a/src/containers/Topbar/TopbarNotification.js b/src/containers/Topbar/TopbarNotification.js deleted file mode 100644 index 78adb61..0000000 --- a/src/containers/Topbar/TopbarNotification.js +++ /dev/null @@ -1,79 +0,0 @@ -import React from 'react'; -import { Popover } from 'antd'; -import { useSelector } from 'react-redux'; -import IntlMessages from '@imd/components/utility/intlMessages'; -import TopbarDropdownWrapper from './TopbarDropdown.styles'; - -const demoNotifications = [ - { - id: 1, - name: 'David Doe', - notification: - 'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner', - }, - { - id: 2, - name: 'Navis Doe', - notification: - 'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner', - }, - { - id: 3, - name: 'Emanual Doe', - notification: - 'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner', - }, - { - id: 4, - name: 'Dowain Doe', - notification: - 'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner', - }, -]; - -export default function TopbarNotification() { - const [visible, setVisiblity] = React.useState(false); - const customizedTheme = useSelector(state => state.ThemeSwitcher.topbarTheme); - - function handleVisibleChange() { - setVisiblity(visible => !visible); - } - - const content = ( - <TopbarDropdownWrapper className="topbarNotification"> - <div className="isoDropdownHeader"> - <h3> - <IntlMessages id="sidebar.notification" /> - </h3> - </div> - <div className="isoDropdownBody"> - {demoNotifications.map(notification => ( - <a className="isoDropdownListItem" key={notification.id} href="# "> - <h5>{notification.name}</h5> - <p>{notification.notification}</p> - </a> - ))} - </div> - <a className="isoViewAllBtn" href="# "> - <IntlMessages id="topbar.viewAll" /> - </a> - </TopbarDropdownWrapper> - ); - return ( - <Popover - content={content} - trigger="click" - visible={visible} - onVisibleChange={handleVisibleChange} - placement="bottomLeft" - > - <div className="isoIconWrapper"> - <i - className="ion-android-notifications" - style={{ color: customizedTheme.textColor }} - /> - <span>{demoNotifications.length}</span> - </div> - </Popover> - ); -} diff --git a/src/containers/Topbar/TopbarSearch.js b/src/containers/Topbar/TopbarSearch.js deleted file mode 100644 index 24dfdbd..0000000 --- a/src/containers/Topbar/TopbarSearch.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; -import Searchbar from '@imd/components/Topbar/SearchBox'; -import TopbarSearchModal from './TopbarSearchModal.styles'; - -export default function TopbarSearch() { - const [visible, setVisiblity] = React.useState(false); - const customizedTheme = useSelector(state => state.ThemeSwitcher.topbarTheme); - - const handleBlur = () => { - setTimeout(() => { - setVisiblity(false); - }, 200); - }; - - return ( - <div onClick={() => setVisiblity(true)}> - <i - className="ion-ios-search-strong" - style={{ color: customizedTheme.textColor }} - /> - <TopbarSearchModal - visible={visible} - onOk={() => setVisiblity(false)} - onCancel={() => setVisiblity(false)} - wrapClassName="isoSearchModal" - width="60%" - footer={null} - > - <div className="isoSearchContainer"> - {visible ? <Searchbar onBlur={handleBlur} /> : ''} - </div> - </TopbarSearchModal> - </div> - ); -} diff --git a/src/containers/Topbar/TopbarSearchModal.styles.js b/src/containers/Topbar/TopbarSearchModal.styles.js deleted file mode 100644 index 04d26e9..0000000 --- a/src/containers/Topbar/TopbarSearchModal.styles.js +++ /dev/null @@ -1,85 +0,0 @@ -import Modal from '@imd/components/Feedback/Modal'; -import styled from 'styled-components'; -import { palette } from 'styled-theme'; -import WithDirection from '@imd/lib/helpers/rtl'; - -const TopbarSearchModal = styled(Modal)` - &.ant-modal { - top: 150px; - padding-bottom: 0; - } - - .ant-modal-close-x { - width: 28px; - height: 28px; - line-height: 28px; - display: none; - } - - .ant-modal-content { - overflow: hidden; - border-radius: 5px; - - .ant-modal-header { - display: none; - } - - .ant-modal-body { - padding: 0px; - - .isoSearchContainer { - .ant-input-search { - .ant-input { - border: 0; - border-radius: 0; - padding-left: ${props => - props['data-rtl'] === 'rtl' ? '15px' : '55px'}; - padding-right: ${props => - props['data-rtl'] === 'rtl' ? '55px' : '15px'}; - height: 60px; - font-size: 14px; - - &::-webkit-input-placeholder { - color: ${palette('grayscale', 0)}; - } - - &:-moz-placeholder { - color: ${palette('grayscale', 0)}; - } - - &::-moz-placeholder { - color: ${palette('grayscale', 0)}; - } - &:-ms-input-placeholder { - color: ${palette('grayscale', 0)}; - } - - &:focus { - outline: 0; - box-shadow: none; - } - } - } - - .ant-input-suffix { - right: ${props => (props['data-rtl'] === 'rtl' ? '20px' : 'auto')}; - left: ${props => (props['data-rtl'] === 'rtl' ? 'auto' : '20px')}; - height: 0; - - &:before { - content: '\f4a4'; - font-family: 'ionicons'; - font-size: 24px; - color: ${palette('text', 2)}; - } - - .ant-input-search-icon { - display: none; - } - } - } - } - } -`; - -export default WithDirection(TopbarSearchModal); diff --git a/src/containers/Topbar/TopbarUser.js b/src/containers/Topbar/TopbarUser.js deleted file mode 100644 index 386d741..0000000 --- a/src/containers/Topbar/TopbarUser.js +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; -import { useDispatch } from 'react-redux'; -import Popover from '@imd/components/uielements/popover'; -import IntlMessages from '@imd/components/utility/intlMessages'; -import userpic from '@imd/assets/images/user1.png'; -import authAction from '@imd/redux/auth/actions'; -import TopbarDropdownWrapper from './TopbarDropdown.styles'; - -const { logout } = authAction; - -export default function TopbarUser() { - const [visible, setVisibility] = React.useState(false); - const dispatch = useDispatch(); - function handleVisibleChange() { - setVisibility(visible => !visible); - } - - const content = ( - <TopbarDropdownWrapper className="isoUserDropdown"> - <Link className="isoDropdownLink" to={'/dashboard/my-profile'}> - <IntlMessages id="topbar.myprofile" /> - </Link> - <a className="isoDropdownLink" href="# "> - <IntlMessages id="themeSwitcher.settings" /> - </a> - <a className="isoDropdownLink" href="# "> - <IntlMessages id="sidebar.feedback" /> - </a> - <a className="isoDropdownLink" href="# "> - <IntlMessages id="topbar.help" /> - </a> - <div className="isoDropdownLink" onClick={() => dispatch(logout())}> - <IntlMessages id="topbar.logout" /> - </div> - </TopbarDropdownWrapper> - ); - - return ( - <Popover - content={content} - trigger="click" - visible={visible} - onVisibleChange={handleVisibleChange} - arrowPointAtCenter={true} - placement="bottomLeft" - > - <div className="isoImgWrapper"> - <img alt="user" src={userpic} /> - <span className="userActivity online" /> - </div> - </Popover> - ); -} diff --git a/src/redux/card/config.js b/src/redux/card/config.js index edcbba8..df4eeab 100644 --- a/src/redux/card/config.js +++ b/src/redux/card/config.js @@ -1,5 +1,4 @@ import React from 'react'; -import { DeleteCell } from '@imd/components/Tables/HelperCells'; function createColumns(editColumn, deleteColumn) { return [ { @@ -17,19 +16,6 @@ function createColumns(editColumn, deleteColumn) { dataIndex: 'notes', rowKey: 'notes', }, - { - title: '', - rowKey: 'action', - render: (text, record) => ( - <span> - <DeleteCell - onDeleteCell={() => { - deleteColumn(record); - }} - /> - </span> - ), - }, ]; } diff --git a/src/redux/quiz/actions.js b/src/redux/quiz/actions.js deleted file mode 100644 index 9a93885..0000000 --- a/src/redux/quiz/actions.js +++ /dev/null @@ -1,37 +0,0 @@ -const quizActions = { - START_QUIZ: 'START_QUIZ', - GET_QUIZ_DATA: 'GET_QUIZ_DATA', - GET_QUESTION_DATA: 'GET_QUESTION_DATA', - SET_QUESTION_DATA: 'SET_QUESTION_DATA', - SET_QUIZ_DATA: 'SET_QUIZ_DATA', - SET_QUESTION_ANSWER: 'SET_QUESTION_ANSWER', - NEXT_QUESTION: 'NEXT_QUESTION', - // Load Data Actions - startQuiz: () => ({ - type: quizActions.START_QUIZ, - }), - getQuestionData: () => ({ - type: quizActions.GET_QUESTION_DATA, - }), - getQuizData: () => ({ - type: quizActions.GET_QUIZ_DATA, - }), - setQuizData: payload => ({ - type: quizActions.SET_QUIZ_DATA, - payload, - }), - setQuestionData: payload => ({ - type: quizActions.SET_QUESTION_DATA, - payload, - }), - setQuestionAnswer: payload => ({ - type: quizActions.SET_QUESTION_ANSWER, - payload, - }), - nextQuestion: payload => ({ - type: quizActions.NEXT_QUESTION, - payload, - }), -}; - -export default quizActions; diff --git a/src/redux/quiz/fakeQuestion.js b/src/redux/quiz/fakeQuestion.js deleted file mode 100644 index a4dd3c3..0000000 --- a/src/redux/quiz/fakeQuestion.js +++ /dev/null @@ -1,128 +0,0 @@ -export default { - title: 'Which is not in the following?', - total: 5, - time: '30 Minutes', - data: [ - { - id: 1, - question: 'Which one is not a sports?', - type: 'single', - showAnswer: false, - options: [ - { - value: 'football', - label: 'Football', - }, - { - value: 'volleyball', - label: 'Volleyball', - }, - { - value: 'baseball', - label: 'Baseball', - }, - { - value: 'lutuputu', - label: 'Lutuputu', - }, - ], - answers: 'lutuputu', - }, - { - id: 2, - type: 'single', - question: 'Which one is not a programming language?', - options: [ - { - value: 'c#', - label: 'C#', - }, - { - value: 'java', - label: 'Java', - }, - { - value: 'php', - label: 'PHP', - }, - { - value: 'reactjs', - label: 'React.JS', - }, - ], - answers: 'reactjs', - }, - { - id: 3, - type: 'single', - question: 'Which is not a HTML attributes?', - options: [ - { - value: 'title', - label: 'title', - }, - { - value: 'style', - label: 'style', - }, - { - value: 'onclick', - label: 'onclick', - }, - { - value: 'meta', - label: 'meta', - }, - ], - answers: 'meta', - }, - { - id: 4, - type: 'multiple', - question: 'Powerful Javascript framework is?', - options: [ - { - value: 'laravel', - label: 'Laravel', - }, - { - value: 'angular', - label: 'Angular', - }, - { - value: 'symphony', - label: 'Symphony', - }, - { - value: 'react', - label: 'React', - }, - ], - answers: ['angular', 'react'], - }, - { - id: 5, - type: 'single', - question: 'Which is not a PHP framework?', - options: [ - { - value: 'symphony', - label: 'Symphony', - }, - { - value: 'laravel', - label: 'Laravel', - }, - { - value: 'codeigniter', - label: 'Codeigniter', - }, - { - value: 'django', - label: 'django', - }, - ], - answers: 'django', - }, - ], -}; diff --git a/src/redux/quiz/fakeQuizes.js b/src/redux/quiz/fakeQuizes.js deleted file mode 100644 index fa18b38..0000000 --- a/src/redux/quiz/fakeQuizes.js +++ /dev/null @@ -1,26 +0,0 @@ -export default { - page: 1, - data: [ - { - title: 'Which is not in the following?', - slug: 'which-is-not-in-the-following', - description: - 'Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.', - thumbnail: 'https://via.placeholder.com/150', - }, - { - title: 'Basic HTML test', - slug: 'basic-html-test', - description: - 'Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.', - thumbnail: 'https://via.placeholder.com/150', - }, - { - title: 'Advanced PHP test', - slug: 'advanced-php-test', - description: - 'Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.', - thumbnail: 'https://via.placeholder.com/150', - }, - ], -}; diff --git a/src/redux/quiz/reducer.js b/src/redux/quiz/reducer.js deleted file mode 100644 index 1a15ff9..0000000 --- a/src/redux/quiz/reducer.js +++ /dev/null @@ -1,66 +0,0 @@ -import quizActions from './actions'; -import { arrayEqual } from '@imd/lib/helpers/utility'; -const initialState = { - quizes: {}, - questions: {}, - gettingStarted: false, - activeQuestion: 0, - total: 0, - correct: 0, - wrong: 0, - submitted: false, - answers: false, -}; - -export default function questionReducer(state = initialState, action) { - switch (action.type) { - case quizActions.START_QUIZ: - return { ...state, gettingStarted: true }; - case quizActions.SET_QUIZ_DATA: - return { ...state, quizes: action.payload, gettingStarted: false }; - case quizActions.SET_QUESTION_DATA: - return { - ...state, - questions: action.payload, - total: action.payload.total, - }; - case quizActions.SET_QUESTION_ANSWER: - const { questions, activeQuestion, correct, wrong } = state; - const currentQuizz = questions.data[activeQuestion]; - let rightAnswer = false; - if (Array.isArray(action.payload)) { - rightAnswer = arrayEqual(action.payload, currentQuizz['answers']); - } else { - rightAnswer = currentQuizz['answers'] === action.payload ? true : false; - } - let correctAnswer = rightAnswer ? correct + 1 : correct; - let wrongAnswer = !rightAnswer ? wrong + 1 : wrong; - return { - ...state, - correct: correctAnswer, - wrong: wrongAnswer, - submitted: true, - answers: rightAnswer, - questions: { - data: [ - ...questions.data.slice(0, activeQuestion), - { - ...questions.data[activeQuestion], - showAnswer: true, - }, - ...questions.data.slice(activeQuestion + 1), - ], - }, - }; - case quizActions.NEXT_QUESTION: - return { - ...state, - activeQuestion: state.activeQuestion + 1, - submitted: false, - answers: false, - }; - - default: - return state; - } -} diff --git a/src/redux/quiz/saga.js b/src/redux/quiz/saga.js deleted file mode 100644 index 3bd2c69..0000000 --- a/src/redux/quiz/saga.js +++ /dev/null @@ -1,24 +0,0 @@ -// saga.js -import { all, takeEvery, put } from 'redux-saga/effects'; -import quizActions from './actions'; -import FakeQuestion from './fakeQuestion'; -import FakeQuiz from './fakeQuizes'; - -function* questionRenderEffectSaga() { - let questons; - questons = FakeQuestion; - yield put(quizActions.setQuestionData(questons)); -} - -function* quizRenderEffectSaga() { - let quizes; - quizes = FakeQuiz; - yield put(quizActions.setQuizData(quizes)); -} - -export default function* questionSaga() { - yield all([ - takeEvery(quizActions.GET_QUESTION_DATA, questionRenderEffectSaga), - takeEvery(quizActions.GET_QUIZ_DATA, quizRenderEffectSaga), - ]); -} diff --git a/src/redux/root-reducer.js b/src/redux/root-reducer.js index 2de150d..208e0d8 100644 --- a/src/redux/root-reducer.js +++ b/src/redux/root-reducer.js @@ -1,52 +1,16 @@ import { combineReducers } from 'redux'; import App from '@imd/redux/app/reducer'; -import Auth from '@imd/redux/auth/reducer'; -import Mails from '@imd/redux/mail/reducer'; -import Calendar from '@imd/redux/calendar/reducer'; import Box from '@imd/redux/box/reducer'; -import Notes from '@imd/redux/notes/reducer'; -import Todos from '@imd/redux/todos/reducer'; -import Contacts from '@imd/redux/contacts/reducer'; import Cards from '@imd/redux/card/reducer'; -import Chat from '@imd/redux/chat/reducers'; -import DynamicChartComponent from '@imd/redux/dynamicEchart/reducer'; -import Ecommerce from '@imd/redux/ecommerce/reducer'; import ThemeSwitcher from '@imd/redux/themeSwitcher/reducer'; -import Invoices from '@imd/redux/invoice/reducer'; import LanguageSwitcher from '@imd/redux/languageSwitcher/reducer'; -import YoutubeSearch from '@imd/redux/youtubeSearch/reducers'; -import Articles from '@imd/redux/articles/reducers'; -import Investors from '@imd/redux/investors/reducers'; -import scrumBoard from '@imd/redux/scrumBoard/reducer'; -import drawer from '@imd/redux/drawer/reducer'; import modal from '@imd/redux/modal/reducer'; -import profile from '@imd/redux/profile/reducer'; -import githubSearch from '@imd/redux/githubSearch/reducers'; -import quiz from '@imd/redux/quiz/reducer'; export default combineReducers({ - Auth, App, ThemeSwitcher, LanguageSwitcher, - Mails, - Calendar, Box, - Notes, - Todos, - Contacts, Cards, - Chat, - DynamicChartComponent, - Ecommerce, - Invoices, - YoutubeSearch, - Articles, - Investors, - scrumBoard, modal, - drawer, - profile, - githubSearch, - quiz, }); diff --git a/src/redux/root-saga.js b/src/redux/root-saga.js index 8c26e2b..c070cf9 100644 --- a/src/redux/root-saga.js +++ b/src/redux/root-saga.js @@ -1,38 +1,8 @@ import { all } from 'redux-saga/effects'; -import authSagas from '@imd/redux/auth/saga'; -import contactSagas from '@imd/redux/contacts/saga'; -import invoicesSagas from '@imd/redux/invoice/saga'; -import mailSagas from '@imd/redux/mail/saga'; -import notesSagas from '@imd/redux/notes/saga'; -import todosSagas from '@imd/redux/todos/saga'; -import ecommerceSaga from '@imd/redux/ecommerce/saga'; import cardsSagas from '@imd/redux/card/saga'; -import chatSagas from '@imd/redux/chat/sagas'; -import youtubeSearchSagas from '@imd/redux/youtubeSearch/sagas'; -import githubSagas from '@imd/redux/githubSearch/sagas'; -import articles from '@imd/redux/articles/sagas'; -import investors from '@imd/redux/investors/sagas'; -import scrumBoardSaga from '@imd/redux/scrumBoard/saga'; -import profileSaga from '@imd/redux/profile/saga'; -import quizSaga from '@imd/redux/quiz/saga'; export default function* rootSaga(getState) { yield all([ - authSagas(), - contactSagas(), - mailSagas(), - notesSagas(), - todosSagas(), - ecommerceSaga(), cardsSagas(), - invoicesSagas(), - chatSagas(), - youtubeSearchSagas(), - githubSagas(), - articles(), - investors(), - scrumBoardSaga(), - profileSaga(), - quizSaga(), ]); } -- GitLab