Client: RoomLogoCoverDialog: fixed style

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

@@ -27,10 +27,15 @@
 import { Dispatch, SetStateAction } from "react";
 import type { TTranslation } from "@docspace/shared/types";
 
+export interface RoomLogoCoverProps {
+  isBaseTheme: boolean;
+}
+
 export interface CustomLogoProps {
   color?: string;
   icon?: string;
   withoutIcon: boolean;
+  isBaseTheme: boolean;
 }
 
 export interface SelectColorProps {

packages/client/src/components/dialogs/RoomLogoCoverDialog/index.tsx

@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import React from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import {
   ModalDialog,
@@ -38,7 +38,6 @@ import RoomLogoCover from "./sub-components/RoomLogoCover";
 const StyledModalDialog = styled(ModalDialog)`
   #modal-dialog {
     width: 422px;
-    min-height: 648px;
 
     @media ${tablet} {
       width: 464px;

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

@@ -25,12 +25,18 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
+import hexRgb from "hex-rgb";
 import { ReactSVG } from "react-svg";
 import { Text } from "@docspace/shared/components/text";
 import { CustomLogoProps } from "../RoomLogoCoverDialog.types";
 
-const StyledLogo = styled.div`
+interface StyledLogoProps {
+  isBase: boolean;
+  color: string;
+}
+
+const StyledLogo = styled.div<StyledLogoProps>`
   background-color: ${(props) => props.color};
   width: 96px;
   height: 96px;
@@ -53,11 +59,34 @@ const StyledLogo = styled.div`
     color: #fff;
     font-size: 41px;
   }
+
+  ${(props) =>
+    !props.isBase &&
+    css`
+      background-color: ${hexRgb(props.color, { alpha: 0.09, format: "css" })};
+
+      .custom-logo-cover {
+        svg {
+          path {
+            fill: ${props.color};
+          }
+        }
+      }
+
+      .logo-cover-text {
+        color: ${props.color};
+      }
+    `}
 `;
 
-export const CustomLogo = ({ color, icon, withoutIcon }: CustomLogoProps) => {
+export const CustomLogo = ({
+  color,
+  icon,
+  withoutIcon,
+  isBaseTheme,
+}: CustomLogoProps) => {
   return (
-    <StyledLogo color={color}>
+    <StyledLogo color={color} isBase={isBaseTheme}>
       {withoutIcon ? (
         <Text
           className="logo-cover-text"

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

@@ -35,6 +35,8 @@ import { CustomLogo } from "./CustomLogo";
 import { SelectColor } from "./SelectColor/SelectColor";
 import { SelectIcon } from "./SelectIcon";
 
+import { RoomLogoCoverProps } from "../RoomLogoCoverDialog.types";
+
 const logoColors = [
   "#FF6680",
   "#FF8F40",
@@ -82,12 +84,17 @@ const RoomLogoCoverContainer = styled.div`
     }
   }
 
+  .cover-icon-container,
+  .color-name {
+    user-select: none;
+  }
+
   .select-color-container {
     margin-bottom: 14px;
   }
 `;
 
-const RoomLogoCover = (props) => {
+const RoomLogoCover = ({ isBaseTheme }: RoomLogoCoverProps) => {
   const { t } = useTranslation(["Common", "CreateEditRoomDialog"]);
 
   const [color, setColor] = useState<string>(logoColors[3]); // set room icon default color
@@ -120,7 +127,12 @@ const RoomLogoCover = (props) => {
   return (
     <RoomLogoCoverContainer>
       <div className="room-logo-container">
-        <CustomLogo icon={icon} color={color} withoutIcon={withoutIcon} />
+        <CustomLogo
+          isBaseTheme={isBaseTheme}
+          icon={icon}
+          color={color}
+          withoutIcon={withoutIcon}
+        />
       </div>
       <div className="select-container">
         {isMobile() ? (
@@ -136,9 +148,9 @@ const RoomLogoCover = (props) => {
 };
 
 export default inject<TStore>(({ settingsStore }) => {
-  const { appearanceTheme } = settingsStore;
+  const { theme } = settingsStore;
 
   return {
-    appearanceTheme,
+    isBaseTheme: theme?.isBase,
   };
 })(observer(RoomLogoCover));

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

@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 import styled, { css } from "styled-components";
 
-import { mobile, tablet, isMobile } from "@docspace/shared/utils";
+import { tablet } from "@docspace/shared/utils";
 import { ModalDialog } from "@docspace/shared/components/modal-dialog";
 
 import type { ColorItemProps } from "./SelecColor.types";

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

@@ -27,8 +27,7 @@
 import React from "react";
 
 import styled, { css } from "styled-components";
-import hexRgb from "hex-rgb";
-import { mobile, tablet } from "@docspace/shared/utils";
+import { tablet } from "@docspace/shared/utils";
 
 import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme";
 import { SelectIconProps } from "../RoomLogoCoverDialog.types";
@@ -53,6 +52,11 @@ const StyledWithoutIcon = styled.div<WithoutIconProps>`
   background-color: ${(props) => props.theme.logoCover.selectedBackgroundColor};
   border: 1px solid ${(props) => props.theme.logoCover.selectedBorderColor};
   border-radius: 16px;
+
+  @media ${tablet} {
+    padding: 5px 21px;
+  }
+
   &:hover {
     cursor: pointer;
   }
@@ -102,7 +106,7 @@ export const SelectIcon = ({
     <div>
       <div className="color-name">{t("CreateEditRoomDialog:Icon")}</div>
       <StyledWithoutIcon onClick={toggleWithoutIcon} isSelected={withoutIcon}>
-        Without icon
+        {t("WithoutIcon")}
       </StyledWithoutIcon>
       <div className="cover-icon-container">
         {RoomCoverIcons.map((icon) => (