Skip to content

Commit c8dba47

Browse files
nisabmohdnisabmohd
committed
notification ui fixed
1 parent 883672a commit c8dba47

File tree

14 files changed

+36
-26
lines changed

14 files changed

+36
-26
lines changed

‎README.md‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -55,15 +55,8 @@ $ npm start
5555
* Your server application should run on port 8000, so in your browser just go to [http://localhost:8000](http://localhost:3000)
5656

5757
## Overview
58-
59-
#### Home Page
58+
<img src="./images/4.png">
6059
<img src="./images/10.png">
6160
<img src="./images/9.png">
62-
<!--
63-
#### New Post
64-
<img src="./images/11.png">
65-
<img src="./images/12.png"> -->
66-
67-
#### Blog Page
6861
<img src="./images/2.png">
6962
<img src="./images/1.png">

‎client/src/Pages/Login.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useContext, useState } from 'react'
22
import { Link, useNavigate } from 'react-router-dom'
3-
import loginimg from '../assets/login.png'
3+
import loginimg from '../assets/code.png'
44
import '../css/login.css'
55
import { AppContext } from '../App'
66
import toast, { Toaster } from 'react-hot-toast';

‎client/src/Pages/Notifications.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const Notifications = () => {
3535
not.length===0 && <Box style={{ width: '100%', display: 'flex', alignContent: 'center', marginTop: '10px' }}><h4 style={{ margin: 'auto' }} >Nothing to see here</h4></Box>
3636
}
3737
</div>
38-
<div className="container-right">
38+
<div className="container-right notification-page-resp">
3939
{<UserCard uid={context.auth.uid} />}
4040
</div>
4141
</div>

‎client/src/Pages/Signup.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useContext, useState } from 'react'
22
import { Link, useNavigate } from 'react-router-dom'
3-
import loginimg from '../assets/blog.png'
3+
import loginimg from '../assets/hand.png'
44
import '../css/login.css'
55
import { AppContext } from '../App'
66
import toast, { Toaster } from 'react-hot-toast';

‎client/src/assets/code.png‎

52.4 KB
Loading

‎client/src/assets/hand.png‎

42 KB
Loading

