Skip to content

Commit 3e58f2c

Browse files
Bhupesh-mfsiBhupesh-mfsi
committed
fixed minor UI issues in profile dialog
1 parent 0af8fff commit 3e58f2c

File tree

5 files changed

+78
-39
lines changed

5 files changed

+78
-39
lines changed

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

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,19 @@ input::placeholder {
225225
}
226226
.ens-components-container{
227227
padding: 1rem;
228-
}
228+
}
229+
.profile-action-btns {
230+
margin-top: 1rem !important;
231+
}
232+
.dm3-name-container {
233+
width: 100%;
234+
}
235+
}
236+
237+
@media only screen and (max-width: 950px) {
238+
#ens-name{
239+
width: 90% !important;
240+
}
229241
}
230242

231243
@media only screen and (max-width: 800px) {
@@ -329,4 +341,9 @@ input::placeholder {
329341
.del-icon{
330342
height: 1rem;
331343
}
344+
345+
.profile-input{
346+
width: 100% !important;
347+
}
348+
332349
}

‎packages/messenger-widget/src/components/ConfigureProfile/chain/MobileView.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,15 @@ export const MobileView = ({
9898
/>
9999
</form>
100100
</div>
101-
<div className="mt-2">
101+
102+
<div className="mt-3 dm3-name-content">
103+
<div className="small-text font-weight-300 grey-text">
104+
{label}
105+
</div>
106+
<div className="small-text font-weight-700">{note}</div>
107+
</div>
108+
109+
<div className="mt-3 mb-2">
102110
<button
103111
className={BUTTON_CLASS.concat(
104112
' ',
@@ -134,12 +142,6 @@ export const MobileView = ({
134142
Publish Profile
135143
</button>
136144
</div>
137-
<div className="mt-3 dm3-name-content">
138-
<div className="small-text font-weight-300 grey-text">
139-
{label}
140-
</div>
141-
<div className="small-text font-weight-700">{note}</div>
142-
</div>
143145
</div>
144146
</div>
145147
</>

‎packages/messenger-widget/src/components/ConfigureProfile/chain/NormalView.tsx‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -58,12 +58,20 @@ export const NormalView = ({
5858
<>
5959
<div className="d-flex ps-4 align-items-baseline">
6060
<div className="dm3-name-container">
61-
<div
62-
className={
63-
'conversation-error ms-0 mb-2 font-weight-400 show-error'
64-
}
65-
>
66-
{showError === NAME_TYPE.ENS_NAME && errorMsg}
61+
<div className="d-flex align-items-center">
62+
<p
63+
className="m-0
64+
font-size-14 font-weight-500 line-height-24 title-content invisible"
65+
>
66+
{propertyName}
67+
</p>
68+
<div
69+
className={
70+
'conversation-error ms-0 mb-2 font-weight-400 show-error'
71+
}
72+
>
73+
{showError === NAME_TYPE.ENS_NAME && errorMsg}
74+
</div>
6775
</div>
6876
<div className="d-flex align-items-center">
6977
<p
@@ -83,6 +91,7 @@ export const NormalView = ({
8391
>
8492
<input
8593
data-testid="ens-name"
94+
id="ens-name"
8695
className={PROFILE_INPUT_FIELD_CLASS.concat(
8796
' ',
8897
showError === NAME_TYPE.ENS_NAME
@@ -99,7 +108,7 @@ export const NormalView = ({
99108
</form>
100109
</div>
101110

102-
<div className="mt-5 dm3-name-content">
111+
<div className="mt-4 pt-1 dm3-name-content">
103112
<div className="small-text font-weight-300">
104113
{label}
105114
</div>
@@ -108,7 +117,7 @@ export const NormalView = ({
108117
</div>
109118
</div>
110119

111-
<div className="d-flex justify-content-end me-3 mb-3">
120+
<div className="d-flex justify-content-end me-3 mb-3 mt-4">
112121
<button
113122
className={BUTTON_CLASS.concat(
114123
' ',

‎packages/messenger-widget/src/components/ConfigureProfile/dm3Names/MobileView.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,21 @@ export const MobileView = ({
8888
</p>
8989
</form>
9090
</div>
91-
<div className="mt-2">
91+
92+
<div className="mt-3 dm3-name-content">
93+
<div className="small-text font-weight-300 grey-text">
94+
You can get a DM3 name for free. Please check if your
95+
desired name is available. DM3 names are created and
96+
managed on Layer2 (e.g. Optimism). Small transaction
97+
costs will apply for setting the profile and
98+
administration.
99+
</div>
100+
<div className="small-text font-weight-700">
101+
You can receive messages sent to your full DM3 username.
102+
</div>
103+
</div>
104+
105+
<div className="mt-3">
92106
<button
93107
className={BUTTON_CLASS.concat(
94108
' ',
@@ -126,18 +140,6 @@ export const MobileView = ({
126140
Claim & Publish
127141
</button>
128142
</div>
129-
<div className="mt-3 dm3-name-content">
130-
<div className="small-text font-weight-300 grey-text">
131-
You can get a DM3 name for free. Please check if your
132-
desired name is available. DM3 names are created and
133-
managed on Layer2 (e.g. Optimism). Small transaction
134-
costs will apply for setting the profile and
135-
administration.
136-
</div>
137-
<div className="small-text font-weight-700">
138-
You can receive messages sent to your full DM3 username.
139-
</div>
140-
</div>
141143
</div>
142144
</div>
143145
);

‎packages/messenger-widget/src/components/ConfigureProfile/dm3Names/NormalView.tsx‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import './../ConfigureProfile.css';
12
import { useContext } from 'react';
23
import { AuthContext } from '../../../context/AuthContext';
34
import { ConfigureProfileContext } from '../context/ConfigureProfileContext';
@@ -40,12 +41,20 @@ export const NormalView = ({
4041
<>
4142
<div className="d-flex ps-4 align-items-baseline">
4243
<div className="dm3-name-container">
43-
<div
44-
className={
45-
'conversation-error ms-0 mb-2 font-weight-400 show-error'
46-
}
47-
>
48-
{showError === NAME_TYPE.DM3_NAME && errorMsg}
44+
<div className="d-flex align-items-center">
45+
<p
46+
className="m-0
47+
font-size-14 font-weight-500 line-height-24 title-content invisible"
48+
>
49+
DM3 Name
50+
</p>
51+
<div
52+
className={
53+
'conversation-error ms-0 mb-2 font-weight-400 show-error'
54+
}
55+
>
56+
{showError === NAME_TYPE.DM3_NAME && errorMsg}
57+
</div>
4958
</div>
5059
<div className="d-flex align-items-center">
5160
<p
@@ -70,8 +79,8 @@ export const NormalView = ({
7079
className={PROFILE_INPUT_FIELD_CLASS.concat(
7180
' ',
7281
showError === NAME_TYPE.DM3_NAME
73-
? 'err-background'
74-
: '',
82+
? 'w-80 err-background'
83+
: 'w-80 ',
7584
)}
7685
type="text"
7786
value={dm3Name}
@@ -89,7 +98,7 @@ export const NormalView = ({
8998
</form>
9099
</div>
91100

92-
<div className="mt-5 dm3-name-content">
101+
<div className="mt-4 pt-2 dm3-name-content">
93102
<div className="small-text font-weight-300">
94103
You can get a DM3 name for free. Please check if
95104
your desired name is available. DM3 names are
@@ -105,7 +114,7 @@ export const NormalView = ({
105114
</div>
106115
</div>
107116

108-
<div className="d-flex justify-content-end me-3 mb-3">
117+
<div className="profile-action-btns d-flex justify-content-end me-3 mb-3">
109118
<button
110119
className={BUTTON_CLASS.concat(
111120
' ',

0 commit comments

Comments
 (0)