Feat/inline svg

.eslintrc.cjs

@@ -15,7 +15,7 @@ module.exports = {
     "plugin:react-hooks/recommended",
     "plugin:prettier/recommended",
   ],
-  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  ignorePatterns: ["dist", ".eslintrc.cjs", "vite.config.ts"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     sourceType: "module",
@@ -47,5 +47,6 @@ module.exports = {
       "warn",
       { allowConstantExport: true },
     ],
+    "no-console": "off",
   },
 };

package.json

@@ -47,6 +47,7 @@
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
     "typescript": "5.4.5",
-    "vite": "^5.2.10"
+    "vite": "^5.2.10",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }

src/assets/icons/icon.tsx

@@ -1,27 +1,18 @@
-import styled from "@emotion/styled";
-import MicMute from "./mic_off.svg";
-import MicUnmute from "./mic_on.svg";
-import Arrow from "./arrow_back.svg";
-import RemoveSvg from "./clear.svg";
-import VolumeOn from "./volume_on.svg";
-import VolumeOff from "./volume_off.svg";
+import MicMute from "./mic_off.svg?react";
+import MicUnmute from "./mic_on.svg?react";
+import Arrow from "./arrow_back.svg?react";
+import RemoveSvg from "./clear.svg?react";
+import VolumeOn from "./volume_on.svg?react";
+import VolumeOff from "./volume_off.svg?react";
 
-const Icon = styled.img`
-  width: 100%;
-  height: auto;
-  display: block;
-`;
+export const MicMuted = () => <MicMute />;
 
-export const MicMuted = () => <Icon src={MicMute} alt="off-microphone" />;
+export const MicUnmuted = () => <MicUnmute />;
 
-export const MicUnmuted = () => <Icon src={MicUnmute} alt="on-microphone" />;
+export const BackArrow = () => <Arrow />;
 
-export const BackArrow = () => <Icon src={Arrow} alt="arrow-left" />;
+export const RemoveIcon = () => <RemoveSvg />;
 
-export const RemoveIcon = () => <Icon src={RemoveSvg} alt="cross" />;
+export const SpeakerOff = () => <VolumeOff />;
 
-export const SpeakerOff = () => (
-  <Icon src={VolumeOff} alt="speaker-crossed-over" />
-);
-
-export const SpeakerOn = () => <Icon src={VolumeOn} alt="speaker" />;
+export const SpeakerOn = () => <VolumeOn />;

src/components/landing-page/create-production.tsx

@@ -16,6 +16,7 @@ import { API } from "../../api/api.ts";
 import { useGlobalState } from "../../global-state/context-provider.tsx";
 import { Spinner } from "../loader/loader.tsx";
 import { RemoveIcon } from "../../assets/icons/icon.tsx";
