Merge pull request #91 from DevNode-Dev/dev

mvp-2-0.4

.gitignore

@@ -40,3 +40,6 @@ prisma/dev.db
 packages/composedb/.ceramic
 .idea/
 .nyc_output/
+
+# compose json files
+Composite.*.json

apps/web/src/components/Button/ConnectWallet/ConnectWalletButton.tsx

@@ -7,7 +7,7 @@ import { DIDSession } from "did-session";
 import { config } from "../../../config";
 import { toast } from "react-toastify";
 import { ConnectWalletProps } from "./types";
-import { useAppDispatch, updateDidSession, updateDid } from "../../../store";
+import {useAppDispatch, updateDidSession, updateDid, toggleLeftPanel} from "../../../store";
 
 
 export const ConnectWalletButton = (props: ConnectWalletProps) => {
@@ -59,6 +59,7 @@ export const ConnectWalletButton = (props: ConnectWalletProps) => {
   };
 
   const onClick = async () => {
+    dispatch(toggleLeftPanel(false));
     isConnected ? disconnect() : await onOpen();
   };
 

apps/web/src/components/Chip/Chip.tsx

@@ -3,7 +3,7 @@ import {ChipProps} from "./types";
 export const Chip = (props: ChipProps) => {
   return (
     <div
-      className={`flex flex-row gap-2 items-center px-3 py-2 block w-max rounded-md border border-gray-300 ${props.classes || ''}`}
+      className={`flex flex-row gap-2 items-center px-3 py-2 block w-max rounded-md border border-gray-300 text-sm font-normal text-base text-gray-600 ${props.classes || ''}`}
       id="chip"
     >
       <span>{props.text}</span>

apps/web/src/components/CommunityAvatar/CommunityAvatar.tsx

@@ -26,10 +26,9 @@ export const CommunityAvatar = (props: CommunityAvatarProps) => {
         </span>
         <Image
           width={props.width ?? 45}
-          height={props.width ?? 45}
-          className={
-            props.selected ? `rounded-xl` : `rounded-full hover:rounded-xl`
-          }
+          height={props.height ?? 45}
+          className={`object-cover ${props.selected ? "rounded-xl" : "rounded-full hover:rounded-xl"}`}
+          style={props.style}
           src={props.image}
           alt={`${props.name} community`}
         />

apps/web/src/components/CommunityAvatar/types.ts

@@ -6,4 +6,5 @@ export interface CommunityAvatarProps {
   onClick?(): void;
   selected?: boolean;
   classes?: string;
+  style?: object;
 }

apps/web/src/components/CommunityCard/CommunityCard.tsx

@@ -3,12 +3,13 @@ import Image from "next/image";
 import {Badge} from "../Badge";
 import {CommunityCardProps} from "./types";
 import * as utils from "../../utils";
+import {md_screen_image, md_screen_wrapper, sm_screen_image, sm_screen_wrapper} from "./style";
 
 export const CommunityCard = (props: CommunityCardProps) => {
   return (
     <div
       onClick={props.onClick}
-      className="flex flex-col-reverse md:flex-row min-h-[246px] border hover:drop-shadow-xl rounded-2xl bg-white">
+      className={`flex flex-col-reverse h-full min-h-[246px] border hover:drop-shadow-xl rounded-2xl bg-white mx-auto ${md_screen_wrapper} ${sm_screen_wrapper}`}>
       <div className={"flex flex-col grow"}>
         <div className="flex flex-col justify-start px-6 py-7">
           <h2 className="mb-2 text-2xl font-medium line-clamp-1 break-all">
@@ -35,7 +36,7 @@ export const CommunityCard = (props: CommunityCardProps) => {
         </div>
       </div>
       <Image
-        className="rounded-tr-2xl w-[100%] max-h-[246px] md:w-[229px] border-l rounded-b-2xl object-cover"
+        className={`rounded-tr-2xl w-[100%] max-h-[auto]  border-l rounded-b-2xl object-cover ${md_screen_image} ${sm_screen_image}`}
         src={props.communityAvatar}
         width={229}
         height={0}

apps/web/src/components/CommunityCard/style.tsx

@@ -0,0 +1,5 @@
+export const md_screen_wrapper = "min-1001:flex-row tablet:w-[250px] mobile:w-[400px]";
+export const md_screen_image = "min-1001:w-[229px] tablet:max-h-[150px] mobile:max-h-[200px]";
+
+export const sm_screen_wrapper = "max-580:w-full";
+export const sm_screen_image = "mobile:max-h-[200px]";

apps/web/src/components/CommunityList/CommunityList.tsx

@@ -76,6 +76,7 @@ const CommunityList = () => {
                 name={name}
                 image={image}
                 selected={selected}
+                style={{width:'45px', height:'45px'}}
                 onClick={() => handleOnCommunityClick(communityDetails)}
             />
           </Link>

apps/web/src/components/CommunityOnboard/CommunityOnboard.tsx

@@ -3,7 +3,7 @@ import { trpc } from "../../utils/trpc";
 import * as utils from "../../utils";
 import { get, has } from "lodash";
 import {
-  fetchUserDetails, newlyCreatedCommunity,
+  fetchUserDetails, newlyCreatedCommunity, toggleLeftPanel,
   useAppDispatch,
   useAppSelector,
 } from "../../store";
@@ -176,6 +176,7 @@ const CommunityOnboard = () => {
   };
 
   const handleCreateCommunity = () => {
+    dispatch(toggleLeftPanel(false));
     if (!userId || !didSession) {
       toast.error("Please re-connect with your wallet!");
       return;

apps/web/src/components/ContentCard/ContentCard.test.tsx

@@ -0,0 +1,22 @@
+import {fireEvent, render} from "@testing-library/react";
+import {ContentCard} from "./ContentCard";
+
+describe("<ContentCard />", () => {
+  const onClick = jest.fn();
+  const props = {
+    title: "sample",
+    body: "sample",
+    onClick: onClick,
+  };
+
+  it("should render the component with no issues", () => {
+    const result = render(<ContentCard {...props} />);
+    expect(result.container).toBeInTheDocument();
+  });
+
+  it("should call onclick on click event", () => {
+    render(<ContentCard {...props} />);
+    fireEvent.click(document.getElementById("content-card"));
+    expect(onClick).toBeCalled();
+  });
+});

apps/web/src/components/ContentCard/ContentCard.tsx

@@ -0,0 +1,15 @@
+import { FlexColumn } from "../Flex";
+import {ContentCardProps} from "./types";
+
+export const ContentCard = (props: ContentCardProps) => {
+  const { title, body, onClick } = props;
+
+  return (
+    <div id="content-card" className="rounded-2xl border bg-white p-4 hover:border-gray-300" onClick={onClick}>
+      <FlexColumn classes="gap-1">
+        <div className="text-md line-clamp-2">{title}</div>
+        <div className="text text-gray-500 line-clamp-2">{body}</div>
+      </FlexColumn>
+    </div>
+  );
+};

apps/web/src/components/ContentCard/index.tsx

@@ -0,0 +1 @@
+export * from "./ContentCard";

apps/web/src/components/ContentCard/types.ts

@@ -0,0 +1,5 @@
+export interface ContentCardProps {
+    title: string;
+    body: string;
+    onClick?(): void;
+}

apps/web/src/components/Dropdown/Dropdown.tsx

@@ -8,21 +8,21 @@ const Dropdown = (props: DropDownProps) => {
     // @ts-ignore
     !props.disableDropdown && setOpen((prevState) => !prevState);
   }
-
+  const isNotSelected = (props.selected === "") || isNil(props.selected) || isEmpty(props.selected);
   return (
       <div className="relative inline-block dropdown">
         <button
-            className={`inline-flex items-center justify-between w-full bg-white border-none outline-none dropdown-trigger ${props.buttonClass}`}
+            className={`inline-flex px-5 items-center justify-between w-full bg-white border-none outline-none dropdown-trigger ${props.buttonClass} ${isNotSelected && "text-sm font-normal text-base text-[#A2A8B4]"}`}
             aria-haspopup="true" aria-expanded="false" onClick={toggleDropdown}>
-          {(props.selected === "") || isNil(props.selected) || isEmpty(props.selected) ? props.placeholder : props.selected}
-          <svg className="w-4 h-4 ml-2 -mr-1" viewBox="0 0 20 20" fill="currentColor">
+          { isNotSelected ? props.placeholder : props.selected}
+          <svg className="w-4 h-4 " viewBox="0 0 20 20" fill="black">
             <path fill-rule="evenodd" d="M10 14l-5-5h10l-5 5z" clip-rule="evenodd"/>
           </svg>
         </button>
         {open && <div
-            className={`absolute right-0 z-50 h-[130px] overflow-scroll w-full mt-2 origin-top-right rounded-md shadow-lg dropdown-menu scrollbar-hide ${props.dropdownClass}`}
+            className={`absolute right-0 z-50 h-auto max-h-[170px] overflow-scroll w-full mt-2 origin-top-right rounded-md shadow-lg dropdown-menu scrollbar-hide ${props.dropdownClass}`}
             id="dropdown-menu">
-            <div className="py-1 bg-white rounded-md shadow-xs" onClick={toggleDropdown}>
+            <div className="bg-white rounded-md shadow-xs" onClick={toggleDropdown}>
               {props.children}
             </div>
         </div>}

apps/web/src/components/GlobalAskQuestion/GlobalAskQuestion.tsx

@@ -2,12 +2,12 @@ import {GlobalCreateThread} from "../Thread";
 import {useState} from "react";
 import {get, has, isNil} from "lodash";
 import {toast} from "react-toastify";
-import {useAppSelector} from "../../store";
+import {toggleLeftPanel, useAppDispatch, useAppSelector} from "../../store";
 
 const GlobalAskQuestion = () => {
   const [questionModal, setQuestionModal] = useState<boolean>(false);
   const user = useAppSelector((state) => state.user);
-
+  const dispatch = useAppDispatch();
   const AskQuestion = () => {
     return (
         <svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -19,6 +19,7 @@ const GlobalAskQuestion = () => {
   }
 
   const handleClick = () =>{
+    dispatch(toggleLeftPanel(false));
     if (!has(user, "id") || isNil(get(user, "didSession"))) {
       toast.error("Please re-connect with your wallet!");
       return;

apps/web/src/components/Icons/Icons.tsx

@@ -85,3 +85,20 @@ export const DownVoteFilled = (props: SVGProps<any>) => {
     </svg>
   );
 };
+
+export const CloseIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+      className="h-6 w-6 text-gray-500 hover:text-black">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6 18L18 6M6 6l12 12"/>
+    </svg>
+  );
+}

apps/web/src/components/LeftPanel/LeftPanel.tsx

@@ -5,18 +5,24 @@ import * as utils from "../../utils";
 import UserOnboard from "../UserOnboard/UserOnboard";
 import {CommunityOnboard} from "../CommunityOnboard";
 import {CommunityList} from "../CommunityList";
-import {selectCommunity, useAppDispatch} from "../../store";
+import {selectCommunity, useAppDispatch, useAppSelector} from "../../store";
 import {GlobalAskQuestion} from "../GlobalAskQuestion";
+import {md_screen} from "./styles";
+import {useEffect} from "react";
 
 const LeftPanel = (props: LeftPanelProp) => {
   const {style} = props;
   const router = useRouter();
   const dispatch = useAppDispatch();
+  const isLeftPanelVisible = useAppSelector((state) => state.responsiveToggles.leftPanelToggle)
 
+  useEffect(() =>{
+    props.handleMargin(isLeftPanelVisible);
+  },[isLeftPanelVisible])
 
   return (
       <div
-          className={`fixed left-0 h-full border-r border-solid border-[#08010d12] ${style}`}
+          className={`fixed left-0 h-full border-r border-solid border-[#08010d12] bg-white z-[999] ${isLeftPanelVisible ? 'block' :md_screen} ${style}`}
       >
         <div className={`h-full flex flex-col justify-between`}>
           <div

apps/web/src/components/LeftPanel/styles.tsx

@@ -0,0 +1 @@
+export const md_screen = "max-680:hidden min-680:block"

apps/web/src/components/LeftPanel/type.ts

@@ -1,3 +1,4 @@
 export type LeftPanelProp = {
   style: string;
+  handleMargin: (value: boolean) => void;
 };

apps/web/src/components/Modal/BaseModal/BaseModal.tsx

@@ -34,7 +34,7 @@ export const BaseModal = (props: BaseModalProps) => {
                 >
                   <Dialog.Panel
                     className={utils.classNames(
-                      "w-full max-w-sm transform overflow-hidden rounded-2xl bg-white px-4 py-7 text-left align-middle shadow-xl transition-all ",
+                      "w-full max-w-sm transform rounded-2xl bg-white px-4 py-7 text-left align-middle shadow-xl transition-all ",
                       props?.classNameContent
                     )}
                   >

apps/web/src/components/Modal/CommunityOnBoardModal/CommunityOnBoardModal.tsx

@@ -4,14 +4,15 @@ import { BaseModal } from "../BaseModal/BaseModal";
 import {Spinner} from "../../Icons";
 import {TagMultiSelect} from "../../Tag";
 import {toast} from "react-toastify";
+import {constants} from "../../../config";
 
 export const CommunityOnBoardModal = (props: CommunityOnBoardProps) => {
   const [name, setName] = useState<string>();
   const [imageUrl, setImageUrl] = useState<string>();
   const [description, setDescription] = useState<string>();
   const [submitting, setIsSubmitting] = useState<boolean>(false );
   const [tags, setTags] = useState<{id:string,tag:string}[]>([]);
-  const minLimit =3;
+  const minLimit = constants.TAG_MIN_LIMIT;
   const onSave = (event) => {
     event.preventDefault();
     if(tags.length<minLimit){
@@ -31,29 +32,30 @@ export const CommunityOnBoardModal = (props: CommunityOnBoardProps) => {
     >
       <form onSubmit={onSave}>
         <input
-          className="mt-5 h-12 w-full rounded-md border-2 border-solid border-gray-200 py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
+          className="mt-5 h-12 w-full rounded-md border-2 border-solid border-gray-200 py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0 focus:border-gray-400 focus:bg-white focus:outline-none"
           placeholder="community name"
           type="text"
           maxLength={100}
           onChange={(e) => setName(e.target.value)}
           required={true}
         />
         <textarea
-          className="mt-5 h-28 w-full rounded-md border-2 border-solid border-gray-200 py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
+          className="mt-5 h-28 w-full rounded-md border-2 border-solid border-gray-200 py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0 focus:border-gray-400 focus:bg-white focus:outline-none"
           placeholder="community description"
           maxLength={1000}
           onChange={(e) => setDescription(e.target.value)}
           required={true}
         />
         <input
-          className="mt-5 h-12 w-full rounded-md border-2 border-solid border-gray-200 py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
+          className="mt-5 h-12 w-full rounded-md border-2 border-solid border-gray-200 py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0 focus:border-gray-400 focus:bg-white focus:outline-none"
           placeholder="image url"
           type="url"
           onChange={(e) => setImageUrl(e.target.value)}
           required={true}
         />
         <div
-          className="mt-5  h-auto w-full rounded-md border-2 border-solid border-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
+          tabIndex={4}
+          className="mt-3 mb-14 py-2 h-auto w-full rounded-md border-2 border-solid border-gray-200 bg-white focus:ring-0 focus:border-gray-400 focus:bg-white focus:outline-none"
         >
           <TagMultiSelect selectedData={tags} setData={setTags} placeholder={"Select tag"}/>
         </div>

apps/web/src/components/Modal/InterfacesModal/InterfacesModal.tsx

@@ -13,7 +13,7 @@ export const InterfacesModal = (props: InterfaceModelProps) => {
       <div id="interface-modal">
         <button
           id="discord-button"
-          className="w-full mt-5 h-12 border-solid border-2 border-gray-200 rounded-md py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
+          className="w-full mt-5 h-12 border-solid border-2 border-gray-200 rounded-md py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0 focus:border-gray-400 focus:bg-white focus:outline-none"
           onClick={connectDiscord}
         >
           Connect discord

apps/web/src/components/Modal/WebOnBoardModal/WebOnBoardModal.tsx

@@ -19,15 +19,15 @@ export const WebOnBoardModal = (props: WebOnBoardProps) => {
     <BaseModal open={props.open} title={"your details"} onClose={()=>{}}>
       <form onSubmit={onSave}>
         <input
-          className="w-full mt-5 h-12 border-solid border-2 border-gray-200 rounded-md py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
+          className="w-full mt-5 h-12 border-solid border-2 border-gray-200 rounded-md py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0 focus:border-gray-400 focus:bg-white focus:outline-none"
           placeholder="name"
           type="text"
           maxLength={100}
           onChange={(e) => setName(e.target.value)}
           required={true}
         />
         <input
-          className="w-full mt-5 h-12 border-solid border-2 border-gray-200 rounded-md py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
+          className="w-full mt-5 h-12 border-solid border-2 border-gray-200 rounded-md py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0 focus:border-gray-400 focus:bg-white focus:outline-none"
           placeholder="image url"
           type="url"
           onChange={(e) => setImageUrl(e.target.value)}

apps/web/src/components/MultiSelectDropdown/MultiSelectDropdown.tsx

@@ -30,9 +30,9 @@ const MultiSelectDropdown = (props: multiSelectProps) => {
         <Combobox value={selectedData} onChange={handleChange as any} multiple>
           <div className="relative mt-1">
             <div
-                className="relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
+                className="relative w-full cursor-default overflow-hidden bg-white text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
               <Combobox.Input
-                  className="w-full py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 rounded-md border-2 border-solid border-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
+                  className="w-full py-2 pl-3 pr-10 text-sm font-normal text-gray-900 rounded-[10px] border-2 border-solid border-[#F1F1F1] bg-white focus:ring-0 focus:border-gray-400 focus:bg-white focus:outline-none focus:ring-0"
                   displayValue={() => ""}
                   onChange={(event) => setQuery(event.target.value)}
                   placeholder="Search Tag"
@@ -47,7 +47,7 @@ const MultiSelectDropdown = (props: multiSelectProps) => {
             >
               <Combobox.Options
                   as={"div"}
-                  className="absolute mt-1 max-h-[100px] w-full overflow-auto rounded-md border-2 border-solid border-gray-200 bg-white shadow-lg text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm scrollbar-hide">
+                  className="absolute mt-1 max-h-[140px] w-full overflow-auto rounded-md border-2 border-solid border-gray-200 bg-white shadow-lg text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm scrollbar-hide">
                 {filteredPeople.length === 0 && query !== '' ? (
                     <div className="relative cursor-default select-none py-2 px-4 text-gray-700">
                       {NoDataComponent(query)}