‎client/src/components/Navbar.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,11 @@ export const Navbar = () => {
7979
<IconButton className='smicons' onClick={() => context.handledark()} sx={{ margin: '0 5px' }}>{context.dark ? <WbSunnyOutlinedIcon /> : <NightlightOutlinedIcon />}</IconButton>
8080
{/* <IconButton sx={{ margin: '0 15px' }}><BookmarkBorderIcon /></IconButton> */}
8181
{
82-
context.hasNotification ? <Badge onClick={() => navigate('/notifications')} className='smicons' sx={{ margin: '0 5px' }} variant="dot" color="error" overlap="circular" >
83-
<IconButton sx={{ marginTop: '0px' }}><NotificationsNoneIcon /></IconButton>
84-
</Badge> : <Badge onClick={() => navigate('/notifications')} className='smicons' sx={{ margin: '0 5px' }} color="error" overlap="circular" >
85-
<IconButton sx={{ marginTop: '0px' }}><NotificationsNoneIcon /></IconButton>
86-
</Badge>
82+
context.hasNotification ?<IconButton onClick={() => navigate('/notifications')} style={{borderRadius:'50%',width:'40px'}}><Badge className='smicons' sx={{ margin: '0 5px' }} variant="dot" color="error" overlap="circular" >
83+
<NotificationsNoneIcon />
84+
</Badge> </IconButton> : <IconButton onClick={() => navigate('/notifications')} style={{borderRadius:'50%',width:'40px'}} ><Badge className='smicons' sx={{ margin: '0 5px' }} color="error" overlap="circular" >
85+
<NotificationsNoneIcon />
86+
</Badge></IconButton>
8787
}
8888
<Menu
8989
id="basic-menu"

‎client/src/components/Notify.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,20 +34,20 @@ export const Notify = (props) => {
3434
<div className={`card cardnotify`} style={{ width: '95%', padding: '8px 0px', margin: '8px 0', borderBottom: context.dark ? '1px solid rgb(39 39 39)' : '1px solid rgb(238 238 238)', paddingBottom: '10px' }}>
3535
<div className="header">
3636
<div className="textheader">
37-
<div className='post-usercard' style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
37+
<div className='not-usercard' style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
3838
<Link to={`/user/${user && user.uid}`}>
39-
<img style={{ width: '36px', borderRadius: '50%', marginRight: '12px' }} src={user && user.img} alt="" />
39+
<img className='notiimg' style={{ width: '36px', borderRadius: '50%', marginRight: '12px' }} src={user && user.img} alt="" />
4040
</Link>
4141
<div className="detailsposts" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
4242
<div className="firstbox" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
4343
<Link to={`/user/${user && user.uid}`} style={{ color: 'inherit', textDecoration: 'none',zIndex:'99' }}>
44-
<p style={{ margin: '0', marginRight: '5px', fontSize: '14.5px',marginTop:'-2.5px' }}>{user && user.username}</p>
44+
<p className='notiHp' style={{ margin: '0', marginRight: '5px', fontSize: '14.5px',marginTop:'-2.5px' }}>{user && user.username}</p>
4545
</Link>
4646
<Link to={`/post/${props.postid}`} style={{ color: 'inherit', textDecoration: 'none' }}>
47-
<p style={{ fontSize: '13.65px', color: 'rgb(161, 148, 148)'}}>{content}</p>
47+
<p className='notiP' style={{ fontSize: '13.65px', color: 'rgb(161, 148, 148)'}}>{content}</p>
4848
</Link>
4949
</div>
50-
<p style={{ fontSize: '11px', color: 'rgb(161, 148, 148)', margin: '0', marginTop: '4px' }}><ReactTimeAgo date={Date.parse(props.date)} locale="en-US"/></p>
50+
<p className='notiP' style={{ fontSize: '11px', color: 'rgb(161, 148, 148)', margin: '0', marginTop: '4px' }}><ReactTimeAgo date={Date.parse(props.date)} locale="en-US"/></p>
5151
</div>
5252
</div>
5353
</div>
@@ -59,20 +59,20 @@ export const Notify = (props) => {
5959
<div className={`card cardnotify`} style={{ width: '95%', padding: '8px 0px', margin: '8px 0', borderBottom: context.dark ? '1px solid rgb(39 39 39)' : '1px solid rgb(238 238 238)', paddingBottom: '10px' }}>
6060
<div className="header">
6161
<div className="textheader">
62-
<div className='post-usercard' style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
62+
<div className='not-usercard' style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
6363
<Link to={`/user/${user && user.uid}`}>
64-
<img style={{ width: '36px', borderRadius: '50%', marginRight: '12px' }} src={user && user.img} alt="" />
64+
<img className='notiimg' style={{ width: '36px', borderRadius: '50%', marginRight: '12px' }} src={user && user.img} alt="" />
6565
</Link>
6666
<div className="detailsposts" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
6767
<div className="firstbox" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
6868
<Link to={`/user/${user && user.uid}`} style={{ color: 'inherit', textDecoration: 'none',zIndex:'99' }}>
69-
<p style={{ margin: '0', marginRight: '5px', fontSize: '14.5px',marginTop:'-2.5px' }}>{user && user.username}</p>
69+
<p className='notiHp' style={{ margin: '0', marginRight: '5px', fontSize: '14.5px',marginTop:'-2.5px' }}>{user && user.username}</p>
7070
</Link>
7171
<Link to={`/user/${user && user.uid}`} style={{ color: 'inherit', textDecoration: 'none' }}>
72-
<p style={{ fontSize: '13.65px', color: 'rgb(161, 148, 148)'}}>{content}</p>
72+
<p className='notiP' style={{ fontSize: '13.65px', color: 'rgb(161, 148, 148)'}}>{content}</p>
7373
</Link>
7474
</div>
75-
<p style={{ fontSize: '11px', color: 'rgb(161, 148, 148)', margin: '0', marginTop: '4px' }}><ReactTimeAgo date={Date.parse(props.date)} locale="en-US"/></p>
75+
<p className='notiP' style={{ fontSize: '11px', color: 'rgb(161, 148, 148)', margin: '0', marginTop: '4px' }}><ReactTimeAgo date={Date.parse(props.date)} locale="en-US"/></p>
7676
</div>
7777
</div>
7878
</div>

‎client/src/index.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,4 +206,21 @@ body {
206206
margin-left: 1vw;
207207
margin-top: 12px !important;
208208
}
209+
/* .not-usercard{
210+
flex-direction: column !important;
211+
align-items: flex-start !important;
212+
} */
213+
.notiHp{
214+
font-size: 12px !important;
215+
}
216+
.notiP{
217+
font-size: 10.85px !important;
218+
}
219+
.notiimg{
220+
width: 30px !important;
221+
}
222+
223+
.notification-page-resp{
224+
display: none !important;
225+
}
209226
}

‎images/1.png‎

140 KB
Loading

0 commit comments

Comments
 (0)