Skip to content

Commit 3411ec3

Browse files
Bhupesh-mfsiBhupesh-mfsi
authored
NPM library UI issues fixed (#751)
1 parent 6e80252 commit 3411ec3

File tree

18 files changed

+312
-73
lines changed

18 files changed

+312
-73
lines changed

‎packages/messenger-demo/src/App.tsx

+66-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,31 @@ import 'bootstrap/dist/js/bootstrap.bundle.min.js';
33
//@ts-ignore
44
import { DM3 } from '@dm3-org/dm3-messenger-widget';
55

6+
interface ColoredComponentProps {
7+
color: string;
8+
children: React.ReactNode;
9+
}
10+
11+
const ColoredComponent: React.FC<ColoredComponentProps> = ({
12+
color,
13+
children,
14+
}) => {
15+
return (
16+
<div
17+
style={{
18+
backgroundColor: color,
19+
color: 'white',
20+
height: '100%',
21+
display: 'flex',
22+
alignItems: 'center',
23+
justifyContent: 'center',
24+
}}
25+
>
26+
{children}
27+
</div>
28+
);
29+
};
30+
631
function App() {
732
const props: any = {
833
defaultContact: 'help.dm3.eth',
@@ -18,8 +43,48 @@ function App() {
1843

1944
return (
2045
<div className="background p-1">
21-
<div className="demo-container">
46+
{/* Widget in a container which has no height, so need to provide in css */}
47+
{/* <div className="demo-container">
2248
<DM3 {...props} />
49+
</div> */}
50+
51+
{/* Widget in a container which has some height already */}
52+
<div
53+
style={{
54+
display: 'flex',
55+
flexDirection: 'column',
56+
height: '100vh',
57+
overflow: 'hidden',
58+
}}
59+
>
60+
<div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
61+
<div style={{ flex: 1, overflow: 'auto' }}>
62+
<ColoredComponent color="yellow">
63+
Gelbe Demo-Komponente
64+
</ColoredComponent>
65+
</div>
66+
67+
<div
68+
className="demo-container"
69+
style={{ flex: 1, overflow: 'auto' }}
70+
>
71+
<DM3 {...props} />
72+
</div>
73+
</div>
74+
75+
<div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
76+
<div style={{ flex: 1, overflow: 'auto' }}>
77+
<ColoredComponent color="blue">
78+
Blaue Demo-Komponente
79+
</ColoredComponent>
80+
</div>
81+
82+
<div style={{ flex: 1, overflow: 'auto' }}>
83+
<ColoredComponent color="green">
84+
Grüne Demo-Komponente
85+
</ColoredComponent>
86+
</div>
87+
</div>
2388
</div>
2489
</div>
2590
);

‎packages/messenger-demo/src/index.css

+10-11
Original file line numberDiff line numberDiff line change
@@ -63,16 +63,15 @@ code {
6363
}
6464

6565
.demo-container {
66-
width: calc(100% - 40px);
67-
height: calc(100% - 70px - 40px);
68-
background-color: #000000;
69-
border: 1px solid #222222;
7066
border-radius: 25px;
71-
position: absolute;
72-
top: 75px;
73-
left: 20px;
74-
transform: translate(0, 0);
75-
z-index: 10;
76-
box-shadow: 6px 6px 20px 0 rgba(05, 010, 020, 1);
7767
overflow: hidden;
78-
}
68+
/* height: 98vh;
69+
width: 98vw; */
70+
}
71+
72+
/* .demo-container {
73+
border-radius: 25px; Optional property
74+
overflow: hidden; Optional property only if wanted set border radius
75+
height: 98vh; If the container has no height, then it is mandatory to set
76+
width: 98vw; If the container has no width, then it is mandatory to set
77+
} */

‎packages/messenger-widget/src/components/AddConversation/AddConversation.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
width: fit-content;
66
top: 15%;
77
position: relative;
8-
height: auto;
8+
top: 50%;
9+
transform: translateY(-50%);
910
}
1011

1112
.conversation-description {

‎packages/messenger-widget/src/components/ContactInfo/ContactInfo.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export function ContactInfo() {
4545
}, []);
4646

4747
return (
48-
<>
48+
<div className="contact-info-container-type h-100">
4949
<div
5050
className="d-flex align-items-center justify-content-between profile-heading
5151
text-primary-color font-weight-500 pt-4 highlight-chat-border"
@@ -137,6 +137,6 @@ export function ContactInfo() {
137137
</div>
138138
</div>
139139
</div>
140-
</>
140+
</div>
141141
);
142142
}

‎packages/messenger-widget/src/components/Contacts/Contacts.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.contacts-scroller {
2-
height: 100%;
2+
height: calc(100% - 65px) !important;
33
padding-left: 1rem;
44
margin-top: 2px;
55
}

‎packages/messenger-widget/src/components/Loader/Loader.css

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
11
/* Absolute Center Spinner */
22
.loading {
3-
position: fixed;
3+
position: absolute;
44
z-index: 999;
5-
height: 2em;
6-
width: 2em;
5+
height: 100%;
6+
width: 100%;
77
overflow: show;
88
margin: auto;
99
top: 0;
1010
left: 0;
1111
bottom: 0;
1212
right: 0;
13-
width: auto;
1413
display: none !important;
1514
}
1615

1716
/* Transparent Overlay */
1817
.loading:before {
1918
content: '';
2019
display: block;
21-
position: fixed;
20+
position: absolute;
2221
top: 0;
2322
left: 0;
2423
width: 100%;
@@ -30,6 +29,7 @@
3029
);
3130
}
3231

32+
3333
.loader-content {
3434
color: var(--text-primary-color);
3535
position: absolute;
@@ -38,4 +38,4 @@
3838

3939
.loader-img {
4040
height: 3rem;
41-
}
41+
}

‎packages/messenger-widget/src/components/Loader/Loader.tsx

+3-11
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,9 @@ export function Loader() {
1717
const { state } = useContext(GlobalContext);
1818

1919
return (
20-
<div>
21-
<div className="loading d-flex justify-content-center align-items-center">
22-
<img
23-
className="rotating loader-img"
24-
src={loader}
25-
alt="loader"
26-
/>
27-
<div className="loader-content">
28-
{state.modal.loaderContent}
29-
</div>
30-
</div>
20+
<div className="loading d-flex justify-content-center align-items-center">
21+
<img className="rotating loader-img" src={loader} alt="loader" />
22+
<div className="loader-content">{state.modal.loaderContent}</div>
3123
</div>
3224
);
3325
}

‎packages/messenger-widget/src/components/Preferences/Preferences.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
border: none;
44
position: relative;
55
width: 80%;
6-
height: 95%;
6+
height: 90% !important;
77
top: 50%;
88
transform: translateY(-50%);
99
}

