Skip to content
This repository was archived by the owner on Oct 30, 2025. It is now read-only.

Commit 8208219

Browse files
dhruvjain99RonLek
dhruvjain99
authored and
RonLek
committed
[IMPROVEMENT] Home Layout for signed users
1 parent 9799b68 commit 8208219

6 files changed

Lines changed: 191 additions & 63 deletions

File tree

‎client/public/community.jpg‎

1.87 MB
Loading

‎client/public/community.png‎

29 KB
Loading

‎client/public/search-icon.png‎

32.5 KB
Loading

‎client/src/components/Home/index.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,3 +87,49 @@
8787
text-align: center;
8888
}
8989

90+
.search-icon-explore-desc {
91+
vertical-align: bottom;
92+
}
93+
94+
.community-home-img {
95+
margin: 10px;
96+
width: 500px;
97+
}
98+
99+
.signed-home-main {
100+
display: flex;
101+
flex-direction: row;
102+
justify-content: space-between;
103+
}
104+
105+
.signed-home-header {
106+
margin-bottom: 40px;
107+
}
108+
109+
.signed-home-header p {
110+
font-size: 0.87em;
111+
line-height: 27px;
112+
color: #252525;
113+
}
114+
115+
.signed-home-shortcut-container {
116+
margin-bottom: 30px;
117+
}
118+
119+
.signed-home-shortcut {
120+
padding: 14px;
121+
border-radius: 5px;
122+
font-size: 0.87em;
123+
cursor: pointer;
124+
display: flex;
125+
}
126+
127+
.signed-home-shortcut:hover {
128+
background-color: #e3e9fe66;
129+
}
130+
131+
.signed-home-shortcut-icon {
132+
width: 1.5em;
133+
height: 1.5em;
134+
margin-right: 5px;
135+
}

‎client/src/components/Home/index.js‎

Lines changed: 144 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,154 @@
1-
import {Button} from '@material-ui/core';
1+
import { Button } from "@material-ui/core";
22
import Countup from "./../common/Countup";
33

44
import "./index.css";
55

