@@ -27,66 +27,82 @@ const SearchDevice: FC<SearchDeviceProps> = ({
2727 < img src = { ConnectImage } className = "self-center h-60" alt = "" />
2828
2929 { onConnectDevice ? (
30- < div className = "relative mb-6" >
31- { /* Pulsing background effect - only show when not connecting */ }
32- { ! isConnecting && (
33- < div className = "absolute -inset-1 bg-gradient-to-r from-brand-500 to-brand-600 rounded-lg blur opacity-30 animate-pulse" />
34- ) }
35- { /* Button */ }
36- < Button
37- type = "primary"
38- size = "xl"
39- onClick = { onConnectDevice }
40- loading = { isConnecting }
41- disabled = { isConnecting }
42- className = "relative shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 disabled:scale-100 disabled:opacity-60"
43- >
44- < span className = "flex items-center gap-2 text-lg font-semibold" >
45- { ! isConnecting && (
46- < svg
47- className = "w-6 h-6"
48- viewBox = "0 0 24 24"
49- fill = "none"
50- stroke = "currentColor"
51- strokeWidth = { 1.5 }
52- aria-hidden = "true"
53- >
54- < path
55- strokeLinecap = "round"
56- strokeLinejoin = "round"
57- d = "M9.5 3v3M14.5 3v3"
58- />
59- < path
60- strokeLinecap = "round"
61- strokeLinejoin = "round"
62- d = "M7 6.5h10v4.25a4.75 4.75 0 01-4.75 4.75h-.5A4.75 4.75 0 017 10.75V6.5z"
63- />
64- < path
65- strokeLinecap = "round"
66- strokeLinejoin = "round"
67- d = "M12 15.5v4.5m-2.5 0h5"
68- />
69- </ svg >
70- ) }
71- { isConnecting
72- ? intl . formatMessage ( { id : 'TR_CONNECTING' } )
73- : intl . formatMessage ( { id : 'TR_CONNECT_DEVICE' } ) }
74- </ span >
75- </ Button >
76- </ div >
30+ < >
31+ < p className = "text-base font-medium text-gray-700 mb-6 text-center max-w-md" >
32+ { intl . formatMessage ( { id : 'TR_WEBUSB_REQUIRES_USER_ACTION' } ) }
33+ </ p >
34+ < div className = "relative mb-6" >
35+ { /* Pulsing background effect - only show when not connecting */ }
36+ { ! isConnecting && (
37+ < div className = "absolute -inset-1 bg-gradient-to-r from-brand-500 to-brand-600 rounded-lg blur opacity-30 animate-pulse" />
38+ ) }
39+ { /* Button */ }
40+ < Button
41+ type = "primary"
42+ size = "xl"
43+ onClick = { onConnectDevice }
44+ loading = { isConnecting }
45+ disabled = { isConnecting }
46+ className = "relative shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 disabled:scale-100 disabled:opacity-60"
47+ >
48+ < span className = "flex items-center gap-2 text-lg font-semibold" >
49+ { ! isConnecting && (
50+ < svg
51+ className = "w-6 h-6"
52+ viewBox = "0 0 24 24"
53+ fill = "none"
54+ stroke = "currentColor"
55+ strokeWidth = { 1.5 }
56+ aria-hidden = "true"
57+ >
58+ < path
59+ strokeLinecap = "round"
60+ strokeLinejoin = "round"
61+ d = "M9.5 3v3M14.5 3v3"
62+ />
63+ < path
64+ strokeLinecap = "round"
65+ strokeLinejoin = "round"
66+ d = "M7 6.5h10v4.25a4.75 4.75 0 01-4.75 4.75h-.5A4.75 4.75 0 017 10.75V6.5z"
67+ />
68+ < path
69+ strokeLinecap = "round"
70+ strokeLinejoin = "round"
71+ d = "M12 15.5v4.5m-2.5 0h5"
72+ />
73+ </ svg >
74+ ) }
75+ { isConnecting
76+ ? intl . formatMessage ( { id : 'TR_CONNECTING' } )
77+ : intl . formatMessage ( { id : 'TR_CONNECT_DEVICE' } ) }
78+ </ span >
79+ </ Button >
80+ </ div >
81+ < p className = "text-sm font-normal text-gray-500 mt-2 max-w-md text-center" >
82+ { intl . formatMessage ( { id : 'TR_WEBUSB_WILL_PROMPT_PERMISSION' } ) }
83+ </ p >
84+ </ >
7785 ) : (
7886 < >
7987 < p className = "text-sm font-normal text-gray-500" >
8088 { intl . formatMessage ( { id : 'TR_MAKE_SURE_IT_IS_WELL_CONNECTED' } ) }
8189 { intl . formatMessage ( { id : 'TR_SEARCHING_FOR_YOUR_DEVICE' } ) }
8290 </ p >
83-
91+ < p className = "text-xs font-normal text-gray-500 py-3" >
92+ { intl . formatMessage ( { id : 'TR_USING_WEBUSB_MODE' } ) }
93+ </ p >
8494 { pageStatus === 'search-timeout' ? (
8595 < >
8696 < p className = "text-sm font-normal text-gray-500" >
8797 { intl . formatMessage ( { id : 'TR_SEARCHING_TAKES_TOO_LONG' } ) }
8898 </ p >
8999 < div className = "flex flex-col items-start justify-start" >
100+ < p className = "text-sm font-normal text-gray-500 pt-4 pb-1" >
101+ • { intl . formatMessage ( { id : 'TR_CHECK_BRIDGE' } ) }
102+ </ p >
103+ < p className = "text-sm font-normal text-gray-500 pt-4 pb-1" >
104+ • { intl . formatMessage ( { id : 'TR_ALLOW_WEBUSB_PERMISSION' } ) }
105+ </ p >
90106 < p className = "text-sm font-normal text-gray-500 py-1" >
91107 • { intl . formatMessage ( { id : 'TR_REFRESH_INSTRUCTION' } ) }
92108 </ p >
0 commit comments