uqbar-dao/nectar
1
1
Fork 0
mirror of https://github.com/uqbar-dao/nectar.git synced 2024-11-26 00:32:45 +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,
textarea,
select {
font: inherit;
font-family: var(--font-family-main);
}
/* Variables */
@ -38,6 +38,8 @@ select {
--maroon: #4f0000;
--gray: #657b83;
--tasteful-dark: #1f1f1f;
--font-family-main: 'Kode Mono', monospace;
}
/* Typography */
@ -49,10 +51,16 @@ h5,
h6,
p,
label,
li {
li,
span {
font-family: var(--font-family-main);
color: light-dark(var(--off-black), var(--off-white));
}
p {
font-size: 0.8em;
}
h1 {
font-size: 2em;
}
@ -78,6 +86,7 @@ h6 {
}
a {
font-family: var(--font-family-main);
color: light-dark(var(--blue), var(--orange));
text-decoration: none;
}
@ -89,7 +98,6 @@ a:hover {
/* Layout */
body {
font-family: var(--font-family-main, sans-serif);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
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 name="viewport"
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>
<body>

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

@ -1,3 +1,5 @@
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 {
font-size: 0.8em;
visibility: hidden;
width: 200px;
background-color: #555;
@ -127,6 +128,7 @@
.kns-input {
flex-grow: 1;
padding: 0.5rem;
font-size: 1.2em;
border: 1px solid var(--gray);
border-radius: 4px 0 0 4px;
}
@ -215,6 +217,7 @@
.checkbox-label {
margin-left: 10px;
font-size: 0.9em;
}
.file-input-label {
@ -236,3 +239,8 @@
background-color: var(--dark-orange);
color: var(--off-white);
}
button.clear {
width: 100%;
background-color: var(--ansi-red);
}

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

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

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