diff --git a/src/components/Nickname.js b/src/components/Nickname.js
index 369c253..d96bfeb 100644
--- a/src/components/Nickname.js
+++ b/src/components/Nickname.js
@@ -3,7 +3,7 @@ import { Text, Box, Input, Button, Label, IconButton, Flex } from "theme-ui";
import Modal from "./Modal";
-function Nickname({ nickname, allowChanging, onChange }) {
+function Nickname({ nickname, allowChanging, onChange, onStream }) {
const [isChangeModalOpen, setIsChangeModalOpen] = useState(false);
function openModal() {
setIsChangeModalOpen(true);
@@ -32,16 +32,8 @@ function Nickname({ nickname, allowChanging, onChange }) {
variant="caption"
sx={{
fontSize: 10,
- cursor: allowChanging ? "pointer" : "default",
- ":hover": allowChanging && {
- color: "primary",
- },
- ":active": allowChanging && {
- color: "secondary",
- },
position: "relative",
}}
- onClick={() => allowChanging && openModal()}
>
{nickname}
{allowChanging && (
@@ -54,7 +46,33 @@ function Nickname({ nickname, allowChanging, onChange }) {
position: "absolute",
bottom: "-2px",
}}
+ aria-label="Start Radio Stream"
+ onClick={() => allowChanging && onStream()}
+ >
+
+
+ )}
+ {allowChanging && (
+ allowChanging && openModal()}
>