Merge pull request #85 from DevNode-Dev/fix-modals-ui

Fix modals UI
peer-town · Apr 20, 2023 · e154eb9 · e154eb9
2 parents 67280e1 + f9f4273
commit e154eb9
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 31 deletions.
diff --git a/apps/web/src/components/Chip/Chip.tsx b/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>

diff --git a/apps/web/src/components/Dropdown/Dropdown.tsx b/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-[170px] 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>}

diff --git a/apps/web/src/components/Modal/CommunityOnBoardModal/CommunityOnBoardModal.tsx b/apps/web/src/components/Modal/CommunityOnBoardModal/CommunityOnBoardModal.tsx
@@ -32,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>

diff --git a/apps/web/src/components/Modal/InterfacesModal/InterfacesModal.tsx b/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

diff --git a/apps/web/src/components/Modal/WebOnBoardModal/WebOnBoardModal.tsx b/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)}

diff --git a/apps/web/src/components/MultiSelectDropdown/MultiSelectDropdown.tsx b/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"

diff --git a/apps/web/src/components/Tag/TagMultiSelect.tsx b/apps/web/src/components/Tag/TagMultiSelect.tsx
@@ -25,18 +25,18 @@ const TagMultiSelect = (props: tagSelectProp) => {
     setData((prevState) => prevState.filter((tag) => tag !== removedTag));
   }
   return (
-    <div className={"relative w-full h-full"}>
-      <div className={"flex row w-full h-full items-center "}>
-        <div className={"flex row gap-[10px] w-full p-3 flex-wrap"}>
-          {isEmpty(selectedData) && <div className={"text-sm text-[#A2A8B4]"}> {placeholder} </div>}
+    <div className={"relative z-[1] w-full h-full "}>
+      <div className={"relative z-[2] px-5 flex row w-full h-full items-center cursor-pointer"} onClick={handleOpen}>
+        <div className={" relative z-[3] flex row gap-[10px] w-full flex-wrap"}>
+          {isEmpty(selectedData) && <div className={"text-sm font-normal text-base text-[#A2A8B4]"}> {placeholder} </div>}
           {selectedData && selectedData.length > 0 ? (selectedData.map((tag, index) => {
             return (<Chip key={index} text={tag.tag} onClose={() => {
               handleCloseTag(tag)
             }}/>)
           })) : null}
         </div>
-        <div className={"w-[30px] h-[30px] text-center"} onClick={handleOpen}>
-          <svg className="w-full h-full cursor-pointer" viewBox="0 0 20 20" fill="currentColor">
+        <div className={"w-[20px] h-[20px] text-center"} >
+          <svg className="w-full h-full cursor-pointer" viewBox="0 0 20 20" fill="black">
             <path fillRule="evenodd" d="M10 14l-5-5h10l-5 5z" clipRule="evenodd"/>
           </svg>
         </div>

diff --git a/apps/web/src/components/Thread/CreateThread.tsx b/apps/web/src/components/Thread/CreateThread.tsx
@@ -110,6 +110,7 @@ const CreateThread = (props: CreateThreadProps) => {
       <Question title={"Ask question"} open={props.open} onClose={props.onClose}>
         <div className="form-group mb-6">
           <input
+            tabIndex={1}
               id="question-title"
               className={utils.classNames(
                   "form-control mb-3 block w-full rounded-[10px] border-2 border-solid border-[#F1F1F1] bg-white bg-clip-padding p-2 px-5 text-base font-normal text-gray-700 focus:border-gray-400 focus:bg-white focus:text-gray-700 focus:outline-none",
@@ -123,6 +124,7 @@ const CreateThread = (props: CreateThreadProps) => {
               required
           />
           <textarea
+            tabIndex={2}
               id="question-desc"
               className={utils.classNames(
                   "form-control mb-3 block h-[264px] min-h-[120px] w-full rounded-[10px] border-2 border-solid border-[#F1F1F1] bg-white bg-clip-padding p-5 text-base font-normal text-gray-700 focus:border-gray-400 focus:bg-white focus:text-gray-700 focus:outline-none",
@@ -135,13 +137,15 @@ const CreateThread = (props: CreateThreadProps) => {
               required
           />
           <div
+            tabIndex={3}
               className=" mb-3 block flex w-full flex-col rounded-[10px] border-2 border-solid border-[#F1F1F1] bg-white bg-clip-padding p-2 px-5 text-base font-normal text-gray-700 focus:border-gray-400 focus:bg-white focus:text-gray-700 focus:outline-none">
             <div className="w-full whitespace-normal break-all p-2">
               Posting on <span className="font-bold">{communityName}</span>
             </div>
           </div>
           <div
-            className="mt-5 mb-14 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-[10px] border-2 border-solid border-[#F1F1F1] bg-white focus:ring-0 focus:border-gray-400 focus:bg-white focus:outline-none"
           >
             <TagMultiSelect selectedData={tags} setData={setTags} placeholder={"Select tag"}/>
           </div>

diff --git a/apps/web/src/components/Thread/GlobalCreateThread.tsx b/apps/web/src/components/Thread/GlobalCreateThread.tsx
@@ -51,7 +51,7 @@ const GlobalCreateThread = (props: GlobalCreateThreadProps) => {
           "node.community.socialPlatforms.edges[0].node.communityAvatar"
       );
       return (
-          <div key={index} className={"p-4 !text-gray-700 font-normal cursor-pointer border-b hover:bg-slate-200 "}
+          <div key={index} className={"p-2 !text-gray-700 font-normal cursor-pointer border hover:bg-slate-200 rounded-md border-2 border-solid border-gray-200 bg-white shadow-lg mt-1"}
                onClick={() => {
                  setCommunity({...communityDetails})
                }}>
@@ -147,6 +147,7 @@ const GlobalCreateThread = (props: GlobalCreateThreadProps) => {
       <Question title={"Ask question"} open={props.open} onClose={props.onClose}>
         <div className="form-group mb-6">
           <input
+            tabIndex={1}
               id="question-title"
               className={utils.classNames(
                   "form-control mb-3 block w-full rounded-[10px] border-2 border-solid border-[#F1F1F1] bg-white bg-clip-padding p-2 px-5 text-base font-normal text-gray-700 focus:border-gray-400 focus:bg-white focus:text-gray-700 focus:outline-none",
@@ -160,6 +161,7 @@ const GlobalCreateThread = (props: GlobalCreateThreadProps) => {
               required
           />
           <textarea
+            tabIndex={2}
               id="question-desc"
               className={utils.classNames(
                   "form-control mb-3 block h-[264px] min-h-[120px] w-full rounded-[10px] border-2 border-solid border-[#F1F1F1] bg-white bg-clip-padding p-5 text-base font-normal text-gray-700 focus:border-gray-400 focus:bg-white focus:text-gray-700 focus:outline-none",
@@ -172,14 +174,16 @@ const GlobalCreateThread = (props: GlobalCreateThreadProps) => {
               required
           />
           <div
-              className=" mb-3 block flex w-full flex-col rounded-[10px] border-2 border-solid border-[#F1F1F1] bg-white bg-clip-padding p-2 px-5 text-base font-normal text-gray-700 focus:border-gray-400 focus:bg-white focus:text-gray-700 focus:outline-none">
+            tabIndex={3}
+              className=" mb-3 block flex w-full flex-col rounded-[10px] border-2 border-solid border-[#F1F1F1] bg-white bg-clip-padding py-2 text-base font-normal text-gray-700 focus:border-gray-400 focus:bg-white focus:text-gray-700 focus:outline-none">
             <Dropdown selected={community.communityName} disableDropdown={isEmpty(communities.data?.edges)}
                       placeholder={isEmpty(communities.data?.edges) ? "Please join a Community" : "Select Community"}>
               {getCommunityList()}
             </Dropdown>
           </div>
           <div
-            className="mt-5 mb-14 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-[10px] border-2 border-solid border-[#F1F1F1] bg-white focus:ring-0 focus:border-gray-400 focus:bg-white focus:outline-none"
           >
             <TagMultiSelect selectedData={tags} setData={setTags} placeholder={"Select tag"}/>
           </div>

diff --git a/apps/web/src/sections/UpdateCommunity/UpdateCommunity.tsx b/apps/web/src/sections/UpdateCommunity/UpdateCommunity.tsx
@@ -8,14 +8,12 @@ import {isRight} from "../../utils/fp";
 import {get, has, isNil} from "lodash";
 import {getDevnodeSocialPlatform} from "../../utils";
 import {toast} from "react-toastify";
-import {useRouter} from "next/router";
 
 interface Props {
   communityId: string;
 }
 
 export const UpdateCommunity = (props: Props) => {
-  const router = useRouter();
   const dispatch = useAppDispatch();
   const user = useAppSelector((state) => state.user);
   const [name, setName] = useState<string>("");
@@ -82,7 +80,7 @@ export const UpdateCommunity = (props: Props) => {
           height={126}
         />
           <input
-            className="mt-5 h-12 w-full rounded-md border border-solid border-gray-200 py-2 px-3 text-sm leading-5 text-gray-900 focus:ring-0"
+            className="mt-5 h-12 w-full rounded-md border border-solid border-gray-200 py-2 px-3 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}
@@ -91,15 +89,15 @@ export const UpdateCommunity = (props: Props) => {
             required={true}
           />
           <textarea
-            className="mt-5 h-28 w-full rounded-md border border-solid border-gray-200 py-2 px-3 text-sm leading-5 text-gray-900 focus:ring-0"
+            className="mt-5 h-28 w-full rounded-md border border-solid border-gray-200 py-2 px-3 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}
             value={description}
             onChange={(e) => setDescription(e.target.value)}
             required={true}
           />
           <input
-            className="mt-5 h-12 w-full rounded-md border border-solid border-gray-200 py-2 px-3 text-sm leading-5 text-gray-900 focus:ring-0"
+            className="mt-5 h-12 w-full rounded-md border border-solid border-gray-200 py-2 px-3 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"
             value={imageUrl}