Skip to content

Commit e93643c

Browse files
HoonBaekHoonBaek
committed
prepare SendbirdProvider for the new strcture
1 parent c8852a4 commit e93643c

File tree

8 files changed

+1073
-0
lines changed

8 files changed

+1073
-0
lines changed

‎src/lib/Sendbird/README.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# SendbirdProvider
2+
3+
## How to use SendbirdProvider?
4+
5+
#### Import
6+
Import `SendbirdProvider` and `useSendbirdStateContext`.
7+
```tsx
8+
import { SendbirdProvider, useSendbirdStateContext } from '@sendbird/uikit-react';
9+
```
10+
11+
#### Example
12+
```tsx
13+
const MyComponent = () => {
14+
const context = useSendbirdStateContext();
15+
// Use the context
16+
return (<div>{/* Fill components */}</div>);
17+
};
18+
const MyApp = () => {
19+
return (
20+
<SendbirdProvider>
21+
<MyComponent />
22+
</SendbirdProvider>
23+
);
24+
};
25+
```

‎src/lib/Sendbird/__experimental__typography.scss‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
// We are tyring to move font size into "rem" units for accesibility
2+
// todo: make this default in @sendbird/uikit@v4
3+
4+
// assuming <html>@fontsize = 16px
5+
// about rem https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/#rems
6+
.sendbird-experimental__rem__units {
7+
// typography
8+
.sendbird-label--h-1 {
9+
font-size: 1.25rem;
10+
}
11+
12+
.sendbird-label--h-2 {
13+
font-size: 1.125rem;
14+
}
15+
16+
.sendbird-label--subtitle-1 {
17+
font-size: 1rem;
18+
}
19+
20+
.sendbird-label--subtitle-2 {
21+
font-size: .875rem;
22+
}
23+
24+
.sendbird-label--body-1 {
25+
font-size: .875rem;
26+
}
27+
28+
.sendbird-label--body-2 {
29+
font-size: .75rem;
30+
}
31+
32+
.sendbird-label--button-1 {
33+
font-size: .875rem;
34+
}
35+
36+
.sendbird-label--button-2 {
37+
font-size: .875rem;
38+
}
39+
40+
.sendbird-label--caption-1 {
41+
font-size: .875rem;
42+
}
43+
44+
.sendbird-label--caption-2 {
45+
font-size: .75rem;
46+
}
47+
48+
.sendbird-label--caption-3 {
49+
font-size: .75rem;
50+
}
51+
52+
// message search
53+
.sendbird-message-search-pannel {
54+
.sendbird-message-search-pannel__input__container__input-area {
55+
font-size: .875rem;
56+
}
57+
}
58+
59+
// checkbox
60+
.sendbird-checkbox {
61+
font-size: 1.375rem;
62+
}
63+
64+
.sendbird-mention-user-label {
65+
font-size: .875rem;
66+
&.purple {
67+
font-size: 1.125rem;
68+
}
69+
}
70+
71+
// message input
72+
.sendbird-message-input {
73+
.sendbird-message-input--textarea,
74+
.sendbird-message-input--placeholder {
75+
font-size: .875rem;
76+
}
77+
}
78+
79+
// input
80+
.sendbird-input {
81+
.sendbird-input__input,
82+
.sendbird-input__placeholder {
83+
font-size: .875rem;
84+
}
85+
}
86+
87+
// tooltip
88+
.sendbird-tooltip {
89+
&__text {
90+
font-size: .75rem;
91+
}
92+
}
93+
94+
// quote-message
95+
.sendbird-quote-message {
96+
.sendbird-quote-message__replied-to {
97+
.sendbird-quote-message__replied-to__text {
98+
font-size: .75rem;
99+
}
100+
}
101+
.sendbird-quote-message__replied-message {
102+
.sendbird-quote-message__replied-message__text-message {
103+
font-size: .75rem;
104+
}
105+
}
106+
.sendbird-quote-message__replied-message__file-message {
107+
font-size: .75rem;
108+
}
109+
}
110+
}

0 commit comments

Comments
 (0)