Client: RoomLogoCoverDialog: added color picker

packages/client/src/components/dialogs/RoomLogoCoverDialog/RoomLogoCoverDialog.types.ts

@@ -30,6 +30,7 @@ import type { TTranslation } from "@docspace/shared/types";
 export interface CustomLogoProps {
   color?: string;
   icon?: string;
+  withoutIcon: boolean;
 }
 
 export interface SelectColorProps {

packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/CustomLogo.tsx

@@ -27,6 +27,7 @@
 import React from "react";
 import styled from "styled-components";
 import { ReactSVG } from "react-svg";
+import { Text } from "@docspace/shared/components/text";
 import { CustomLogoProps } from "../RoomLogoCoverDialog.types";
 
 const StyledLogo = styled.div`
@@ -47,12 +48,28 @@ const StyledLogo = styled.div`
       }
     }
   }
+
+  .logo-cover-text {
+    color: #fff;
+    font-size: 41px;
+  }
 `;
 
-export const CustomLogo = ({ color, icon }: CustomLogoProps) => {
+export const CustomLogo = ({ color, icon, withoutIcon }: CustomLogoProps) => {
   return (
     <StyledLogo color={color}>
-      <ReactSVG className="custom-logo-cover" src={icon} alt="icon" />
+      {withoutIcon ? (
+        <Text
+          className="logo-cover-text"
+          fontSize="41"
+          color="#fff"
+          fontWeight={700}
+        >
+          Aa
+        </Text>
+      ) : (
+        <ReactSVG className="custom-logo-cover" src={icon} alt="icon" />
+      )}
     </StyledLogo>
   );
 };

packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/RoomLogoCover.tsx

@@ -35,14 +35,11 @@ import { SelectIcon } from "./SelectIcon";
 const logoColors = [
   "#FF6680",
   "#FF8F40",
-  "#F2D230",
   "#61C059",
-  "#70E096",
   "#1FCECB",
   "#5CC3F7",
   "#6191F2",
   "#7757D9",
-  "#B679F2",
   "#FF7FD4",
 ];
 
@@ -80,7 +77,7 @@ const RoomLogoCover = (props) => {
   return (
     <RoomLogoCoverContainer>
       <div className="room-logo-container">
-        <CustomLogo icon={icon} color={color} />
+        <CustomLogo icon={icon} color={color} withoutIcon={withoutIcon} />
       </div>
       <div className="color-select-container">
         <SelectColor

packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/SelectColor.tsx

@@ -24,10 +24,13 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
-import React from "react";
+import React, { useState } from "react";
 import styled, { css } from "styled-components";
 import { IconButton } from "@docspace/shared/components/icon-button";
 import PlusSvgUrl from "PUBLIC_DIR/images/icons/16/button.plus.react.svg?url";
+import { DropDownItem } from "@docspace/shared/components/drop-down-item";
+import { DropDown } from "@docspace/shared/components/drop-down";
+import { ColorPicker } from "@docspace/shared/components/color-picker";
 import { SelectColorProps } from "../RoomLogoCoverDialog.types";
 
 interface ColorItemProps {
@@ -50,6 +53,12 @@ const StyledColorItem = styled.div<ColorItemProps>`
       align-items: center;
     `}
 
+  ${(props) =>
+    props.isSelected &&
+    css`
+      background-color: #f3f4f4;
+    `}
+
   &:hover {
     cursor: pointer;
   }
@@ -80,6 +89,15 @@ export const SelectColor = ({
   t,
   onChangeColor,
 }: SelectColorProps) => {
+  const [openColorPicker, setOpenColorPicker] = useState<boolean>(false);
+
+  const onApply = (color: string) => {
+    setOpenColorPicker(false);
+    onChangeColor(color);
+  };
+
+  const isCustomColor = !logoColors.includes(selectedColor); // add usecallback
+
   return (
     <div className="select-color-container">
       <div className="color-name">{t("Common:Color")}</div>
@@ -97,14 +115,35 @@ export const SelectColor = ({
             />
           ),
         )}
-        <StyledColorItem isEmptyColor>
+        <StyledColorItem isEmptyColor isSelected={openColorPicker}>
           <IconButton
             className="select-color-plus-icon"
             size={16}
             iconName={PlusSvgUrl}
+            onClick={() => setOpenColorPicker(true)}
             isFill
           />
         </StyledColorItem>
+        <DropDown
+          directionX="right"
+          manualY="170px"
+          manualX="-163px"
+          withBackdrop={false}
+          isDefaultMode={false}
+          open={openColorPicker}
+          clickOutsideAction={() => setOpenColorPicker(false)}
+        >
+          <DropDownItem className="drop-down-item-hex">
+            <ColorPicker
+              id="accent-hex"
+              onClose={() => setOpenColorPicker(false)}
+              onApply={onApply}
+              appliedColor={selectedColor}
+              applyButtonLabel={t("Common:ApplyButton")}
+              cancelButtonLabel={t("Common:CancelButton")}
+            />
+          </DropDownItem>
+        </DropDown>
       </div>
     </div>
   );

packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/SelectIcon.tsx

@@ -78,6 +78,7 @@ const StyledIconContainer = styled.div`
   }
 
   .cover-icon {
+    overflow: visible;
     &:hover {
       cursor: pointer;
     }