@@ -27,71 +27,66 @@ const SearchDevice: FC<SearchDeviceProps> = ({
2727 < img src = { ConnectImage } className = "self-center h-60" alt = "" />
2828
2929 { onConnectDevice ? (
30- < >
31-
32- < div className = "relative mb-6" >
33- { /* Pulsing background effect - only show when not connecting */ }
34- { ! isConnecting && (
35- < div className = "absolute -inset-1 bg-gradient-to-r from-brand-500 to-brand-600 rounded-lg blur opacity-30 animate-pulse" />
36- ) }
37- { /* Button */ }
38- < Button
39- type = "primary"
40- size = "xl"
41- onClick = { onConnectDevice }
42- loading = { isConnecting }
43- disabled = { isConnecting }
44- className = "relative shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 disabled:scale-100 disabled:opacity-60"
45- >
46- < span className = "flex items-center gap-2 text-lg font-semibold" >
47- { ! isConnecting && (
48- < svg
49- className = "w-6 h-6"
50- viewBox = "0 0 24 24"
51- fill = "none"
52- stroke = "currentColor"
53- strokeWidth = { 1.5 }
54- aria-hidden = "true"
55- >
56- < path
57- strokeLinecap = "round"
58- strokeLinejoin = "round"
59- d = "M9.5 3v3M14.5 3v3"
60- />
61- < path
62- strokeLinecap = "round"
63- strokeLinejoin = "round"
64- d = "M7 6.5h10v4.25a4.75 4.75 0 01-4.75 4.75h-.5A4.75 4.75 0 017 10.75V6.5z"
65- />
66- < path
67- strokeLinecap = "round"
68- strokeLinejoin = "round"
69- d = "M12 15.5v4.5m-2.5 0h5"
70- />
71- </ svg >
72- ) }
73- { isConnecting
74- ? intl . formatMessage ( { id : 'TR_CONNECTING' } )
75- : intl . formatMessage ( { id : 'TR_CONNECT_DEVICE' } ) }
76- </ span >
77- </ Button >
78- </ div >
79-
80- </ >
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 >
8177 ) : (
8278 < >
8379 < p className = "text-sm font-normal text-gray-500" >
8480 { intl . formatMessage ( { id : 'TR_MAKE_SURE_IT_IS_WELL_CONNECTED' } ) }
8581 { intl . formatMessage ( { id : 'TR_SEARCHING_FOR_YOUR_DEVICE' } ) }
8682 </ p >
87-
83+
8884 { pageStatus === 'search-timeout' ? (
8985 < >
9086 < p className = "text-sm font-normal text-gray-500" >
9187 { intl . formatMessage ( { id : 'TR_SEARCHING_TAKES_TOO_LONG' } ) }
9288 </ p >
9389 < div className = "flex flex-col items-start justify-start" >
94-
9590 < p className = "text-sm font-normal text-gray-500 py-1" >
9691 • { intl . formatMessage ( { id : 'TR_REFRESH_INSTRUCTION' } ) }
9792 </ p >
0 commit comments