Merge pull request #149 from HackYourFutureProjects/fix/home-page

Fix/home page

Author: Dmytro-Doronin

client/src/components/LogoPulsIcon/LogoPulseIcon.tsx

@@ -0,0 +1,73 @@
+import LogoIcon from "../icons/LogoIcon";
+import { cva, type VariantProps } from "class-variance-authority";
+import { twMerge } from "tailwind-merge";
+
+type Size = "lg" | "sm";
+
+const wrapper = cva("flex items-center justify-center mt-5", {
+  variants: {
+    fullWidth: {
+      true: "w-full",
+      false: "",
+    },
+  },
+  defaultVariants: { fullWidth: true },
+});
+
+const logoPulseVariants = cva("relative", {
+  variants: {
+    size: {
+      lg: "w-40 h-40",
+      sm: "w-20 h-20",
+    },
+  },
+  defaultVariants: { size: "lg" },
+});
+
+const innerCircleVariants = cva(
+  "absolute rounded-full bg-[#15141D] flex items-center justify-center",
+  {
+    variants: {
+      size: {
+        lg: "inset-2.5",
+        sm: "inset-[5px]",
+      },
+    },
+    defaultVariants: { size: "lg" },
+  },
+);
+
+const iconSizeMap: Record<Size, { w: number; h: number }> = {
+  lg: { w: 90, h: 90 },
+  sm: { w: 45, h: 45 },
+};
+
+type Props = Omit<VariantProps<typeof logoPulseVariants>, "size"> & {
+  size?: Size;
+  className?: string;
+
+  fullWidth?: boolean;
+  wrapperClassName?: string;
+};
+
+export const LogoPulseIcon = ({
+  size = "lg",
+  className,
+  fullWidth = true,
+  wrapperClassName,
+}: Props) => {
+  const { w, h } = iconSizeMap[size];
+
+  return (
+    <div className={twMerge(wrapper({ fullWidth }), wrapperClassName)}>
+      <div className={twMerge(logoPulseVariants({ size }), className)}>
+        <div className="loader-ring" />
+        <div className={innerCircleVariants({ size })}>
+          <div className="loader-pulse text-purple-500">
+            <LogoIcon width={String(w)} height={String(h)} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

client/src/components/auth/loginForm/LoginForm.tsx

@@ -7,8 +7,8 @@ import { ControlledTextField } from "../../ui/controlled/controlledTextField/Con
 import { Button } from "../../ui/button/Button";
 import { NavLink } from "react-router-dom";
 import { authRoutesVariables } from "../../../router/routesVariables/pathVariables";
-import { Loader } from "../../loader/Loader.tsx";
 import { GoogleAuthButton } from "../../ui/button/GoogleAuthButton.tsx";
+import { LogoPulseIcon } from "../../LogoPulsIcon/LogoPulseIcon.tsx";
 
 type LoginFormComponentTypes = {
   loading: boolean;
@@ -115,7 +115,7 @@ export const LoginForm = ({
           )}
         </div>
       </div>
-      {loading && <Loader />}
+      {loading && <LogoPulseIcon size="sm" />}
     </form>
   );
 };

client/src/components/auth/recoveryForm/RecoveryForm.tsx

@@ -4,7 +4,7 @@ import { ControlledTextField } from "../../ui/controlled/controlledTextField/Con
 import { Button } from "../../ui/button/Button.tsx";
 import type { FormValues } from "./recoveryFormTypes.ts";
 import { recoverySchema } from "./recoveryForm.validation.ts";
-import { Loader } from "../../loader/Loader.tsx";
+import { LogoPulseIcon } from "../../LogoPulsIcon/LogoPulseIcon.tsx";
 
 type RecoveryFormProps = {
   loading: boolean;
@@ -57,8 +57,7 @@ export const RecoveryForm = ({
           </div>
         </div>
       </div>
-
-      {loading && <Loader />}
+      {loading && <LogoPulseIcon size="sm" />}
     </form>
   );
 };

client/src/components/auth/resetPasswordForm/restPssswordForm.tsx

@@ -4,7 +4,7 @@ import { ControlledTextField } from "../../ui/controlled/controlledTextField/Con
 import { Button } from "../../ui/button/Button.tsx";
 import type { ResetPasswordFormValues } from "./resetPasswordFromTypes.ts";
 import { resetPasswordSchema } from "./resetPassword.validation.ts";
-import { Loader } from "../../loader/Loader.tsx";
+import { LogoPulseIcon } from "../../LogoPulsIcon/LogoPulseIcon.tsx";
 
 type ResetPasswordFormProps = {
   loading: boolean;
@@ -64,7 +64,7 @@ export const ResetPasswordForm = ({
         </div>
       </div>
 
-      {loading && <Loader />}
+      {loading && <LogoPulseIcon size="sm" />}
     </form>
   );
 };

client/src/components/auth/signUpForm/SignUpForm.tsx

@@ -11,8 +11,8 @@ import {
   RegisterFormTypes,
   Role,
 } from "../../../api/auth/types";
-import { Loader } from "../../loader/Loader.tsx";
 import { GoogleAuthButton } from "../../ui/button/GoogleAuthButton.tsx";
+import { LogoPulseIcon } from "../../LogoPulsIcon/LogoPulseIcon.tsx";
 
 type SignUpFormTypes = {
   loading: boolean;
@@ -131,7 +131,7 @@ export const SignUpForm = ({
         </div>
       </div>
 
-      {loading && <Loader />}
+      {loading && <LogoPulseIcon size="sm" />}
     </form>
   );
 };

client/src/components/chat/chatSidebar/ChatSidebar.tsx

@@ -1,11 +1,11 @@
 import { ChatSidebarItemLink } from "../chatSidebarItem/ChatSidebarItemLink.tsx";
 import { useChatConversationsQuery } from "../../../features/chat/chat.query.ts";
-import { Loader } from "../../loader/Loader.tsx";
+import { LogoPulseIcon } from "../../LogoPulsIcon/LogoPulseIcon.tsx";
 
 export const ChatSidebar = () => {
   const { data, isLoading } = useChatConversationsQuery();
   if (isLoading) {
-    return <Loader />;
+    return <LogoPulseIcon size="sm" />;
   }
   return (
     <aside className="border-r border-[#E0E7FF80] overflow-auto">

client/src/components/controlPanel/ControlPanel.tsx

@@ -0,0 +1,32 @@
+import { DropdownMenu } from "./DropdownMenu.tsx";
+import { Button } from "../ui/button/Button.tsx";
+import ArrowDown from "../icons/ArrowDown.tsx";
+import { useState } from "react";
+import { LinkOption } from "../../types/linkOptionsType.ts";
+
+type ControlPanelTriggerProps = {
+  options: LinkOption[];
+};
+
+export const ControlPanelTrigger = ({ options }: ControlPanelTriggerProps) => {
+  const [openMenu, setOpenMenu] = useState(false);
+  const onSetOpenMenu = (open: boolean) => {
+    setOpenMenu(open);
+  };
+  return (
+    <DropdownMenu
+      openMenu={openMenu}
+      options={options}
+      setOpenMenu={onSetOpenMenu}
+    >
+      <Button
+        variant="secondary"
+        className="items-center gap-2.5"
+        onClick={() => setOpenMenu((prev) => !prev)}
+      >
+        <span className="text-light-100">Sign in </span>
+        <ArrowDown />
+      </Button>
+    </DropdownMenu>
+  );
+};

client/src/components/controlPanel/ControlPanelTrigger.tsx

@@ -0,0 +1,100 @@
+import { ReactNode, useEffect, useRef } from "react";
+import { NavLink } from "react-router-dom";
+import { twMerge } from "tailwind-merge";
+import { Button } from "../ui/button/Button";
+import { LinkOption } from "../../types/linkOptionsType";
+
+type ControlPanelTypes = {
+  classNames?: string;
+  options: LinkOption[];
+  children: ReactNode;
+  openMenu: boolean;
+  setOpenMenu: (open: boolean) => void;
+};
+
+export const DropdownMenu = ({
+  classNames,
+  options,
+  children,
+  openMenu,
+  setOpenMenu,
+}: ControlPanelTypes) => {
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!openMenu) return;
+
+    const onPointerDown = (e: PointerEvent) => {
+      const el = wrapperRef.current;
+      if (!el) {
+        return;
+      }
+      if (!el.contains(e.target as Node)) {
+        setOpenMenu(false);
+      }
+    };
+
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [openMenu]);
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={twMerge(
+        "hidden md:flex relative flex-col items-end",
+        classNames,
+      )}
+    >
+      {children}
+      <div
+        className={[
+          "absolute top-[130%] right-0 z-400 flex flex-col items-start rounded-2xl border border-white/10 bg-[#15141D] shadow-[0_12px_40px_rgba(0,0,0,0.35)] overflow-hidden",
+          "min-w-40 w-max",
+          "opacity-0 invisible transition-opacity duration-300 ease-in-out",
+          openMenu && "opacity-100 visible",
+        ]
+          .filter(Boolean)
+          .join(" ")}
+      >
+        {options.map((option) => {
+          const Icon = option.icon;
+
+          const content = (
+            <div className="flex items-center gap-2.5 text-light-100">
+              {Icon && <Icon className="w-5 h-5 shrink-0" />}
+              <span>{option.title}</span>
+            </div>
+          );
+
+          return option.link ? (
+            <Button
+              key={option.id}
+              as={NavLink}
+              className="flex justify-start w-full rounded-none p-2.5 transition-none
+                         hover:text-(--color-dark-900) hover:bg-gray-400"
+              to={option.link}
+              variant="link"
+              onClick={() => setOpenMenu(false)}
+            >
+              {content}
+            </Button>
+          ) : (
+            <Button
+              key={option.id}
+              className="flex justify-start w-full rounded-none p-2.5 transition-none
+                         hover:text-(--color-dark-900) hover:bg-gray-400"
+              variant="link"
+              onClick={() => {
+                option.actionCallback?.();
+                setOpenMenu(false);
+              }}
+            >
+              {content}
+            </Button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};