💄 Add minor cosmetic fixes 💄

bijay007 · May 2, 2021 · 5329e5c · 5329e5c
1 parent c390f18
commit 5329e5c
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 33 deletions.
diff --git a/src/App.js b/src/App.js
@@ -8,14 +8,13 @@ import styled from 'styled-components';
 import { BrowserRouter } from "react-router-dom";
 import Subscription from 'components/Subscription/Subscription';
 import Home from 'components/Home/Home';
-import background from 'assests/dark_background.jpg';
+import background from 'assests/app-background.jpg';
 
 const Main = styled.main`
   display: flex;
   justify-content: center;
   height: 100%;
-  background: url(${background}) no-repeat center center fixed;
-  background-size: cover;
+  background: url(${background});
 `
 
 const App = () => {

diff --git a/src/assests/app-background.jpg b/src/assests/app-background.jpg
diff --git a/src/assests/dark_background.jpg b/src/assests/dark_background.jpg
diff --git a/src/components/Auth/UserRegister.js b/src/components/Auth/UserRegister.js
@@ -16,6 +16,13 @@ const Wrapper = styled.div`
     0% { transform: scale(0.9, 0.8); }
     100% { transform: scale(1); }
   }
+  fieldset {
+    padding: 0.5rem 1.8rem;
+    border: none;
+    label {
+      paddingRight: 0.5rem;
+    }
+  }
 `
 const Title = styled.h2`
   margin: 0.5rem auto;
@@ -26,12 +33,6 @@ const Title = styled.h2`
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 `
-const Block = styled.div({
-  padding: '0.5rem 1.8rem',
-})
-const Label = styled.label({
-  paddingRight: '8px'
-})
 const Input = styled.input({
   marginTop: '4px',
   padding: '5px',
@@ -99,26 +100,26 @@ const UserRegister = (props) => {
       <div className='auth-form-wrapper'>
         <form className='auth-form' onSubmit={e => createUser(e)}>
           <Title>Sign up</Title>
-          <Block>
-            <Label htmlFor='name'>Name</Label>
+          <fieldset>
+            <label htmlFor='name'>Name</label>
             <Input value={userName}
               id='name'
               placeholder={props.name}
               onChange={e => setUserName(e.target.value)} />
-          </Block>
-          <Block>
-            <Label htmlFor='email'>Email</Label>
+          </fieldset>
+          <fieldset>
+            <label htmlFor='email'>Email</label>
             <Input value={email}
               id='email'
               onChange={e => setUserEmail(e.target.value)} />
-          </Block>
-          <Block>
-            <Label htmlFor='password'>Password</Label>
+          </fieldset>
+          <fieldset>
+            <label htmlFor='password'>Password</label>
             <Input value={password}
               type='password'
               id='password'
               onChange={e => setUserPassword(e.target.value)} />
-          </Block>
+          </fieldset>
           <RegisterBtn type='submit'>Register</RegisterBtn>
           <div className='errorMsg'>{errorMsg}</div>
         </form>

diff --git a/src/components/ChatRoom/Chat.js b/src/components/ChatRoom/Chat.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const ChatBlock = styled.div`
+const ChatBlock = styled.article`
   display: flex;
   flex-direction: column;
   padding-bottom: 0.5rem;
@@ -18,7 +18,7 @@ const User = styled.div`
     font-weight: bold;
     font-size: 1.1rem;
   }
-  .time {
+  time {
     padding-left: 0.5rem;
     color: grey;
     font-size: 0.9rem;
@@ -30,8 +30,8 @@ const Chat = props => {
   return (
     <ChatBlock>
       <User>
-        <div className={'title'}>{senderName}</div>
-        <div className={'time'}>{created}</div>
+        <caption className={'title'}>{senderName}</caption>
+        <time>{created}</time>
       </User>
       <p>{message}</p>
     </ChatBlock>

diff --git a/src/components/ChatRoom/PublicChatList.js b/src/components/ChatRoom/PublicChatList.js
@@ -10,8 +10,9 @@ import AddChat from 'components/ChatRoom/AddChat';
 const Wrapper = styled.section`
   display: flex;
   flex-direction: column;
+  align-self: flex-start;
   padding: 1.2rem;
-  width: 90%;
+  width: 70%;
 `
 
 const PublicChatList = (props) => {

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -26,6 +26,7 @@ const Title = styled.div`
     flex-direction: column;
   }
 `
+
 const Header = () => (
   <Wrapper>
     <Link to='/'>

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -6,12 +6,10 @@ import UserLogin from '../Auth/UserLogin';
 import UserRegister from '../Auth/UserRegister';
 import PublicChatList from '../ChatRoom/PublicChatList';
 
-const Home = props => {
-  const { pathname } = props.location;
-  const bodyWidth = pathname === '/chat' ? '80vw' : '100%';
+const Home = () => {
   const Wrapper = styled.section`
     padding: 2rem;
-    width: ${bodyWidth};
+    width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;

diff --git a/src/data/queries.js b/src/data/queries.js
@@ -1,25 +1,25 @@
 import gql from 'graphql-tag';
 
 const PublicChatFragment = gql`
-	fragment PublicChat on PublicChat {
-		id
+  fragment PublicChat on PublicChat {
+    id
     senderId
     senderName
     message
     created
-	}
+  }
 `
 
 const PrivateChatFragment = gql`
-	fragment PrivateChat on PrivateChat {
-		id
+  fragment PrivateChat on PrivateChat {
+    id
     senderId
     senderName
     receiverId
     receiverName
     message
     created
-	}
+  }
 `
 
 const UserFragment = gql`