add state, update form styling

@@ -19,8 +19,18 @@ const Wrapper = styled.div`
   }
 `;
 
+const HideWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  background-color: #535c68;
+  opacity: 0.6;
+`;
+
 const FormContainer = styled.div`
-  visibility: hidden;
   display: flex;
   position: fixed;
   background-color: #f5f6fa;
@@ -143,10 +153,12 @@ const StyledLink = styled(Link)`
   }
 `;
 
-export default ({ roomArray, action }) => {
+export default ({ roomArray, action, setAction }) => {
   return (
     <Wrapper>
       <Header text={"KhuChat"}></Header>
+      {action === "showList" ? (
+        <>
           <RoomWrapper>
             <RoomContainer>
               <RoomUL>
@@ -160,11 +172,14 @@ export default ({ roomArray, action }) => {
               </RoomUL>
             </RoomContainer>
             <CreateContainer>
-          <StyledLink to="/">
+              <StyledLink to="/" onClick={() => setAction("makeList")}>
                 <span>Create New Room</span>
               </StyledLink>
             </CreateContainer>
           </RoomWrapper>
+        </>
+      ) : (
+        <HideWrapper className="hideWrapper">
           <FormContainer>
             <Form>
               <FormText>Room Name</FormText>
@@ -172,6 +187,8 @@ export default ({ roomArray, action }) => {
               <Button text="Submit" />
             </Form>
           </FormContainer>
+        </HideWrapper>
+      )}
     </Wrapper>
   );
 };