Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
F
frontend
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
vicotor
frontend
Commits
3e6be97b
Commit
3e6be97b
authored
Oct 31, 2024
by
tom
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
design fixes for auth modal and user profile menu
parent
805ad3de
Changes
8
Show whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
55 additions
and
17 deletions
+55
-17
AuthModal.tsx
ui/snippets/auth/AuthModal.tsx
+2
-0
AuthModal.pw.tsx_default_link-email-to-account-2.png
...ts__/AuthModal.pw.tsx_default_link-email-to-account-2.png
+0
-0
AuthModalScreenSuccessEmail.tsx
ui/snippets/auth/screens/AuthModalScreenSuccessEmail.tsx
+25
-7
AuthModalScreenSuccessWallet.tsx
ui/snippets/auth/screens/AuthModalScreenSuccessWallet.tsx
+25
-7
UserProfileContent.tsx
ui/snippets/user/profile/UserProfileContent.tsx
+2
-2
UserProfileContentWallet.tsx
ui/snippets/user/profile/UserProfileContentWallet.tsx
+1
-1
UserProfileDesktop.pw.tsx_default_without-address-1.png
..._/UserProfileDesktop.pw.tsx_default_without-address-1.png
+0
-0
UserProfileDesktop.pw.tsx_default_without-email-1.png
...s__/UserProfileDesktop.pw.tsx_default_without-email-1.png
+0
-0
No files found.
ui/snippets/auth/AuthModal.tsx
View file @
3e6be97b
...
...
@@ -140,6 +140,7 @@ const AuthModal = ({ initialScreen, onClose, mixpanelConfig }: Props) => {
<
AuthModalScreenSuccessEmail
email=
{
currentStep
.
email
}
onConnectWallet=
{
onNextStep
}
onClose=
{
onModalClose
}
isAuth=
{
currentStep
.
isAuth
}
profile=
{
currentStep
.
profile
}
/>
...
...
@@ -149,6 +150,7 @@ const AuthModal = ({ initialScreen, onClose, mixpanelConfig }: Props) => {
<
AuthModalScreenSuccessWallet
address=
{
currentStep
.
address
}
onAddEmail=
{
onNextStep
}
onClose=
{
onModalClose
}
isAuth=
{
currentStep
.
isAuth
}
profile=
{
currentStep
.
profile
}
/>
...
...
ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_link-email-to-account-2.png
View replaced file @
805ad3de
View file @
3e6be97b
20.6 KB
|
W:
|
H:
22 KB
|
W:
|
H:
2-up
Swipe
Onion skin
ui/snippets/auth/screens/AuthModalScreenSuccessEmail.tsx
View file @
3e6be97b
...
...
@@ -9,22 +9,32 @@ import config from 'configs/app';
interface
Props
{
email
:
string
;
onConnectWallet
:
(
screen
:
Screen
)
=>
void
;
onClose
:
()
=>
void
;
isAuth
?:
boolean
;
profile
:
UserInfo
|
undefined
;
}
const
AuthModalScreenSuccessEmail
=
({
email
,
onConnectWallet
,
isAuth
,
profile
}:
Props
)
=>
{
const
AuthModalScreenSuccessEmail
=
({
email
,
onConnectWallet
,
onClose
,
isAuth
,
profile
}:
Props
)
=>
{
const
handleConnectWalletClick
=
React
.
useCallback
(()
=>
{
onConnectWallet
({
type
:
'
connect_wallet
'
,
isAuth
:
true
});
},
[
onConnectWallet
]);
if
(
isAuth
)
{
return
(
<
Box
>
<
Text
>
Your account was linked to
{
'
'
}
<
chakra
.
span
fontWeight=
"700"
>
{
email
}
</
chakra
.
span
>
{
'
'
}
email. Use for the next login.
</
Text
>
<
Button
mt=
{
6
}
variant=
"outline"
onClick=
{
onClose
}
>
Got it!
</
Button
>
</
Box
>
);
}
...
...
@@ -34,11 +44,19 @@ const AuthModalScreenSuccessEmail = ({ email, onConnectWallet, isAuth, profile }
<
chakra
.
span
fontWeight=
"700"
>
{
email
}
</
chakra
.
span
>
{
'
'
}
email has been successfully used to log in to your Blockscout account.
</
Text
>
{
!
profile
?.
address_hash
&&
config
.
features
.
blockchainInteraction
.
isEnabled
&&
(
{
!
profile
?.
address_hash
&&
config
.
features
.
blockchainInteraction
.
isEnabled
?
(
<>
<
Text
mt=
{
6
}
>
Add your web3 wallet to safely interact with smart contracts and dapps inside Blockscout.
</
Text
>
<
Button
mt=
{
6
}
onClick=
{
handleConnectWalletClick
}
>
Connect wallet
</
Button
>
</>
)
:
(
<
Button
variant=
"outline"
mt=
{
6
}
onClick=
{
onClose
}
>
Got it!
</
Button
>
)
}
</
Box
>
);
...
...
ui/snippets/auth/screens/AuthModalScreenSuccessWallet.tsx
View file @
3e6be97b
...
...
@@ -9,22 +9,32 @@ import shortenString from 'lib/shortenString';
interface
Props
{
address
:
string
;
onAddEmail
:
(
screen
:
Screen
)
=>
void
;
onClose
:
()
=>
void
;
isAuth
?:
boolean
;
profile
:
UserInfo
|
undefined
;
}
const
AuthModalScreenSuccessWallet
=
({
address
,
onAddEmail
,
isAuth
,
profile
}:
Props
)
=>
{
const
AuthModalScreenSuccessWallet
=
({
address
,
onAddEmail
,
onClose
,
isAuth
,
profile
}:
Props
)
=>
{
const
handleAddEmailClick
=
React
.
useCallback
(()
=>
{
onAddEmail
({
type
:
'
email
'
,
isAuth
:
true
});
},
[
onAddEmail
]);
if
(
isAuth
)
{
return
(
<
Box
>
<
Text
>
Your account was linked to
{
'
'
}
<
chakra
.
span
fontWeight=
"700"
>
{
shortenString
(
address
)
}
</
chakra
.
span
>
{
'
'
}
wallet. Use for the next login.
</
Text
>
<
Button
mt=
{
6
}
variant=
"outline"
onClick=
{
onClose
}
>
Got it!
</
Button
>
</
Box
>
);
}
...
...
@@ -35,11 +45,19 @@ const AuthModalScreenSuccessWallet = ({ address, onAddEmail, isAuth, profile }:
<
chakra
.
span
fontWeight=
"700"
>
{
shortenString
(
address
)
}
</
chakra
.
span
>
{
'
'
}
has been successfully used to log in to your Blockscout account.
</
Text
>
{
!
profile
?.
email
&&
(
{
!
profile
?.
email
?
(
<>
<
Text
mt=
{
6
}
>
Add your email to receive notifications about addresses in your watch list.
</
Text
>
<
Button
mt=
{
6
}
onClick=
{
handleAddEmailClick
}
>
Add email
</
Button
>
</>
)
:
(
<
Button
mt=
{
6
}
variant=
"outline"
onClick=
{
onClose
}
>
Got it!
</
Button
>
)
}
</
Box
>
);
...
...
ui/snippets/user/profile/UserProfileContent.tsx
View file @
3e6be97b
...
...
@@ -99,7 +99,7 @@ const UserProfileContent = ({ data, onClose, onLogin, onAddEmail, onAddAddress }
/>
{
data
?.
address_hash
?
<
Box
>
{
shortenString
(
data
?.
address_hash
)
}
</
Box
>
:
<
Link
onClick=
{
onAddAddress
}
color=
"icon_info"
_hover=
{
{
color
:
'
link_hovered
'
,
textDecoration
:
'
none
'
}
}
>
Add address
</
Link
>
<
Link
onClick=
{
onAddAddress
}
_hover=
{
{
color
:
'
link_hovered
'
,
textDecoration
:
'
none
'
}
}
>
Add address
</
Link
>
}
</
Flex
>
)
}
...
...
@@ -107,7 +107,7 @@ const UserProfileContent = ({ data, onClose, onLogin, onAddEmail, onAddAddress }
<
Box
mr=
"auto"
>
Email
</
Box
>
{
data
?.
email
?
<
TruncatedValue
value=
{
data
.
email
}
/>
:
<
Link
onClick=
{
onAddEmail
}
color=
"icon_info"
_hover=
{
{
color
:
'
link_hovered
'
,
textDecoration
:
'
none
'
}
}
>
Add email
</
Link
>
<
Link
onClick=
{
onAddEmail
}
_hover=
{
{
color
:
'
link_hovered
'
,
textDecoration
:
'
none
'
}
}
>
Add email
</
Link
>
}
</
Flex
>
</
Box
>
...
...
ui/snippets/user/profile/UserProfileContentWallet.tsx
View file @
3e6be97b
...
...
@@ -41,7 +41,7 @@ const UserProfileContentWallet = ({ onClose, className }: Props) => {
isTooltipDisabled
truncation=
"dynamic"
fontSize=
"sm"
fontWeight=
{
7
00
}
fontWeight=
{
5
00
}
/>
<
IconButton
aria
-
label=
"Open wallet"
...
...
ui/snippets/user/profile/__screenshots__/UserProfileDesktop.pw.tsx_default_without-address-1.png
View replaced file @
805ad3de
View file @
3e6be97b
29 KB
|
W:
|
H:
29 KB
|
W:
|
H:
2-up
Swipe
Onion skin
ui/snippets/user/profile/__screenshots__/UserProfileDesktop.pw.tsx_default_without-email-1.png
View replaced file @
805ad3de
View file @
3e6be97b
25.7 KB
|
W:
|
H:
25.8 KB
|
W:
|
H:
2-up
Swipe
Onion skin
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment