Build v1.1.0

Author: Ajay-056

components/Chat.js

@@ -45,6 +45,8 @@ const Container = styled.div`
   cursor: pointer;
   padding: 1.5rem;
   word-break: break-word;
+  font-size: 1.35rem;
+  color: #495057;
 
   :hover {
     background-color: #e9eaeb;

components/ChatScreen.js

@@ -114,10 +114,10 @@ function ChatScreen({ chat, messages }) {
         </HeaderInfo>
         <HeaderIcons>
           <IconButton>
-            <AttachFileIcon />
+            <AttachFileIcon style={{ fontSize: 25 }} />
           </IconButton>
           <IconButton>
-            <MoreVertIcon />
+            <MoreVertIcon style={{ fontSize: 25 }} />
           </IconButton>
         </HeaderIcons>
       </Header>
@@ -128,22 +128,29 @@ function ChatScreen({ chat, messages }) {
       </MessageContainer>
 
       <InputContainer>
-        <InsertEmoticonIcon />
-        <Input value={input} onChange={(e) => setInput(e.target.value)} />
+        <IconButton>
+          <InsertEmoticonIcon style={{ fontSize: 25 }} />
+        </IconButton>
+        <Input
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="Type a message..."
+          autoFocus
+        />
         <button hidden disabled={!input} type="submit" onClick={sendMessage}>
           Send Message
         </button>
-        <MicIcon />
+        <IconButton>
+          <MicIcon style={{ fontSize: 25 }} />
+        </IconButton>
       </InputContainer>
     </Container>
   );
 }
 
 export default ChatScreen;
 
-const Container = styled.div`
-  /* overflow: none; */
-`;
+const Container = styled.div``;
 
 const Header = styled.div`
   position: sticky;
@@ -152,7 +159,7 @@ const Header = styled.div`
   top: 0;
   display: flex;
   padding: 1.1rem;
-  height: 8rem;
+  height: 7rem;
   align-items: center;
   border-bottom: 1px solid whitesmoke;
 `;
@@ -163,10 +170,12 @@ const HeaderInfo = styled.div`
 
   > h3 {
     margin-bottom: 0.3rem;
+    color: #495057;
+    font-size: 1.35rem;
   }
 
   > p {
-    font-size: 1.4rem;
+    font-size: 1.2rem;
     color: gray;
   }
 `;
@@ -197,9 +206,10 @@ const Input = styled.input`
   flex: 1;
   border: none;
   outline: none;
-  border-radius: 1rem;
+  border-radius: 3rem;
   align-items: center;
-  padding: 2rem;
+  padding: 1.3rem;
+  font-size: 1.55rem;
   margin-left: 1.5rem;
   margin-right: 1.5rem;
   background-color: whitesmoke;

components/Message.js

@@ -15,7 +15,7 @@ function Message({ user, message }) {
         <TimeStamp>
           {message.timestamp ? moment(message.timestamp).format('LT') : '...'}
         </TimeStamp>
-      </TypeOfMessage> 
+      </TypeOfMessage>
     </Container>
   );
 }
@@ -33,6 +33,8 @@ const MessageElement = styled.p`
   padding-bottom: 2.6rem;
   position: relative;
   text-align: right;
+  font-size: 1.3rem;
+  word-break: break-all;
 `;
 
 const Sender = styled(MessageElement)`

components/Sidebar.js

@@ -1,4 +1,4 @@
-import { Avatar, Button, IconButton } from '@material-ui/core';
+import { Avatar, IconButton } from '@material-ui/core';
 import styled from 'styled-components';
 import ChatIcon from '@material-ui/icons/Chat';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
@@ -8,6 +8,7 @@ import { useAuthState } from 'react-firebase-hooks/auth';
 import { useCollection } from 'react-firebase-hooks/firestore';
 import { auth, db } from '../firebase';
 import Chat from './Chat';
