diff --git a/web/src/index.css b/web/src/index.css index a85b677..5c9fb49 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -195,6 +195,7 @@ input, textarea { color: inherit; background-color: inherit; font-size: 1em; + font-family: var(--font-stack); } button, a.button, span.button { diff --git a/web/src/ui/roomview/CreateRoomView.css b/web/src/ui/roomview/CreateRoomView.css index caf5cb0..8e17c7f 100644 --- a/web/src/ui/roomview/CreateRoomView.css +++ b/web/src/ui/roomview/CreateRoomView.css @@ -5,13 +5,12 @@ form.create-room-view { width: 100%; - input, select, textarea { + input, select, textarea, .room-alias-container { box-sizing: border-box; width: 100%; padding: .5rem; border: 1px solid var(--border-color); border-radius: .25rem; - font-family: var(--monospace-font-stack); font-size: 1em; background-color: var(--background-color); @@ -29,6 +28,16 @@ form.create-room-view { resize: vertical; } + .room-alias-container { + display: flex; + + > input { + padding: 0; + border: none; + border-radius: 0; + } + } + div.form-fields { display: grid; grid-template-columns: auto 1fr; @@ -39,7 +48,7 @@ form.create-room-view { grid-column: 1; } - > input, > select, > textarea { + > input, > select, > textarea, > .room-alias-container { grid-column: 2; &#room-create-id { @@ -89,6 +98,10 @@ form.create-room-view { "content content" 1fr; margin-bottom: .5rem; + > input { + font-family: var(--monospace-font-stack); + } + > input.state-event-type { grid-area: type; } diff --git a/web/src/ui/roomview/CreateRoomView.tsx b/web/src/ui/roomview/CreateRoomView.tsx index 0588876..6d7236c 100644 --- a/web/src/ui/roomview/CreateRoomView.tsx +++ b/web/src/ui/roomview/CreateRoomView.tsx @@ -39,6 +39,7 @@ const CreateRoomView = () => { const [preset, setPreset] = useState("private_chat") const [name, setName] = useState("") const [topic, setTopic] = useState("") + const [aliasLocalpart, setAliasLocalpart] = useState("") const [invite, setInvite] = useState([]) const [isDirect, setIsDirect] = useState(false) const [isEncrypted, setIsEncrypted] = useState(true) @@ -91,6 +92,7 @@ const CreateRoomView = () => { client.rpc.createRoom({ name: name || undefined, topic: topic || undefined, + room_alias_name: aliasLocalpart || undefined, preset, is_direct: isDirect, invite: invite.filter(id => !!id), @@ -135,6 +137,18 @@ const CreateRoomView = () => { value={topic} onChange={e => setTopic(e.target.value)} /> + +