Skip to content

Commit 9d20a82

Browse files
aadityarajkumawataadityarajkumawat
committed
fixed trending item styled and added dark theme
1 parent 34ac3e4 commit 9d20a82

File tree

9 files changed

+99
-46
lines changed

9 files changed

+99
-46
lines changed

‎client/src/Routes.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React, { Fragment } from "react";
2-
import Register from "./components/auth/Register";
3-
import Login from "./components/auth/Login";
4-
import PrivateRoute from "./routes/PrivateRoute";
52
import { Route } from "react-router-dom";
6-
import Home from "./components/pages/Home";
7-
import Post from "./components/layout components/Post/Post";
3+
import Login from "./components/auth/Login";
4+
import Register from "./components/auth/Register";
85
import PostEditor from "./components/layout components/editor/PostEditor";
6+
import Post from "./components/layout components/Post/Post";
97
import Dashboard from "./components/pages/Dashboard";
8+
import Home from "./components/pages/Home";
109
import SavedPost from "./components/pages/SavedPosts/SavedPost";
1110
import UserProfile from "./components/pages/user-profile/UserProfile";
11+
import PrivateRoute from "./routes/PrivateRoute";
1212

1313
const Routes = () => {
1414
return (

‎client/src/components/layout components/General posts/PopularPosts.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ const PopularPosts = ({ fetchPopularPosts }) => {
1515
flexDirection={"column"}
1616
px={isLargerThan500 ? "100px" : "50px"}
1717
mt={isLargerThan500 ? "3rem" : ""}
18-
ml="30px"
1918
>
2019
<Heading as="h1">Popular Posts</Heading>
2120
</Flex>

‎client/src/components/layout components/Trending/TrendingItem/TrendingItem.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,17 +97,20 @@ const TrendingItem = ({
9797
return (
9898
<Flex
9999
flexDirection="column"
100-
mx="30px"
100+
mr="30px"
101101
cursor="pointer"
102102
rounded="md"
103103
border="2px solid #a6a6a690"
104+
w="100%"
105+
maxWidth="300px"
104106
>
105107
<Flex onClick={post !== undefined ? openPost : null}>
106108
<Image
107109
src={post && post.image}
108110
fallbackSrc="https://i.ibb.co/RBT25fY/default-fallback-image.png"
109-
w="300px"
111+
w="100%"
110112
h="170px"
113+
objectFit="cover"
111114
alt="post"
112115
borderTopLeftRadius="5px"
113116
borderTopRightRadius="5px"

‎client/src/components/pages/DashboardHome.js‎

Lines changed: 66 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,80 @@
1+
import * as S from "@chakra-ui/react";
12
import { Box, Flex, Text } from "@chakra-ui/react";
23
import React from "react";
4+
import { Link } from "react-router-dom";
5+
import Logo from "../../assets/favicon.svg";
36
import DashboardSideBar from "./DashboardSideBar";
47
import Profile from "./profile/Profile";
58
import UserPost from "./user-post/UserPost";
69

710
const DashboardHome = ({ routing, user }) => {
811
return (
9-
<Flex flexDir="column" pt="2rem" px="6rem" w="100vw">
10-
<Flex justifyContent="flex-start" alignItems="center">
11-
{user.params.name === "user" && (
12+
<Flex justifyContent="center" w="100vw">
13+
<Flex w="calc(50vw - 350px)" h="100vh" justifyContent="flex-end">
14+
<Flex flexDir="column" w="15rem" pt="1rem">
15+
<S.Flex justifyContent="flex-start" alignItems="center">
16+
<Link to="/">
17+
<div>
18+
<S.Image src={Logo} alt="devhelp" />
19+
</div>
20+
</Link>
21+
<S.Text ml="1rem">Devhelp</S.Text>
22+
</S.Flex>
23+
<S.Flex flexDirection="column" pt="5">
24+
<S.Box mb="1rem" fontSize="20">
25+
<Link to="/dashboard/home">Home</Link>
26+
</S.Box>
27+
<S.Box mb="1rem" fontSize="20">
28+
<Link to="/dashboard/saved">Saved Posts</Link>
29+
</S.Box>
30+
<S.Box mb="1rem" fontSize="20">
31+
<Link to="!#">Posts</Link>
32+
</S.Box>
33+
<S.Box mb="1rem" fontSize="20">
34+
<Link to="!#">Stats</Link>
35+
</S.Box>
36+
<S.Box mb="1rem" fontSize="20">
37+
<Link to="!#">Plans</Link>
38+
</S.Box>
39+
<S.Box mb="1rem" fontSize="20">
40+
<Link to="!#">Help</Link>
41+
</S.Box>
42+
<S.Box mb="1rem" fontSize="20">
43+
<Link to="/">Logout</Link>
44+
</S.Box>
45+
</S.Flex>
46+
</Flex>
47+
</Flex>
48+
<Flex
49+
borderX="1px solid #a6a6a680"
50+
px="0rem"
51+
h="100vh"
52+
flexDir="column"
53+
w="700px"
54+
pt="1rem"
55+
>
56+
<Flex
57+
justifyContent="flex-start"
58+
alignItems="center"
59+
borderBottom="1px solid #a6a6a680"
60+
>
61+
{user.params.name === "user" && (
62+
<Box>
63+
<DashboardSideBar />
64+
</Box>
65+
)}
1266
<Box>
13-
<DashboardSideBar />
67+
<Text ml="1rem" fontSize="25px" fontWeight="600" mb="1rem">
68+
{user.params.name === "user"
69+
? "Dashboard"
70+
: `${user.params.name}'s Profile`}
71+
</Text>
1472
</Box>
15-
)}
16-
<Box>
17-
<Text fontSize="25px" fontWeight="600">
18-
{user.params.name === "user"
19-
? "Dashboard"
20-
: `${user.params.name}'s Profile`}
21-
</Text>
22-
</Box>
73+
</Flex>
74+
<Profile user={user.params} />
75+
<UserPost routing={routing} />
2376
</Flex>
24-
<Profile user={user.params} />
25-
<UserPost routing={routing} />
77+
<Flex w="calc(50vw - 350px)" h="100vh"></Flex>
2678
</Flex>
2779
);
2880
};

‎client/src/components/pages/DashboardSideBar.js‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
1-
import React, { Fragment } from "react";
21
import * as S from "@chakra-ui/react";
3-
import { Link } from "react-router-dom";
4-
import { logout } from "../../actions/authAction";
2+
import React, { Fragment } from "react";
53
import { connect } from "react-redux";
6-
import Logo from "../../assets/favicon.svg";
7-
import { toggleSlideMenu } from "../../actions/slideMenu";
4+
import { Link } from "react-router-dom";
85
import { cleanAdminPrivilages } from "../../actions/adminPrivilagesAction";
6+
import { logout } from "../../actions/authAction";
97
import { cleanGetPostAction } from "../../actions/getPostAction";
108
import { cleanProfile } from "../../actions/profileAction";
11-
import { MdMenu } from "react-icons/md";
9+
import { toggleSlideMenu } from "../../actions/slideMenu";
10+
import Logo from "../../assets/favicon.svg";
1211

1312
const DashboardSideBar = ({}) => {
1413
const { isOpen, onOpen, onClose } = S.useDisclosure();
1514

1615
return (
1716
<Fragment>
18-
<S.Box onClick={onOpen} mr="4">
17+
{/* <S.Box onClick={onOpen} mr="4">
1918
<S.Icon as={MdMenu} fontSize="3xl" />
20-
</S.Box>
19+
</S.Box> */}
2120
<S.Drawer placement={"left"} onClose={onClose} isOpen={isOpen}>
2221
<S.DrawerOverlay>
2322
<S.DrawerContent>

‎client/src/components/pages/profile/Profile.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const Profile = ({
6666

6767
return (
6868
<React.Fragment>
69-
<S.Flex py="2rem">
69+
<S.Flex py="2rem" px="1rem" borderBottom="1px solid #a6a6a680">
7070
<S.Flex>
7171
<S.Image
7272
objectFit="cover"

‎client/src/components/pages/user-post/UserPost.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1+
import { Flex, Grid, Heading } from "@chakra-ui/react";
12
import React, { Fragment, useEffect, useState } from "react";
23
import { connect } from "react-redux";
3-
import TrendingItem from "../../layout components/Trending/TrendingItem/TrendingItem";
4-
import { getUserPosts } from "../../../actions/getPostAction";
54
import { getAdminPrivilages } from "../../../actions/adminPrivilagesAction";
6-
import { Flex, Heading } from "@chakra-ui/react";
5+
import { getUserPosts } from "../../../actions/getPostAction";
6+
import TrendingItem from "../../layout components/Trending/TrendingItem/TrendingItem";
77

88
const UserPost = ({
99
post,
@@ -41,11 +41,11 @@ const UserPost = ({
4141
return true;
4242
};
4343
return (
44-
<Flex flexDir="column">
44+
<Flex flexDir="column" px="1rem">
4545
<Heading as="h2" fontSize="23" mb="1rem" mt="2rem">
4646
Your Recent Posts
4747
</Heading>
48-
<Flex>
48+
<Grid templateColumns="repeat(2, 1fr)" gap={6}>
4949
{posts.length > 0 ? (
5050
posts.map((post) => (
5151
<TrendingItem
@@ -65,7 +65,7 @@ const UserPost = ({
6565
) : (
6666
<div>No Posts</div>
6767
)}
68-
</Flex>
68+
</Grid>
6969
</Flex>
7070
);
7171
};

‎config/default.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"mongoURI": "mongodb+srv://aaditya:[email protected]/<dbname>?retryWrites=true&w=majority",
3-
"jwt": "secret",
4-
"cloudinaryApiKey": "349325875226191",
5-
"cloudinaryApiSecret": "vFF7WZWOqo7G3Ohu45faGrUHNSE",
6-
"cloudName": "devhelp"
7-
}
2+
"mongoURI": "mongodb+srv://aaditya:[email protected]/<dbname>?retryWrites=true&w=majority",
3+
"jwt": "secret",
4+
"cloudinaryApiKey": "349325875226191",
5+
"cloudinaryApiSecret": "vFF7WZWOqo7G3Ohu45faGrUHNSE",
6+
"cloudName": "devhelp"
7+
}

‎config/production.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"mongoURI": "mongodb+srv://aaditya:[email protected]/<dbname>?retryWrites=true&w=majority",
3-
"jwt": "secret"
4-
}
2+
"mongoURI": "mongodb+srv://aaditya:[email protected]/<dbname>?retryWrites=true&w=majority",
3+
"jwt": "secret"
4+
}

0 commit comments

Comments
 (0)