+import { FlexContainer } from "../generic-components.ts";
 
 type FormValues = {
   productionName: string;
@@ -42,7 +43,10 @@ const ListItemWrapper = styled.div`
 `;
 
 const ButtonWrapper = styled.div`
-  margin: 2rem 0 2rem 0;
+  margin: 0 1rem 1rem 0;
+  :last-of-type {
+    margin: 0 0 1rem;
+  }
 `;
 
 const ProductionConfirmation = styled.div`
@@ -175,21 +179,23 @@ export const CreateProduction = () => {
           />
         </div>
       ))}
-      <ButtonWrapper>
-        <SecondaryButton type="button" onClick={() => append({ name: "" })}>
-          Add Line
-        </SecondaryButton>
-      </ButtonWrapper>
-      <ButtonWrapper>
-        <PrimaryButton
-          type="submit"
-          className={loading ? "with-loader" : ""}
-          onClick={handleSubmit(onSubmit)}
-        >
-          Create Production
-          {loading && <Spinner className="create-production" />}
-        </PrimaryButton>
-      </ButtonWrapper>
+      <FlexContainer>
+        <ButtonWrapper>
+          <SecondaryButton type="button" onClick={() => append({ name: "" })}>
+            Add Line
+          </SecondaryButton>
+        </ButtonWrapper>
+        <ButtonWrapper>
+          <PrimaryButton
+            type="submit"
+            className={loading ? "with-loader" : ""}
+            onClick={handleSubmit(onSubmit)}
+          >
+            Create Production
+            {loading && <Spinner className="create-production" />}
+          </PrimaryButton>
+        </ButtonWrapper>
+      </FlexContainer>
       {createdProductionId !== null && (
         <ProductionConfirmation>
           The production ID is: {createdProductionId.toString()}

src/components/landing-page/form-elements.tsx

@@ -2,14 +2,18 @@ import styled from "@emotion/styled";
 
 export const FormContainer = styled.form``;
 
+const sharedMargin = `margin: 0 0 2rem`;
+
 export const FormInput = styled.input`
   width: 100%;
   font-size: 1.6rem;
   padding: 0.5rem;
-  margin: 0 0 1rem;
-  border: 1px solid #6f6e6e;
+  margin: 0 0 2rem;
+  border: 0.1rem solid #6f6e6e;
   border-radius: 0.5rem;
 
+  ${sharedMargin};
+
   &.additional-line {
     padding-right: 3.5rem;
   }
@@ -37,7 +41,8 @@ export const FormSelect = styled.select`
   width: 100%;
   font-size: 1.6rem;
   padding: 0.5rem;
-  margin: 0 0 1rem;
+  ${sharedMargin};
+
   border: 1px solid #6f6e6e;
   border-radius: 0.5rem;
 `;
@@ -63,7 +68,7 @@ export const StyledWarningMessage = styled.div`
   background: #ebca6a;
   border-radius: 0.5rem;
   color: #1a1a1a;
-  margin: 0 0 1rem;
+  ${sharedMargin};
   border: 1px solid #ebca6a;
   display: flex;
   align-items: center;
@@ -124,11 +129,10 @@ export const PrimaryButton = styled(ActionButton)`
   }
 
   &:not(:disabled):hover {
-    transform: scale(1.05);
   }
 
   &:not(:disabled):hover:active {
-    transform: scale(1.05) translateY(0.125rem);
+    transform: translateY(0.125rem);
   }
 
   &:focus {

src/components/landing-page/join-production.tsx

@@ -25,7 +25,8 @@ const FetchErrorMessage = styled.div`
   background: ${errorColour};
   color: ${darkText};
   padding: 0.5rem;
-  margin: 1rem 0;
+  margin: 0 0 2rem;
+  border-radius: 0.5rem;
 `;
 
 const ButtonWrapper = styled.div`

src/components/production-line/long-press-to-talk-button.tsx

@@ -9,6 +9,7 @@ type TLongPressToTalkButton = {
 
 const Button = styled(PrimaryButton)`
   position: relative;
+  width: 100%;
 
   &.active-btn {
     color: rgba(255, 255, 255, 0);

src/components/production-line/production-line.tsx

@@ -5,7 +5,7 @@ import { useGlobalState } from "../../global-state/context-provider.tsx";
 import { useAudioInput } from "./use-audio-input.ts";
 import { useRtcConnection } from "./use-rtc-connection.ts";
 import { useEstablishSession } from "./use-establish-session.ts";
-import { PrimaryButton } from "../landing-page/form-elements.tsx";
+import { SecondaryButton } from "../landing-page/form-elements.tsx";
 import { UserList } from "./user-list.tsx";
 import {
   MicMuted,
@@ -43,20 +43,27 @@ const SmallText = styled.span`
 `;
 
 const ButtonIcon = styled.div`
-  width: 2.5rem;
+  width: 3rem;
   display: inline-block;
   vertical-align: middle;
-  margin: 0 0.5rem 0 0;
+  margin: 0 auto;
 `;
 
-const UserControlBtn = styled(PrimaryButton)`
-  line-height: 2;
-  min-width: 12rem;
-  text-align: left;
+const FlexButtonWrapper = styled.div`
+  width: 50%;
+  padding: 0 2rem 2rem 0;
+
+  :last-of-type {
+    padding: 0 0 2rem 0;
+  }
+`;
+
+const UserControlBtn = styled(SecondaryButton)`
+  width: 100%;
 `;
 
 const LongPressWrapper = styled.div`
-  margin: 2rem 0 2rem 0;
+  margin: 0 0 2rem 0;
 `;
 
 const ButtonWrapper = styled.span`
@@ -200,32 +207,36 @@ export const ProductionLine: FC = () => {
           <DisplayContainer>
             <div>
               <DisplayContainerHeader>Controls</DisplayContainerHeader>
-              <TempDiv>
-                <UserControlBtn type="button" onClick={() => muteOutput()}>
-                  <ButtonIcon>
-                    {isOutputMuted ? <SpeakerOff /> : <SpeakerOn />}
-                  </ButtonIcon>
-                  {isOutputMuted ? "Muted" : "Unmuted"}
-                </UserControlBtn>
-              </TempDiv>
 
-              {inputAudioStream && inputAudioStream !== "no-device" && (
-                <TempDiv>
-                  <UserControlBtn
-                    type="button"
-                    onClick={() => muteInput(!isInputMuted)}
-                  >
+              <FlexContainer>
+                <FlexButtonWrapper>
+                  <UserControlBtn type="button" onClick={() => muteOutput()}>
                     <ButtonIcon>
-                      {isInputMuted ? <MicMuted /> : <MicUnmuted />}
+                      {isOutputMuted ? <SpeakerOff /> : <SpeakerOn />}
                     </ButtonIcon>
-                    {isInputMuted ? "Muted" : "Unmuted"}
                   </UserControlBtn>
-                  <LongPressWrapper>
-                    <LongPressToTalkButton
-                      setMicMute={(input: boolean) => setIsInputMuted(input)}
-                    />
-                  </LongPressWrapper>
-                </TempDiv>
+                </FlexButtonWrapper>
+
+                {inputAudioStream && inputAudioStream !== "no-device" && (
+                  <FlexButtonWrapper>
+                    <UserControlBtn
+                      type="button"
+                      onClick={() => muteInput(!isInputMuted)}
+                    >
+                      <ButtonIcon>
+                        {isInputMuted ? <MicMuted /> : <MicUnmuted />}
+                      </ButtonIcon>
+                    </UserControlBtn>
+                  </FlexButtonWrapper>
+                )}
+              </FlexContainer>
+
+              {inputAudioStream && inputAudioStream !== "no-device" && (
+                <LongPressWrapper>
+                  <LongPressToTalkButton
+                    setMicMute={(input: boolean) => setIsInputMuted(input)}
+                  />
+                </LongPressWrapper>
               )}
 
               {deviceLabels?.inputLabel && (

src/index.css

@@ -172,10 +172,12 @@ body {
 }
 
 /* image size contstrained to container size */
-img {
+img,
+svg {
   /* max-width: 100%; */
   width: 100%;
   height: auto;
+  display: block;
 }
 
 #root {

src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

vite.config.ts

@@ -1,7 +1,8 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
+import svgr from "vite-plugin-svgr";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), svgr()],
 });