From 4c7c3e2cd3c0997bc6ff29b20a37816a2b950341 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Wed, 10 Nov 2021 17:03:32 -0800
Subject: [PATCH] Fix layout button styling
---
src/Header.module.css | 12 ++++++++++--
src/RoomButton.jsx | 10 +++++-----
src/RoomButton.module.css | 12 +-----------
src/icons/Freedom.svg | 6 ++++++
src/icons/Grid.svg | 11 -----------
src/icons/{Speaker.svg => Spotlight.svg} | 0
6 files changed, 22 insertions(+), 29 deletions(-)
create mode 100644 src/icons/Freedom.svg
delete mode 100644 src/icons/Grid.svg
rename src/icons/{Speaker.svg => Spotlight.svg} (100%)
diff --git a/src/Header.module.css b/src/Header.module.css
index 00697fd..511064e 100644
--- a/src/Header.module.css
+++ b/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;
}
-}
\ No newline at end of file
+}
diff --git a/src/RoomButton.jsx b/src/RoomButton.jsx
index 5c80132..fc7b44b 100644
--- a/src/RoomButton.jsx
+++ b/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>
);
diff --git a/src/RoomButton.module.css b/src/RoomButton.module.css
index ed38c28..95471aa 100644
--- a/src/RoomButton.module.css
+++ b/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 * {
diff --git a/src/icons/Freedom.svg b/src/icons/Freedom.svg
new file mode 100644
index 0000000..ea4d372
--- /dev/null
+++ b/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>
diff --git a/src/icons/Grid.svg b/src/icons/Grid.svg
deleted file mode 100644
index ea605f0..0000000
--- a/src/icons/Grid.svg
+++ /dev/null
@@ -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>
diff --git a/src/icons/Speaker.svg b/src/icons/Spotlight.svg
similarity index 100%
rename from src/icons/Speaker.svg
rename to src/icons/Spotlight.svg