refactor: settings dialog

src/components/Avatar/Avatar.tsx

@@ -22,7 +22,7 @@ import {AvataaarProps} from "types/avatar";
 import {getColorClassName, getColorForIndex} from "../../constants/colors";
 
 export type AvatarProps = {
-  seed: string;
+  seed?: string;
   className?: string;
   avatar?: AvataaarProps;
 };
@@ -77,6 +77,9 @@ export const generateRandomProps = (seed: string) => {
  */
 export const Avatar = React.memo(
   ({className, seed, avatar}: AvatarProps) => {
+    if (!seed) {
+      return null;
+    }
     if (!avatar) {
       const {accentColorClass, ...avatarProps} = generateRandomProps(seed);
       return <Avataar className={classNames("avatar", className, accentColorClass)} avatarStyle="Circle" {...avatarProps} />;

src/components/BoardHeader/HeaderMenu/BoardOptions/BoardOptionButton.tsx

@@ -15,7 +15,7 @@ export const BoardOptionButton: FC<PropsWithChildren<BoardOptionButtonProps>> =
   const Icon = icon!;
 
   return (
-    <button className={classNames("board-option-button", {"board-option-button--expandable": isExpandable})} onClick={onClick} {...other}>
+    <button className={classNames(className, "board-option-button", {"board-option-button--expandable": isExpandable})} onClick={onClick} {...other}>
       {icon && <Icon className="board-option-button__icon" />}
       {children}
       <span className="board-option-button__label">{label}</span>

src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogNoteContent.tsx

@@ -62,7 +62,7 @@ export const NoteDialogNoteContent: FC<NoteDialogNoteContentProps> = ({noteId, a
 
   const isImage = useImageChecker(text);
 
-  const {value, ...emoji} = useEmojiAutocomplete<HTMLDivElement>({
+  const {...emoji} = useEmojiAutocomplete<HTMLDivElement>({
     initialValue: text,
     suggestionsHidden: isStackedNote,
   });

src/components/SettingsDialog/Appearance/Appearance.tsx

@@ -1,18 +1,22 @@
 import classNames from "classnames";
 import {useTranslation} from "react-i18next";
+import {getColorClassName} from "constants/colors";
+import {MenuItemConfig} from "constants/settings";
+import {useOutletContext} from "react-router";
 import {LanguageSettingsDropdown} from "../Components/LanguageSettingsDropdown";
 import "../SettingsDialog.scss";
-import "./Appearance.scss";
 import {ThemeSettings} from "../Components/ThemeSettings";
 import {NotificationSettings} from "../Components/NotificationSettings";
 import {BoardReactionsSettings} from "../Components/BoardReactionsSettings";
 import {SkinToneSelector} from "../Components/SkinToneSelector";
+import "./Appearance.scss";
 
 export const Appearance = () => {
   const {t} = useTranslation();
+  const activeMenuItem: MenuItemConfig = useOutletContext();
 
   return (
-    <div className={classNames("settings-dialog__container", "accent-color__lean-lilac")}>
+    <div className={classNames("settings-dialog__container", getColorClassName(activeMenuItem?.color))}>
       <header className="settings-dialog__header">
         <h2 className="settings-dialog__header-text">{t("SettingsDialog.Appearance")}</h2>
       </header>

src/components/SettingsDialog/Appearance/__tests__/__snapshots__/Appearance.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Appearance should render all Settings correctly 1`] = `
 <div
-  class="settings-dialog__container accent-color__lean-lilac"
+  class="settings-dialog__container accent-color__backlog-blue"
 >
   <header
     class="settings-dialog__header"

src/components/SettingsDialog/BoardSettings/BoardSettings.tsx

@@ -10,12 +10,16 @@ import {generateRandomString} from "utils/random";
 import {Toggle} from "components/Toggle";
 import {ConfirmationDialog} from "components/ConfirmationDialog";
 import {isEqual} from "underscore";
+import {MenuItemConfig} from "constants/settings";
+import {getColorClassName} from "constants/colors";
+import {useOutletContext} from "react-router";
 import {SettingsButton} from "../Components/SettingsButton";
 import {SettingsInput} from "../Components/SettingsInput";
 import "./BoardSettings.scss";
 
 export const BoardSettings = () => {
   const {t} = useTranslation();
+  const activeMenuItem: MenuItemConfig = useOutletContext();
 
   const state = useAppSelector(
     (applicationState) => ({
@@ -106,7 +110,7 @@ export const BoardSettings = () => {
   };
 
   return (
-    <div className={classNames("settings-dialog__container", "accent-color__backlog-blue")}>
+    <div className={classNames("settings-dialog__container", getColorClassName(activeMenuItem?.color))}>
       <header className="settings-dialog__header">
         <h2 className="settings-dialog__header-text"> {t("SettingsDialog.BoardSettings")}</h2>
       </header>

src/components/SettingsDialog/ExportBoard/ExportBoard.tsx

@@ -5,24 +5,28 @@ import {useAppSelector} from "store";
 import {exportAsJSON, exportAsCSV, getMarkdownExport} from "utils/export";
 import {Toast} from "utils/Toast";
 import {TOAST_TIMER_SHORT} from "constants/misc";
+import {MenuItemConfig} from "constants/settings";
+import {useOutletContext} from "react-router";
+import {getColorClassName} from "constants/colors";
+import ExportHintHiddenContent from "./ExportHintHiddenContent/ExportHintHiddenContent";
 import {SettingsButton} from "../Components/SettingsButton";
-import "./ExportBoard.scss";
 import "../SettingsDialog.scss";
-import ExportHintHiddenContent from "./ExportHintHiddenContent/ExportHintHiddenContent";
+import "./ExportBoard.scss";
 
 export const ExportBoard = () => {
   const {t} = useTranslation();
+  const activeMenuItem: MenuItemConfig = useOutletContext();
 
   const boardId = useAppSelector((state) => state.board.data!.id);
   const boardName = useAppSelector((state) => state.board.data!.name);
 
   return (
-    <div data-testid="export" className="settings-dialog__container">
+    <div data-testid="export" className={classNames("settings-dialog__container", getColorClassName(activeMenuItem?.color))}>
       <div className="settings-dialog__header">
-        <h2 className={classNames("settings-dialog__header-text", "accent-color__backlog-blue")}> {t("ExportBoardOption.title")}</h2>
+        <h2 className="settings-dialog__header-text"> {t("ExportBoardOption.title")}</h2>
       </div>
 
-      <div className={classNames("settings-dialog__group", "accent-color__backlog-blue")}>
+      <div className="settings-dialog__group">
         <SettingsButton
           label={t("ExportBoardOption.exportAsJson")}
           icon={FileJson}

src/components/SettingsDialog/ExportBoard/__tests__/__snapshots__/ExportBoard.test.tsx.snap

@@ -6,21 +6,21 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="settings-dialog__container"
+        class="settings-dialog__container accent-color__backlog-blue"
         data-testid="export"
       >
         <div
           class="settings-dialog__header"
         >
           <h2
-            class="settings-dialog__header-text accent-color__backlog-blue"
+            class="settings-dialog__header-text"
           >
 
             Export board
           </h2>
         </div>
         <div
-          class="settings-dialog__group accent-color__backlog-blue"
+          class="settings-dialog__group"
         >
           <button
             aria-label="Export as JSON"
@@ -104,21 +104,21 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="settings-dialog__container"
+      class="settings-dialog__container accent-color__backlog-blue"
       data-testid="export"
     >
       <div
         class="settings-dialog__header"
       >
         <h2
-          class="settings-dialog__header-text accent-color__backlog-blue"
+          class="settings-dialog__header-text"
         >
 
           Export board
         </h2>
       </div>
       <div
-        class="settings-dialog__group accent-color__backlog-blue"
+        class="settings-dialog__group"
       >
         <button
           aria-label="Export as JSON"

src/components/SettingsDialog/Feedback/Feedback.tsx

@@ -5,10 +5,15 @@ import {SettingsButton} from "components/SettingsDialog/Components/SettingsButto
 import {FeedbackAPI} from "api/feedback";
 import {useAppSelector} from "store";
 import {TemplateGallery, Praise, Bug} from "components/Icon";
+import {useOutletContext} from "react-router";
+import {MenuItemConfig} from "constants/settings";
+import {getColorClassName} from "constants/colors";
 import "./Feedback.scss";
 
 export const Feedback: React.FC = () => {
   const {t} = useTranslation();
+  const activeMenuItem: MenuItemConfig = useOutletContext();
+
   const [errorMessage, setErrorMessage] = useState<string>();
   const [feedbackTypeInput, setFeedbackTypeInput] = useState("PRAISE");
   const [feedbackInputLabel, setFeedbackInputLabel] = useState<string>(t("Feedback.PraiseInputLabel"));
@@ -106,9 +111,9 @@ export const Feedback: React.FC = () => {
   );
 
   return (
-    <div className="settings-dialog__container accent-color__value-violet">
+    <div className={classNames("settings-dialog__container", getColorClassName(activeMenuItem?.color))}>
       <div className="settings-dialog__header">
-        <h2 className={classNames("settings-dialog__header-text", "accent-color__value-violet")}>Feedback</h2>
+        <h2 className="settings-dialog__header-text">Feedback</h2>
       </div>
       {feedbackEnabled && (
         <form className="settings-dialog__feedback-form" onSubmit={onSubmitFeedback}>

src/components/SettingsDialog/Feedback/__tests__/__snapshots__/Feedback.test.tsx.snap

@@ -2,13 +2,13 @@
 
 exports[`Feedback should match snapshot 1`] = `
 <div
-  class="settings-dialog__container accent-color__value-violet"
+  class="settings-dialog__container accent-color__backlog-blue"
 >
   <div
     class="settings-dialog__header"
   >
     <h2
-      class="settings-dialog__header-text accent-color__value-violet"
+      class="settings-dialog__header-text"
     >
       Feedback
     </h2>

src/components/SettingsDialog/Participants/Participants.tsx

@@ -2,6 +2,9 @@ import {Join, Kick, Search, Wifi, MarkAsDone} from "components/Icon";
 import classNames from "classnames";
 import {UserAvatar} from "components/BoardUsers";
 import {ConfirmationDialog} from "components/ConfirmationDialog";
+import {useOutletContext} from "react-router";
+import {MenuItemConfig} from "constants/settings";
+import {getColorClassName} from "constants/colors";
 import {useEffect, useRef, useState} from "react";
 import {useTranslation} from "react-i18next";
 import {useDispatch} from "react-redux";
@@ -15,6 +18,9 @@ import "./Participants.scss";
 export const Participants = () => {
   const {t} = useTranslation();
   const dispatch = useDispatch();
+
+  const activeMenuItem: MenuItemConfig = useOutletContext();
+
   const [queryString, setQueryString] = useState<string>("");
   const debouncedQueryString = useDebounce(queryString);
   const [permissionFilter, setPermissionFilter] = useState<"ALL" | "OWNER" | "MODERATOR" | "PARTICIPANT">("ALL");
@@ -60,7 +66,7 @@ export const Participants = () => {
   };
 
   return (
-    <section className="settings-dialog__container accent-color__value-violet">
+    <section className={classNames("settings-dialog__container", getColorClassName(activeMenuItem?.color))}>
       <header className="settings-dialog__header">
         <h2 className="settings-dialog__header-text">{t("Participants.Title")}</h2>
       </header>

src/components/SettingsDialog/Participants/__tests__/__snapshots__/Participants.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Participants should render filter and participants correctly 1`] = `
 <section
-  class="settings-dialog__container accent-color__value-violet"
+  class="settings-dialog__container accent-color__backlog-blue"
 >
   <header
     class="settings-dialog__header"

src/components/SettingsDialog/ProfileSettings/ProfileSettings.tsx

@@ -3,19 +3,24 @@ import {useTranslation} from "react-i18next";
 import {useState} from "react";
 import store, {useAppSelector} from "store";
 import {Actions} from "store/action";
-import "./ProfileSettings.scss";
 import {useDispatch} from "react-redux";
 import {Info} from "components/Icon";
 import {Toggle} from "components/Toggle";
 import {isEqual} from "underscore";
+import {useOutletContext} from "react-router";
+import {MenuItemConfig} from "constants/settings";
+import {getColorClassName} from "constants/colors";
 import {AvatarSettings} from "../Components/AvatarSettings";
 import {SettingsInput} from "../Components/SettingsInput";
 import {SettingsButton} from "../Components/SettingsButton";
+import "./ProfileSettings.scss";
 
 export const ProfileSettings = () => {
   const {t} = useTranslation();
   const dispatch = useDispatch();
 
+  const activeMenuItem: MenuItemConfig = useOutletContext();
+
   const state = useAppSelector(
     (applicationState) => ({
       participant: applicationState.participants!.self,
@@ -28,7 +33,7 @@ export const ProfileSettings = () => {
   const [id] = useState<string | undefined>(state.participant?.user.id);
 
   return (
-    <div className={classNames("settings-dialog__container", "accent-color__lean-lilac")}>
+    <div className={classNames("settings-dialog__container", getColorClassName(activeMenuItem?.color))}>
       <header className="settings-dialog__header">
         <h2 className="settings-dialog__header-text">{t("ProfileSettings.Profile")}</h2>
       </header>

src/components/SettingsDialog/SettingsDialog.scss

@@ -102,12 +102,6 @@ $settings-dialog-container--bottom: 62px;
   height: 40px;
   margin: $spacing--xl;
 }
-[theme="light"] .settings-dialog__scrumlr-logo--dark {
-  display: none;
-}
-[theme="dark"] .settings-dialog__scrumlr-logo--light {
-  display: none;
-}
 
 .settings-dialog__navigation {
   display: flex;