avatar fixes

exm-web/components/AttachmentWithChatPreview.tsx

@@ -21,8 +21,8 @@ export const AttachmentWithChatPreview = ({
     }
 
     return (
-      <div id="gallery" className={cn("relative w-full", className)}>
-        <div className="flex w-full">
+      <div id="gallery" className={"relative"}>
+        <div className={cn(className)}>
           {attachments.map((image: any, i: number) => (
             <FilePreview
               key={i}
@@ -32,6 +32,7 @@ export const AttachmentWithChatPreview = ({
               fileIndex={i}
               isDownload={isDownload}
               attachments={attachments}
+              indexProp={i}
             />
           ))}
         </div>

exm-web/components/AttachmentWithPreview.tsx

@@ -10,20 +10,22 @@ export const AttachmentWithPreview = ({
   images,
   className,
   deleteImage,
+  indexProp,
 }: {
   images: any[]
   className?: string
   deleteImage?: (index: number) => void
+  indexProp?: number
 }) => {
-  const [index, setIndex] = useState(0)
+  const [index, setIndex] = useState(indexProp ? indexProp : 0)
 
-  const onDelete = (index: number) => {
-    if (index > 0) {
-      setIndex(index - 1)
+  const onDelete = (i: number) => {
+    if (i > 0) {
+      setIndex(i - 1)
     }
 
     if (deleteImage) {
-      deleteImage(index)
+      deleteImage(i)
     }
 
     return
@@ -53,7 +55,7 @@ export const AttachmentWithPreview = ({
               src={images[index]?.url || ""}
               width={2000}
               height={2000}
-              className="w-full h-full object-contain cursor-pointer max-h-[800px]"
+              className="w-full h-full object-contain cursor-pointer max-h-[80vh]"
             />
           </div>
         </div>
@@ -71,19 +73,19 @@ export const AttachmentWithPreview = ({
         {index > 0 && (
           <button
             type="button"
-            className="absolute top-0 left-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer"
+            className="absolute top-0 left-[-60px] z-30 flex items-center justify-center h-full px-4 cursor-pointer focus:outline-none"
             onClick={() => handleClick("previous")}
           >
-            <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-[#C3C3C1]">
+            <span className="inline-flex items-center justify-center w-6 h-6">
               <svg
-                className="w-2.5 h-2.5 text-white dark:text-gray-800"
+                className="w-6 h-6 text-white dark:text-gray-800"
                 aria-hidden="true"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 6 10"
               >
                 <path
-                  stroke="black"
+                  stroke="white"
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth="2"
@@ -98,19 +100,19 @@ export const AttachmentWithPreview = ({
         {index < images.length - 1 && (
           <button
             type="button"
-            className="absolute top-0 right-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
+            className="absolute top-0 right-[-60px] z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
             onClick={() => handleClick("next")}
           >
-            <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-[#C3C3C1]">
+            <span className="inline-flex items-center justify-center w-6 h-6">
               <svg
-                className="w-2.5 h-2.5 text-white dark:text-gray-800"
+                className="w-6 h-6 text-white dark:text-gray-800"
                 aria-hidden="true"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 6 10"
               >
                 <path
-                  stroke="black"
+                  stroke="white"
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth="2"

exm-web/components/FilePreview.tsx

@@ -14,13 +14,16 @@ export const FilePreview = ({
   fileIndex,
   isDownload,
   attachments,
+  indexProp
 }: {
   fileUrl: string
   fileName?: string
   fileIndex: number
   deleteImage?: (index: number) => void
   isDownload?: boolean
   attachments?: any[]
+  indexProp?: number
+
 }) => {
   if (!fileUrl || !fileUrl.split) {
     return null
@@ -36,9 +39,9 @@ export const FilePreview = ({
 
   const renderImageForm = () => {
     return (
-      <DialogContent>
+      <DialogContent className="bg-transparent border-0 shadow-none max-w-2xl">
         <DialogHeader />
-        <AttachmentWithPreview images={attachments || []} />
+        <AttachmentWithPreview images={attachments || []} indexProp={indexProp} />
       </DialogContent>
     )
   }
@@ -49,7 +52,7 @@ export const FilePreview = ({
         {deleteImage && (
           <button
             type="button"
-            className="absolute top-0 bg-white p-1 rounded-full"
+            className="absolute -top-2 -right-2 bg-white rounded-full"
             onClick={() => onDelete(fileIndex)}
           >
             <XCircle size={18} />
@@ -58,17 +61,17 @@ export const FilePreview = ({
 
         {isDownload ? (
           <a href={readFile(fileUrl)}>
-            <div className="mr-1 p-2 rounded-lg bg-[#F0F0F0]">
-              <div className="flex items-center text-sm font-semibold text-[#444] break-words">
+            <div className="w-full p-2 rounded-md bg-[#F0F0F0]">
+              <div className="flex gap-2 items-center font-semibold text-[#444] break-words">
                 <ExternalLinkIcon size={18} /> {fileName}
-              </div>{" "}
+              </div>
             </div>
           </a>
         ) : (
-          <div className="mr-1 p-2 rounded-lg bg-[#F0F0F0]">
-            <div className="flex items-center text-sm font-semibold text-[#444] break-words">
+          <div className="p-2 rounded-md bg-[#F0F0F0] ">
+            <div className="flex gap-2 items-center font-semibold text-[#444] break-words">
               <ExternalLinkIcon size={18} /> {fileName}
-            </div>{" "}
+            </div>
           </div>
         )}
       </div>
@@ -78,10 +81,10 @@ export const FilePreview = ({
   const renderImagePreview = () => {
     if (deleteImage) {
       return (
-        <div className="mr-1 w-[80px] h-[80px] shrink-0">
+        <div className="relative shrink-0 w-14 h-14">
           <button
             type="button"
-            className="absolute top-0 bg-white p-1 rounded-full"
+            className="absolute -top-2 -right-2 bg-white rounded-full"
             onClick={() => onDelete(fileIndex)}
           >
             <XCircle size={18} />
@@ -90,9 +93,9 @@ export const FilePreview = ({
           <Image
             alt="image"
             src={fileUrl || ""}
-            width={500}
-            height={500}
-            className="object-contain w-[80px] h-[80px]"
+            width={100}
+            height={100}
+            className="object-cover rounded-md w-14 h-14"
           />
         </div>
       )
@@ -102,13 +105,13 @@ export const FilePreview = ({
       <>
         <Dialog>
           <DialogTrigger asChild={true}>
-            <div className="mr-1 w-[80px] h-[80px] shrink-0 cursor-pointer">
+            <div className="shrink-0 w-[80px] h-[80px] cursor-pointer bg-slate-600 rounded-lg">
               <Image
                 alt="image"
                 src={fileUrl || ""}
                 width={500}
                 height={500}
-                className="object-contain w-[80px] h-[80px]"
+                className="object-cover w-[80px] h-[80px] rounded-lg"
               />
             </div>
           </DialogTrigger>

exm-web/components/hooks/useAllUsers .tsx

@@ -0,0 +1,33 @@
+import { queries } from "@/common/team/graphql"
+import { IUser } from "@/modules/auth/types"
+import { useQuery } from "@apollo/client"
+
+export interface IUseFeedDetail {
+  loading: boolean
+  users: IUser[]
+}
+
+export const useAllUsers = ({
+  userIds = [],
+  searchValue,
+  reload,
+}: {
+  userIds?: string[]
+  searchValue?: string
+  reload?: boolean
+}): IUseFeedDetail => {
+  const { data: usersData, loading } = useQuery(queries.users, {
+    variables: {
+      ids: userIds,
+      searchValue,
+      excludeIds: reload,
+    },
+  })
+
+  const { users } = usersData || {}
+
+  return {
+    loading,
+    users,
+  }
+}

exm-web/components/hooks/useUsers.tsx

@@ -37,7 +37,7 @@ export const useUsers = ({
     const details = user.details || {}
 
     const label = details.fullName || user.username || user.email
-    return { label, value: user._id }
+    return { label, value: user._id, details }
   })
 
   return {

exm-web/components/select/SelectUsers.tsx

@@ -31,9 +31,14 @@ const SelectUsers = ({
   return (
     <>
       {loading && !reload && !searchValue ? (
-        <Input disabled={true} placeholder="Loading..." />
+        <Input
+          disabled={true}
+          placeholder="Loading..."
+          className="sm:rounded-lg"
+        />
       ) : (
         <Select
+          className="sm:rounded-lg"
           onMenuClose={() => setReload(false)}
           onMenuOpen={() => setReload(true)}
           isMulti={true}
@@ -46,7 +51,9 @@ const SelectUsers = ({
           onInputChange={setSearchValue}
           onChange={(data) => {
             onChangeMultiValue(data)
-            field && field.onChange(data)
+            if (field) {
+              field.onChange(data)
+            }
           }}
         />
       )}

exm-web/components/ui/avatar.tsx

@@ -30,11 +30,11 @@ const Avatar: FC<
 
   const [error, setError] = useState(null)
 
-  const fallbackImage = "/user.png"
+  const fallbackImage = "/avatar-colored.svg"
 
   const updatedProps = {
     ...rest,
-    src: error ? fallbackImage : readFile(src || "/user.png"),
+    src: error ? fallbackImage : readFile(src || "/avatar-colored.svg"),
     alt,
     fill: !width && !height ? true : undefined,
     width,

exm-web/components/ui/dialog.tsx

@@ -22,7 +22,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-white/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-slate-950/80",
+      "fixed inset-0 z-50 bg-black/25 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-slate-950/80",
       className
     )}
     {...props}
@@ -45,7 +45,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 data-[state=open]:text-slate-500 dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-400">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none  disabled:pointer-events-none data-[state=open]:bg-slate-100 data-[state=open]:text-slate-500 dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-400">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

exm-web/components/ui/image.tsx

@@ -27,7 +27,9 @@ const Image: FC<
   const fixedSrc = readFile(src || "")
 
   const [isImageLoading, setIsImageLoading] = useState(true)
-  const [srcI, setSrcI] = useState(fixedSrc || fallBack || "/user.png")
+  const [srcI, setSrcI] = useState(
+    fixedSrc || fallBack || "/avatar-colored.svg"
+  )
   const handleComplete = () => setIsImageLoading(false)
 
   useEffect(() => {

exm-web/lib/utils.ts

@@ -39,8 +39,6 @@ export const readFileImage = (value: string, width?: number): string => {
 }
 
 export const readFile = (url: string = "", width?: any) => {
-  const READ_FILE = "/read-file?key="
-
   const env = getEnv()
   const NEXT_PUBLIC_MAIN_API_DOMAIN = env.NEXT_PUBLIC_MAIN_API_DOMAIN || ""