🔠 Added a monospace font
This commit is contained in:
BIN
src/client/assets/fonts/Hasklig-Regular.otf
Normal file
BIN
src/client/assets/fonts/Hasklig-Regular.otf
Normal file
Binary file not shown.
@@ -8,4 +8,9 @@
|
||||
src: url("./src/client/assets/fonts/PPObjectSans-Regular.otf")
|
||||
format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Hasklig Regular";
|
||||
src: url("./src/client/assets/fonts/Hasklig-Regular.otf") format("opentype");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -154,25 +154,6 @@ export const Import = (props: IProps): ReactElement => {
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* <p className="buttons">
|
||||
<button
|
||||
className={
|
||||
importJobQueue.status === "drained" ||
|
||||
importJobQueue.status === undefined
|
||||
? "button is-medium"
|
||||
: "button is-loading is-medium"
|
||||
}
|
||||
onClick={() => {
|
||||
initiateImport();
|
||||
importJobQueue.setStatus("running");
|
||||
}}
|
||||
>
|
||||
<span className="icon">
|
||||
<i className="fas fa-file-import"></i>
|
||||
</span>
|
||||
<span>Start Import</span>
|
||||
</button>
|
||||
</p> */}
|
||||
<div className="my-4">
|
||||
{importJobQueue.status === "drained" ||
|
||||
(importJobQueue.status === undefined && (
|
||||
|
||||
@@ -3,29 +3,38 @@ import React, { ReactElement } from "react";
|
||||
export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
|
||||
const { settings } = settingsObject;
|
||||
return (
|
||||
<div className="mt-4 is-clearfix">
|
||||
<div className="card">
|
||||
<div className="card-content">
|
||||
<span className="tag is-pulled-right is-primary">Connected</span>
|
||||
<div className="content is-size-7">
|
||||
<dl>
|
||||
<dt>{settings._id}</dt>
|
||||
<dt>Client version: {settings.system_info.client_version}</dt>
|
||||
<dt>Hostname: {settings.system_info.hostname}</dt>
|
||||
<dt>Platform: {settings.system_info.platform}</dt>
|
||||
<div>
|
||||
<span className="flex items-center mt-10 mb-4">
|
||||
<span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
|
||||
AirDC++ Client Information
|
||||
</span>
|
||||
<span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
|
||||
</span>
|
||||
<div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
|
||||
<span className="inline-flex justify-center rounded-full bg-emerald-100 mb-4 px-2 py-0.5 text-emerald-700">
|
||||
<span className="h-5 w-6">
|
||||
<i className="icon-[solar--plug-circle-bold] h-5 w-5"></i>
|
||||
</span>
|
||||
<p className="whitespace-nowrap text-sm">Connected</p>
|
||||
</span>
|
||||
<p className="font-hasklig text-sm text-gray-700 dark:text-gray-400">
|
||||
<dl>
|
||||
<dt>{settings._id}</dt>
|
||||
<dt>Client version: {settings.system_info.client_version}</dt>
|
||||
<dt>Hostname: {settings.system_info.hostname}</dt>
|
||||
<dt>Platform: {settings.system_info.platform}</dt>
|
||||
|
||||
<dt>Username: {settings.user.username}</dt>
|
||||
<dt>Username: {settings.user.username}</dt>
|
||||
|
||||
<dt>Active Sessions: {settings.user.active_sessions}</dt>
|
||||
<dt>
|
||||
Permissions:{" "}
|
||||
<pre>
|
||||
{JSON.stringify(settings.user.permissions, undefined, 2)}
|
||||
</pre>
|
||||
</dt>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<dt>Active Sessions: {settings.user.active_sessions}</dt>
|
||||
<dt>
|
||||
Permissions:{" "}
|
||||
<pre>
|
||||
{JSON.stringify(settings.user.permissions, undefined, 2)}
|
||||
</pre>
|
||||
</dt>
|
||||
</dl>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -14,92 +14,125 @@ export const ConnectionForm = ({
|
||||
onSubmit={submitHandler}
|
||||
initialValues={initialData}
|
||||
render={({ handleSubmit }) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<form onSubmit={handleSubmit} className="mt-10">
|
||||
<h2 className="text-xl">{formHeading}</h2>
|
||||
<article
|
||||
role="alert"
|
||||
className="mt-4 rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
|
||||
>
|
||||
<div>
|
||||
<p>Configure your AirDC++ client connection here.</p>
|
||||
<p>
|
||||
Note that you need an instance of AirDC++ already running to
|
||||
use this form to connect to it.
|
||||
</p>
|
||||
<p>
|
||||
See{" "}
|
||||
<a
|
||||
className="underline"
|
||||
href="http://airdcpp.net/docs/installation/installation.html"
|
||||
>
|
||||
here
|
||||
</a>{" "}
|
||||
for AirDC++ installation instructions for various platforms.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div className="relative flex flex-col">
|
||||
<label className="block py-1">Hostname</label>
|
||||
<span className="flex items-center mt-6">
|
||||
<span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
|
||||
Configure Connection
|
||||
</span>
|
||||
<span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
|
||||
</span>
|
||||
|
||||
<div className="flex flex-row mt-4">
|
||||
<div className="relative">
|
||||
{/* protocol */}
|
||||
<label className="block py-1">Protocol</label>
|
||||
<Field
|
||||
name="protocol"
|
||||
component="select"
|
||||
className="appearance-none dark:bg-slate-400 bg-slate-100 h-10 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
|
||||
>
|
||||
<option>Protocol</option>
|
||||
<option value="http">http://</option>
|
||||
<option value="https">https://</option>
|
||||
</Field>
|
||||
<div className="absolute h-7 w-7 right-0 px-1 top-11 pointer-events-none">
|
||||
<i className="icon-[solar--alt-arrow-down-bold]" />
|
||||
</div>
|
||||
</div>
|
||||
{/* hostname */}
|
||||
<Field name="hostname" validate={hostNameValidator}>
|
||||
{({ input, meta }) => (
|
||||
<div className="flex items-center rounded-md border border-gray-300">
|
||||
<div className="relative">
|
||||
<Field
|
||||
name="protocol"
|
||||
component="select"
|
||||
className="appearance-none h-10 bg-transparent rounded-none border-r border-gray-300 text-gray-700 dark:text-slate-200 py-1 pr-6 pl-4 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
|
||||
>
|
||||
<option>Protocol</option>
|
||||
<option value="http">http://</option>
|
||||
<option value="https">https://</option>
|
||||
</Field>
|
||||
<div className="absolute right-1 inset-y-0 flex items-center px-0 pointer-events-none">
|
||||
<i className="icon-[solar--alt-arrow-down-bold]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Field name="hostname" validate={hostNameValidator}>
|
||||
{({ input, meta }) => (
|
||||
<div>
|
||||
<input
|
||||
{...input}
|
||||
type="text"
|
||||
placeholder="Hostname"
|
||||
className="ml-2 bg-transparent py-2 px-2 border-r border-gray-300 w-full h-10 dark:text-slate-200 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
|
||||
/>
|
||||
{meta.error && meta.touched && (
|
||||
<span className="is-size-7 has-text-danger">
|
||||
{meta.error}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
{/* port */}
|
||||
<Field
|
||||
name="port"
|
||||
component="input"
|
||||
className="ml-2 bg-transparent py-2 px-2 block w-full rounded-md sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
|
||||
placeholder="Port"
|
||||
<div className="flex flex-col">
|
||||
<label className="block px-2 py-1">Hostname</label>
|
||||
<input
|
||||
{...input}
|
||||
type="text"
|
||||
placeholder="Hostname"
|
||||
className="ml-2 dark:bg-slate-400 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
|
||||
/>
|
||||
|
||||
{meta.error && meta.touched && (
|
||||
<span className="text-red-200">{meta.error}</span>
|
||||
)}
|
||||
<div>
|
||||
{meta.error && meta.touched && (
|
||||
<span className="text-sm text-red-400 px-2">
|
||||
{meta.error}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
{/* port */}
|
||||
<div className="flex flex-col">
|
||||
<label className="block px-2 py-1">Port</label>
|
||||
<Field
|
||||
name="port"
|
||||
component="input"
|
||||
className="ml-2 dark:bg-slate-400 bg-slate-100 px-2 block h-10 rounded-md sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
|
||||
placeholder="Port"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label className="block py-1">Credentials</label>
|
||||
<div className="flex items-center rounded-md border border-gray-300">
|
||||
<div className="relative">
|
||||
<Field
|
||||
name="username"
|
||||
component="input"
|
||||
className="relative left-7 top-0 h-10 bg-transparent rounded-none border-r border-gray-300 text-gray-700 dark:text-slate-200 py-1 px-3 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
|
||||
placeholder="Username"
|
||||
/>
|
||||
<span className="absolute h-6 w-6 left-2 top-2 inset-y-0 flex items-center px-0 pointer-events-none">
|
||||
<i className="icon-[solar--user-bold-duotone] h-6 w-6 dark:text-slate-200" />
|
||||
</span>
|
||||
<div className="flex flex-row mt-5">
|
||||
<div>
|
||||
<label className="block py-1">Username</label>
|
||||
<div className="relative">
|
||||
<Field
|
||||
name="username"
|
||||
component="input"
|
||||
className="h-10 dark:bg-slate-500 bg-slate-200 rounded-md text-gray-700 dark:text-slate-200 py-1 px-10 mr-5 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
|
||||
placeholder="Username"
|
||||
/>
|
||||
<span className="absolute h-6 w-6 left-2 top-2 inset-y-0 flex items-center px-0 pointer-events-none">
|
||||
<i className="icon-[solar--user-bold-duotone] h-6 w-6 dark:text-slate-200" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Field
|
||||
name="password"
|
||||
component="input"
|
||||
type="password"
|
||||
className="relative left-14 top-0 h-10 bg-transparent text-gray-700 dark:text-slate-200 py-1 px-3 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
|
||||
placeholder="Password"
|
||||
/>
|
||||
<span className="absolute left-9 top-2 inset-y-0 flex items-center px-0 pointer-events-none h-6 w-6">
|
||||
<i className="icon-[solar--lock-password-bold-duotone] h-6 w-6 dark:text-slate-200" />
|
||||
</span>
|
||||
<div>
|
||||
<div>
|
||||
<label className="block py-1">Password</label>
|
||||
<div className="relative">
|
||||
<Field
|
||||
name="password"
|
||||
component="input"
|
||||
type="password"
|
||||
className="h-10 dark:bg-slate-500 bg-slate-200 rounded-md text-gray-700 dark:text-slate-200 py-1 px-10 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
|
||||
placeholder="Password"
|
||||
/>
|
||||
<span className="absolute left-2 top-2 inset-y-0 flex items-center px-0 pointer-events-none h-6 w-6">
|
||||
<i className="icon-[solar--lock-password-bold-duotone] h-6 w-6 dark:text-slate-200" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="field is-grouped">
|
||||
<div className="flex flex-row gap-2">
|
||||
<button
|
||||
className="flex space-x-1 sm:mt-5 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-5 py-3 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
|
||||
className="flex space-x-1 sm:mt-5 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-4 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
|
||||
type="submit"
|
||||
>
|
||||
<span className="text-md">
|
||||
@@ -110,11 +143,12 @@ export const ConnectionForm = ({
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<p className="control">
|
||||
<button type="submit" className="button is-danger">
|
||||
{!isEmpty(initialData) && "Delete"}
|
||||
</button>
|
||||
</p>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex space-x-1 sm:mt-5 sm:flex-row sm:items-center rounded-lg border border-red-400 dark:border-red-200 bg-red-200 px-4 py-2 text-gray-500 hover:bg-transparent hover:text-red-600 focus:outline-none focus:ring active:text-indigo-500"
|
||||
>
|
||||
{!isEmpty(initialData) && "Delete"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
@@ -7,6 +7,7 @@ module.exports = {
|
||||
theme: {
|
||||
fontFamily: {
|
||||
sans: ["PP Object Sans Regular", "sans-serif"],
|
||||
hasklig: ["Hasklig Regular", "monospace"],
|
||||
},
|
||||
container: {
|
||||
center: true,
|
||||
|
||||
Reference in New Issue
Block a user