Avatar component; Indicators components.

client/src/components/ui/ActionsPopover.tsx

@@ -1,4 +1,6 @@
 import { useState, useRef, useEffect } from "react";
+import Button from "./Button";
+import MoreIcon from "../icons/MoreIcon";
 
 interface ActionsPopoverProps {
   options: {
@@ -37,9 +39,6 @@ export default function ActionsPopover({ options }: ActionsPopoverProps) {
       const buttonRect = buttonRef.current.getBoundingClientRect();
       const spaceBelow = window.innerHeight - buttonRect.bottom;
       const spaceAbove = buttonRect.top;
-
-      console.log(spaceBelow, menuHeight, spaceAbove);
-      // Если снизу недостаточно места, но сверху достаточно - открываем вверх
       if (spaceBelow < menuHeight && spaceAbove > menuHeight) {
         setOpenUpwards(true);
       } else {
@@ -52,12 +51,12 @@ export default function ActionsPopover({ options }: ActionsPopoverProps) {
     <div className="relative" ref={popoverRef}>
       <button
         ref={buttonRef}
-        className="flex items-center justify-center gap-[0.139vw] size-[1.667vw]"
+        className="flex items-center justify-center gap-[0.139vw] size-[1.667vw] rounded-[0.556vw] text-[#CCCCCC] hover:text-[#7D7D7D] hover:bg-[#F3F3F3] active:text-[#141414] "
         onClick={() => setIsOpened(!isOpened)}
       >
-        <div className="size-[0.208vw] rounded-full bg-[#CCCCCC]" />
-        <div className="size-[0.208vw] rounded-full bg-[#CCCCCC]" />
-        <div className="size-[0.208vw] rounded-full bg-[#CCCCCC]" />
+        <div className="size-[1.111vw] rounded-[0.556vw]">
+          <MoreIcon />
+        </div>
       </button>
 
       {isOpened && (
@@ -65,24 +64,21 @@ export default function ActionsPopover({ options }: ActionsPopoverProps) {
           ref={(el) => {
             setMenuHeight(el?.offsetHeight || 0);
           }}
-          className={`absolute z-10 right-0 w-[13.333vw] bg-white rounded-[1.111vw] shadow-[0_4px_40px_0_rgba(15,16,17,0.1)] ${
+          className={`absolute z-10 right-0 w-[13.333vw] bg-white rounded-[1.111vw] shadow-[0_4px_40px_0_rgba(15,16,17,0.1)] overflow-hidden ${
             openUpwards ? "bottom-[100%]" : "top-[100%]"
           }`}
         >
           {options.map((option) => (
-            <button
-              className="p-[0.833vw] button-s text-[#7D7D7D] w-full flex items-center gap-[0.556vw]"
+            <Button
+              variant="tertiary"
+              className="p-[0.833vw] button-s w-full flex items-center !rounded-none !justify-start gap-[0.556vw]"
               key={option.label}
               onClick={option.onClick}
               disabled={option.disabled}
-              style={{
-                backgroundColor: option.disabled ? "#F6F6F6" : "transparent",
-                opacity: option.disabled ? 0.5 : 1,
-              }}
             >
               <div className="size-[1.111vw] ">{option.icon}</div>
               {option.label}
-            </button>
+            </Button>
           ))}
         </div>
       )}