‎packages/messenger-widget/src/components/Profile/Profile.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export function Profile() {
5353
}, []);
5454

5555
return (
56-
<>
56+
<div className="profile-container-type h-100">
5757
<div
5858
className="d-flex align-items-center justify-content-between
5959
profile-heading text-primary-color font-weight-500"
@@ -109,6 +109,6 @@ export function Profile() {
109109
</div>
110110
</div>
111111
</div>
112-
</>
112+
</div>
113113
);
114114
}

‎packages/messenger-widget/src/components/SignIn/SignIn.css

+54-22
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@
22
background-size: cover;
33
background-repeat: no-repeat;
44
background-position: center;
5-
height: 100%;
5+
height: auto;
66
}
77

88
.content-data-container {
9-
padding: 1rem 8.25rem 1rem 8.25rem;
9+
padding: 0rem 4rem 0rem 4rem;
10+
flex-wrap: nowrap !important;
11+
justify-content: space-evenly !important;
1012
}
1113

1214
.details {
@@ -37,7 +39,10 @@
3739
}
3840

3941
.content-data {
40-
margin-top: 3rem;
42+
justify-content: center;
43+
display: flex;
44+
align-items: flex-start;
45+
flex-direction: column;
4146
}
4247

4348
.rainbow-connect-btn {
@@ -64,38 +69,65 @@
6469
visibility: hidden;
6570
}
6671

