rename variables

@@ -18,7 +18,7 @@ const Wrapper = styled.div`
   padding: 0.5rem 0.7rem 0 1rem;
   padding: 0.5rem 0.7rem 0 1rem;
 `;
 `;
 
 
-const ChannelContainer = styled.div`
+const RoomContainer = styled.div`
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   width: 100%;
   width: 100%;
@@ -42,7 +42,7 @@ const ChannelContainer = styled.div`
   }
   }
 `;
 `;
 
 
-const ChannelList = styled.ul`
+const RoomList = styled.ul`
   width: 100%;
   width: 100%;
   display: flex;
   display: flex;
   flex-direction: row;
   flex-direction: row;
@@ -53,7 +53,7 @@ const ChannelList = styled.ul`
   }
   }
 `;
 `;
 
 
-const ChannelItem = styled.li`
+const RoomItem = styled.li`
   font-family: "Ubuntu", sans-serif;
   font-family: "Ubuntu", sans-serif;
 `;
 `;
 
 
@@ -95,17 +95,17 @@ export default () => {
   return (
   return (
     <Router>
     <Router>
       <Wrapper>
       <Wrapper>
-        <ChannelContainer>
-          <ChannelList>
+        <RoomContainer>
+          <RoomList>
             <StyledLink to="/">
             <StyledLink to="/">
-              <ChannelItem>First Channel</ChannelItem>
+              <RoomItem>First Room</RoomItem>
               <FontAwesomeIcon icon={faArrowRight} />
               <FontAwesomeIcon icon={faArrowRight} />
             </StyledLink>
             </StyledLink>
-          </ChannelList>
-        </ChannelContainer>
+          </RoomList>
+        </RoomContainer>
         <CreateContainer>
         <CreateContainer>
           <StyledLink to="/">
           <StyledLink to="/">
-            <span>Create New Channel</span>
+            <span>Create New Room</span>
           </StyledLink>
           </StyledLink>
         </CreateContainer>
         </CreateContainer>
       </Wrapper>
       </Wrapper>