Added styling

co-authored-by: nthouliss <nthouliss@gmail.com>

src/components/AddMapButton.js

@@ -0,0 +1,38 @@
+import React, { useRef } from "react";
+import { IconButton } from "theme-ui";
+
+function AddMapButton({ handleMapChange }) {
+  const fileInputRef = useRef();
+
+  function handleIconClicked() {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }
+
+  return (
+    <>
+      <input
+        onChange={handleMapChange}
+        type="file"
+        accept="image/*"
+        style={{ display: "none" }}
+        ref={fileInputRef}
+      />
+      <IconButton aria-label="Add Map" onClick={handleIconClicked}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+          fill="white"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path d="M21.02 5H19V2.98c0-.54-.44-.98-.98-.98h-.03c-.55 0-.99.44-.99.98V5h-2.01c-.54 0-.98.44-.99.98v.03c0 .55.44.99.99.99H17v2.01c0 .54.44.99.99.98h.03c.54 0 .98-.44.98-.98V7h2.02c.54 0 .98-.44.98-.98v-.04c0-.54-.44-.98-.98-.98zM16 9.01V8h-1.01c-.53 0-1.03-.21-1.41-.58-.37-.38-.58-.88-.58-1.44 0-.36.1-.69.27-.98H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8.28c-.3.17-.64.28-1.02.28-1.09-.01-1.98-.9-1.98-1.99zM15.96 19H6c-.41 0-.65-.47-.4-.8l1.98-2.63c.21-.28.62-.26.82.02L10 18l2.61-3.48c.2-.26.59-.27.79-.01l2.95 3.68c.26.33.03.81-.39.81z" />
+        </svg>
+      </IconButton>
+    </>
+  );
+}
+
+export default AddMapButton;

src/components/Map.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { Image, Flex } from "theme-ui";
+
+function Map({ imageSource }) {
+  return (
+    <Flex sx={{ justifyContent: "center", flexGrow: 1 }} bg="background">
+      <Image src={imageSource} sx={{ objectFit: "contain" }} />
+    </Flex>
+  );
+}
+
+export default Map;

src/components/Party.js

@@ -6,9 +6,13 @@ import PartyVideo from "./PartyVideo";
 
 function Party({ streams, localStreamId }) {
   return (
-    <Flex p={4} bg="highlight" sx={{ flexDirection: "column", width: "200px" }}>
+    <Flex
+      p={3}
+      bg="background"
+      sx={{ flexDirection: "column", width: "192px", minWidth: "192px" }}
+    >
       {Object.entries(streams).map(([id, stream]) => (
-        <PartyVideo key={id} stream={stream} muted={id === localStreamId}/>
+        <PartyVideo key={id} stream={stream} muted={id === localStreamId} />
       ))}
     </Flex>
   );

src/components/PartyVideo.js

@@ -9,7 +9,14 @@ function PartyVideo({ stream, muted }) {
     }
   }, [stream]);
 
-  return <video ref={videoRef} autoPlay muted={muted} />;
+  return (
+    <video
+      ref={videoRef}
+      autoPlay
+      muted={muted}
+      style={{ width: "100%", borderRadius: "4px" }}
+    />
+  );
 }
 
 export default PartyVideo;

src/components/Tokens.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { Box } from "theme-ui";
+
+function Tokens() {
+  return <Box bg="background" sx={{ width: "128px", minWidth: "128px" }} />;
+}
+
+export default Tokens;