Added simple stream sharing

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()}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="10"
+              viewBox="0 0 24 24"
+              width="10"
+              fill="currentcolor"
+            >
+              <path d="M3.24 6.15C2.51 6.43 2 7.17 2 8v12c0 1.1.9 2 2 2h16c1.11 0 2-.9 2-2V8c0-1.1-.9-2-2-2H8.3l7.43-3c.46-.19.68-.71.49-1.17-.19-.46-.71-.68-1.17-.49L3.24 6.15zM7 20c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-8h-2v-1c0-.55-.45-1-1-1s-1 .45-1 1v1H4V9c0-.55.45-1 1-1h14c.55 0 1 .45 1 1v3z" />
+            </svg>
+          </IconButton>
+        )}
+        {allowChanging && (
+          <IconButton
+            sx={{
+              width: "10px",
+              height: "10px",
+              padding: 0,
+              margin: "2px",
+              position: "absolute",
+              bottom: "-2px",
+              transform: "translateX(12px)",
+            }}
             aria-label="Change Nickname"
+            onClick={() => allowChanging && openModal()}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -93,6 +111,7 @@ function Nickname({ nickname, allowChanging, onChange }) {
 Nickname.defaultProps = {
   allowChanging: false,
   onChange: () => {},
+  onStream: () => {},
 };
 
 export default Nickname;