Fix layout button styling

src/Header.module.css

@@ -27,6 +27,14 @@
   display: flex;
 }
 
+.rightNav > * {
+  margin-right: 24px;
+}
+
+.rightNav > :last-child {
+  margin-right: 0;
+}
+
 .userName {
   font-weight: 600;
   margin-right: 8px;
@@ -44,8 +52,8 @@
   flex-shrink: 0;
 }
 
-@media(min-width: 800px) {
+@media (min-width: 800px) {
   .header {
     height: 98px;
   }
-}
+}

src/RoomButton.jsx

@@ -7,8 +7,8 @@ import { ReactComponent as VideoIcon } from "./icons/Video.svg";
 import { ReactComponent as DisableVideoIcon } from "./icons/DisableVideo.svg";
 import { ReactComponent as HangupIcon } from "./icons/Hangup.svg";
 import { ReactComponent as SettingsIcon } from "./icons/Settings.svg";
-import { ReactComponent as GridIcon } from "./icons/Grid.svg";
-import { ReactComponent as SpeakerIcon } from "./icons/Speaker.svg";
+import { ReactComponent as FreedomIcon } from "./icons/Freedom.svg";
+import { ReactComponent as SpotlightIcon } from "./icons/Spotlight.svg";
 import { ReactComponent as ScreenshareIcon } from "./icons/Screenshare.svg";
 import { ReactComponent as ChevronIcon } from "./icons/Chevron.svg";
 
@@ -127,7 +127,7 @@ export function HeaderButton({ on, className, children, ...rest }) {
 export function SettingsButton(props) {
   return (
     <HeaderButton {...props}>
-      <SettingsIcon />
+      <SettingsIcon width={20} height={20} />
     </HeaderButton>
   );
 }
@@ -136,9 +136,9 @@ export function LayoutToggleButton({ layout, ...rest }) {
   return (
     <HeaderButton {...rest}>
       {layout === "spotlight" ? (
-        <SpeakerIcon width={20} height={20} />
+        <SpotlightIcon width={24} height={24} />
       ) : (
-        <GridIcon width={20} height={20} />
+        <FreedomIcon width={24} height={24} />
       )}
     </HeaderButton>
   );

src/RoomButton.module.css

@@ -44,22 +44,12 @@ limitations under the License.
   background-color: #ffffff;
 }
 
-.headerButton {
-  width: 32px;
-  height: 32px;
-  border-radius: 32px;
-}
-
 .headerButton svg * {
   fill: #8e99a4;
 }
 
-.headerButton:hover {
-  background-color: #8d97a5;
-}
-
 .headerButton:hover svg * {
-  fill: #394049;
+  fill: #8d97a5;
 }
 
 .headerButton.on svg * {

src/icons/Freedom.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="13" y="11" width="5" height="5" rx="1.16667" fill="white"/>
+<rect x="13" y="5" width="5" height="5" rx="1.16667" fill="white"/>
+<rect x="7" y="5" width="5" height="5" rx="1.16667" fill="white"/>
+<rect x="4" y="11" width="8" height="8" rx="1.14286" fill="white"/>
+</svg>

src/icons/Grid.svg

@@ -1,11 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1" y="9" width="6" height="6" rx="1" fill="white"/>
-<rect x="9" y="9" width="6" height="6" rx="1" fill="white"/>
-<rect x="17" y="9" width="6" height="6" rx="1" fill="white"/>
-<rect x="1" y="17" width="6" height="6" rx="1" fill="white"/>
-<rect x="9" y="17" width="6" height="6" rx="1" fill="white"/>
-<rect x="17" y="17" width="6" height="6" rx="1" fill="white"/>
-<rect x="1" y="1" width="6" height="6" rx="1" fill="white"/>
-<rect x="9" y="1" width="6" height="6" rx="1" fill="white"/>
-<rect x="17" y="1" width="6" height="6" rx="1" fill="white"/>
-</svg>