66
export default function Home(props) {
7-
const { users, rooms, onlineUsers, totalMessages } = props.stats;
8-
if(!props.authState.isLoggedIn){
9-
return (
10-
<div className="home-wrapper">
11-
<header>
12-
<h1>
13-
Real-time Collaboration
14-
<br />
15-
<a href="http://github.com/RocketChat/RC4Community" rel="noreferrer" target="_blank" className="powered-by-title">
16-
<strong>Powered by RCforCommunities</strong>
17-
</a>
18-
</h1>
7+
const { users, rooms, onlineUsers, totalMessages } = props.stats;
198

20-
<p>
21-
<strong>Monitor</strong> your <strong>workflows</strong>,
22-
<strong>collaborate</strong> and <strong>access data</strong> any
23-
time you need it, all in one{" "}
24-
<strong>productivity-amplifying</strong> full-lifecycle platform
25-
</p>
26-
</header>
27-
<div className="rocket-logo"></div>
28-
<main>
29-
<div className="main-stats-container">
30-
<div className="stat-container">
31-
<img
32-
src="https://img.icons8.com/plasticine/80/000000/organization.png"
33-
alt="rooms"
34-
/>
35-
<Countup end={rooms} className="stat-number" />
36-
<div className="stat-label">Rooms</div>
37-
</div>
38-
<div className="stat-container">
39-
<img
40-
src="https://img.icons8.com/color/80/000000/circled-user-male-skin-type-7--v2.png"
41-
alt="users"
42-
/>
43-
<Countup end={users} className="stat-number" />
44-
<div className="stat-label">Users</div>
45-
</div>
46-
<div className="stat-container">
47-
<img
48-
src="https://img.icons8.com/color/80/000000/filled-chat.png"
49-
alt="messages"
50-
/>
51-
<Countup end={totalMessages} className="stat-number" />
52-
<div className="stat-label">Messages Exchanged</div>
53-
</div>
54-
<div className="stat-container">
55-
<img
56-
src="https://img.icons8.com/color/80/000000/online--v1.png"
57-
alt="online-users"
58-
/>
59-
<Countup end={onlineUsers} className="stat-number" />
60-
<div className="stat-label">Online Users</div>
61-
</div>
9+
const getGreetings = () => {
10+
let d = new Date();
11+
let time = d.getHours();
12+
13+
if (time < 12) {
14+
return "Good morning";
15+
}
16+
if (time <= 17) {
17+
return "Good afternoon";
18+
}
19+
return "Good evening";
20+
};
21+
22+
if (!props.authState.isLoggedIn) {
23+
return (
24+
<div className="home-wrapper">
25+
<header>
26+
<h1>
27+
Real-time Collaboration
28+
<br />
29+
<a
30+
href="http://github.com/RocketChat/RC4Community"
31+
rel="noreferrer"
32+
target="_blank"
33+
className="powered-by-title"
34+
>
35+
<strong>Powered by RCforCommunities</strong>
36+
</a>
37+
</h1>
38+
39+
<p>
40+
<strong>Monitor</strong> your <strong>workflows</strong>,
41+
<strong>collaborate</strong> and <strong>access data</strong> any
42+
time you need it, all in one{" "}
43+
<strong>productivity-amplifying</strong> full-lifecycle platform
44+
</p>
45+
</header>
46+
<div className="rocket-logo"></div>
47+
<main>
48+
<div className="main-stats-container">
49+
<div className="stat-container">
50+
<img
51+
src="https://img.icons8.com/plasticine/80/000000/organization.png"
52+
alt="rooms"
53+
/>
54+
<Countup end={rooms} className="stat-number" />
55+
<div className="stat-label">Rooms</div>
56+
</div>
57+
<div className="stat-container">
58+
<img
59+
src="https://img.icons8.com/color/80/000000/circled-user-male-skin-type-7--v2.png"
60+
alt="users"
61+
/>
62+
<Countup end={users} className="stat-number" />
63+
<div className="stat-label">Users</div>
6264
</div>
63-
<div className="button-container">
64-
<Button variant="contained" color="primary" href="/login">
65-
JOIN NOW TO EXPLORE MORE
66-
</Button>
65+
<div className="stat-container">
66+
<img
67+
src="https://img.icons8.com/color/80/000000/filled-chat.png"
68+
alt="messages"
69+
/>
70+
<Countup end={totalMessages} className="stat-number" />
71+
<div className="stat-label">Messages Exchanged</div>
6772
</div>
68-
</main>
73+
<div className="stat-container">
74+
<img
75+
src="https://img.icons8.com/color/80/000000/online--v1.png"
76+
alt="online-users"
77+
/>
78+
<Countup end={onlineUsers} className="stat-number" />
79+
<div className="stat-label">Online Users</div>
80+
</div>
81+
</div>
82+
<div className="button-container">
83+
<Button variant="contained" color="primary" href="/login">
84+
JOIN NOW TO EXPLORE MORE
85+
</Button>
86+
</div>
87+
</main>
88+
</div>
89+
);
90+
}
91+
return (
92+
<div className="home-wrapper">
93+
<header class="signed-home-header">
94+
<h3>
95+
{getGreetings()}, {props.authState.user.name}
96+
</h3>
97+
<p>
98+
To help you get started real quick, we have already created a
99+
community for you.&nbsp; Now create channels for your repositories
100+
within{" "}
101+
<strong>{props.authState.user.username.split("_github")}</strong>{" "}
102+
community.
103+
<br></br>
104+
To add channels for a new GitHub organization, start by creating a
105+
community for it.
106+
</p>
107+
</header>
108+
<div class="signed-home-main">
109+
<div>
110+
<div class="signed-home-shortcut-container">
111+
<h5>Start something new</h5>
112+
<div
113+
className="signed-home-shortcut"
114+
onClick={() => {
115+
document.getElementById("create-community").click();
116+
}}
117+
>
118+
<img src="/community.png" className="signed-home-shortcut-icon" />
119+
Create a community
120+
</div>
121+
<div
122+
className="signed-home-shortcut"
123+
onClick={() => {
124+
document.getElementById("create-channel").click();
125+
}}
126+
>
127+
<img
128+
src="https://img.icons8.com/plasticine/35/000000/organization.png"
129+
className="signed-home-shortcut-icon"
130+
/>
131+
Create a channel
132+
</div>
133+
</div>
134+
<div className="signed-home-shortcut-container">
135+
<h5>Explore more</h5>
136+
<div
137+
className="signed-home-shortcut"
138+
onClick={() => {
139+
document.getElementById("search").click();
140+
}}
141+
>
142+
<img
143+
src="/search-icon.png"
144+
className="signed-home-shortcut-icon"
145+
/>
146+
Discover existing rooms
147+
</div>
148+
</div>
69149
</div>
70-
);
71-
}
72-
return <div></div>
150+
<img src="/community.jpg" className="community-home-img"></img>
151+
</div>
152+
</div>
153+
);
73154
}

‎client/src/components/SignedLeftSidebar/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -259,6 +259,7 @@ export default function SignedLeftSidebar(props) {
259259
<div
260260
className="left-sidebar-control-icons"
261261
onClick={toggleShowSearch}
262+
id="search"
262263
>
263264
<RiSearchLine />
264265
</div>

0 commit comments

Comments
 (0)