170 |
232 | );
233 | }
234 |
--------------------------------------------------------------------------------
/src/components/CreatePost/CreatePost.scss:
--------------------------------------------------------------------------------
1 | // Imports
2 | @import "../../styles/global/variables";
3 |
4 | .createPostMenu {
5 | display: flex;
6 | background-color: white;
7 | border: 1px solid #ccc;
8 | margin-bottom: 16px;
9 | padding: 6px;
10 | border-radius: 4px;
11 | box-sizing: border-box;
12 | width: $contentWidth;
13 | height: 58px;
14 | padding: 0px 8px 0px 61px;
15 | align-items: center;
16 | position: relative;
17 |
18 | .avatar {
19 | height: 54px;
20 | position: absolute;
21 | top: -9%;
22 | left: 1.2%;
23 | cursor: pointer;
24 | }
25 |
26 | input {
27 | color: $svgColor;
28 | font-family: 'Benton Sans Book';
29 | background-color: #F6F7F8;
30 | border: 1px solid #EDEFF1;
31 | border-radius: 4px;
32 | height: 36px;
33 | width: 467px;
34 | margin-bottom: 2px;
35 | padding-left: 16px;
36 | font-size: 15px;
37 | margin-right: 8px;
38 |
39 | &:hover {
40 | border: 1px solid $blue;
41 | background-color: #fff;
42 | }
43 | &:focus {
44 | border: 1px solid $blue;
45 | background-color: #fff;
46 | outline: none;
47 | }
48 | }
49 |
50 | button.imagePost,
51 | button.linkPost {
52 | cursor: pointer;
53 | display: flex;
54 | justify-content: center;
55 | align-items: center;
56 | height: 38px;
57 | width: 38px;
58 | border: 1px transparent;
59 | border-radius: 4px;
60 | background-color: transparent;
61 | position: relative;
62 | font-size: 0.7185em;
63 | &:hover {
64 | background-color: rgba(26,26,27,0.1);
65 | }
66 |
67 | .icon {
68 | height: 20px;
69 | }
70 | }
71 | }
--------------------------------------------------------------------------------
/src/components/CreatePost/CreatePost.tsx:
--------------------------------------------------------------------------------
1 | // Imports
2 | import React, { MouseEventHandler } from 'react';
3 | // Hook Imports
4 | import { useNavigate } from 'react-router-dom';
5 | // CSS Imports
6 | import './CreatePost.scss';
7 |
8 | export interface CreatePostProps {
9 | randomIntToString: string,
10 | userName: string,
11 | loginStatus: boolean,
12 | navToSubmit: MouseEventHandler
13 | }
14 |
15 | export default function CreatePost (props: CreatePostProps) {
16 | const {
17 | randomIntToString,
18 | userName,
19 | loginStatus,
20 | navToSubmit,
21 | } = props;
22 |
23 | return (
24 |
171 |
189 |
190 | Comment as {userName !== "" ? userName : "User"}
172 | 173 |
191 |
231 |
192 |
198 |
199 |
200 |
201 | {currentPost.comments.map((comment, i) => {
202 | return Sort By: Best
193 |
25 | 
26 |
27 |
30 |
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/EditComment/EditComment.scss:
--------------------------------------------------------------------------------
1 | // CSS
2 | .hoverArea {
3 | border: 1px solid transparent;
4 | border-radius: 4px;
5 |
6 | .comment-box {
7 | height: 139px;
8 | border: 1px solid #edeff1;
9 | border-bottom-left-radius: 0px;
10 | border-bottom-right-radius: 0px;
11 | box-sizing: border-box;
12 | border-bottom: none;
13 | color: #060606;
14 | border-radius: 4px;
15 | padding: 9px 16px;
16 | font-family: "Noto Sans Regular";
17 | font-size: 14px;
18 | outline: none;
19 | }
20 |
21 | .comment-box::placeholder {
22 | color: #878a8c;
23 | }
24 |
25 | .button-bar {
26 | background-color: #f6f7f8;
27 | padding-left: 7px;
28 | box-sizing: border-box;
29 | border: 1px solid #edeff1;
30 | border-radius: 4px;
31 | padding-top: 2px;
32 | border-top: none;
33 | margin-top: -3px;
34 | justify-content: space-between;
35 | display: flex;
36 | gap: 1px;
37 |
38 | .line {
39 | width: 1px;
40 | height: 30px;
41 | left: 702px;
42 | position: absolute;
43 | background-color: #edeff1;
44 | }
45 |
46 | .text-settings {
47 | padding: 3px 6px;
48 | border: 1px solid transparent;
49 | border-radius: 4px;
50 | background-color: transparent;
51 | cursor: pointer;
52 | position: relative;
53 |
54 | &:hover {
55 | background-color: #d0d1d2;
56 | }
57 |
58 | &:hover::after {
59 | position: absolute;
60 | margin: 0 auto;
61 | left: -12px;
62 | bottom: 36px;
63 | padding: 5px 10px 5px 10px;
64 | border-radius: 4px;
65 | background-color: black;
66 | color: white;
67 | content: attr(aria-label);
68 | }
69 |
70 | &:active {
71 | background-color: #b2b2b3;
72 | }
73 |
74 | .setting-icon {
75 | height: 21px;
76 | }
77 | }
78 |
79 | .markdown {
80 | margin-left: 9px;
81 | align-self: center;
82 | cursor: pointer;
83 | height: 24px;
84 | border: 1px solid transparent;
85 | display: flex;
86 | align-items: center;
87 | padding-bottom: 3px;
88 | border-radius: 9999px;
89 | padding-left: 7px;
90 | padding-right: 7px;
91 |
92 | p {
93 | font-size: 12px;
94 | font-family: "Noto Sans Bold";
95 | }
96 | }
97 |
98 | .btn {
99 | background-color: transparent;
100 |
101 | &:hover {
102 | background-color: #d0d1d2;
103 | }
104 |
105 | &:active {
106 | background-color: #b2b2b3;
107 | }
108 |
109 | * {
110 | pointer-events: none;
111 | }
112 | }
113 |
114 | .end {
115 | height: 32px;
116 | align-items: center;
117 | display: flex;
118 | }
119 |
120 | #markdown {
121 | background-color: transparent;
122 |
123 | &:hover {
124 | background-color: #d0d1d2;
125 | }
126 |
127 | &:active {
128 | background-color: #b2b2b3;
129 | }
130 | }
131 |
132 | .submit {
133 | height: 24px;
134 | padding-left: 19px;
135 | padding-right: 21px;
136 | margin-bottom: 1px;
137 | margin-right: 8px;
138 | cursor: not-allowed;
139 | border: none;
140 |
141 | &:hover {
142 | box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.125);
143 | }
144 |
145 | &:active {
146 | box-shadow: inset 0 0 100px 100px rgba(0, 0, 0, 0.125);
147 | }
148 | }
149 |
150 | .spoiler {
151 | margin-right: 15px;
152 | }
153 | }
154 | }
--------------------------------------------------------------------------------
/src/components/GridPost/GridPost.scss:
--------------------------------------------------------------------------------
1 | // Imports
2 | @import "../../styles/global/variables";
3 |
4 | // General
5 | * {
6 | padding: 0;
7 | margin: 0;
8 | }
9 |
10 | // CSS
11 | .gridPost {
12 | border: 1px solid #ccc;
13 | background-color: white;
14 |
15 | &:hover {
16 | border: 1px solid #898989;
17 | }
18 |
19 | .upper {
20 | width: $contentWidth;
21 | box-sizing: border-box;
22 | border-radius: 5px;
23 | background-color: white;
24 | display: flex;
25 | cursor: pointer;
26 | }
27 |
28 | .left {
29 | width: 41px;
30 | box-sizing: border-box;
31 | padding: 6px;
32 | display: flex;
33 | flex-direction: column;
34 | justify-content: flex-start;
35 | align-items: center;
36 | border: 1px solid transparent;
37 | border-top-left-radius: 5px;
38 | border-bottom-left-radius: 5px;
39 |
40 | .upvote-btn,
41 | .downvote-btn {
42 | cursor: pointer;
43 | padding: 2px 2px 1px 2px;
44 | background-color: transparent;
45 |
46 | &:hover {
47 | background-color: #e1e2e3;
48 | border-radius: 4px;
49 | }
50 | }
51 |
52 | .upvote-btn {
53 | border: 1px solid transparent;
54 |
55 | .upvote {
56 | height: 20px;
57 | width: 19px;
58 | }
59 | }
60 |
61 | .downvote-btn {
62 | border: 1px solid transparent;
63 |
64 | .downvote {
65 | height: 20px;
66 | width: 19px;
67 | }
68 | }
69 |
70 | .votes {
71 | font-family: "IBM Regular";
72 | font-size: 0.75em;
73 | padding-bottom: 5px;
74 | }
75 | }
76 |
77 | .right {
78 | display: flex;
79 | flex-direction: column;
80 | gap: 8px;
81 |
82 | .header {
83 | display: flex;
84 | gap: 4px;
85 | padding: 9px 2px 0px 10px;
86 |
87 | .subIcon {
88 | height: 21px;
89 | width: 21px;
90 | }
91 |
92 | .subName {
93 | font-family: "IBM";
94 | padding-top: 2px;
95 | font-size: 12px;
96 | color: #1c1c1c;
97 |
98 | &:hover {
99 | text-decoration: underline;
100 | }
101 | }
102 |
103 | .author,
104 | .creationDate {
105 | color: #787C7E;
106 | padding-top: 2px;
107 | font-size: 0.71em;
108 | font-family: "IBM Light";
109 |
110 | span {
111 | &:hover {
112 | text-decoration: underline;
113 | }
114 | }
115 | }
116 |
117 | .creationDate {
118 | cursor: default;
119 | }
120 |
121 | .awards {
122 | margin-left: 3px;
123 | display: flex;
124 | gap: 5px;
125 | cursor: default;
126 |
127 | .award {
128 | padding-top: 2px;
129 | height: 18px;
130 | width: 18px;
131 | cursor: default;
132 | }
133 | }
134 | }
135 |
136 | .headline {
137 | display: flex;
138 | flex-direction: column;
139 | padding: 0px 0px 0px 10px;
140 |
141 | .headline-text {
142 | font-size: 18px;
143 | font-family: "IBM Regular";
144 | color: #222222;
145 | margin-right: 10px;
146 |
147 | button {
148 | border: 1px solid transparent;
149 | border-radius: 9999px;
150 | padding: 0px 9px 1px 9px;
151 | color: white;
152 | font-family: "IBM";
153 | font-size: 0.65em;
154 | padding-bottom: 2px;
155 | margin-left: 5px;
156 | position: absolute;
157 | cursor: pointer;
158 |
159 | &:hover {
160 | box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
161 | }
162 | }
163 | }
164 |
165 | button {
166 | border: 1px solid transparent;
167 | border-radius: 4px;
168 | padding: 0px 9px 1px 9px;
169 | color: white;
170 | font-family: "IBM";
171 | font-size: 0.65em;
172 | padding-bottom: 2px;
173 | margin-top: 3px;
174 | cursor: pointer;
175 |
176 | &:hover {
177 | box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
178 | }
179 | }
180 | }
181 |
182 | .content {
183 | display: flex;
184 | margin-top: 5px;
185 |
186 | p.src {
187 | font-size: 14px;
188 | padding-left: 10px;
189 | font-family: "Noto Sans Regular";
190 | color: #1c1c1c;
191 | line-height: 1.5;
192 | }
193 |
194 | img.src {
195 | justify-self: center;
196 | }
197 | }
198 |
199 | .footer {
200 | display: flex;
201 | gap: 10px;
202 | margin-bottom: 5px;
203 | padding-left: 10px;
204 |
205 | .footer-div {
206 | display: flex;
207 | padding: 6px 5px 7px 5px;
208 | border: 1px solid transparent;
209 | border-radius: 3px;
210 | align-items: center;
211 | gap: 6px;
212 |
213 | &:hover {
214 | background-color: #e7e7e7;
215 | }
216 |
217 | h4 {
218 | color: #878A8C;
219 | font-size: 12px;
220 | font-family: "IBM";
221 | }
222 |
223 | img {
224 | width: 18px;
225 | height: max-content;
226 | }
227 | }
228 |
229 | .people {
230 | display: flex;
231 | align-items: center;
232 | justify-content: center;
233 | gap: 6px;
234 | cursor: default;
235 | margin-left: 130px;
236 | padding-bottom: 1px;
237 |
238 | .people-icon {
239 | height: 23px;
240 | }
241 |
242 | .people-count {
243 | padding-bottom: 2px;
244 | font-size: 12px;
245 | color: #7C7C7C;
246 | font-family: "Noto Sans Regular";
247 | cursor: text;
248 | }
249 | }
250 | }
251 | }
252 | }
253 |
254 | .save-div {
255 |
256 | * {
257 | pointer-events: none;
258 | }
259 | }
--------------------------------------------------------------------------------
/src/components/HomeSideBar/HomeSideBar.tsx:
--------------------------------------------------------------------------------
1 | // Imports
2 | import React, { useState, MouseEventHandler } from 'react';
3 | // Component Imports
4 | import Imprint from '../Imprint/Imprint';
5 | import BackToTopButton from '../BackToTopButton/BackToTopButton';
6 | // Type Imports
7 | import { Subreddits } from '../../types/types';
8 | // CSS Imports
9 | import './HomeSideBar.scss';
10 |
11 | export interface HomeSideBarProps {
12 | subreddits: Subreddits,
13 | topSubreddits: Subreddits,
14 | loginStatus: boolean,
15 | loginModalState: string
16 | setLoginModalState: any,
17 | handleSubMembership: React.MouseEventHandler,
18 | enablePremium: MouseEventHandler,
19 | handleNavigate: MouseEventHandler
26 |
27 |
30 |
33 |
46 |
47 |
115 | );
116 | }
117 |
118 |
--------------------------------------------------------------------------------
/src/components/Imprint/Imprint.scss:
--------------------------------------------------------------------------------
1 | // CSS
2 | .imprint-container {
3 | margin-top: 1px;
4 | width: 312px;
5 | height: 263px;
6 | background-color: white;
7 | border: 1px solid #ccc;
8 | border-radius: 4px;
9 | box-sizing: border-box;
10 | display: flex;
11 | flex-direction: column;
12 | padding: 10px 0px 10px 15px;
13 | position: sticky;
14 | top: 57px;
15 | margin-bottom: 30px;
16 | }
17 |
18 | .first,
19 | .second,
20 | .third,
21 | .fourth {
22 | display: flex;
23 | width: 312px;
24 |
25 | .left {
26 | width: 46.5%;
27 | }
28 |
29 | .left,
30 | .right {
31 | display: flex;
32 | flex-direction: column;
33 | gap: 5px;
34 |
35 | .imprint-content {
36 | font-family: "IBM Light";
37 | font-size: 13px;
38 | color: #1A1A1B;
39 | cursor: pointer;
40 |
41 | &:hover {
42 | text-decoration: underline;
43 | }
44 | }
45 | }
46 | }
47 |
48 | .line {
49 | width: 97.25%;
50 | align-self: center;
51 | height: 1px;
52 | background-color: #edeff1;
53 | color: #edeff1;
54 | margin: 10px 0px;
55 | margin-right: 16px;
56 | }
57 |
58 | .line.lastline {
59 | margin-bottom: 30px;
60 | }
61 |
62 | .imprint-credits {
63 | font-family: "IBM Light";
64 | font-size: 13px;
65 | color: #1A1A1B;
66 | position: absolute;
67 | bottom: 12px;
68 | left: 12px;
69 | }
--------------------------------------------------------------------------------
/src/components/Imprint/Imprint.tsx:
--------------------------------------------------------------------------------
1 | // Imports
2 | import React from 'react';
3 | // CSS Imports
4 | import './Imprint.scss';
5 |
6 | export interface ImprintProps {
7 | }
8 |
9 | export default function Imprint (props: ImprintProps) {
10 | return (
11 |
48 |
89 |
90 |
49 | ![banner]({require("../../resources/images/bannerTopCommunities3.png")})
50 |
52 |
53 |
50 | Today's Top Growing Communities
51 |
54 | {subreddits.map((subreddit, i) => {
55 | if (viewAll && i > 9) {
56 | return;
57 | } else if (viewAll === false && i > 4) {
58 | return;
59 | }
60 | return
88 |
65 | ![top]({require("../../resources/images/top.png")})
67 |
68 | })
69 |
78 | })}
79 |
80 |
81 | {i + 1}
66 |
67 |
68 |
69 | {"r/" + subreddit.title}
70 | 71 | 77 |
82 |
83 |
84 |
85 |
86 |
87 |
91 |
101 |
102 |
92 | ![premium]({require("../../resources/images/premium2.png")})
93 |
98 |
99 |
100 |
93 |
94 |
97 | Reddit Premium
95 |The best Reddit experience, with monthly Coins
96 |
103 | ![banner]({require("../../resources/images/homebanner.png")})
104 | ![avatar]({require("../../resources/images/homeavatar.png")})
105 |
111 |
112 |
104 |
105 | Home
106 |Your personal Reddit frontpage. Come here to check in with your favorite communities.
107 | 108 | 109 | 110 |
12 |
13 |
23 |
24 |
25 |
26 |
27 |
37 |
38 |
39 |
40 |
41 |
53 |
54 |
55 |
56 |
58 | );
59 | }
60 |
--------------------------------------------------------------------------------
/src/components/LoginModal/LoginModal.scss:
--------------------------------------------------------------------------------
1 | * {
2 | -webkit-user-drag: none;
3 | user-select: none;
4 | -moz-user-select: none;
5 | -webkit-user-select: none;
6 | -ms-user-select: none;
7 | }
8 |
9 | .modalBackground {
10 | background-color: rgba(0, 0, 0, 0.4);
11 | position: absolute;
12 | height: 100vh;
13 | width: 100vw;
14 | z-index: 12;
15 | }
16 |
17 | .loginModal {
18 | position: absolute;
19 | top: 50%;
20 | left: 50%;
21 | transform: translate(-50%, -50%);
22 | z-index: 14;
23 | display: flex;
24 | background-color: #fff;
25 | border-radius: 4px;
26 | width: 850px;
27 | box-shadow: 1px 7px 20px 2px rgba(0, 0, 0, 0.4);
28 | }
29 |
30 | .loginBackground {
31 | border-top-left-radius: 4px;
32 | border-bottom-left-radius: 4px;
33 | height: 650px;
34 | width: 131px;
35 | }
36 |
37 | .modalContent {
38 | display: flex;
39 | flex-direction: column;
40 | padding: 48px 24px;
41 |
42 | #closed {
43 | border: 1px solid transparent;
44 | position: absolute;
45 | height: 20px;
46 | width: 20px;
47 | top: 2.3%;
48 | right: 1.75%;
49 | cursor: pointer;
50 | }
51 |
52 | .cross {
53 | height: 20px;
54 | position: absolute;
55 | right: 1.9%;
56 | top: 2.5%;
57 | fill: #808080;
58 | pointer-events: none;
59 | }
60 |
61 | .heading {
62 | color: #1A1A1B;
63 | font-size: 18px;
64 | font-family: "IBM Regular";
65 | margin-bottom: 8px;
66 | }
67 |
68 | .policy {
69 | color: #1A1A1B;
70 | font-size: 12px;
71 | font-family: "Noto Sans Regular";
72 |
73 | span {
74 | color: #0079d3;
75 | cursor: pointer;
76 | &:hover {
77 | color: #3394dc;
78 | }
79 | }
80 | }
81 |
82 | button.googleButton {
83 | margin-top: 57px;
84 | margin-bottom: 10px;
85 | }
86 |
87 | button {
88 | background-color: white;
89 | border: 1px solid #dadce0;
90 | display: flex;
91 | align-items: center;
92 | font-size: 14px;
93 | font-family: "IBM";
94 | color: #1A1A1B;
95 | height: 40px;
96 | width: 20em;
97 | box-sizing: border-box;
98 | padding: 2px 12px;
99 | cursor: pointer;
100 | border-radius: 20px;
101 | transition: 0.25s all;
102 | &:hover {
103 | border-color: #d2e3fc;
104 | background: rgba(66,133,244,.04);
105 | }
106 | &:active {
107 | background: rgba(66,133,244,.09);
108 | }
109 |
110 | .google,
111 | .apple {
112 | margin-right: 45px;
113 | height: 20px;
114 | }
115 | .apple {
116 | padding-top: 3px;
117 | margin-right: 48px !important;
118 | }
119 | }
120 |
121 | .or {
122 | color: #878A8C;
123 | font-size: 14px;
124 | font-family: "IBM Light";
125 | margin: 32px 122px 28px 128px;
126 | position: relative;
127 |
128 | &::before {
129 | content: "";
130 | position: absolute;
131 | left: -86.25%;
132 | top: 9px;
133 | width: 7.95em;
134 | height: 1px;
135 | background-color: #edeff1;
136 | }
137 | &::after {
138 | content: "";
139 | position: absolute;
140 | left: 19%;
141 | top: 9px;
142 | width: 9em;
143 | height: 1px;
144 | background-color: #edeff1;
145 | }
146 | }
147 |
148 | div.password {
149 | margin-bottom: 2px;
150 | }
151 |
152 | .container {
153 | position: relative;
154 |
155 | .inputField {
156 | margin-bottom: 12px;
157 | height: 48px;
158 | box-sizing: border-box;
159 | border: 1px solid rgba(0, 0, 0, 0.1);
160 | border-radius: 4px;
161 | padding: 24px 12px 10px 12px;
162 | font-family: "Noto Sans Regular";
163 | background-color: rgb(252, 252, 251);
164 | outline: 0px;
165 | width: 21em;
166 | transition: 0.2s ease-in-out all;
167 | &:hover {
168 | background-color: white;
169 | border: 1px solid rgba(0, 0, 0, 0.2);
170 | }
171 | &:active {
172 | background-color: white;
173 | border-color: rgb(36, 160, 237);
174 | }
175 | }
176 |
177 | .circle {
178 | width: 5px;
179 | height: 5px;
180 | border-radius: 45%;
181 | background-color: #24a0ed;
182 | position: absolute;
183 | pointer-events: none;
184 | top: 39%;
185 | }
186 |
187 | .label {
188 | position: absolute;
189 | pointer-events: none;
190 | left: 12px;
191 | top: 18px;
192 | font-size: 10px;
193 | font-family: "Noto Sans Bold";
194 | transition: 0.3s ease all;
195 | color: #a5a5a4;
196 | letter-spacing: 0.025em;
197 | }
198 |
199 | .inputField:hover ~ .label,
200 | .inputField:focus ~ .label,
201 | .inputField:not(:focus):valid ~ .label,
202 | .inputField:not(:hover):valid ~ .label {
203 | top: 8px;
204 | bottom: 10px;
205 | left: 12px;
206 | font-size: 8px;
207 | opacity: 1;
208 | }
209 | }
210 |
211 | button.anmelden,
212 | button.demo {
213 | font-family: "Noto Sans Bold";
214 | font-size: 14px;
215 | display: flex;
216 | align-items: center;
217 | justify-content: center;
218 | background-color: #0079d3;
219 | color: #fff;
220 | border-radius: 999px;
221 | line-height: 18px;
222 | margin-bottom: 6px;
223 | &:hover {
224 | background-color: #1484d7;
225 | }
226 | &:active {
227 | background-color: #3d99de;
228 | }
229 | }
230 |
231 | p.suggestion {
232 | margin-top: 18px;
233 | font-size: 12px;
234 | font-family: "Noto Sans Regular";
235 | color: #1A1A1B;
236 |
237 | span {
238 | color: #0079d3;
239 | font-family: "IBM";
240 | cursor: pointer;
241 |
242 | &:hover {
243 | color: rgb(51, 148, 220);
244 | }
245 | }
246 | }
247 | }
248 |
249 | .typecheck {
250 | font-size: 11px;
251 | font-family: "Noto Sans";
252 | color: red;
253 | margin-top: -8px;
254 | margin-bottom: 5px;
255 | margin-left: 4px;
256 | }
257 |
258 | .second-typecheck {
259 | margin-bottom: 12px;
260 | }
261 |
--------------------------------------------------------------------------------
/src/components/LoginModal/LoginModal.tsx:
--------------------------------------------------------------------------------
1 | // Imports
2 | import React, { ChangeEventHandler, MouseEventHandler } from 'react';
3 | // Import SVGs
4 | import { ReactComponent as Google } from "../../resources/images/google.svg";
5 | import { ReactComponent as Apple } from "../../resources/images/apple.svg";
6 | import { ReactComponent as Cross } from "../../resources/images/cross.svg";
7 | // CSS Imports
8 | import './LoginModal.scss';
9 |
10 | export interface LoginModalProps {
11 | loginModalState: string,
12 | hoverState: {
13 | username: boolean,
14 | password: boolean
15 | },
16 | userName: string,
17 | password: string,
18 | loginStatus: boolean,
19 | showAuthAlert: {
20 | username: boolean,
21 | password: boolean,
22 | usernameDoesNotExist: boolean,
23 | wrongPassword: boolean,
24 | usernameTaken: boolean
25 | },
26 | handleLoginInput: ChangeEventHandler
14 |
17 |
18 | Imprint
15 |Report NetzDG Content
16 |
19 |
22 | Help
20 |Transparency Report
21 |
28 |
31 |
32 | User Agreement
29 |Privacy Policy
30 |
33 |
36 | Content Policy
34 |Moderator Code of Conduct
35 |
42 |
46 |
47 | English
43 |Français
44 |Italiano
45 |
48 |
52 | Deutsch
49 |Español
50 |Português
51 |No rights reserved. Built for educational purposes.
57 |
47 |
106 | );
107 | }
108 |
--------------------------------------------------------------------------------
/src/components/SortBar/SortBar.scss:
--------------------------------------------------------------------------------
1 | // Imports
2 | @import "../../styles/global/variables";
3 |
4 | // CSS
5 | .sortBar {
6 | display: flex;
7 | width: $contentWidth;
8 | justify-content: space-between;
9 | align-items: center;
10 | background-color: white;
11 | border: 1px solid #ccc;
12 | box-sizing: border-box;
13 | margin-bottom: 16px;
14 | border-radius: 4px;
15 | height: 61px;
16 |
17 | .left {
18 | display: flex;
19 | align-items: center;
20 | padding-left: 13px;
21 | gap: 9px;
22 | }
23 |
24 | .left .sortButton,
25 | .right .sortButton {
26 | margin-top: 1px;
27 | display: flex;
28 | justify-content: center;
29 | align-items: center;
30 | background-color: white;
31 | padding: 4px 10px 5px 8px;
32 | border-radius: 20px;
33 | border: none;
34 | gap: 8px;
35 | cursor: pointer;
36 | &:active {
37 | background-color: #c9c9c9 !important;
38 | }
39 |
40 | .expand {
41 | height: 7px !important;
42 | padding-top: 2px;
43 | }
44 |
45 | &#more {
46 | height: 34px;
47 |
48 | img {
49 | width: 1.525em;
50 | height: 0.425em;
51 | }
52 | }
53 |
54 | &:hover {
55 | background-color: #f6f7f8;
56 | }
57 | &.selected {
58 | background-color: #f6f7f8;
59 | }
60 |
61 | .icon {
62 | height: 1.525em;
63 | }
64 |
65 | p {
66 | padding-top: 2px;
67 | font-family: "Noto Sans Bold";
68 | font-size: 14px;
69 | padding-bottom: 4px;
70 | color: #878A8C;
71 | }
72 |
73 | p.selected {
74 | color: #0079D3;
75 | }
76 | }
77 | }
78 |
79 | button.sortButton #layout {
80 | height: 20px;
81 | }
82 |
83 | .right {
84 | margin-right: 12px;
85 | }
--------------------------------------------------------------------------------
/src/components/SortBar/SortBar.tsx:
--------------------------------------------------------------------------------
1 | // Imports
2 | import * as React from 'react';
3 | // CSS Imports
4 | import './SortBar.scss';
5 |
6 | export interface SortBarProps {
7 | currentSort: string,
8 | setSort: React.MouseEventHandler
9 | }
10 |
11 | export default function SortBar (props: SortBarProps) {
12 | const {
13 | currentSort,
14 | setSort
15 | } = props;
16 |
17 | return (
18 |
48 |
49 |
50 |
51 |
52 | ![background]({require("../../resources/images/loginbackground.png")})
57 |
105 |
57 |
58 |
64 |
104 | {loginModalState === "login" ? "Login" : "Sign Up"}
65 |If you continue, you agree to our User Agreements and Privacy Policy.
66 | 67 | 71 | 72 | 76 | 77 |OR
78 | 79 |
80 |
81 | {loginModalState === "login" ? "USERNAME" : "PREFERED USERNAME"}
82 |
83 |
84 | {showAuthAlert.username && ! Username must contain 4 characters or more
} 85 | {showAuthAlert.usernameDoesNotExist &&! A user with this username does not exist
} 86 | {showAuthAlert.usernameTaken &&! This username is already taken
} 87 |
88 |
89 | {loginModalState === "login" ? "PASSWORD" : "PREFERED PASSWORD"}
90 |
91 |
92 | {showAuthAlert.password && ! Password must contain 6 characters or more
} 93 | {showAuthAlert.wrongPassword &&! The entered password is wrong
} 94 | 95 | 98 | 101 | 102 |{loginModalState === "login" ? "New to Reddit?" : "Already a Redditor*ess?"} {loginModalState === "login" ? "SIGN UP" : "LOGIN"}
103 |
19 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/SubredditHeadline/SubredditHeadline.scss:
--------------------------------------------------------------------------------
1 | // CSS
2 | .subredditHeadline {
3 | background-color: white;
4 | height: 100px;
5 | width: 100vw;
6 | box-sizing: border-box;
7 | margin-top: -4px;
8 | position: relative;
9 | z-index: 7;
10 | padding-left: 464px;
11 |
12 | .headlineTop {
13 | display: flex;
14 | gap: 28px;
15 |
16 | .iconContainer {
17 | width: 77px;
18 | height: 77px;
19 | display: flex;
20 | justify-content: center;
21 | align-items: center;
22 | border: 1px solid white;
23 | background-color: white;
24 | border-radius: 9999px;
25 | position: absolute;
26 | top: -15px;
27 |
28 | .icon {
29 | width: 70px;
30 | height: 70px;
31 | padding-right: 0.01em;
32 | cursor: pointer;
33 | }
34 | }
35 |
36 | .headlineTitle {
37 | padding-top: 8px;
38 | margin-left: 96px;
39 |
40 | h1 {
41 | color: #1c1c1c;
42 | font-size: 27px;
43 | font-family: "IBM";
44 | letter-spacing: 0.015em;
45 | margin-bottom: 4px;
46 | }
47 |
48 | h3 {
49 | color: #7c7c7c;
50 | font-size: 14px;
51 | font-family: "IBM Light";
52 | letter-spacing: 0.02em;
53 | }
54 | }
55 |
56 | .join,
57 | .leave {
58 | margin-top: 10px;
59 | display: flex;
60 | color: white;
61 | padding-bottom: 2px;
62 | font-size: 14px;
63 | font-family: "Noto Sans Bold";
64 | justify-content: center;
65 | align-items: center;
66 | width: 96px;
67 | border: 1px solid transparent;
68 | border-radius: 9999px;
69 | height: 32px;
70 | cursor: pointer;
71 |
72 | &:hover {
73 | box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
74 | }
75 |
76 | &:active {
77 | box-shadow: inset 0 0 100px 100px rgba(0, 0, 0, 0.1);
78 | }
79 | }
80 | }
81 |
82 | .headlineBottom {
83 | display: flex;
84 | gap: 10px;
85 | position: absolute;
86 | bottom: -4px;
87 | left: 463px;
88 |
89 | .anchor {
90 | cursor: pointer;
91 | padding: 8px;
92 | font-size: 14px;
93 | color: #737373;
94 | font-family: "IBM";
95 | position: relative;
96 |
97 | &:hover {
98 | color: #1c1c1c !important;
99 | }
100 |
101 | .anchorLine {
102 | position: absolute;
103 | width: 100%;
104 | height: 3px;
105 | left: 0px;
106 | bottom: 4px;
107 | }
108 | }
109 | }
110 | }
111 |
112 | .subredditContent {
113 | padding-top: 20px;
114 | margin-left: 464px;
115 | }
116 |
117 | .subredditHeadline::-webkit-scrollbar {
118 | display: none;
119 | }
--------------------------------------------------------------------------------
/src/components/SubredditHeadline/SubredditHeadline.tsx:
--------------------------------------------------------------------------------
1 | // Imports
2 | import * as React from 'react';
3 | // Type imports
4 | import { Subreddit } from '../../types/types';
5 | // CSS Imports
6 | import './SubredditHeadline.scss';
7 |
8 | export interface SubredditHeadlineProps {
9 | currentSub: Subreddit | undefined,
10 | currentAnchor: number | undefined,
11 | standardTheme: any,
12 | loginStatus: boolean,
13 | communityTheme: boolean,
14 | selectAnchor: React.MouseEventHandler
15 | handleSubMembership: React.MouseEventHandler
16 | }
17 |
18 | export default function SubredditHeadline (props: SubredditHeadlineProps) {
19 | const {
20 | currentSub,
21 | currentAnchor,
22 | standardTheme,
23 | loginStatus,
24 | communityTheme,
25 | selectAnchor,
26 | handleSubMembership
27 | } = props;
28 |
29 | return (
30 |
20 |
24 |
28 |
29 |
33 |
34 |
38 |
39 |
42 |
43 |
44 |
45 |
49 |
50 |
31 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/src/components/SubredditSideBar/SubredditSideBar.scss:
--------------------------------------------------------------------------------
1 | // CSS
2 | .sidebar {
3 | display: flex;
4 | flex-direction: column;
5 | min-height: 100vh;
6 | gap: 16px;
7 | margin-bottom: 20px;
8 |
9 | .aboutCommunity {
10 | background-color: white;
11 | border: 1px solid #ccc;
12 | width: 312px;
13 | box-sizing: border-box;
14 | border-radius: 4px;
15 |
16 | .head {
17 | display: flex;
18 | justify-content: space-between;
19 | padding: 14px 12px 12px 12px;
20 | align-items: center;
21 | border-radius: 4px;
22 | border-bottom-left-radius: 0px;
23 | border-bottom-right-radius: 0px;
24 |
25 | h3 {
26 | font-size: 14px;
27 | font-family: "IBM Regular";
28 | letter-spacing: 0.03em;
29 | color: #ffffff;
30 | padding-bottom: 2px;
31 | cursor: text;
32 | }
33 |
34 | .more {
35 | height: .2575em;
36 | padding: 8px 4px;
37 | border: 1px transparent;
38 | border-radius: 2px;
39 | cursor: pointer;
40 | transition: 0.15s all;
41 |
42 | &:hover {
43 | background-color: rgba(0, 0, 0, 0.15)
44 | }
45 | }
46 | }
47 |
48 | .about {
49 | font-size: 14px;
50 | line-height: 1.475;
51 | padding: 12px 16px 0px 11px;
52 | font-family: "Noto Sans Regular";
53 | color: #1a1a1b;
54 | cursor: text;
55 | }
56 |
57 | .createdAt {
58 | display: flex;
59 | cursor: text;
60 | gap: 8px;
61 | padding: 11px 16px 0px 12px;
62 |
63 | .cake {
64 | height: 1.1387em;
65 | width: 1.19em;
66 | }
67 |
68 | p {
69 | font-size: 14px;
70 | font-family: "Noto Sans Regular";
71 | color: #737373;
72 | }
73 | }
74 |
75 | .memberContainer {
76 | display: flex;
77 | justify-content: flex-start;
78 | gap: 24px;
79 | margin: 17px 14px 16px 11px;
80 | padding: 16px 0px;
81 | border-top: 1px solid rgba(26,26,27,0.07);
82 | border-bottom: 1px solid rgba(26,26,27,0.07);
83 |
84 | .memberCount p,
85 | .onlineCount p,
86 | .size p {
87 | font-size: 16px;
88 | font-family: "IBM";
89 | color: #1a1a1b;
90 | margin-bottom: 3px;
91 | cursor: pointer;
92 | }
93 |
94 | .memberCount h5,
95 | .onlineCount h5,
96 | .size h5 {
97 | font-size: 12px;
98 | font-family: "IBM Light";
99 | color: #737373;
100 | cursor: text;
101 | }
102 | }
103 |
104 | .createPost {
105 | padding: 5px 0px 6px 0px;
106 | border: 1px solid transparent;
107 | border-radius: 9999px;
108 | width: 92.2%;
109 | margin: 0px 12px;
110 | font-size: 14px;
111 | color: white;
112 | font-family: "Noto Sans Bold";
113 | cursor: pointer;
114 | }
115 | }
116 | }
117 |
118 | .postHead {
119 | display: flex;
120 | gap: 9px;
121 | align-items: center;
122 | padding: 11px 12px 1px 12px;
123 | cursor: pointer;
124 |
125 | * {
126 | pointer-events: none;
127 | }
128 |
129 | .head-img {
130 | height: 52px;
131 | }
132 |
133 | .head-p {
134 | font-size: 16px;
135 | font-family: "IBM";
136 | color: #1a1a1b;
137 | }
138 | }
139 |
140 | .user {
141 | cursor: pointer;
142 | }
--------------------------------------------------------------------------------
/src/components/SubredditSideBar/SubredditSideBar.tsx:
--------------------------------------------------------------------------------
1 | // Imports
2 | import React, { MouseEventHandler } from 'react';
3 | // Type Imports
4 | import { Post, Subreddit } from '../../types/types';
5 | // SVG Imports
6 | import { ReactComponent as Pen } from "../../resources/images/pen.svg";
7 | // Component Imports
8 | import Imprint from '../Imprint/Imprint';
9 | import BackToTopButton from '../BackToTopButton/BackToTopButton';
10 | // CSS Imports
11 | import './SubredditSideBar.scss';
12 |
13 | export interface SubredditSideBarProps {
14 | communityTheme: boolean,
15 | submitPage: boolean,
16 | currentSub: Subreddit | undefined,
17 | standardTheme: any,
18 | loginStatus: boolean,
19 | randomIntToString: string,
20 | userName: string,
21 | communityOptions: boolean,
22 | currentPost: Post | undefined,
23 | switchCommunityOptions: MouseEventHandler,
24 | handleNavigate: MouseEventHandler,
25 | navToProfile: MouseEventHandler,
26 | navToSubmit: MouseEventHandler,
27 | switchCommunityTheme: MouseEventHandler,
28 | expandRule: MouseEventHandler,
29 | }
30 |
31 | export default function SubredditSideBar (props: SubredditSideBarProps) {
32 | const {
33 | communityTheme,
34 | currentSub,
35 | currentPost,
36 | standardTheme,
37 | submitPage,
38 | loginStatus,
39 | randomIntToString,
40 | userName,
41 | navToProfile,
42 | handleNavigate,
43 | navToSubmit,
44 | switchCommunityTheme,
45 | expandRule,
46 | switchCommunityOptions,
47 | communityOptions
48 | } = props;
49 |
50 | return (
51 |
32 |
41 |
33 | })
34 |
35 |
34 |
36 |
39 |
40 | {currentSub?.officialTitle}
37 |{"r/" + currentSub?.title}
38 |
42 | {currentSub?.anchors?.map((anchor, i) => {
43 | return
49 |
44 | {anchor?.title}
45 |
46 |
47 | })}
48 |
52 |
175 | );
176 | }
177 |
--------------------------------------------------------------------------------
/src/containers/Grid/Grid.scss:
--------------------------------------------------------------------------------
1 | //CSS
2 |
3 | .grid {
4 | display: flex;
5 | flex-direction: column;
6 | gap: 10px;
7 | margin-bottom: 60px;
8 | overflow: hidden;
9 | }
--------------------------------------------------------------------------------
/src/containers/Home/Home.scss:
--------------------------------------------------------------------------------
1 | // General
2 | * {
3 | margin: 0;
4 | padding: 0;
5 | }
6 |
7 | // Imports
8 | @import '../../styles/global/variables';
9 |
10 | // CSS
11 | .home {
12 | background-color: $mainPageBackground;
13 | display: flex;
14 | gap: 24px;
15 | padding-top: 68px;
16 |
17 | .feed {
18 | margin-left: 464px;
19 | }
20 | }
21 |
22 | .lds-ring {
23 | display: inline-block;
24 | position: relative;
25 | width: 20px;
26 | margin-top: 2px;
27 | height: 20px;
28 | }
29 | .lds-ring div {
30 | box-sizing: border-box;
31 | display: block;
32 | position: absolute;
33 | width: 15px;
34 | height: 15px;
35 | margin: 2px;
36 | border: 2px solid #fff;
37 | border-radius: 50%;
38 | animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
39 | border-color: #fff transparent transparent transparent;
40 | }
41 | .lds-ring div:nth-child(1) {
42 | animation-delay: -0.45s;
43 | }
44 | .lds-ring div:nth-child(2) {
45 | animation-delay: -0.3s;
46 | }
47 | .lds-ring div:nth-child(3) {
48 | animation-delay: -0.15s;
49 | }
50 | @keyframes lds-ring {
51 | 0% {
52 | transform: rotate(0deg);
53 | }
54 | 100% {
55 | transform: rotate(360deg);
56 | }
57 | }
58 |
59 | .loading {
60 | background-color: #0079d3;
61 | border: 1px solid transparent;
62 | border-radius: 9999px;
63 | width: 150px;
64 | padding: 4px 14px;
65 | gap: 8px;
66 | font-family: "Noto Sans Bold";
67 | color: white;
68 | font-size: 14px;
69 | display: flex;
70 | align-items: center;
71 | justify-content: center;
72 | align-self: center;
73 | margin-bottom: 14px;
74 | margin-top: -30px;
75 | margin-left: auto;
76 | margin-right: auto;
77 | cursor: pointer;
78 |
79 | &:hover {
80 | background-color: #0781df;
81 | }
82 | }
83 |
84 |
--------------------------------------------------------------------------------
/src/containers/Home/Home.tsx:
--------------------------------------------------------------------------------
1 | // Imports
2 | import React, { MouseEventHandler, Dispatch, SetStateAction, useRef, useEffect, useState } from 'react';
3 | // Component Imports
4 | import CreatePost from '../../components/CreatePost/CreatePost';
5 | import SortBar from '../../components/SortBar/SortBar';
6 | import HomeSideBar from '../../components/HomeSideBar/HomeSideBar';
7 | import Grid from '../Grid/Grid';
8 | // Type imports
9 | import { Post, Subreddit, Subreddits } from '../../types/types';
10 | // Utility Imports
11 | import userArray from '../../utils/userArray';
12 | // CSS Imports
13 | import './Home.scss';
14 |
15 | export interface HomeProps {
16 | randomIntToString: string,
17 | userName: string,
18 | currentSort: string,
19 | currentSub: Subreddit | undefined,
20 | subreddits: Subreddits,
21 | topSubreddits: Subreddits,
22 | renderNum: number,
23 | currentEditedComment: string,
24 | writeNestedComment: any,
25 | editComment: any,
26 | editNestedComment: any,
27 | loginStatus: boolean,
28 | setLoginModalState: any,
29 | loginModalState: string,
30 | posts: Post[],
31 | currentPost: Post | undefined,
32 | mainComment: string,
33 | writeComment: any,
34 | setRenderNum: Dispatch
53 |
126 |
127 |
128 |
129 |
54 | {currentPost === undefined ? ![more]({require("../../resources/images/more_white.PNG")})
: null}
56 |
57 |
58 | {currentPost !== undefined &&
59 | About Community
: null} 55 | {currentPost === undefined ? : null}
56 |
60 | })
61 |
63 | }
64 |
61 | r/{currentPost.subreddit}
62 |{currentSub?.about}
65 |
66 | ![cake]({require("../../resources/images/cakeblack.png")})
67 |
69 |
70 |
67 | Created {currentSub?.creationDate}
68 |
71 |
87 |
88 | {submitPage === false && }
91 |
92 |
72 |
75 | {currentSub?.members}
73 |Members
74 |
76 |
82 |
77 |
78 |
80 | {currentSub?.online}
79 |currently online
81 |
83 |
86 | {currentSub?.bySize}
84 |Ranked by Size
85 |
93 |
108 |
109 |
94 |
102 |
103 | USER FLAIR PREVIEW
95 |
104 |
105 |
107 |
105 | {userName}
106 |
110 |
114 |
115 |
125 |
116 |
124 |
117 | ![eye]({require("../../resources/images/eye.png")})
118 |
120 |
123 |
118 | Community theme
119 |
130 |
151 |
152 |
153 |
154 | {submitPage === false &&
131 |
133 |
134 | {currentSub?.rules.map((rule, i) => {
135 | return (
136 | r/{currentSub?.title} Rules
132 |
137 |
148 | )
149 | })}
150 |
138 | ![expand]({require("../../resources/images/expandblack.png")})
143 |
144 |
139 |
142 | {rule?.number + `. `}
140 |{rule?.title}
141 |
143 |
145 | {rule?.desc}
146 |
147 |
155 |
}
169 |
170 |
171 |
172 | {submitPage === false &&
156 |
158 |
159 | Search by flair
157 |
160 | {currentSub?.flairs.map((flair, i) => {
161 | return (
162 |
165 | )
166 | })}
167 |
168 |
105 |
167 | );
168 | }
169 |
170 |
171 |
--------------------------------------------------------------------------------
/src/containers/SubredditPage/SubredditPage.tsx:
--------------------------------------------------------------------------------
1 | // Imports
2 | import React, { MouseEventHandler, useEffect, useState, Dispatch, SetStateAction } from 'react';
3 | // Hook Imports
4 | import { useLocation } from 'react-router-dom';
5 | // Component Imports
6 | import CreatePost from '../../components/CreatePost/CreatePost';
7 | import SubredditHeadline from '../../components/SubredditHeadline/SubredditHeadline';
8 | import Grid from '../Grid/Grid';
9 | import SortBar from '../../components/SortBar/SortBar';
10 | import Imprint from '../../components/Imprint/Imprint';
11 | import SubredditSideBar from '../../components/SubredditSideBar/SubredditSideBar';
12 | // Type Imports
13 | import { Subreddits, Subreddit, Post } from '../../types/types';
14 | // SVG Imports
15 | import { ReactComponent as Pen } from "../../resources/images/pen.svg";
16 | // CSS Imports
17 | import './SubredditPage.scss';
18 |
19 | export interface SubredditPageProps {
20 | randomIntToString: string,
21 | userName: string,
22 | currentSort: string,
23 | subreddits: Subreddits,
24 | topSubreddits: Subreddits,
25 | loginStatus: boolean,
26 | submitPage: boolean,
27 | setLoginModalState: any,
28 | identifyCurrentSub: any,
29 | currentSub: Subreddit | undefined,
30 | currentAnchor: number | undefined,
31 | loginModalState: string,
32 | posts: Post[],
33 | currentPost: Post | undefined,
34 | communityTheme: boolean,
35 | currentEditedComment: string,
36 | communityOptions : boolean,
37 | mainComment: string,
38 | writeComment: any,
39 | writeNestedComment: any,
40 | editComment: any,
41 | editNestedComment: any,
42 | handleSubMembership: React.MouseEventHandler,
43 | expandRule: MouseEventHandler,
44 | selectAnchor: React.MouseEventHandler,
45 | setSort: React.MouseEventHandler;
46 | navToUserProfile: MouseEventHandler,
47 | setIndex: Dispatch
106 | {userArray.findIndex(user => user.username === userName) === -1 &&
152 |
153 |
148 |
151 |
149 | Loading more...
150 |
154 |
166 |
127 | 
128 |
129 |
202 | );
203 | }
204 |
--------------------------------------------------------------------------------
/src/containers/individualPost/individualPost.scss:
--------------------------------------------------------------------------------
1 | // CSS
2 | .post-page {
3 | width: 100vw;
4 | min-height: 100vh;
5 | z-index: 7;
6 | display: flex;
7 | flex-direction: column;
8 | justify-content: center;
9 | align-items: center;
10 |
11 | .pageHeader {
12 | top: 49px;
13 | z-index: 8;
14 | background-color: black;
15 | height: 47px;
16 | box-sizing: border-box;
17 | display: flex;
18 | align-items: center;
19 | gap: 482px;
20 | width: 1280px;
21 | margin-right: 15px;
22 | padding-left: 120px;
23 | position: sticky;
24 |
25 | .leftHeader {
26 | display: flex;
27 |
28 | .postIcon {
29 | height: 17px;
30 | margin-right: 14px;
31 | }
32 |
33 | h3 {
34 | color: #D7DADC;
35 | font-size: 14px;
36 | font-family: "IBM Light";
37 | margin-right: 10px;
38 | }
39 |
40 | .flairBtn {
41 | border: 1px solid transparent;
42 | border-radius: 4px;
43 | color: white;
44 | padding: 1px 5px 2px 4px;
45 | font-size: 12px;
46 | font-family: "IBM Light";
47 | cursor: pointer;
48 | }
49 | }
50 |
51 | .rightHeader {
52 | display: flex;
53 | align-items: center;
54 | gap: 8px;
55 | position: absolute;
56 | cursor: pointer;
57 | right: 120px;
58 |
59 | .cross {
60 | height: 16px;
61 | }
62 |
63 | h3 {
64 | color: #D7DADC;
65 | font-size: 12px;
66 | font-family: "IBM";
67 | }
68 | }
69 | }
70 |
71 | .postContent {
72 | margin-top: 49px;
73 | min-height: 90vh;
74 | width: 1280px;
75 | box-sizing: border-box;
76 | margin-right: 15px;
77 | display: flex;
78 | padding-left: 106px;
79 | padding-top: 31px;
80 | gap: 12px;
81 | }
82 | }
--------------------------------------------------------------------------------
/src/custom.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.svg" {
2 | const content: any;
3 | export default content;
4 | }
5 |
6 |
7 | declare module '*.jpg';
8 | declare module '*.png';
--------------------------------------------------------------------------------
/src/declarations.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.jpg' {
2 | export default `` as string;
3 | }
4 |
5 | declare module '*.png' {
6 | export default `` as string;
7 | }
8 |
9 | declare module '*.PNG' {
10 | export default `` as string;
11 | }
12 |
13 | declare module "*.svg" {
14 | const content: any;
15 | export default content;
16 | }
--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | overflow-x: hidden;
9 | }
10 |
11 | code {
12 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
13 | monospace;
14 | }
15 |
16 | // Font Imports
17 | @font-face {
18 | font-family: 'Benton Sans';
19 | src: url("./resources/fonts/bentonsansregular.otf") format("opentype");
20 | font-display: swap;
21 | }
22 |
23 | @font-face {
24 | font-family: 'Benton Sans Book';
25 | src: url("./resources/fonts/bentonsansbook.otf") format("opentype");
26 | font-display: swap;
27 | }
28 |
29 | @font-face {
30 | font-family: "Noto Sans";
31 | src: url("./resources/fonts/notosans.ttf") format("truetype");
32 | font-display: swap;
33 | }
34 |
35 | @font-face {
36 | font-family: "Noto Sans Regular";
37 | src: url("./resources/fonts/notosans-regular.ttf") format("truetype");
38 | font-display: swap;
39 | }
40 |
41 | @font-face {
42 | font-family: "Noto Sans Bold";
43 | src: url("./resources/fonts/notosans-bold.ttf") format("truetype");
44 | font-display: swap;
45 | }
46 |
47 | @font-face {
48 | font-family: "IBM";
49 | src: url("./resources/fonts/ibmplexsans.ttf") format("truetype");
50 | font-display: swap;
51 | }
52 |
53 | @font-face {
54 | font-family: "IBM Light";
55 | src: url("./resources/fonts/ibmplexsanslight.ttf") format("truetype");
56 | font-display: swap;
57 | }
58 |
59 | @font-face {
60 | font-family: "IBM Regular";
61 | src: url("./resources/fonts/ibmplexsansregular.ttf") format("truetype");
62 | font-display: swap;
63 | }
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import './index.scss';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 | import { BrowserRouter } from 'react-router-dom';
7 |
8 | const root = ReactDOM.createRoot(
9 | document.getElementById('root') as HTMLElement
10 | );
11 | root.render(
12 |
140 |
201 |
141 |
182 |
183 |