frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🔠 Added a monospace font

Browse Source
This commit is contained in:
Rishi Ghan
2023-12-15 18:13:25 -05:00
parent 1f6d6ca6b6
commit f293d9e3ba
6 changed files with 147 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/client/assets/fonts/Hasklig-Regular.otf Normal file
View File

Binary file not shown.

5
src/client/assets/scss/App.scss
View File

@@ -8,4 +8,9 @@
src: url("./src/client/assets/fonts/PPObjectSans-Regular.otf") src: url("./src/client/assets/fonts/PPObjectSans-Regular.otf")
format("opentype"); format("opentype");
} }
@font-face {
font-family: "Hasklig Regular";
src: url("./src/client/assets/fonts/Hasklig-Regular.otf") format("opentype");
}
} }

19
src/client/components/Import/Import.tsx
View File

@@ -154,25 +154,6 @@ export const Import = (props: IProps): ReactElement => {
</div> </div>
</article> </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"> <div className="my-4">
{importJobQueue.status === "drained" || {importJobQueue.status === "drained" ||
(importJobQueue.status === undefined && ( (importJobQueue.status === undefined && (

51
src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx
View File

@@ -3,29 +3,38 @@ import React, { ReactElement } from "react";
export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => { export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
const { settings } = settingsObject; const { settings } = settingsObject;
return ( return (
<div className="mt-4 is-clearfix"> <div>
<div className="card"> <span className="flex items-center mt-10 mb-4">
<div className="card-content"> <span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
<span className="tag is-pulled-right is-primary">Connected</span> AirDC++ Client Information
<div className="content is-size-7"> </span>
<dl> <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
<dt>{settings._id}</dt> </span>
<dt>Client version: {settings.system_info.client_version}</dt> <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">
<dt>Hostname: {settings.system_info.hostname}</dt> <span className="inline-flex justify-center rounded-full bg-emerald-100 mb-4 px-2 py-0.5 text-emerald-700">
<dt>Platform: {settings.system_info.platform}</dt> <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>Active Sessions: {settings.user.active_sessions}</dt>
<dt> <dt>
Permissions:{" "} Permissions:{" "}
<pre> <pre>
{JSON.stringify(settings.user.permissions, undefined, 2)} {JSON.stringify(settings.user.permissions, undefined, 2)}
</pre> </pre>
</dt> </dt>
</dl> </dl>
</div> </p>
</div>
</div> </div>
</div> </div>
); );

188
src/client/components/shared/ConnectionForm/ConnectionForm.tsx
View File

@@ -14,92 +14,125 @@ export const ConnectionForm = ({
onSubmit={submitHandler} onSubmit={submitHandler}
initialValues={initialData} initialValues={initialData}
render={({ handleSubmit }) => ( render={({ handleSubmit }) => (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit} className="mt-10">
<h2 className="text-xl">{formHeading}</h2> <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"> <span className="flex items-center mt-6">
<label className="block py-1">Hostname</label> <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}> <Field name="hostname" validate={hostNameValidator}>
{({ input, meta }) => ( {({ input, meta }) => (
<div className="flex items-center rounded-md border border-gray-300"> <div className="flex flex-col">
<div className="relative"> <label className="block px-2 py-1">Hostname</label>
<Field <input
name="protocol" {...input}
component="select" type="text"
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" 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"
<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>
{meta.error && meta.touched && ( {meta.error && meta.touched && (
<span className="text-red-200">{meta.error}</span> <span className="text-sm text-red-400 px-2">
)} {meta.error}
</span>
)}
</div>
</div> </div>
)} )}
</Field> </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> </div>
<label className="block py-1">Credentials</label> <div className="flex flex-row mt-5">
<div className="flex items-center rounded-md border border-gray-300"> <div>
<div className="relative"> <label className="block py-1">Username</label>
<Field <div className="relative">
name="username" <Field
component="input" name="username"
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" component="input"
placeholder="Username" 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 className="absolute h-6 w-6 left-2 top-2 inset-y-0 flex items-center px-0 pointer-events-none">
</span> <i className="icon-[solar--user-bold-duotone] h-6 w-6 dark:text-slate-200" />
</span>
</div>
</div> </div>
<div className="relative"> <div>
<Field <div>
name="password" <label className="block py-1">Password</label>
component="input" <div className="relative">
type="password" <Field
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" name="password"
placeholder="Password" component="input"
/> type="password"
<span className="absolute left-9 top-2 inset-y-0 flex items-center px-0 pointer-events-none h-6 w-6"> 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"
<i className="icon-[solar--lock-password-bold-duotone] h-6 w-6 dark:text-slate-200" /> placeholder="Password"
</span> />
<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> </div>
<div className="field is-grouped"> <div className="flex flex-row gap-2">
<button <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" type="submit"
> >
<span className="text-md"> <span className="text-md">
@@ -110,11 +143,12 @@ export const ConnectionForm = ({
</span> </span>
</button> </button>
<p className="control"> <button
<button type="submit" className="button is-danger"> type="submit"
{!isEmpty(initialData) && "Delete"} 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"
</button> >
</p> {!isEmpty(initialData) && "Delete"}
</button>
</div> </div>
</form> </form>
)} )}

1
tailwind.config.js
View File

@@ -7,6 +7,7 @@ module.exports = {
theme: { theme: {
fontFamily: { fontFamily: {
sans: ["PP Object Sans Regular", "sans-serif"], sans: ["PP Object Sans Regular", "sans-serif"],
hasklig: ["Hasklig Regular", "monospace"],
}, },
container: { container: {
center: true, center: true,