status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add Components (#13)

This commit is contained in:
Maria Rushkova 2021-09-27 13:21:23 +02:00 committed by GitHub
parent e6e8217fc2
commit a7cec73346
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 281 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.yarn/cache/process-npm-0.11.10-aeb3b641ae-bfcce49814.zip vendored Normal file
View File

Binary file not shown.

1
packages/react-chat-example/package.json
View File

@ -22,6 +22,7 @@
"assert": "^2.0.0", "assert": "^2.0.0",
"buffer": "^6.0.3", "buffer": "^6.0.3",
"crypto-browserify": "^3.12.0", "crypto-browserify": "^3.12.0",
"process": "^0.11.10",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",

2
packages/react-chat-example/src/index.html
View File

@ -1,10 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<link rel="icon" href="/favicon.ico" />
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1" />
<link rel="icon" type="image/svg+xml" sizes="any" href="../src/assets/images/pollingIcon.svg" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<title>DAppconnect chat</title> <title>DAppconnect chat</title>
</head> </head>

18
packages/react-chat/src/components/Channels.tsx Normal file
View File

@ -0,0 +1,18 @@
import React from "react";
import styled from "styled-components";
import { Theme } from "../styles/themes";
interface ChannelsProps {
theme: Theme;
}
export function Channels({ theme }: ChannelsProps) {
return <ChannelsWrapper theme={theme}>Channels</ChannelsWrapper>;
}
const ChannelsWrapper = styled.div<ChannelsProps>`
width: 33%;
height: 100%;
background-color: ${({ theme }) => theme.sectionBackgroundColor};
`;

30
packages/react-chat/src/components/Chat.tsx Normal file
View File

@ -0,0 +1,30 @@
import React from "react";
import styled from "styled-components";
import { Theme } from "../styles/themes";
import { Channels } from "./Channels";
import { ChatBody } from "./ChatBody";
import { Members } from "./Members";
interface ChatProps {
theme: Theme;
channels?: boolean;
members?: boolean;
}
export function Chat({ theme, channels, members }: ChatProps) {
return (
<ChatWrapper>
{channels && <Channels theme={theme} />}
<ChatBody />
{members && <Members />}
</ChatWrapper>
);
}
const ChatWrapper = styled.div`
width: 100%;
height: 100vh;
display: flex;
`;

12
packages/react-chat/src/components/ChatBody.tsx Normal file
View File

@ -0,0 +1,12 @@
import React from "react";
import styled from "styled-components";
export function ChatBody() {
return <ChatBodyWrapper>Messages</ChatBodyWrapper>;
}
const ChatBodyWrapper = styled.div`
flex: 1;
height: 100%;
background: ${({ theme }) => theme.bodyBackgroundColor};
`;

12
packages/react-chat/src/components/Members.tsx Normal file
View File

@ -0,0 +1,12 @@
import React from "react";
import styled from "styled-components";
export function Members() {
return <MembersWrapper></MembersWrapper>;
}
const MembersWrapper = styled.div`
width: 33%;
height: 100%;
background-color: ${({ theme }) => theme.sectionBackgroundColor};
`;

12
packages/react-chat/src/components/ReactChat.tsx
View File

@ -1,5 +1,15 @@
import React from "react"; import React from "react";
import { GlobalStyle } from "../styles/GlobalStyle";
import { lightTheme } from "../styles/themes";
import { Chat } from "./Chat";
export function ReactChat() { export function ReactChat() {
return <div>This is react chat</div>; return (
<div>
<GlobalStyle />
<Chat channels={true} members={true} theme={lightTheme} />
</div>
);
} }

157
packages/react-chat/src/styles/GlobalStyle.tsx Normal file
View File

@ -0,0 +1,157 @@
import { createGlobalStyle } from "styled-components";
export const GlobalStyle = createGlobalStyle`
* {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
body,
html {
margin: 0;
font-family: 'Inter', sans-serif;
font-weight: normal;
font-size: 15px;
line-height: 22px;
overflow-x: hidden;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
button {
border: none;
background: none;
cursor: pointer;
}
a {
text-decoration: none;
cursor: pointer;
}
`;

1
packages/react-chat/src/styles/styles.ts Normal file
View File

@ -0,0 +1 @@
export const Font = "Inter, sans-serif";

31
packages/react-chat/src/styles/themes.ts Normal file
View File

@ -0,0 +1,31 @@
export type Theme = {
textPrimaryColor: string;
textSecondaryColor: string;
bodyBackgroundColor: string;
sectionBackgroundColor: string;
memberNameColor: string;
guestNameColor: string;
notificationColor: string;
};
export const lightTheme: Theme = {
textPrimaryColor: "#000",
textSecondaryColor: "#939BA1",
bodyBackgroundColor: "#fff",
sectionBackgroundColor: "#F6F8FA",
memberNameColor: "#4360DF",
guestNameColor: "#887AF9",
notificationColor: "#4360DF",
};
export const darkTheme: Theme = {
textPrimaryColor: "#fff",
textSecondaryColor: "#909090",
bodyBackgroundColor: "#000",
sectionBackgroundColor: "#252525",
memberNameColor: "#88B0FF",
guestNameColor: "#887AF9",
notificationColor: "#887AF9",
};
export default { lightTheme, darkTheme };

8
yarn.lock
View File

@ -241,6 +241,7 @@ __metadata:
mocha: ^9.0.3 mocha: ^9.0.3
npm-run-all: ^4.1.5 npm-run-all: ^4.1.5
prettier: ^2.3.2 prettier: ^2.3.2
process: ^0.11.10
react: ^17.0.2 react: ^17.0.2
react-dom: ^17.0.2 react-dom: ^17.0.2
react-router-dom: ^5.2.0 react-router-dom: ^5.2.0
@ -8861,6 +8862,13 @@ fsevents@~2.3.2:
languageName: node languageName: node
linkType: hard linkType: hard
"process@npm:^0.11.10":
version: 0.11.10
resolution: "process@npm:0.11.10"
checksum: bfcce49814f7d172a6e6a14d5fa3ac92cc3d0c3b9feb1279774708a719e19acd673995226351a082a9ae99978254e320ccda4240ddc474ba31a76c79491ca7c3
languageName: node
linkType: hard
"progress@npm:^2.0.0": "progress@npm:^2.0.0":
version: 2.0.3 version: 2.0.3
resolution: "progress@npm:2.0.3" resolution: "progress@npm:2.0.3"