feat: redesign mobile app with tactile UI
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import { FormEvent, useState } from 'react';
|
||||
import { KeyRound, Link, PlugZap, Save } from 'lucide-react';
|
||||
import { useCompanion } from '../../api/CompanionContext.js';
|
||||
import { CompanionClient, DEFAULT_COMPANION_URL } from '../../api/companionClient.js';
|
||||
|
||||
@@ -29,18 +30,24 @@ export function SettingsScreen() {
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="screen stack-screen">
|
||||
<h2>Settings</h2>
|
||||
<form className="settings-card" onSubmit={save}>
|
||||
<label htmlFor="server-url">Companion server URL</label>
|
||||
<input id="server-url" onChange={(event) => setBaseUrl(event.target.value)} placeholder={DEFAULT_COMPANION_URL} type="url" value={baseUrl} />
|
||||
<label htmlFor="access-key">Access key</label>
|
||||
<input id="access-key" onChange={(event) => setAccessKey(event.target.value)} placeholder="hm_…" type="password" value={accessKey} />
|
||||
<div className="composer__actions">
|
||||
<button className="small-button" type="submit">Save</button>
|
||||
<button className="send-button" onClick={() => void testConnection()} type="button">Test connection</button>
|
||||
<section className="screen stack-screen settings-screen">
|
||||
<article className="quest-card quest-card--compact quest-card--green">
|
||||
<div className="quest-orb quest-orb--green"><PlugZap size={32} strokeWidth={3} /></div>
|
||||
<div>
|
||||
<p className="eyebrow">Nest setup</p>
|
||||
<h2>Pair your companion</h2>
|
||||
<p>{status}</p>
|
||||
</div>
|
||||
</article>
|
||||
<form className="settings-card" onSubmit={save}>
|
||||
<label htmlFor="server-url"><Link size={18} /> Companion server URL</label>
|
||||
<input id="server-url" onChange={(event) => setBaseUrl(event.target.value)} placeholder={DEFAULT_COMPANION_URL} type="url" value={baseUrl} />
|
||||
<label htmlFor="access-key"><KeyRound size={18} /> Access key</label>
|
||||
<input id="access-key" onChange={(event) => setAccessKey(event.target.value)} placeholder="hm_…" type="password" value={accessKey} />
|
||||
<div className="button-row">
|
||||
<button className="secondary-button" type="submit"><Save size={18} /> Save</button>
|
||||
<button className="primary-button" onClick={() => void testConnection()} type="button">Test <PlugZap size={19} /></button>
|
||||
</div>
|
||||
<p>{status}</p>
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user