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