Merge pull request #433 from ONLYOFFICE/feature/new-room-icons

Feature/new room icons

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js

@@ -24,6 +24,7 @@
 // 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 { inject, observer } from "mobx-react";
 import ArrowReactSvgUrl from "PUBLIC_DIR/images/arrow.react.svg?url";
 import React from "react";
 import PropTypes from "prop-types";
@@ -102,6 +103,15 @@ const StyledListItem = styled(StyledRoomType)`
     ${(props) => props.theme.createEditRoomDialog.roomType.listItem.borderColor};
   border-radius: 6px;
 
+  &:hover:not(:active) {
+    background-color: ${(props) =>
+      props.theme.createEditRoomDialog.roomType.listItem.hoverBackground};
+  }
+
+  &:active {
+    border-color: ${({ accentColor }) => accentColor};
+  }
+
   .choose_room-description {
     color: ${(props) =>
       props.theme.createEditRoomDialog.roomType.listItem.descriptionText};
@@ -112,12 +122,26 @@ const StyledDropdownButton = styled(StyledRoomType)`
   border-radius: 6px;
   background-color: ${(props) =>
     props.theme.createEditRoomDialog.roomType.dropdownButton.background};
+
+  ${({ isOpen }) =>
+    !isOpen &&
+    css`
+      &:hover:not(:active) {
+        background-color: ${(props) =>
+          props.theme.createEditRoomDialog.roomType.dropdownButton
+            .hoverBackground};
+      }
+    `}
+
   border: 1px solid
-    ${(props) =>
-      props.isOpen
-        ? props.theme.createEditRoomDialog.roomType.dropdownButton
-            .isOpenBorderColor
-        : props.theme.createEditRoomDialog.roomType.dropdownButton.borderColor};
+    ${({ isOpen, accentColor, theme }) =>
+    isOpen
+      ? accentColor
+      : theme.createEditRoomDialog.roomType.dropdownButton.borderColor};
+
+  &:active {
+    border-color: ${({ accentColor }) => accentColor};
+  }
 
   .choose_room-description {
     color: ${(props) =>
@@ -178,13 +202,16 @@ const RoomType = ({
   isOpen,
   id,
   selectedId,
+  currentColorScheme,
 }) => {
   const room = {
     type: roomType,
     title: getRoomTypeTitleTranslation(roomType, t),
     description: getRoomTypeDescriptionTranslation(roomType, t),
   };
 
+  const accentColor = currentColorScheme?.main?.accent;
+
   const arrowClassName =
     type === "dropdownButton"
       ? "choose_room-forward_btn dropdown-button"
@@ -219,7 +246,12 @@ const RoomType = ({
   );
 
   return type === "listItem" ? (
-    <StyledListItem id={id} title={t(room.title)} onClick={onClick}>
+    <StyledListItem
+      accentColor={accentColor}
+      id={id}
+      title={t(room.title)}
+      onClick={onClick}
+    >
       {content}
     </StyledListItem>
   ) : type === "dropdownButton" ? (
@@ -229,6 +261,7 @@ const RoomType = ({
       onClick={onClick}
       isOpen={isOpen}
       data-selected-id={selectedId}
+      accentColor={accentColor}
     >
       {content}
     </StyledDropdownButton>
@@ -239,6 +272,7 @@ const RoomType = ({
       onClick={onClick}
       isOpen={isOpen}
       data-selected-id={selectedId}
+      currentColorScheme={currentColorScheme}
     >
       {content}
     </StyledDropdownItem>
@@ -247,6 +281,7 @@ const RoomType = ({
       id={id}
       title={t(room.title)}
       data-selected-id={selectedId}
+      currentColorScheme={currentColorScheme}
     >
       {content}
     </StyledDisplayItem>
@@ -268,6 +303,9 @@ RoomType.propTypes = {
     "dropdownItem",
   ]),
   isOpen: PropTypes.bool,
+  currentColorScheme: PropTypes.object,
 };
 
-export default RoomType;
+export default inject(({ settingsStore }) => ({
+  currentColorScheme: settingsStore.currentColorScheme,
+}))(observer(RoomType));

packages/shared/themes/base.ts

@@ -2467,18 +2467,20 @@ export const getBaseTheme = () => {
       roomType: {
         listItem: {
           background: "none",
+          hoverBackground: "#F8F9F9",
           borderColor: "#ECEEF1",
           descriptionText: "#A3A9AE",
         },
         dropdownButton: {
           background: "none",
+          hoverBackground: "#F8F9F9",
           borderColor: "#ECEEF1",
           isOpenBorderColor: "#2DA7DB",
           descriptionText: "#A3A9AE",
         },
         dropdownItem: {
           background: "#ffffff",
-          hoverBackground: "#f3f4f4",
+          hoverBackground: "#F8F9F9",
           descriptionText: "#A3A9AE",
         },
         displayItem: {

packages/shared/themes/dark.ts

@@ -2446,23 +2446,25 @@ const Dark: TTheme = {
     roomType: {
       listItem: {
         background: "none",
+        hoverBackground: "#282828",
         borderColor: "#474747",
         descriptionText: "#A3A9AE",
       },
       dropdownButton: {
         background: "none",
+        hoverBackground: "#282828",
         borderColor: "#474747",
         isOpenBorderColor: "#F97A0B",
         descriptionText: "#A3A9AE",
       },
       dropdownItem: {
         background: "#333333",
-        hoverBackground: "#474747",
+        hoverBackground: "#282828",
         descriptionText: "#A3A9AE",
       },
       displayItem: {
-        background: "#474747",
-        borderColor: "#474747",
+        background: "#282828",
+        borderColor: "#282828",
         descriptionText: "#a3a9ae",
       },
     },
@@ -2492,7 +2494,7 @@ const Dark: TTheme = {
       background: "#333333",
       borderColor: "#474747",
       item: {
-        hoverBackground: "#474747",
+        hoverBackground: "#282828",
       },
     },