@@ -107,99 +107,100 @@ export default function ConnectLnd() {
107107 }
108108
109109 return (
110- < div className = "relative mt-24 lg:flex space-x-8" >
111- < div className = "lg:w-1/2" >
112- < h1 className = "text-3xl font-bold" > Connect to your LND node</ h1 >
113- < p className = "text-gray-500 mt-6" >
114- You will need to retrieve the node url and an admin macaroon.
115- </ p >
116- < form onSubmit = { handleSubmit } >
117- < div className = "w-4/5" >
118- < div className = "mt-6" >
119- < label className = "block font-medium text-gray-700" > Address</ label >
120- < div className = "mt-1" >
121- < Input
122- name = "url"
123- placeholder = "https://"
124- onChange = { handleChange }
125- required
126- />
127- </ div >
128- </ div >
129- < div className = "mt-6" >
130- < div >
110+ < div >
111+ < div className = "relative mt-14 lg:flex space-x-8 bg-white px-12 py-10" >
112+ < div className = "lg:w-1/2" >
113+ < h1 className = "text-2xl font-bold" > Connect to your LND node</ h1 >
114+ < p className = "text-gray-500 mt-6" >
115+ You will need to retrieve the node url and an admin < br /> macaroon.
116+ </ p >
117+ < form onSubmit = { handleSubmit } >
118+ < div className = "w-4/5" >
119+ < div className = "mt-6" >
131120 < label className = "block font-medium text-gray-700" >
132- Macaroon
121+ Address
133122 </ label >
134123 < div className = "mt-1" >
135124 < Input
136- name = "macaroon "
137- value = { formData . macaroon }
125+ name = "url "
126+ placeholder = "https://"
138127 onChange = { handleChange }
139128 required
140129 />
141130 </ div >
142131 </ div >
143- < p className = "text-center my-4" > OR</ p >
144- < div
145- className = { `cursor-pointer bg-white flex flex-col items-center p-4 py-10 border-dashed border-2 border-gray-300 bg-gray-50 rounded-md text-center transition duration-200 ${
146- isDragging ? "border-blue-500 bg-blue-50" : ""
147- } `}
148- onDrop = { dropHandler }
149- onDragOver = { dragOverHandler }
150- onDragLeave = { dragLeaveHandler }
151- onClick = { ( ) => {
152- if ( hiddenFileInput ?. current ) hiddenFileInput . current . click ( ) ;
153- } }
154- >
155- < SendIcon className = "mb-3 h-9 w-9 text-blue-500" />
156- < p >
157- Drag and drop your macaroon here or{ " " }
158- < span className = "underline" > browse</ span >
159- </ p >
160- < input
161- ref = { hiddenFileInput }
162- onChange = { ( event ) => {
163- if ( event . target . files ) {
164- const file = event . target . files [ 0 ] ;
165- readFile ( file ) ;
166- }
132+ < div className = "mt-6" >
133+ < div >
134+ < label className = "block font-medium text-gray-700" >
135+ Macaroon
136+ </ label >
137+ < div className = "mt-1" >
138+ < Input
139+ name = "macaroon"
140+ value = { formData . macaroon }
141+ onChange = { handleChange }
142+ required
143+ />
144+ </ div >
145+ </ div >
146+ < p className = "text-center my-4" > OR</ p >
147+ < div
148+ className = { `cursor-pointer flex flex-col items-center p-4 py-10 border-dashed border-2 border-gray-300 bg-gray-50 rounded-md text-center transition duration-200 ${
149+ isDragging ? "border-blue-500 bg-blue-50" : ""
150+ } `}
151+ onDrop = { dropHandler }
152+ onDragOver = { dragOverHandler }
153+ onDragLeave = { dragLeaveHandler }
154+ onClick = { ( ) => {
155+ if ( hiddenFileInput ?. current )
156+ hiddenFileInput . current . click ( ) ;
167157 } }
168- type = "file"
169- accept = ".macaroon"
170- hidden
171- />
158+ >
159+ < SendIcon className = "mb-3 h-9 w-9 text-blue-500" />
160+ < p >
161+ Drag and drop your macaroon here or{ " " }
162+ < span className = "underline" > browse</ span >
163+ </ p >
164+ < input
165+ ref = { hiddenFileInput }
166+ onChange = { ( event ) => {
167+ if ( event . target . files ) {
168+ const file = event . target . files [ 0 ] ;
169+ readFile ( file ) ;
170+ }
171+ } }
172+ type = "file"
173+ accept = ".macaroon"
174+ hidden
175+ />
176+ </ div >
172177 </ div >
173178 </ div >
179+ </ form >
180+ </ div >
181+ < div className = "mt-16 lg:mt-0 lg:w-1/2" >
182+ < div className = "lg:flex h-full justify-center items-center" >
183+ < img src = "assets/icons/satsymbol.svg" alt = "sat" className = "w-64" />
174184 </ div >
175- < div className = "mt-8 flex space-x-4" >
176- < Button
177- label = "Back"
178- onClick = { ( e ) => {
179- e . preventDefault ( ) ;
180- navigate ( - 1 ) ;
181- return false ;
182- } }
183- />
184- < Button
185- type = "submit"
186- label = "Continue"
187- primary
188- loading = { loading }
189- disabled = { formData . url === "" || formData . macaroon === "" }
190- />
191- </ div >
192- </ form >
193- </ div >
194- < div className = "mt-16 lg:mt-0 lg:w-1/2" >
195- < div className = "lg:flex h-full justify-center items-center" >
196- < img
197- src = "assets/icons/satsymbol.svg"
198- alt = "sat"
199- className = "max-w-xs"
200- />
201185 </ div >
202186 </ div >
187+ < div className = "my-8 flex space-x-4 justify-center" >
188+ < Button
189+ label = "Back"
190+ onClick = { ( e ) => {
191+ e . preventDefault ( ) ;
192+ navigate ( - 1 ) ;
193+ return false ;
194+ } }
195+ />
196+ < Button
197+ type = "submit"
198+ label = "Continue"
199+ primary
200+ loading = { loading }
201+ disabled = { formData . url === "" || formData . macaroon === "" }
202+ />
203+ </ div >
203204 </ div >
204205 ) ;
205206}
0 commit comments