Skip to content

Commit e26fa86

Browse files
aayushgupta05aayushgupta05
committed
Tag Search Page + Maintenance Mode functionality
1 parent 6f47780 commit e26fa86

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1276
-337
lines changed

‎src/assets/images/maintenance.svg‎

Lines changed: 114 additions & 0 deletions
Loading

‎src/assets/stylesheets/App.scss‎

Lines changed: 91 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ body {
1515
}
1616

1717
.container-mid {
18-
max-width: 90%;;
18+
max-width: 98%;
19+
padding: 0;
1920
}
2021

2122
.center-row {
@@ -25,7 +26,7 @@ body {
2526
text-align: center;
2627
}
2728

28-
@media (max-width: 1200px) and (min-width: 992px) {
29+
@media (max-width: 1199px) and (min-width: 992px) {
2930
html {
3031
font-size: 17px;
3132
}
@@ -35,7 +36,7 @@ body {
3536
}
3637
}
3738

38-
@media (max-width: 992px) and (min-width: 768px) {
39+
@media (max-width: 991px) and (min-width: 768px) {
3940
html {
4041
font-size: 17px;
4142
}
@@ -45,7 +46,7 @@ body {
4546
}
4647
}
4748

48-
@media (max-width: 768px) and (min-width: 576px) {
49+
@media (max-width: 767px) and (min-width: 575px) {
4950
html {
5051
font-size: 16px;
5152
}
@@ -71,10 +72,10 @@ body {
7172

7273
//headings
7374
.main-heading {
74-
font-family: 'Playfair Display', serif;
75-
font-size: 2.6rem;
76-
font-weight: 700;
77-
padding-bottom: 1.5rem;
75+
font-family: 'Inter', sans-serif;
76+
font-size: 2.4rem;
77+
font-weight: 600;
78+
padding-bottom: 1rem;
7879
}
7980

8081
//text
@@ -222,21 +223,38 @@ body {
222223
}
223224

224225
//modals
225-
.modal {
226+
.modal-content {
226227
border-radius: 0.5rem;
227228
}
228229

229230
.modal-heading {
230-
font-family: 'Playfair Display', serif;
231-
font-size: 2.3rem;
232-
font-weight: 700;
231+
font-family: 'Inter', sans-serif;
232+
font-size: 2rem;
233+
font-weight: 600;
233234
padding-bottom: 0;
235+
margin-top: -2rem;
236+
padding-left: 1.9rem;
234237
padding-top: 1.3rem;
238+
239+
svg {
240+
font-size: 2rem;
241+
margin-right: 0.2rem;
242+
padding-bottom: 0.2rem;
243+
}
235244
}
236245

237246
.modal-header {
238247
border-bottom: 0;
239248
padding: 0;
249+
padding-right: 4rem;
250+
padding-top: 2.8rem;
251+
252+
.close {
253+
background-color: $navbar-light;
254+
border-radius: 50%;
255+
box-shadow: 0 2px 2px $shadow-black;
256+
padding: 0.4rem 0.6rem;
257+
}
240258
}
241259

242260
.modal-body {
@@ -250,7 +268,7 @@ body {
250268
.modal-delete-container {
251269
margin-left: auto;
252270
margin-right: auto;
253-
padding-top: 1rem;
271+
padding: 1rem;
254272
text-align: center;
255273
}
256274

@@ -274,6 +292,7 @@ body {
274292
transition: all .3s ease-in;
275293
a {
276294
color: $white;
295+
text-shadow: 1px 1px $subheading-black;
277296
text-decoration: none;
278297

279298
&:hover {
@@ -285,5 +304,63 @@ body {
285304
&:hover {
286305
transform: translateY(-3px);
287306
}
307+
}
288308

289-
}
309+
.primary-big-tag {
310+
color: $white;
311+
font-size: 1.8rem;
312+
font-weight: 600;
313+
margin: 0 0.2rem;
314+
padding: 0.4rem 0.8rem;
315+
}
316+
317+
//checkboxes
318+
.primary-checkpoint {
319+
background-color: $shadow-black;
320+
bottom: 0;
321+
display: inline-block;
322+
height: 1.5rem;
323+
position: absolute;
324+
width: 1.5rem;
325+
326+
&::after {
327+
content: '';
328+
display: none;
329+
position: absolute;
330+
}
331+
}
332+
333+
.primary-checkpoint-container {
334+
cursor: pointer;
335+
display: block;
336+
font-size: 1rem;
337+
position: relative;
338+
339+
input {
340+
height: 0;
341+
opacity: 0;
342+
position: absolute;
343+
width: 0;
344+
}
345+
346+
h6 {
347+
display: inline-block;
348+
margin-bottom: 0;
349+
margin-right: 0.5rem;
350+
}
351+
352+
input:checked ~ .primary-checkpoint {
353+
background-color: $primary-button;
354+
355+
&::after {
356+
border: solid $white;
357+
border-width: 0 3px 3px 0;
358+
display: block;
359+
height: 1rem;
360+
left: 0.5rem;
361+
top: 0.15rem;
362+
transform: rotate(45deg);
363+
width: 0.5rem;
364+
}
365+
}
366+
}

‎src/assets/stylesheets/index.scss‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@
22
@import "~bootstrap/scss/bootstrap";
33
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
44
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
5-
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
65
@import "./App.scss";
6+
@import "../../pages/common/common.scss";
7+
@import "../../pages/organization/organization.scss";
8+
@import "../../pages/dashboard/dashboard.scss";
9+
@import "../../pages/user/user.scss";
10+
@import "../../pages/tag/tag.scss";
11+
@import "../../pages/admin/admin.scss";
712
@import "../../components/common/common.scss";
813
@import "../../components/navbar/navbar.scss";
914
@import "../../components/topic/topic.scss";
1015
@import "../../components/user/user.scss";
11-
@import "../../pages/organization/organization.scss";
12-
@import "../../pages/dashboard/dashboard.scss";

‎src/assets/stylesheets/variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,4 @@ $form-label: #086972;
99
$error-red: #ce3333;
1010
$error-hover-red: #dd5050;
1111
$input-shadow: #038b973f;
12-
$scrollbar-black: #a19e9e6e;
12+
$scrollbar-black: #a19e9e6e;

‎src/components/category/addCategoryModal.js‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -101,13 +101,21 @@ class AddCategoryModal extends Component {
101101
onHide={this.props.handleClose}
102102
centered
103103
>
104+
<Modal.Header closeButton>
105+
<Modal.Title>
106+
<Container>
107+
<Row>
108+
<Col xs={12}>
109+
<h1 className="modal-heading">
110+
New Category
111+
</h1>
112+
</Col>
113+
</Row>
114+
</Container>
115+
</Modal.Title>
116+
</Modal.Header>
104117
<Modal.Body>
105118
<Container>
106-
<Row className="center-row">
107-
<Col xs={12}>
108-
<h1 className="modal-heading">Add Category</h1>
109-
</Col>
110-
</Row>
111119
<Row>
112120
<Col xs={12}>
113121
<div className="modal-form">
@@ -146,14 +154,16 @@ class AddCategoryModal extends Component {
146154
</h6>
147155
)}
148156
</Form.Group>
149-
<Button
150-
variant=""
151-
className="primary-button"
152-
type="submit"
153-
disabled={this.state.isFormInvalid}
154-
>
155-
Create
156-
</Button>
157+
<Row className="center-row">
158+
<Button
159+
variant=""
160+
className="primary-button organization-page-create-button"
161+
type="submit"
162+
disabled={this.state.isFormInvalid}
163+
>
164+
Create
165+
</Button>
166+
</Row>
157167
</Form>
158168
</div>
159169
</Col>

‎src/components/category/categoryTopicsContainer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import CategoryTopicCard from "../common/categoryTopicCard";
66

77
function CategoryTopicsContainer(props) {
88
const topics = useSelector((state) => state.topic.get.topics);
9-
const dispatch = useDispatch()
9+
const dispatch = useDispatch();
1010
const prevCurrentCategoryRef = useRef();
1111
useEffect(() => {
1212
if (prevCurrentCategoryRef.current?.id || (prevCurrentCategoryRef.current?._id != props.currentCategory._id)) {
@@ -34,4 +34,4 @@ function CategoryTopicsContainer(props) {
3434
}
3535
}
3636

37-
export default CategoryTopicsContainer;
37+
export default CategoryTopicsContainer;

‎src/components/category/updateCategoryModal.js‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from "react";
2-
import { Container, Row, Col, Modal, Form, Button, Alert } from "react-bootstrap";
2+
import { Container, Row, Col, Modal, Form, Button, Alert, ModalDialog } from "react-bootstrap";
33
import { Link } from "react-router-dom";
44
import { connect } from "react-redux";
55
import { updateCategory, archiveCategory, unarchiveCategory, deleteCategory } from "../../reducers/categorySlice";
@@ -140,13 +140,19 @@ class UpdateCategoryModal extends Component {
140140
onHide={this.props.handleClose}
141141
centered
142142
>
143+
<Modal.Header closeButton>
144+
<Modal.Title>
145+
<Container>
146+
<Row>
147+
<Col xs={12}>
148+
<h1 className="modal-heading">Edit Details</h1>
149+
</Col>
150+
</Row>
151+
</Container>
152+
</Modal.Title>
153+
</Modal.Header>
143154
<Modal.Body>
144155
<Container>
145-
<Row className="center-row">
146-
<Col xs={12}>
147-
<h1 className="modal-heading">Edit Category</h1>
148-
</Col>
149-
</Row>
150156
<Row>
151157
<Col xs={12}>
152158
<div className="modal-form">

‎src/components/common/adminRoute.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from "react";
2+
import { useSelector } from "react-redux";
3+
import { Redirect } from "react-router-dom";
4+
5+
function AdminRoute({component: Component, ...rest}) {
6+
const token = useSelector((state) => state.auth.currentUser.token);
7+
const isAdmin = useSelector(state => state.auth.currentUser.isAdmin);
8+
if (token === null || isAdmin === false) {
9+
return <Redirect to="/" />;
10+
} else if (token !== null && isAdmin === undefined) {
11+
return null;
12+
} else if (token !== null && isAdmin) {
13+
return (
14+
<Component {...rest} />
15+
);
16+
}
17+
}
18+
19+
export default AdminRoute;

‎src/components/common/categoryTopicCard.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import ForumRoundedIcon from "@material-ui/icons/ForumRounded";
55
import NotesRoundedIcon from "@material-ui/icons/NotesRounded";
66
import ChatBubbleOutlineRoundedIcon from "@material-ui/icons/ChatBubbleOutlineRounded";
77
import BubbleChartRoundedIcon from "@material-ui/icons/BubbleChartRounded";
8+
import ArchiveIcon from "@material-ui/icons/Archive";
89

910
function CategoryTopicCard(props) {
1011
const {
@@ -32,11 +33,15 @@ function CategoryTopicCard(props) {
3233
<Row>
3334
<Col md={10}>
3435
<Row>
35-
{entityType == "category" ? (
36-
<ForumRoundedIcon className="common-card-icon" />
37-
) : (
38-
<NotesRoundedIcon className="common-card-icon" />
36+
{entity.isArchived && (
37+
<ArchiveIcon className="common-card-icon" />
3938
)}
39+
{!entity.isArchived &&
40+
(entityType == "category" ? (
41+
<ForumRoundedIcon className="common-card-icon" />
42+
) : (
43+
<NotesRoundedIcon className="common-card-icon" />
44+
))}
4045
<h3 className="common-card-heading">{entity.name}</h3>
4146
</Row>
4247
{entityType == "topic" && (
@@ -82,4 +87,4 @@ function CategoryTopicCard(props) {
8287
);
8388
}
8489

85-
export default CategoryTopicCard;
90+
export default CategoryTopicCard;

0 commit comments

Comments
 (0)