feat: add criteria update lablel done

push-protocol · Oct 4, 2023 · 0c900f0 · 0c900f0
2 parents 4baaeb3 + 5223ea8
commit 0c900f0
Show file tree

Hide file tree

Showing 12 changed files with 53 additions and 38 deletions.
diff --git 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() {
           <Web3Context.Provider value={{ account, active, library, chainId }}>
             <SocketContext.Provider value={socketData}>
               <AccountContext.Provider value={{ pgpPrivateKey, setSpaceId }}>
-                <ChatUIProvider  env={env} theme={lightChatTheme}>
+                <ChatUIProvider  env={env} theme={darkChatTheme}>
                   <SpacesUIProvider spaceUI={spaceUI} theme={customDarkTheme}>
                     <Routes>
                       <Route

diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx
@@ -50,7 +50,7 @@ const MoreOptionsContainer = ({
 
   return (
     <Section onClick={() => handleMoreOptionsClick(row, col)}>
-      <MoreDarkIcon />
+      <MoreDarkIcon color={theme.iconColor?.groupSettings}/>
       {selectedIndex?.length && selectedIndex[0] === row && (
         <DropdownContainer
           ref={dropdownRef}
@@ -127,13 +127,9 @@ const ConditionsComponent = ({ conditionData,deleteFunction,updateFunction }: Cr
 
   useClickAway(dropdownRef, () => setSelectedIndex(null));
 
-
-  //fix the theming
-
   const handleMoreOptionsClick = (row: number, col: number) => {
     setSelectedIndex([row, col]);
   };
-// alert(JSON.stringify(conditionData))
 
   return (
     <Section flexDirection='column' >
@@ -146,7 +142,7 @@ const ConditionsComponent = ({ conditionData,deleteFunction,updateFunction }: Cr
                 <>
                   {singleCriteria.type && (
                     <Section
-                      borderRadius="12px"
+                      borderRadius={theme.borderRadius?.modalInnerComponents}
                       background={theme.backgroundColor?.modalHoverBackground}
                       padding="10px 4px 10px 12px"
                       justifyContent="space-between"
@@ -166,14 +162,13 @@ const ConditionsComponent = ({ conditionData,deleteFunction,updateFunction }: Cr
               ))}
 
             {criteria.length > 1 && (
-              <Section
+              <CriteriaGroup
+              theme={theme}
                 flexDirection="row"
-                borderWidth="1px"
                 justifyContent="space-between"
                 alignItems="center"
-                borderColor="#E6E7EE"
-                borderRadius="12px"
-                borderStyle="solid"
+
+                borderRadius={theme.borderRadius?.modalInnerComponents}
                 padding="8px 0px 8px 8px"
                 gap="25px"
               >
@@ -183,7 +178,7 @@ const ConditionsComponent = ({ conditionData,deleteFunction,updateFunction }: Cr
                       {singleCriteria.type && (
                         <>
                           <Section
-                            borderRadius="12px"
+                            borderRadius={theme.borderRadius?.modalInnerComponents}
                             background={
                               theme.backgroundColor?.modalHoverBackground
                             }
@@ -217,7 +212,7 @@ const ConditionsComponent = ({ conditionData,deleteFunction,updateFunction }: Cr
                     selectedIndex={selectedIndex}
                   />
                 </Section>
-              </Section>
+              </CriteriaGroup>
             )}
             {conditionData &&
               row < conditionData.length - 2 &&
@@ -240,7 +235,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;
@@ -258,9 +254,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
@@ -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';
@@ -120,7 +120,8 @@ const CreateGroupDetail = ({handleNext, onClose, groupInputDetails, setGroupInpu
 
   const groupInfoToast = useToast();
   const { groupName, groupDescription, groupImage } = groupInputDetails;
-
+  const theme = useContext(ThemeContext);
+
   const fileUploadInputRef = useRef<HTMLInputElement>(null);
   const isMobile = useMediaQuery(device.mobileL);
 
@@ -194,8 +195,8 @@ const CreateGroupDetail = ({handleNext, onClose, groupInputDetails, setGroupInpu
 
       <UploadContainer onClick={handleUpload}>
         {!groupImage && (
-          <ImageContainer>
-            <AiTwotoneCamera fontSize={40} color="black" />
+          <ImageContainer theme={theme}>
+            <AiTwotoneCamera fontSize={40} color={'rgba(87, 93, 115, 1)'} />
           </ImageContainer>
         )}
         {groupImage && (
@@ -236,7 +237,7 @@ export const GatingRulesInformation = () => {
     const theme = useContext(ThemeContext);
     return (
       <Section gap="4px">
-        <SpamIcon />
+        <SpamIcon color={theme.textColor?.modalSubHeadingText}/>
         <Span color={theme.textColor?.modalSubHeadingText} fontSize="15px">
           Learn more about gating rules
         </Span>
@@ -253,12 +254,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
@@ -1,12 +1,13 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useRef, useState } from 'react';
 import { Section, Span } from '../../reusables';
 import { ThemeContext } from '../theme/ThemeProvider';
 import styled from 'styled-components';
 import { device } from '../../../config';
 import EditSvg from '../../../icons/EditSvg.svg';
 import RemoveSvg from '../../../icons/RemoveSvg.svg';
-import Criteria from './Criteria';
 import { ConditionType } from './Type';
+import Criteria from './ConditionsComponent';
+import { useClickAway } from '../../../hooks';
 
 export type CriteraValueType = {
   invertedIcon?: any;
@@ -30,6 +31,8 @@ const MultipleCriterias = ({
 }: CriteriaProps) => {
   const [selectedValue, setSelectedValue] = useState<number>(0);
   const [dropdownHeight, setDropdownHeight] = useState<number | undefined>(0);
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const dropdownRef = useRef<any>(null);
 
   const dropDownValues = [
     {
@@ -52,6 +55,7 @@ const MultipleCriterias = ({
 
   const [openDropdownId, setOpenDropdownId] = useState<number | null>(null);
 
+
   const toggleDropdown = (criteriaId: number) => {
     if (openDropdownId === criteriaId) {
       // Clicked on an already open dropdown, so close it
@@ -62,6 +66,8 @@ const MultipleCriterias = ({
     }
   };
 
+  useClickAway(dropdownRef, () => setSelectedIndex(null));
+
   return (
     <Section flexDirection="column" gap="8px">
       {

diff --git 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
@@ -69,6 +69,9 @@ const Input = styled.textarea<IChatTheme>`
 
     font-family: ${(props) => props.theme.fontFamily};
     font-size: 14px;
+    &:focus {
+        border: 1px solid #ffdbf0;
+      }
 `;
 
 const CharCounter = styled.div<IChatTheme>`

diff --git 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<IChatTheme & {customStyle:CustomStyleParamsType}>`
   [readonly='readonly'] {
     pointer-events: none;
   }
+  &:focus {
+    border: 1px solid #ffdbf0;
+  }
+ 
 `;
 
 const CharCounter = styled.div<IChatTheme>`

diff --git 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
diff --git 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 (
     <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" cursor="pointer">
-    <path d="M16 10C17.1046 10 18 9.10457 18 8C18 6.89543 17.1046 6 16 6C14.8954 6 14 6.89543 14 8C14 9.10457 14.8954 10 16 10Z" fill="#787E99"/>
-    <path d="M16 18C17.1046 18 18 17.1046 18 16C18 14.8954 17.1046 14 16 14C14.8954 14 14 14.8954 14 16C14 17.1046 14.8954 18 16 18Z" fill="#787E99"/>
-    <path d="M16 26C17.1046 26 18 25.1046 18 24C18 22.8954 17.1046 22 16 22C14.8954 22 14 22.8954 14 24C14 25.1046 14.8954 26 16 26Z" fill="#787E99"/>
+    <path d="M16 10C17.1046 10 18 9.10457 18 8C18 6.89543 17.1046 6 16 6C14.8954 6 14 6.89543 14 8C14 9.10457 14.8954 10 16 10Z" fill={color??"#787E99"}/>
+    <path d="M16 18C17.1046 18 18 17.1046 18 16C18 14.8954 17.1046 14 16 14C14.8954 14 14 14.8954 14 16C14 17.1046 14.8954 18 16 18Z" fill={color??"#787E99"}/>
+    <path d="M16 26C17.1046 26 18 25.1046 18 24C18 22.8954 17.1046 22 16 22C14.8954 22 14 22.8954 14 24C14 25.1046 14.8954 26 16 26Z" fill={color??"#787E99"}/>
     </svg>
   );
 };

diff --git a/packages/uiweb/src/lib/icons/RemoveSvg.svg b/packages/uiweb/src/lib/icons/RemoveSvg.svg
diff --git 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 (
         <svg width="16" height="16" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M8.15234 6.10618C8.15234 5.63757 8.53222 5.25769 9.00083 5.25769C9.46943 5.25769 9.84931 5.63757 9.84931 6.10618C9.84931 6.57478 9.46943 6.95466 9.00083 6.95466C8.53222 6.95466 8.15234 6.57478 8.15234 6.10618ZM8.15234 9.50011C8.15234 9.03151 8.53222 8.65163 9.00083 8.65163C9.46943 8.65163 9.84931 9.03151 9.84931 9.50011V12.8941C9.84931 13.3627 9.46943 13.7425 9.00083 13.7425C8.53222 13.7425 8.15234 13.3627 8.15234 12.8941V9.50011Z" fill="#575D73" />
-            <circle cx="9" cy="9.5" r="8" stroke="#575D73" stroke-width="1.5" />
+            <path d="M8.15234 6.10618C8.15234 5.63757 8.53222 5.25769 9.00083 5.25769C9.46943 5.25769 9.84931 5.63757 9.84931 6.10618C9.84931 6.57478 9.46943 6.95466 9.00083 6.95466C8.53222 6.95466 8.15234 6.57478 8.15234 6.10618ZM8.15234 9.50011C8.15234 9.03151 8.53222 8.65163 9.00083 8.65163C9.46943 8.65163 9.84931 9.03151 9.84931 9.50011V12.8941C9.84931 13.3627 9.46943 13.7425 9.00083 13.7425C8.53222 13.7425 8.15234 13.3627 8.15234 12.8941V9.50011Z" fill={color ? color : '#575D73'} />
+            <circle cx="9" cy="9.5" r="8" stroke={color ? color : '#575D73'} stroke-width="1.5" />
         </svg>
     )
 }