uqbar-dao/nectar
1
1
Fork 0
mirror of https://github.com/uqbar-dao/nectar.git synced 2024-11-29 07:21:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

styling fixes, kinode.css and register-ui

Browse Source
This commit is contained in:
dr-frmr 2024-08-13 21:15:58 +03:00
parent 36a33f5108
commit 3ba1a2e53d
No known key found for this signature in database
6 changed files with 32 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
css/kinode.css
View File

@ -20,7 +20,7 @@ input,
button, button,
textarea, textarea,
select { select {
font: inherit; font-family: var(--font-family-main);
} }
/* Variables */ /* Variables */
@ -38,6 +38,8 @@ select {
--maroon: #4f0000; --maroon: #4f0000;
--gray: #657b83; --gray: #657b83;
--tasteful-dark: #1f1f1f; --tasteful-dark: #1f1f1f;
--font-family-main: 'Kode Mono', monospace;
} }
/* Typography */ /* Typography */
@ -49,10 +51,16 @@ h5,
h6, h6,
p, p,
label, label,
li { li,
span {
font-family: var(--font-family-main);
color: light-dark(var(--off-black), var(--off-white)); color: light-dark(var(--off-black), var(--off-white));
} }
p {
font-size: 0.8em;
}
h1 { h1 {
font-size: 2em; font-size: 2em;
} }
@ -78,6 +86,7 @@ h6 {
} }
a { a {
font-family: var(--font-family-main);
color: light-dark(var(--blue), var(--orange)); color: light-dark(var(--blue), var(--orange));
text-decoration: none; text-decoration: none;
} }
@ -89,7 +98,6 @@ a:hover {
/* Layout */ /* Layout */
body { body {
font-family: var(--font-family-main, sans-serif);
line-height: 1.6; line-height: 1.6;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
background-color: light-dark(var(--tan), var(--tasteful-dark)); background-color: light-dark(var(--tan), var(--tasteful-dark));

1
kinode/src/register-ui/index.html
View File

@ -11,6 +11,7 @@
<meta httpEquiv="X-UA-Compatible" content="IE=edge" /> <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" <meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover" /> content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover" />
<link href="https://fonts.googleapis.com/css2?family=Kode+Mono:wght@700&display=swap" rel="stylesheet">
</head> </head>
<body> <body>

4
kinode/src/register-ui/src/components/DirectTooltip.tsx
View File

@ -1,3 +1,5 @@
import { Tooltip } from "./Tooltip"; import { Tooltip } from "./Tooltip";
export const DirectTooltip: React.FC = () => <Tooltip text={`A direct node publishes its own networking information on-chain: IP, port, so on. An indirect node relies on the service of routers, which are themselves direct nodes. Only register a direct node if you know what you’re doing and have a public, static IP address.`} /> export const DirectTooltip: React.FC = () => <Tooltip text={`A direct node publishes its own networking information on-chain: IP, port, so on. An indirect node relies on the service of routers, which are themselves direct nodes. Only register a direct node if you know what you're doing and have a public, static IP address.`}>
<span>ⓘ</span>
</Tooltip>

8
kinode/src/register-ui/src/index.css
View File

@ -29,6 +29,7 @@
} }
.tooltip-text { .tooltip-text {
font-size: 0.8em;
visibility: hidden; visibility: hidden;
width: 200px; width: 200px;
background-color: #555; background-color: #555;
@ -127,6 +128,7 @@
.kns-input { .kns-input {
flex-grow: 1; flex-grow: 1;
padding: 0.5rem; padding: 0.5rem;
font-size: 1.2em;
border: 1px solid var(--gray); border: 1px solid var(--gray);
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
} }
@ -215,6 +217,7 @@
.checkbox-label { .checkbox-label {
margin-left: 10px; margin-left: 10px;
font-size: 0.9em;
} }
.file-input-label { .file-input-label {
@ -235,4 +238,9 @@
.file-input-label:hover .button { .file-input-label:hover .button {
background-color: var(--dark-orange); background-color: var(--dark-orange);
color: var(--off-white); color: var(--off-white);
}
button.clear {
width: 100%;
background-color: var(--ansi-red);
} }

6
kinode/src/register-ui/src/pages/Login.tsx
View File

@ -3,6 +3,7 @@ import { PageProps, UnencryptedIdentity } from "../lib/types";
import Loader from "../components/Loader"; import Loader from "../components/Loader";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { sha256, toBytes } from "viem"; import { sha256, toBytes } from "viem";
import { Tooltip } from "../components/Tooltip";
interface LoginProps extends PageProps { } interface LoginProps extends PageProps { }
@ -89,8 +90,9 @@ function Login({
> >
<div className="form-group"> <div className="form-group">
<div className="form-header"> <div className="form-header">
<h3>{knsName}</h3> <Tooltip text={`(${isDirect ? "direct" : "indirect"} node)`}>
<span>({isDirect ? "direct" : "indirect"} node)</span> <h3>{knsName}</h3>
</Tooltip>
</div> </div>
<input <input
type="password" type="password"

7
kinode/src/register-ui/src/pages/ResetDotOsName.tsx
View File

@ -209,12 +209,15 @@ function ResetKnsName({
) : ( ) : (
<> <>
<h3 className="form-label"> <h3 className="form-label">
<Tooltip text="Kinodes use a .os name in order to identify themselves to other nodes in the network."> <Tooltip text="Kinodes use an onchain username in order to identify themselves to other nodes in the network.">
Specify the node ID to reset Node ID to reset:
</Tooltip> </Tooltip>
</h3> </h3>
<EnterKnsName {...{ name, setName, nameVets, triggerNameCheck, nameValidities, setNameValidities, isReset: true }} /> <EnterKnsName {...{ name, setName, nameVets, triggerNameCheck, nameValidities, setNameValidities, isReset: true }} />
<DirectCheckbox {...{ direct, setDirect }} /> <DirectCheckbox {...{ direct, setDirect }} />
<p>
A reset will not delete any data. It only updates the networking information that your node publishes onchain.
</p>
<button <button
type="submit" type="submit"
className="button mt-2" className="button mt-2"