+import AddCircleRoundedIcon from '@material-ui/icons/AddCircleRounded';
 
 function Sidebar() {
   const [user] = useAuthState(auth);
@@ -46,20 +47,28 @@ function Sidebar() {
 
         <IconsContainer>
           <IconButton>
-            <ChatIcon />
+            <ChatIcon style={{ fontSize: 22 }} />
           </IconButton>
           <IconButton>
-            <MoreVertIcon />
+            <MoreVertIcon style={{ fontSize: 22 }} />
           </IconButton>
         </IconsContainer>
       </Header>
 
       <Search>
-        <SearchIcon />
-        <SearchInput placeholder="Search in chats" />
+        <SearchIcon style={{ fontSize: 22, marginRight: '1rem' }} />
+        <SearchInput placeholder="Search for chats..." />
+        {/* or Add Chat (s) by Gmail */}
       </Search>
 
-      <SidebarButton onClick={createChat}>Start a new chat</SidebarButton>
+      <SidebarButton>
+        {/* <IconButton> */}
+        <AddCircleRoundedIcon
+          style={{ fontSize: 58, color: '#25D366' }}
+          onClick={createChat}
+        />
+        {/* </IconButton> */}
+      </SidebarButton>
 
       {/* List of Chats */}
       {chatsSnapshot?.docs.map((chat) => (
@@ -78,6 +87,7 @@ const Container = styled.div`
   min-width: 30rem;
   max-width: 35rem;
   overflow-y: scroll;
+  position: relative;
 
   ::-webkit-scrollbar {
     display: none;
@@ -94,18 +104,28 @@ const Search = styled.div`
   border-radius: 0.2rem;
 `;
 
-const SidebarButton = styled(Button)`
-  width: 100%;
-  &&& {
-    border-top: 1px solid whitesmoke;
-    border-bottom: 1px solid whitesmoke;
-  }
+const SidebarButton = styled.button`
+  position: absolute;
+  bottom: 1.85rem;
+  right: 2rem;
+  border-radius: 50%;
+  width: 3rem;
+  height: 3rem;
+  border: none;
+  outline: none;
+  padding: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 100;
 `;
 
 const SearchInput = styled.input`
   outline: none;
   border: none;
   flex: 1;
+  font-size: 1.5rem;
 `;
 
 const Header = styled.div`
@@ -117,7 +137,7 @@ const Header = styled.div`
   justify-content: space-between;
   align-items: center;
   padding: 1.5rem;
-  height: 8rem;
+  height: 7rem;
   border-bottom: 1px solid whitesmoke;
 `;
 

pages/Loading.js

@@ -1,5 +1,3 @@
-// import Image from 'next/image';
-// import React from 'react';
 import Image from 'next/image';
 import { Circle } from 'better-react-spinkit';
 import profilePic from '../public/580b57fcd9996e24bc43c543.png';

pages/Login.js

@@ -1,7 +1,9 @@
 import { Button } from '@material-ui/core';
 import Head from 'next/head';
+import Image from 'next/image';
 import styled from 'styled-components';
 import { auth, provider } from '../firebase';
+import googleIcon from '../public/icons8-google.svg';
 
 function Login() {
   const signIn = () => {
@@ -17,7 +19,8 @@ function Login() {
       <LoginContainer>
         <Logo src="https://assets.stickpng.com/images/580b57fcd9996e24bc43c543.png" />
         <Button onClick={signIn} variant="outlined">
-          SignIn with Google
+          <Image src={googleIcon} alt="Google Icon" width={25} height={25} />
+          <ButtonText>SignIn with Google</ButtonText>
         </Button>
       </LoginContainer>
     </Container>
@@ -43,6 +46,12 @@ const LoginContainer = styled.div`
   box-shadow: 0px 4px 14px -3px rgba(0, 0, 0, 0.7);
 `;
 
+const ButtonText = styled.span`
+  margin-left: 1rem;
+  font-size: 1.2rem;
+  font-family: 'Inter', sans-serif;
+`;
+
 const Logo = styled.img`
   height: 20rem;
   width: 20rem;

pages/chat/[id].js

@@ -5,10 +5,20 @@ import Sidebar from '../../components/Sidebar';
 import { useAuthState } from 'react-firebase-hooks/auth';
 import { auth, db } from '../../firebase';
 import getRecipientEmail from '../../utils/getRecipientEmail';
+import { useRef } from 'react';
 
 function Chat({ chat, messages }) {
   const [user] = useAuthState(auth);
 
+  const endOfMessagesRef = useRef(null);
+
+  const scrollToBottom = () => {
+    endOfMessagesRef.current.scrollIntoView({
+      behaviour: 'smooth',
+      block: 'start',
+    });
+  };
+
   return (
     <Container>
       <Head>
@@ -20,8 +30,9 @@ function Chat({ chat, messages }) {
         </title>
       </Head>
       <Sidebar />
-      <ChatContainer>
+      <ChatContainer onLoad={scrollToBottom}>
         <ChatScreen chat={chat} messages={messages} />
+        <EndOfMessage ref={endOfMessagesRef} />
       </ChatContainer>
     </Container>
   );
@@ -68,7 +79,8 @@ const Container = styled.div`
 
 const ChatContainer = styled.div`
   flex: 1;
-  overflow: scroll;
+  overflow-y: scroll;
+  overflow-x: hidden;
   height: 100vh;
 
   ::-webkit-srollbar {
@@ -78,3 +90,5 @@ const ChatContainer = styled.div`
   -ms-overflow-style: none;
   scrollbar-width: none;
 `;
+
+const EndOfMessage = styled.div``;

public/icons8-google.svg

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
+
 * {
   margin: 0;
   padding: 0;
@@ -15,6 +17,10 @@ html {
   font-size: 62.5%;
 }
 
+body {
+  font-family: 'Inter', sans-serif;
+}
+
 a {
   color: inherit;
   text-decoration: none;