= ({ nickname, isBot, avatar }) => {
20 | return (
21 |
22 | {avatar ? 
: ''}
23 |
24 | {nickname}
25 |
26 | {isBot && Bot}
27 |
28 | );
29 | };
30 |
31 | const UserList: React.FC = () => {
32 | return (
33 |
34 | Online - 4
35 |
36 |
37 |
38 |
39 |
40 | Offline - 17
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 | );
60 | };
61 |
62 | export default UserList;
63 |
--------------------------------------------------------------------------------
/src/assets/svg/Pride.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/CSS.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
4 |
5 |
6 |
7 |
8 |
9 | [](http://badges.mit-license.org)
10 | 
11 | 
12 |
13 |
14 |
15 | ##
16 |
17 |
18 | Project |
19 | Techs |
20 | Installation |
21 | Start |
22 | Contributing |
23 | License
24 |
25 |
26 |
27 | ##
28 |
29 |
30 | 
31 |
32 |
33 |
34 |
35 | ## Project :star2:
36 |
37 | This project was part of an UI Clone challenge, the idea was to replicate (partially) the Discord's channels page using ReactJS, MUI and styled-components.
38 |
39 | The intent of this project was to work with more complex grid attributes of CSS.
40 |
41 | Deployed [here](https://discord.ui-clone.ronne.dev).
42 |
43 |
44 |
45 | ## Techs :rocket:
46 |
47 | - [x] [ReactJS](https://reactjs.org);
48 | - [x] [TypeScript](https://www.typescriptlang.org/);
49 | - [x] [Styled Components](https://styled-components.com/).
50 |
51 |
52 |
53 | ## Installation :wrench:
54 |
55 | First you need to clone the project using `git clone https://github.com/leoronne/discord-ui-clone.git`.
56 |
57 | You can install the application using `npm install` or `yarn install` on the root dir.
58 |
59 |
60 |
61 | ## Start :on:
62 |
63 | To start the application interface just run `npm start` or `yarn start` on the root dir.
64 |
65 |
66 |
67 |
68 | ## Contributing 🤔
69 |
70 | Please read [CONTRIBUTING](https://github.com/leoronne/discord-ui-clone/blob/master/CONTRIBUTING.md) for details on code of conduct, and the process for submitting pull requests to the project.
71 |
72 |
73 |
74 | ## License :memo:
75 |
76 | [](http://badges.mit-license.org)
77 |
78 | - **[MIT license](https://github.com/leoronne/discord-ui-clone/blob/master/LICENSE)**;
79 | - Copyright 2020 © Leonardo Ronne.
80 |
81 | ##
82 |
--------------------------------------------------------------------------------
/src/components/UserInfo/styles.ts:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { Mic, MicOff, Settings } from 'styled-icons/material';
3 | import { VolumeFull, VolumeMute } from 'styled-icons/boxicons-regular';
4 |
5 | export const Container = styled.div`
6 | grid-area: UI;
7 | display: flex;
8 | align-items: center;
9 | justify-content: space-between;
10 | padding: 10px;
11 | background-color: var(--quaternary);
12 | box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px;
13 |
14 | @media (max-width: 598px) {
15 | display: none;
16 | }
17 | `;
18 |
19 | export const Profile = styled.div`
20 | display: flex;
21 | align-items: center;
22 | `;
23 |
24 | export const Avatar = styled.div`
25 | width: 32px;
26 | height: 32px;
27 | border-radius: 50%;
28 | background-color: var(--gray);
29 |
30 | .user-avatar {
31 | width: 32px;
32 | border-radius: 50%;
33 | }
34 | `;
35 |
36 | export const UserData = styled.div`
37 | margin-left: 8px;
38 | display: flex;
39 | flex-direction: column;
40 | > strong {
41 | color: var(--white);
42 | font-size: 13px;
43 | display: block;
44 | }
45 | > span {
46 | color: var(--gray);
47 | font-size: 13px;
48 | }
49 | `;
50 |
51 | export const Icons = styled.div`
52 | display: flex;
53 | align-items: center;
54 | margin-top: -5px;
55 | > div:not(:first-child) {
56 | margin-left: 7px;
57 | }
58 | `;
59 |
60 | export const Icon = styled.div`
61 | width: 20px;
62 | height: 20px;
63 | cursor: pointer;
64 | `;
65 |
66 | export const MicOffIcon = styled(MicOff)`
67 | width: 20px;
68 | height: 20px;
69 | color: var(--white);
70 | opacity: 0.7;
71 | cursor: pointer;
72 | transition: opacity 0.2s;
73 | &:hover {
74 | opacity: 1;
75 | }
76 | `;
77 |
78 | export const MicIcon = styled(Mic)`
79 | width: 20px;
80 | height: 20px;
81 | color: var(--white);
82 | opacity: 0.7;
83 | cursor: pointer;
84 | transition: opacity 0.2s;
85 | &:hover {
86 | opacity: 1;
87 | }
88 | `;
89 |
90 | export const VolumeIcon = styled(VolumeFull)`
91 | width: 20px;
92 | height: 20px;
93 | color: var(--white);
94 | opacity: 0.7;
95 | cursor: pointer;
96 | transition: opacity 0.2s;
97 | &:hover {
98 | opacity: 1;
99 | }
100 | `;
101 |
102 | export const VolumeOffIcon = styled(VolumeMute)`
103 | width: 20px;
104 | height: 20px;
105 | color: var(--white);
106 | opacity: 0.7;
107 | cursor: pointer;
108 | transition: opacity 0.2s;
109 | &:hover {
110 | opacity: 1;
111 | }
112 | `;
113 |
114 | export const SettingsIcon = styled(Settings)`
115 | width: 20px;
116 | height: 20px;
117 | color: var(--white);
118 | opacity: 0.7;
119 | cursor: pointer;
120 | transition: opacity 0.2s;
121 | &:hover {
122 | opacity: 1;
123 | }
124 | `;
125 |
--------------------------------------------------------------------------------
/src/assets/svg/DC.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
60 |
--------------------------------------------------------------------------------
/src/components/ChannelData/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useEffect } from 'react';
2 |
3 | import leoronne from '~/assets/img/avatar.jpg';
4 | import cyhi from '~/assets/img/cyhi.jpg';
5 | import user2 from '~/assets/img/user2.jpg';
6 | import user4 from '~/assets/img/user4.jpg';
7 | import user5 from '~/assets/img/user5.jpg';
8 |
9 | import ChannelMessage, { Mention } from '../ChannelMessage';
10 |
11 | import { Container, Messages, InputWrapper, Input, InputIcon } from './styles';
12 |
13 | const ChannelData: React.FC = () => {
14 | const messagesRef = useRef() as React.MutableRefObject;
15 | const users = ['Prynce', 'Nyarth', 'John Doe', 'Maria Ciclano', 'H. Montanha', 'James', 'Enzo João', 'Valentina de Jesus', 'Enzo José', 'Valentina Maria', 'Brunno Enzo', 'Lara', 'Lohaine', 'Lika'];
16 | const messages = ['fine, tnx n u?', 'heyy, whats up?', 'hey, what r u up 2?', 'whats gooooooood?!', "good, just coding some rocketseat's challenges"];
17 |
18 | useEffect(() => {
19 | const div = messagesRef.current;
20 |
21 | if (div) {
22 | div.scrollTop = div.scrollHeight;
23 | }
24 | }, [messagesRef]);
25 |
26 | return (
27 |
28 | Welcome to the Open Chat channel!} hasMention isBot avatar={cyhi} />
29 |
30 |
31 |
32 |
37 | @leoronne
38 | {' '}
39 | heyyyy
40 |
41 | )}
42 | hasMention
43 | avatar={user2}
44 | />
45 | {Array.from(Array(5).keys()).map((n) => (
46 |
47 | ))}
48 |
49 |
55 | @leoronne
56 | {' '}
57 | {messages[Math.floor(Math.random() * messages.length)]}
58 |
59 | )}
60 | />
61 | {Array.from(Array(5).keys()).map((n) => (
62 |
63 | ))}
64 |
70 | @leoronne
71 | {' '}
72 | {messages[Math.floor(Math.random() * messages.length)]}
73 |
74 | )}
75 | />
76 | There are currently 4 online users and 17 offline!} isBot avatar={user5} />
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 | );
85 | };
86 |
87 | export default ChannelData;
88 |
--------------------------------------------------------------------------------
/src/components/ServerButton/styles.ts:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | import { Props } from '.';
4 |
5 | export const Container = styled.div`
6 | width: 48px;
7 | height: 48px;
8 | position: relative;
9 | margin-bottom: 10px;
10 |
11 | @media (max-width: 598px) {
12 | width: 35px;
13 | height: 35px;
14 | }
15 | `;
16 |
17 | export const Button = styled.button`
18 | display: flex;
19 | align-items: center;
20 | justify-content: center;
21 | flex-shrink: 0;
22 | width: 48px;
23 | height: 48px;
24 | border-radius: 50%;
25 | margin-bottom: 15px;
26 | background-color: ${(props) => (props.color ? props.color : 'var(--primary)')};
27 | /* ${(props) => (props.isHome ? 'var(--rocketseat)' : 'var(--primary)')}; */
28 | position: relative;
29 | cursor: pointer;
30 | > img {
31 | width: 30px;
32 | height: 30px;
33 | }
34 | &::before {
35 | width: 9px;
36 | height: 9px;
37 | position: absolute;
38 | left: -17px;
39 | top: calc(50% - 4.5px);
40 | background-color: var(--white);
41 | border-radius: 50%;
42 | content: '';
43 | display: ${(props) => (props.hasNotifications ? 'inline' : 'none')};
44 | }
45 | &::after {
46 | background-color: var(--notification);
47 | width: auto;
48 | height: 16px;
49 | padding: 0 4px;
50 | position: absolute;
51 | bottom: -4px;
52 | right: -4px;
53 | border-radius: 12px;
54 | border: 4px solid var(--quaternary);
55 | text-align: right;
56 | font-size: 13px;
57 | font-weight: bold;
58 | color: var(--white);
59 | content: '${(props) => props.mentions && props.mentions}';
60 | display: ${(props) => (props.mentions && props.mentions > 0 ? 'inline' : 'none')};
61 | }
62 | transition: border-radius 0.2s, background-color 0.2s;
63 | &.active,
64 | &:hover {
65 | border-radius: 16px;
66 | background-color: ${(props) => (props.color ? props.color : 'var(--discord)')};
67 | }
68 | &:hover ~ .tooltiptext {
69 | visibility: visible;
70 | opacity: 1;
71 | }
72 |
73 | @media (max-width: 598px) {
74 | width: 30px;
75 | height: 30px;
76 | margin-bottom: 10px;
77 | &::before {
78 | width: 5px;
79 | height: 5px;
80 | left: -13px;
81 | }
82 | > img {
83 | width: 25px;
84 | height: 25px;
85 | }
86 | &::after {
87 | height: 10px;
88 | font-size: 7px;
89 | }
90 | }
91 | `;
92 |
93 | export const Tooltip = styled.div`
94 | position: relative;
95 | display: flex;
96 | align-items: center;
97 | justify-content: center;
98 | width: 20px;
99 |
100 | .tooltiptext {
101 | /* visibility: hidden; */
102 | text-align: center !important;
103 | font-size: 16px;
104 | padding: 5px;
105 | width: 120px;
106 | background-color: var(--ifm-scrollbar-hover);
107 | color: var(--white);
108 | text-align: center;
109 | border-radius: 6px;
110 | position: absolute;
111 | z-index: 1;
112 | bottom: 125%;
113 | left: 50%;
114 | margin-left: -60px;
115 | /* opacity: 0; */
116 | transition: opacity 0.3s;
117 | display: initial;
118 | }
119 |
120 | .tooltiptext::after {
121 | content: '';
122 | position: absolute;
123 | top: 100%;
124 | left: 50%;
125 | margin-left: -5px;
126 | border-width: 5px;
127 | border-style: solid;
128 | border-color: var(--ifm-scrollbar-hover) transparent transparent transparent;
129 | }
130 |
131 | .tooltip:hover .tooltiptext {
132 | visibility: visible;
133 | opacity: 1;
134 | }
135 |
136 | @media (max-width: 598px) {
137 | width: 15px;
138 | }
139 | `;
140 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | When contributing to this repository, please first discuss the change you wish to make via issue,
4 | email, or any other method with the owners of this repository before making a change.
5 |
6 | Please note we have a code of conduct, please follow it in all your interactions with the project.
7 |
8 | ## Pull Request Process
9 |
10 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a
11 | build.
12 | 2. Update the README.md with details of changes to the interface, this includes new environment
13 | variables, exposed ports, useful file locations and container parameters.
14 | 3. Increase the version numbers in any examples files and the README.md to the new version that this
15 | Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
16 | 4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you
17 | do not have permission to do that, you may request the second reviewer to merge it for you.
18 |
19 | ## Code of Conduct
20 |
21 | ### Our Pledge
22 |
23 | In the interest of fostering an open and welcoming environment, we as
24 | contributors and maintainers pledge to making participation in our project and
25 | our community a harassment-free experience for everyone, regardless of age, body
26 | size, disability, ethnicity, gender identity and expression, level of experience,
27 | nationality, personal appearance, race, religion, or sexual identity and
28 | orientation.
29 |
30 | ### Our Standards
31 |
32 | Examples of behavior that contributes to creating a positive environment
33 | include:
34 |
35 | * Using welcoming and inclusive language
36 | * Being respectful of differing viewpoints and experiences
37 | * Gracefully accepting constructive criticism
38 | * Focusing on what is best for the community
39 | * Showing empathy towards other community members
40 |
41 | Examples of unacceptable behavior by participants include:
42 |
43 | * The use of sexualized language or imagery and unwelcome sexual attention or
44 | advances
45 | * Trolling, insulting/derogatory comments, and personal or political attacks
46 | * Public or private harassment
47 | * Publishing others' private information, such as a physical or electronic
48 | address, without explicit permission
49 | * Other conduct which could reasonably be considered inappropriate in a
50 | professional setting
51 |
52 | ### Our Responsibilities
53 |
54 | Project maintainers are responsible for clarifying the standards of acceptable
55 | behavior and are expected to take appropriate and fair corrective action in
56 | response to any instances of unacceptable behavior.
57 |
58 | Project maintainers have the right and responsibility to remove, edit, or
59 | reject comments, commits, code, wiki edits, issues, and other contributions
60 | that are not aligned to this Code of Conduct, or to ban temporarily or
61 | permanently any contributor for other behaviors that they deem inappropriate,
62 | threatening, offensive, or harmful.
63 |
64 | ### Scope
65 |
66 | This Code of Conduct applies both within project spaces and in public spaces
67 | when an individual is representing the project or its community. Examples of
68 | representing a project or community include using an official project e-mail
69 | address, posting via an official social media account, or acting as an appointed
70 | representative at an online or offline event. Representation of a project may be
71 | further defined and clarified by project maintainers.
72 |
73 | ### Enforcement
74 |
75 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
76 | reported by contacting the project team at . All
77 | complaints will be reviewed and investigated and will result in a response that
78 | is deemed necessary and appropriate to the circumstances. The project team is
79 | obligated to maintain confidentiality with regard to the reporter of an incident.
80 | Further details of specific enforcement policies may be posted separately.
81 |
82 | Project maintainers who do not follow or enforce the Code of Conduct in good
83 | faith may face temporary or permanent repercussions as determined by other
84 | members of the project's leadership.
85 |
--------------------------------------------------------------------------------
/src/assets/svg/RocketSeat.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/assets/svg/Mario.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
98 |
--------------------------------------------------------------------------------
/src/assets/svg/Code.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
95 |
--------------------------------------------------------------------------------
/src/assets/svg/Pokémon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
146 |
--------------------------------------------------------------------------------