From b523637f218dcba4de57d925442f9e1a349e7089 Mon Sep 17 00:00:00 2001 From: Monalisha Mishra Date: Wed, 4 Oct 2023 17:53:39 +0530 Subject: [PATCH] fix: fixed themes --- .../sdk-frontend-react/src/app/app.tsx | 2 +- .../chat/CreateGroup/ConditionsComponent.tsx | 28 ++-- .../chat/CreateGroup/CreateGroupModal.tsx | 15 ++- .../chat/CreateGroup/MultipleCriterias.tsx | 122 ++++++++++++++++++ .../chat/reusables/OptionButtons.tsx | 2 +- .../components/chat/reusables/TextArea.tsx | 3 + .../components/chat/reusables/TextInput.tsx | 4 + .../src/lib/components/chat/theme/index.ts | 2 +- packages/uiweb/src/lib/icons/EditSvg.svg | 4 +- packages/uiweb/src/lib/icons/MoreDark.tsx | 8 +- packages/uiweb/src/lib/icons/RemoveSvg.svg | 4 +- packages/uiweb/src/lib/icons/SpamIcon.tsx | 6 +- 12 files changed, 167 insertions(+), 33 deletions(-) create mode 100644 packages/uiweb/src/lib/components/chat/CreateGroup/MultipleCriterias.tsx diff --git a/packages/examples/sdk-frontend-react/src/app/app.tsx b/packages/examples/sdk-frontend-react/src/app/app.tsx index 7f1db9f4c..c4fc798cd 100644 --- a/packages/examples/sdk-frontend-react/src/app/app.tsx +++ b/packages/examples/sdk-frontend-react/src/app/app.tsx @@ -313,7 +313,7 @@ export function App() { - + handleMoreOptionsClick(row, col)}> - + {selectedIndex?.length && selectedIndex[0] === row && ( { const handleMoreOptionsClick = (row: number, col: number) => { setSelectedIndex([row, col]); }; -console.log(conditionData) return (
{/* we can reuse the code by creating a reusable component for it */} @@ -135,7 +134,7 @@ console.log(conditionData) <> {singleCriteria.type && (
1 && ( -
@@ -172,7 +170,7 @@ console.log(conditionData) {singleCriteria.type && ( <>
-
+ )} {conditionData && row < conditionData.length - 2 && @@ -229,7 +227,8 @@ const DropdownContainer = styled.div` left: 48%; top: 69%; border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents}; - padding: 14px 8px; + + padding: 6px 32px 6px 12px; z-index: 999999999999 !important; display: flex; flex-direction: column !important; @@ -247,9 +246,14 @@ const DropdownContainer = styled.div` } `; -const OperatorSpan = styled.span<{ theme: IChatTheme }>` +const OperatorSpan = styled(Span)<{ theme: IChatTheme }>` padding: 4px 8px; border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents}; background: ${(props) => props.theme.backgroundColor.modalHoverBackground}; color: ${(props) => props.theme.textColor?.modalSubHeadingText}; `; + +const CriteriaGroup = styled(Section)<{ theme: IChatTheme }>` + + border: ${(props) => props.theme.border?.modalInnerComponents}; +`; diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx index 512269b99..9390eb960 100644 --- a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx +++ b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx @@ -16,7 +16,7 @@ import { MdError } from 'react-icons/md'; import {Image} from "../../../config/styles" import { device } from '../../../config'; -import { CreateGroupModalProps } from '../exportedTypes'; +import { CreateGroupModalProps, IChatTheme } from '../exportedTypes'; import useMediaQuery from '../../../hooks/useMediaQuery'; import { DefineCondtion } from './DefineCondition'; import AddCriteria from './AddCriteria'; @@ -107,7 +107,8 @@ const CreateGroupDetail = ({handleNext, onClose, groupInputDetails, setGroupInpu const groupInfoToast = useToast(); const { groupName, groupDescription, groupImage } = groupInputDetails; - + const theme = useContext(ThemeContext); + const fileUploadInputRef = useRef(null); const isMobile = useMediaQuery(device.mobileL); @@ -177,8 +178,8 @@ const CreateGroupDetail = ({handleNext, onClose, groupInputDetails, setGroupInpu {!groupImage && ( - - + + )} {groupImage && ( @@ -219,7 +220,7 @@ export const GatingRulesInformation = () => { const theme = useContext(ThemeContext); return (
- + Learn more about gating rules @@ -236,12 +237,12 @@ const UploadContainer = styled.div` align-self: center; `; -const ImageContainer = styled.div` +const ImageContainer = styled.div<{theme:IChatTheme}>` margin-top: 10px; width: fit-content; cursor: pointer; border-radius: 32px; - background-color: #2f3137; + background: ${(props) => props.theme.backgroundColor.modalHoverBackground}; padding: 40px; `; const UpdatedImageContainer = styled.div` diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/MultipleCriterias.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/MultipleCriterias.tsx new file mode 100644 index 000000000..5df29c985 --- /dev/null +++ b/packages/uiweb/src/lib/components/chat/CreateGroup/MultipleCriterias.tsx @@ -0,0 +1,122 @@ +import React, { useContext, useRef, useState } from 'react'; +import { Section, Span } from '../../reusables'; +import { MoreDarkIcon } from '../../../icons/MoreDark'; +import { ThemeContext } from '../theme/ThemeProvider'; +import styled from 'styled-components'; +import { device } from '../../../config'; +import Dropdown from '../reusables/DropDown'; +import EditSvg from '../../../icons/EditSvg.svg'; +import RemoveSvg from '../../../icons/RemoveSvg.svg'; +import Criteria from './ConditionsComponent'; +import { useClickAway } from '../../../hooks'; + +export type CriteraValueType = { + invertedIcon?: any; + id: number; + type?: string; + title?: string; + icon?: string; + function: () => void; +}; + +interface CriteriaProps { + width?: string; + dropdownValues: CriteraValueType[]; +} + +const MultipleCriterias = ({ + dropdownValues, + width = '100%', +}: CriteriaProps) => { + const [selectedIndex, setSelectedIndex] = useState(null); + const [dropdownHeight, setDropdownHeight] = useState(0); + const dropdownRef = useRef(null); + + const dropDownValues = [ + { + id: 0, + value: 'Edit', + title: 'Edit', + icon: EditSvg, + function: () => {console.log('function to edit')}, + }, + { + id: 1, + value: 'Remove', + title: 'Remove', + icon: RemoveSvg, + function: () => {console.log('function to remove')}, + }, + ]; + const theme = useContext(ThemeContext); + const [criteriaDetails, setCriteriaDetails] = useState<[]>([]); + + const [openDropdownId, setOpenDropdownId] = useState(null); + + useClickAway(dropdownRef, () => setSelectedIndex(null)); + + + // const toggleDropdown = (criteriaId: number) => { + // if (openDropdownId === criteriaId) { + // // Clicked on an already open dropdown, so close it + // setOpenDropdownId(null); + // } else { + // // Clicked on a different criteria, so open its dropdown + // setOpenDropdownId(criteriaId); + // } + // }; + + return ( +
+ { + dropdownValues && ( + // dropdownValues.map((criteria) => ( +
+ {/* */} +
+ ) + // ) + // ) + } +
+ ); +}; + +export default MultipleCriterias; + +const DropdownContainer = styled.div` + position: absolute; + left: 48%; + top: 69%; + border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents}; + padding: 14px 8px; + z-index: 999999999999 !important; + display: flex; + flex-direction: column !important; + background: ${(props) => props.theme.backgroundColor.modalBackground}; + border: ${(props) => props.theme.border.modalInnerComponents}; + + @media ${device.mobileL} { + left: 27%; + } + @media (min-width: 426px) and (max-width: 1150px) { + left: 48%; + } + @media (max-width: 480px) { + left: 25%; + } +};`; + +const CriteriaContainer = styled(Section)` + @media (max-width: 426px) { + width: 280px; + } +`; diff --git a/packages/uiweb/src/lib/components/chat/reusables/OptionButtons.tsx b/packages/uiweb/src/lib/components/chat/reusables/OptionButtons.tsx index d97524be8..cdcdc3f53 100644 --- a/packages/uiweb/src/lib/components/chat/reusables/OptionButtons.tsx +++ b/packages/uiweb/src/lib/components/chat/reusables/OptionButtons.tsx @@ -35,7 +35,7 @@ const OptionDescripton = ({ heading, subHeading,value }: OptionDescription) => { // selectedValue === value? // theme.textColor?.modalHeadingText // : - theme.textColor?.modalSubHeadingText + theme.textColor?.modalHeadingText } fontSize="18px" fontWeight="500" diff --git a/packages/uiweb/src/lib/components/chat/reusables/TextArea.tsx b/packages/uiweb/src/lib/components/chat/reusables/TextArea.tsx index a96b75b1e..96385f883 100644 --- a/packages/uiweb/src/lib/components/chat/reusables/TextArea.tsx +++ b/packages/uiweb/src/lib/components/chat/reusables/TextArea.tsx @@ -69,6 +69,9 @@ const Input = styled.textarea` font-family: ${(props) => props.theme.fontFamily}; font-size: 14px; + &:focus { + border: 1px solid #ffdbf0; + } `; const CharCounter = styled.div` diff --git a/packages/uiweb/src/lib/components/chat/reusables/TextInput.tsx b/packages/uiweb/src/lib/components/chat/reusables/TextInput.tsx index cfd92359c..1d5c54995 100644 --- a/packages/uiweb/src/lib/components/chat/reusables/TextInput.tsx +++ b/packages/uiweb/src/lib/components/chat/reusables/TextInput.tsx @@ -93,6 +93,10 @@ const Input = styled.input` [readonly='readonly'] { pointer-events: none; } + &:focus { + border: 1px solid #ffdbf0; + } + `; const CharCounter = styled.div` diff --git a/packages/uiweb/src/lib/components/chat/theme/index.ts b/packages/uiweb/src/lib/components/chat/theme/index.ts index 345ebaa40..b1ccb2ca7 100644 --- a/packages/uiweb/src/lib/components/chat/theme/index.ts +++ b/packages/uiweb/src/lib/components/chat/theme/index.ts @@ -231,7 +231,7 @@ export const darkChatTheme: IChatTheme = { encryptionMessageBackground: 'rgb(64, 70, 80);', buttonBackground: 'rgb(202, 89, 155)', modalBackground:'rgb(47, 49, 55)', - modalInputBackground:'rgb(40, 42, 46)', + modalInputBackground:'transparent', modalHoverBackground:'rgb(64, 70, 80)', buttonDisableBackground:'#2F3137', toastSuccessBackground: diff --git a/packages/uiweb/src/lib/icons/EditSvg.svg b/packages/uiweb/src/lib/icons/EditSvg.svg index 7cb5620d0..421ac7e02 100644 --- a/packages/uiweb/src/lib/icons/EditSvg.svg +++ b/packages/uiweb/src/lib/icons/EditSvg.svg @@ -1,4 +1,4 @@ - - + + diff --git a/packages/uiweb/src/lib/icons/MoreDark.tsx b/packages/uiweb/src/lib/icons/MoreDark.tsx index 3f20f22fd..68f70fead 100644 --- a/packages/uiweb/src/lib/icons/MoreDark.tsx +++ b/packages/uiweb/src/lib/icons/MoreDark.tsx @@ -1,11 +1,11 @@ import React from 'react'; -export const MoreDarkIcon = () => { +export const MoreDarkIcon = ({color}:{color?:string}) => { return ( - - - + + + ); }; diff --git a/packages/uiweb/src/lib/icons/RemoveSvg.svg b/packages/uiweb/src/lib/icons/RemoveSvg.svg index 2d1e05afe..747fac136 100644 --- a/packages/uiweb/src/lib/icons/RemoveSvg.svg +++ b/packages/uiweb/src/lib/icons/RemoveSvg.svg @@ -1,4 +1,4 @@ - - + + diff --git a/packages/uiweb/src/lib/icons/SpamIcon.tsx b/packages/uiweb/src/lib/icons/SpamIcon.tsx index 5917b6e63..3e25d871e 100644 --- a/packages/uiweb/src/lib/icons/SpamIcon.tsx +++ b/packages/uiweb/src/lib/icons/SpamIcon.tsx @@ -1,8 +1,8 @@ -export const SpamIcon = () => { +export const SpamIcon = ({ color }: { color?: string }) => { return ( - - + + ) } \ No newline at end of file