Merge pull request #3 from SpoopyTim/fix/compose-context

Fix/compose context

Author: SpoopyTim

docker-compose.yml

@@ -20,7 +20,7 @@ services:
     #Uncomment below to build locally
 #    image: lightspeed-react
 #    build:
-#      context: ./react
+#      context: ./frontend
 #      dockerfile: Dockerfile
     env_file: '.env'
     restart: on-failure

frontend/public/index.html

@@ -7,7 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Web site created using create-react-app" />
-  <script src="https://kit.fontawesome.com/99754263de.js" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.js"></script>
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

frontend/src/assets/constants.js

@@ -1,2 +1,3 @@
 export const LightspeedLogoURL = "/images/lightspeedlogo.svg";
 export const VideoPosterURL = "/images/videoPoster.jpg";
+export const CenterIcon = { display: "block", textAlign: "left", paddingTop: "10px" }

frontend/src/components/LiveChat.jsx

@@ -16,7 +16,7 @@ const LiveChat = () => {
         </ChatHeading>
 
         <ChatBody>
-          <i className="fas fa-construction fa-3x"></i>
+          <i className="fas fa-wrench fa-3x"></i>
           <h4>Coming Soon!</h4>
         </ChatBody>
       </ChatMain>

frontend/src/components/VideoDetails.jsx

@@ -9,18 +9,18 @@ import {
   AlphaTag,
   ViewerTag,
 } from "../styles/videoDetailsStyles";
-import { LightspeedLogoURL } from "../assets/constants";
+import { LightspeedLogoURL, CenterIcon } from "../assets/constants";
 
 const VideoDetails = ({ viewers }) => {
   return (
     <VideoDetailsContainer>
       <DetailsTop>
         <AlphaTag>
-          <i className="fas fa-construction badge-icon"></i>
+        <i className="fas fa-wrench" style={CenterIcon}></i>
           <span>Alpha</span>
         </AlphaTag>
         <ViewerTag>
-          <i className="fas fa-user-friends"></i>
+          <i className="fas fa-user-friends" style={CenterIcon}></i>
           <span>{viewers}</span>
         </ViewerTag>
       </DetailsTop>