Fixed minimal microphone UI visual bug and updated the ChangeLog.md

ChangeLog.md

@@ -1,7 +1,10 @@
 # Changelog:
 * **11.08.20**
     - Fixed the voice push to talk delay
-    /* FIXME: Newcomer modal with the microphone */
+    - Improved the microphone setting controller
+    - Heavily reworked the input recorder API
+    - Improved denied audio permission handling
+    
 * **09.08.20**
     - Added a "watch to gather" context menu entry for clients
     - Disassembled the current client icon sprite into his icons

shared/js/ui/modal/settings/Heighlight.tsx

@@ -4,10 +4,10 @@ import {useContext} from "react";
 const cssStyle = require("./Heighlight.scss");
 
 const HighlightContext = React.createContext<string>(undefined);
-export const HighlightContainer = (props: { children: React.ReactNode | React.ReactNode[], highlightedId?: string, onClick?: () => void }) => {
+export const HighlightContainer = (props: { children: React.ReactNode | React.ReactNode[], classList?: string, highlightedId?: string, onClick?: () => void }) => {
     return (
         <HighlightContext.Provider value={props.highlightedId}>
-            <div className={cssStyle.container + " " + (props.highlightedId ? cssStyle.shown : "")} onClick={props.highlightedId ? props.onClick : undefined}>
+            <div className={cssStyle.container + " " + (props.highlightedId ? cssStyle.shown : "") + " " + props.classList} onClick={props.highlightedId ? props.onClick : undefined}>
                 {props.children}
                 <div className={cssStyle.background} />
             </div>

shared/js/ui/modal/settings/Microphone.scss

@@ -1,6 +1,11 @@
 @import "../../../../css/static/properties";
 @import "../../../../css/static/mixin";
 
+.highlightContainer {
+    height: 100%;
+    width: 100%;
+}
+
 .container {
     display: flex;
     flex-direction: row;

shared/js/ui/modal/settings/MicrophoneRenderer.tsx

@@ -573,7 +573,7 @@ export const MicrophoneSettings = (props: { events: Registry<MicrophoneSettingsE
     props.events.reactUse("notify_highlight", event => setHighlighted(event.field));
 
     return (
-        <HighlightContainer highlightedId={highlighted} onClick={() => props.events.fire("action_help_click")}>
+        <HighlightContainer highlightedId={highlighted} onClick={() => props.events.fire("action_help_click")} classList={cssStyle.highlightContainer}>
             <div className={cssStyle.container}>
                 <HelpText0/>
                 <HighlightRegion className={cssStyle.left} highlightId={"hs-1"}>