67-
@media only screen and (max-width: 1100px) {
68-
.content-data-container {
69-
padding: 1rem;
72+
@media only screen and (max-width: 767px) {
73+
.home-image-container {
74+
height: 0% !important;
7075
}
7176
}
7277

73-
@media only screen and (min-width: 1101px) and (max-width: 1250px) {
74-
.content-data-container {
75-
padding: 2rem;
78+
/* =================== Container CSS =================== */
79+
80+
.signin-container-type {
81+
container-type: size;
82+
container-name: signinContainer;
83+
}
84+
85+
@container signinContainer (max-height: 450px) and (height > 0px) {
86+
.tx-content {
87+
display: none;
88+
}
89+
.keys-content {
90+
display: none;
91+
}
92+
.signin-btn {
93+
font-size: 1rem !important;
94+
padding: 0.5rem !important;
95+
}
96+
.loading-btn {
97+
height: 18px !important;
7698
}
7799
}
78100

79-
@media only screen and (min-width: 1450px) {
80-
.content-data {
81-
margin-top: 6rem !important;
101+
@container signinContainer (max-width: 640px) {
102+
.rainbow-connect-btn {
103+
display: none !important;
82104
}
83105
}
84106

85-
@media only screen and (max-width: 1000px) {
86-
.content-data {
87-
margin-top: 1rem !important;
107+
@container signinContainer (max-height: 325px) and (height > 0px) {
108+
.rainbow-connect-btn {
109+
display: none !important;
88110
}
89111
}
90112

91-
@media only screen and (max-height: 700px) {
92-
.content-data {
93-
margin-top: 1rem !important;
113+
@container signinContainer (max-width: 735px) {
114+
.signin-btn {
115+
font-size: 1rem !important;
116+
padding: 0.5rem !important;
117+
}
118+
.loading-btn {
119+
height: 18px !important;
94120
}
95121
}
96122

97-
@media only screen and (max-width: 767px) {
98-
.home-image-container {
99-
height: 0% !important;
123+
@container signinContainer (max-width: 635px) {
124+
.content-data-container {
125+
padding: 0rem 2rem 0rem 2rem !important;
100126
}
101-
}
127+
}
128+
129+
@container signinContainer (min-width: 1500px) {
130+
.content-data-container {
131+
padding: 0rem 8rem 0rem 8rem !important;
132+
}
133+
}

‎packages/messenger-widget/src/components/SignIn/SignIn.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export function SignIn(props: SignInProps) {
3939
};
4040

4141
return (
42-
<>
42+
<div className="signin-container-type h-100">
4343
<div className="row m-0 p-0 h-100">
4444
<div
4545
style={{
@@ -67,7 +67,7 @@ export function SignIn(props: SignInProps) {
6767
<DM3Logo />
6868
</div>
6969

70-
<div className="mt-4">
70+
<div className="mt-4 w-100">
7171
<div className="encrypted-details font-weight-800 font-size-12 text-primary-color">
7272
web3 messaging.
7373
<p className="encrypted-details font-weight-400 font-size-12 text-primary-color">
@@ -106,17 +106,17 @@ export function SignIn(props: SignInProps) {
106106
sign in with a signature. No need for a username
107107
or password.
108108
</p>
109-
<p className="text-primary-color details font-size-12">
109+
<p className="keys-content text-primary-color details font-size-12">
110110
Keys for secure and private communication are
111111
derived from this signature.
112112
</p>
113-
<p className="text-primary-color details font-size-12">
113+
<p className="tx-content text-primary-color details font-size-12">
114114
No paid transaction will be executed.
115115
</p>
116116
</div>
117117
</div>
118118
</div>
119119
</div>
120-
</>
120+
</div>
121121
);
122122
}

0 commit comments

Comments
 (0)