radicle/radicle-explorer
1
0
Fork 0
mirror of https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git synced 2026-11-15 11:20:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor typography styles

Browse Source 
- Move all global typography styles to its own file. This makes it
  easier to find all the typography related definitions for newcomers.

- Prefix all typography related global CSS classes with a unique prefix
  `.txt-`. This allows us to grep the codebase and see exactly where
  they are applied. Another benefit of this convention is that it helps
  to avoid accidentally mixing global and local styles. Having global
  CSS classes that sometimes overlap with component CSS classes makes it
  very hard to reason about the resulting visuals and making changes
  unpredictable.

- Introduce CSS variables for standardised typography sizes and apply
  them to the whole codebase consistently. This way we can adjust the
  size in one place and it will be applied everywhere.

- Avoid using predefined HTML tags which might have differing styling
  from browser to browser, e.g. `<h1>`, `<strong>`. We should stick to
  applying styling either by adding a specific global CSS class or using
  the predefined CSS variables, this way we can be sure that the styles
  won't be overridden by browser defaults.

- Have a minimal set of modifiers `.txt-monospace` and `.txt-bold` and
  apply them consistently. Since `.txt-monospace` is defined via a CSS
  variable, we'll be able to switch out fonts via a user setting in the
  future.

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>
This commit is contained in:
Rūdolfs Ošiņš
2022-09-09 14:50:26 +02:00
committed by Alexis Sellier
parent ff657efa93
commit 591c19a256
67 changed files with 309 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cypress/e2e/projectCommits.spec.ts
+2 -5
View File
@@ -150,10 +150,7 @@ describe("project commits", () => {
"/seeds/willow.radicle.garden/rad:git:hnrk8mbpirp7ua7sy66o4t9soasbq4y8uwgoy/commits/cbf5df499ab4f4a908f1756fbe2c236a4530516a",
);
});
cy.get("header .summary .text-medium").should(
"have.text",
"initial commit",
);
cy.get("header .summary .txt-medium").should("have.text", "initial commit");
cy.get(".commit pre.description").should(
"have.text",
"this is the first commit of many",
@@ -163,7 +160,7 @@ describe("project commits", () => {
"have.text",
"1 file(s) changed, 1 file(s) created, 1 file(s) deleted\n with\n 0 addition(s)\n and\n 0 deletion(s)",
);
cy.get("header.file-header:nth-child(1) p.file-path")
cy.get("header.file-header:nth-child(1) p")
.first()
.should("have.text", "test.md")
.next()
index.html
+1
View File
@@ -15,6 +15,7 @@
<meta property="og:image:width" content="240" />
<meta property="og:image:height" content="240" />
<meta property="og:type" content="website" />
<link rel="stylesheet" type="text/css" href="/typography.css" />
<link rel="stylesheet" type="text/css" href="/index.css" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon.ico" />
public/fonts/SourceCodePro-Bold.otf
BIN
View File
Binary file not shown.
public/fonts/SourceCodePro-Semibold.otf
BIN
View File
Binary file not shown.
public/index.css
+11 -92
View File
@@ -1,5 +1,3 @@
@import url(./typography.css);
* {
outline: none !important;
box-sizing: border-box;
@@ -70,10 +68,6 @@
--color-glow-error: #ff555522;
--color-scrollbar: var(--color-foreground-subtler);
--font-family-sans-serif: Inter, sans-serif;
--font-family-monospace: monospace;
--font-weight-medium: 600;
--font-weight-bold: 700;
--border-radius: 0.75rem;
--border-radius-small: 0.5rem;
--border-radius-round: 10rem;
@@ -89,10 +83,14 @@
--button-tiny-height: 1.5rem;
}
html {
height: 100%;
overflow-y: scroll;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
}
body {
font-size: 16px;
font-weight: 400;
line-height: 1.5;
min-width: var(--content-min-width);
height: 100%;
margin: 0;
@@ -100,7 +98,6 @@ body {
color: white;
text-align: left;
background-color: var(--color-background);
-webkit-font-smoothing: antialiased;
scrollbar-width: thin;
scrollbar-height: thin;
scrollbar-color: var(--color-scrollbar) transparent;
@@ -112,15 +109,6 @@ body {
}
}
html {
height: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
}
::-moz-selection {
background: var(--color-primary);
color: var(--color-background);
@@ -155,23 +143,11 @@ body::-webkit-scrollbar-thumb {
background: var(--color-negative);
}
code {
font-family: monospace;
font-size: 0.95rem;
}
main,
section {
display: block;
}
body,
input,
textarea {
font-family: var(--font-family-sans-serif);
font-feature-settings: "ss01", "ss02", "cv01", "cv03";
}
a {
color: inherit;
text-decoration: none;
@@ -198,12 +174,13 @@ a.address {
}
input[type="text"] {
font-family: var(--font-family-sans-serif);
line-height: 1.6;
}
input[type="text"] {
outline: none;
border: none;
font-size: 1rem;
font-size: var(--font-size-regular);
color: var(--color-foreground);
background: transparent;
border: 1px solid var(--color-secondary);
@@ -217,7 +194,7 @@ input[type="text"]::placeholder {
opacity: 1 !important;
}
input[type="text"].small {
font-size: 0.875rem;
font-size: var(--font-size-small);
}
input.wide {
width: 44ch;
@@ -245,16 +222,9 @@ label.input {
.label {
color: var(--color-secondary);
}
.subtle {
color: var(--color-foreground-faded);
font-style: italic;
}
.faded {
color: var(--color-foreground-faded);
}
.bold {
font-weight: bold !important;
}
.yellow {
color: var(--color-yellow);
background: var(--color-yellow-background-solid);
@@ -269,10 +239,6 @@ label.input {
align-items: center;
}
.font-mono {
font-family: var(--font-family-monospace);
}
.mobile,
.mobile-inline {
display: none !important;
@@ -302,28 +268,6 @@ span.align {
align-items: center;
justify-content: flex-start;
}
span.small,
.text-xsmall {
font-size: 0.75rem;
}
.text-small {
font-size: 0.875rem;
}
.text-medium {
font-size: 1.25rem;
}
.text-big {
font-size: 1.5rem;
}
.text-truncate {
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden;
}
.text-faded {
color: var(--color-foreground-faded);
}
button.error:hover {
color: var(--color-background);
background-color: var(--color-negative);
@@ -339,30 +283,5 @@ td {
text-overflow: ellipsis;
}
td strong {
font-weight: 600;
}
h1,
.title {
font-size: 1.75rem;
font-weight: normal;
color: var(--color-secondary);
text-align: left;
text-overflow: ellipsis;
overflow-x: hidden;
}
h1 {
margin-bottom: 2rem;
}
h2 {
margin: 1.5rem 0;
}
h3 {
margin: 1rem 0;
}
p {
margin: 1rem 0;
font-weight: var(--font-weight-medium);
}
public/typography.css
+67 -12
View File
@@ -8,7 +8,6 @@
@font-face {
font-family: "Inter";
font-style: bold;
font-weight: 600;
font-display: swap;
src: url("fonts/Inter-SemiBold.otf");
@@ -16,22 +15,78 @@
@font-face {
font-family: "Inter";
font-style: bolder;
font-weight: 700;
font-display: swap;
src: url("fonts/Inter-Bold.otf");
}
@font-face {
font-family: "Source Code Pro";
font-style: bold;
font-weight: 600;
src: url("fonts/SourceCodePro-Semibold.otf");
:root {
--font-family-sans-serif: Inter, sans-serif;
--font-family-monospace: monospace;
--font-weight-normal: 400;
--font-weight-medium: 600;
--font-weight-bold: 700;
--font-size-tiny: 0.75rem;
--font-size-small: 0.875rem;
--font-size-regular: 1rem;
--font-size-medium: 1.25rem;
--font-size-large: 1.75rem;
--font-size-huge: 2rem;
}
@font-face {
font-family: "Source Code Pro";
font-style: bold;
font-weight: 700;
src: url("fonts/SourceCodePro-Bold.otf");
html {
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
font-family: var(--font-family-sans-serif);
font-feature-settings: "ss01", "ss02", "cv01", "cv03";
/* The root element font size has to be set in px,
* otherwise Safari breaks. */
font-size: 16px;
font-weight: var(--font-weight-normal);
line-height: 1.5;
}
p {
margin: 1rem 0;
}
.txt-title {
font-size: var(--font-size-large);
font-weight: var(--font-weight-normal);
color: var(--color-secondary);
text-align: left;
text-overflow: ellipsis;
overflow-x: hidden;
}
.txt-missing {
color: var(--color-foreground-faded);
font-style: italic;
}
.txt-tiny {
font-size: var(--font-size-tiny);
}
.txt-small {
font-size: var(--font-size-small);
}
.txt-regular {
font-size: var(--font-size-regular);
}
.txt-medium {
font-size: var(--font-size-medium);
}
.txt-large {
font-size: var(--font-size-large);
}
.txt-huge {
font-size: var(--font-size-huge);
}
.txt-monospace {
font-family: var(--font-family-monospace);
}
.txt-bold {
font-weight: var(--font-weight-bold) !important;
}
src/Address.svelte
+4 -4
View File
@@ -22,7 +22,7 @@
export let noAvatar = false;
export let compact = false;
export let small = false;
export let xsmall = false;
export let tiny = false;
export let highlight = false;
// This property allows components eg. Header.svelte to pass a resolved profile object.
export let profile: Profile | null = null;
@@ -72,7 +72,7 @@
}
.highlight {
color: var(--color-foreground-90);
font-weight: bold;
font-weight: var(--font-weight-bold);
}
.wrapper {
gap: 0.5rem;
@@ -84,8 +84,8 @@
<div
class="address"
title={address}
class:text-small={small}
class:text-xsmall={xsmall}
class:txt-small={small}
class:txt-tiny={tiny}
class:highlight>
{#if !noAvatar}
{#if resolve && profile?.avatar}
src/App.svelte
+4 -1
View File
@@ -59,6 +59,9 @@
flex-direction: column;
height: 100%;
}
.emoji {
margin: 1rem 0;
}
</style>
<svelte:window on:keydown={handleKeydown} />
@@ -104,7 +107,7 @@
<div class="wrapper">
<Modal error subtle>
<span slot="title">
<h3>👻</h3>
<div class="emoji">👻</div>
<div>Error connecting to network</div>
</span>
src/Async.svelte
+2 -2
View File
@@ -10,9 +10,9 @@
<slot {result} />
{:catch err}
<div class="commit">
<div class="error error-message text-xsmall">
<div class="error error-message txt-tiny">
<div>
API request to <code class="text-xsmall">{err.url}</code>
API request to <span class="txt-monospace">{err.url}</span>
failed.
</div>
</div>
src/Authorship.svelte
+4 -4
View File
@@ -36,17 +36,17 @@
}
.highlight {
color: var(--color-foreground-90);
font-weight: bold;
font-weight: var(--font-weight-bold);
}
.date {
color: var(--color-foreground-80);
}
</style>
<span class="authorship text-xsmall">
<span class="authorship txt-tiny">
{#if profile}
<Address
xsmall
tiny
highlight
resolve
noBadge
@@ -65,7 +65,7 @@
</span>
{/if}
<span class="caption">&nbsp;{caption}&nbsp;</span>
<span class="text-xsmall date">
<span class="txt-tiny date">
{formatTimestamp(timestamp)}
</span>
</span>
src/Badge.svelte
+1 -1
View File
@@ -12,7 +12,7 @@
.badge {
border-radius: var(--border-radius);
padding: 0.125rem 0.5rem;
font-size: 0.75rem;
font-size: var(--font-size-tiny);
line-height: 1.6;
height: var(--button-tiny-height);
display: flex;
src/Button.svelte
+3 -3
View File
@@ -21,7 +21,7 @@
cursor: pointer;
font-family: var(--font-family-sans-serif);
font-feature-settings: "ss01", "ss02", "cv01", "cv03";
font-size: 1rem;
font-size: var(--font-size-regular);
line-height: 1.6rem;
display: inline-flex;
justify-content: center;
@@ -92,12 +92,12 @@
}
.tiny {
font-size: 0.75rem;
font-size: var(--font-size-tiny);
height: var(--button-small-tiny);
padding: 0 0.6rem;
}
.small {
font-size: 0.875rem;
font-size: var(--font-size-small);
height: var(--button-small-height);
padding: 0 0.75rem;
}
src/Card.svelte
+1 -1
View File
@@ -55,7 +55,7 @@
overflow-x: hidden;
}
.card-members {
font-size: 0.875rem;
font-size: var(--font-size-small);
color: var(--color-foreground-faded);
}
src/Comment.svelte
+2 -2
View File
@@ -66,7 +66,7 @@
padding: 0.5rem 1rem;
}
.card-body {
font-size: 0.875rem;
font-size: var(--font-size-small);
padding: 0rem 1rem 1rem 1rem;
}
.reactions {
@@ -92,7 +92,7 @@
</div>
<div class="card-body">
{#if comment.body === ""}
<span class="subtle">No description.</span>
<span class="txt-missing">No description.</span>
{:else}
<Markdown content={comment.body} {getImage} />
{/if}
src/Error.svelte
+1 -1
View File
@@ -33,7 +33,7 @@
<span slot="body">
<slot>
<strong>Error:</strong>
<span class="txt-bold">Error:</span>
{body}
</slot>
</span>
src/Form.svelte
+3 -3
View File
@@ -244,12 +244,12 @@
{field.value}
{/if}
{:else}
<span class="subtle not-set">&cross; Not set</span>
<span class="txt-missing not-set">&cross; Not set</span>
{/if}
</span>
{/if}
{#if field.error}
<div class="description invalid text-small faded">
<div class="description invalid txt-small faded">
{#if field.example}
{field.error}, eg.
<em>{field.example}</em>
@@ -258,7 +258,7 @@
{/if}
</div>
{:else}
<div class="description text-small faded">
<div class="description txt-small faded">
{@html marked(field.description)}
</div>
{/if}
src/Header.svelte
+3 -4
View File
@@ -56,7 +56,6 @@
display: inline-block;
padding: 0.5rem 0.5rem;
margin-right: 1.5rem;
font-weight: 500;
cursor: pointer;
user-select: none;
color: var(--color-foreground-6);
@@ -147,10 +146,10 @@
{#if $error.type === Failure.TransactionFailed}
<div class="error">
{#if $error.message}
<strong>Error:</strong>
<span class="txt-bold">Error:</span>
{$error.message}
{:else if $error.txHash}
<strong>Error:</strong>
<span class="txt-bold">Error:</span>
Transaction
<a href="https://etherscan.io/tx/{$error.txHash}">{$error.txHash}</a>
failed.
@@ -194,7 +193,7 @@
<span class="balance">
{#if tokenBalance}
{formatBalance(tokenBalance)}
<strong>RAD</strong>
<span class="txt-bold">RAD</span>
{:else}
<Loading small />
{/if}
src/Input.svelte
+1 -1
View File
@@ -24,7 +24,7 @@
border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
}
input {
font-size: 0.75rem;
font-size: var(--font-size-tiny);
font-family: var(--font-family-monospace);
padding: 0.5rem;
border: none;
src/Markdown.svelte
+11 -12
View File
@@ -64,7 +64,7 @@
<style>
.front-matter {
font-size: 0.75rem;
font-size: var(--font-size-tiny);
font-family: var(--font-family-monospace);
color: var(--color-foreground-90);
border: 1px dashed var(--color-foreground-subtle);
@@ -96,8 +96,7 @@
}
.markdown :global(h1) {
font-family: var(--typeface-medium);
font-size: 1.5rem;
font-size: calc(var(--font-size-huge) * 0.75);
font-weight: var(--font-weight-medium);
padding: 1rem 0 0.5rem 0;
margin: 0 0 0.75rem;
@@ -105,15 +104,15 @@
}
.markdown :global(h2) {
font-size: 1.25rem;
font-weight: normal;
font-size: var(--font-size-medium);
font-weight: var(--font-weight-normal);
padding: 0.25rem 0;
margin: 2rem 0 0.5rem;
border-bottom: 1px dashed var(--color-foreground-subtle);
}
.markdown :global(h3) {
font-size: 1.125rem;
font-size: calc(var(--font-size-medium) * 0.9);
font-weight: var(--font-weight-medium);
padding: 0.5rem 0;
margin: 1rem 0 0.25rem;
@@ -121,21 +120,21 @@
.markdown :global(h4) {
font-weight: var(--font-weight-medium);
font-size: 1rem;
font-size: var(--font-size-regular);
padding: 0.5rem 0;
margin: 1rem 0 0.125rem;
}
.markdown :global(h5) {
font-weight: var(--font-weight-medium);
font-size: 0.875rem;
font-size: var(--font-size-small);
padding: 0.35rem 0;
margin: 1rem 0 0.125rem;
}
.markdown :global(h6) {
font-weight: var(--font-weight-medium);
font-size: 0.75rem;
font-size: var(--font-size-tiny);
padding: 0.25rem 0;
margin: 1rem 0 0.125rem;
}
@@ -167,7 +166,7 @@
.markdown :global(code) {
font-family: var(--font-family-monospace);
font-size: 1rem;
font-size: var(--font-size-regular);
color: var(--color-light);
}
@@ -178,7 +177,7 @@
.markdown :global(pre) {
font-family: var(--font-family-monospace);
font-size: 1rem;
font-size: var(--font-size-regular);
background-color: var(--color-foreground-background);
padding: 1rem !important;
border-radius: var(--border-radius-small);
@@ -233,7 +232,7 @@
<table>
{#each frontMatter as [key, val]}
<tr>
<td><strong>{key}</strong></td>
<td><span class="txt-bold">{key}</span></td>
<td>{val}</td>
</tr>
{/each}
src/MobileNavbar.svelte
+1 -1
View File
@@ -41,7 +41,7 @@
}
.modal-title {
color: var(--color-foreground);
font-size: 1rem;
font-size: var(--font-size-regular);
line-height: 2rem;
text-align: left;
text-overflow: ellipsis;
src/Modal.svelte
+4 -4
View File
@@ -56,8 +56,8 @@
}
.modal-title {
color: var(--color-foreground);
font-size: 1.25rem;
font-weight: bold;
font-size: var(--font-size-medium);
font-weight: var(--font-weight-bold);
line-height: 2.625rem;
margin-bottom: 0.5rem;
text-align: center;
@@ -66,14 +66,14 @@
}
.modal-subtitle {
color: var(--color-secondary);
font-size: 1rem;
font-size: var(--font-size-regular);
max-width: 90%;
margin: 0 auto;
line-height: 1.5;
}
.modal-body {
color: var(--color-foreground);
font-size: 1rem;
font-size: var(--font-size-regular);
overflow-x: hidden;
text-overflow: ellipsis;
margin: 3rem 0;
src/NotFound.svelte
+1 -1
View File
@@ -11,7 +11,7 @@
<Modal subtle>
<span slot="title">🏜️</span>
<span slot="body">
<p class="highlight text-medium"><strong>{title}</strong></p>
<p class="highlight txt-medium"><span class="txt-bold">{title}</span></p>
<p>{subtitle}</p>
</span>
<span slot="actions">
src/Options.svelte
+1 -1
View File
@@ -43,7 +43,7 @@
}
.options .description {
color: var(--color-secondary);
font-size: 0.875rem;
font-size: var(--font-size-small);
margin-bottom: 2rem;
}
.options .description:last-child {
src/Placeholder.svelte
+2 -3
View File
@@ -12,17 +12,16 @@
}
.placeholder header {
padding: 1rem 0;
font-weight: bold;
font-weight: var(--font-weight-bold);
}
.placeholder .icon {
font-size: 1.5rem;
margin-bottom: 1rem;
}
</style>
<div class="error error-message placeholder">
<header>
<div class="icon">{icon}</div>
<div class="icon txt-large">{icon}</div>
<slot name="title" />
</header>
<slot name="body" />
src/Profile.svelte
+7 -7
View File
@@ -201,13 +201,13 @@
title={profile.address} />
</div>
<div class="info">
<span class="title">
<span class="bold desktop">
<span class="title txt-title">
<span class="txt-bold desktop">
{profile.name
? utils.formatName(profile.name, config)
: profile.address}
</span>
<span class="bold mobile">
<span class="txt-bold mobile">
{profile.name
? utils.formatName(profile.name, config)
: utils.formatAddress(profile.address)}
@@ -317,7 +317,7 @@
{#if profile.name}
<a href={profile.registry(config)} class="link">{profile.name}</a>
{:else}
<span class="subtle">Not set</span>
<span class="txt-missing">Not set</span>
{/if}
</div>
<div class="desktop">
@@ -350,7 +350,7 @@
{#if profile.name}
<a href={profile.registry(config)} class="link">{profile.name}</a>
{:else}
<span class="subtle">Not set</span>
<span class="txt-missing">Not set</span>
{/if}
</div>
<div class="desktop">
@@ -401,7 +401,7 @@
{/if}
{:catch err}
<Message error>
<strong>Error:</strong>
<span class="txt-bold">Error:</span>
failed to load org members: {err.message}.
</Message>
{/await}
@@ -441,7 +441,7 @@
{/if}
{:catch err}
<Message error>
<strong>Error:</strong>
<span class="txt-bold">Error:</span>
failed to load orgs: {err.message}.
</Message>
{/await}
src/RadicleUrn.svelte
+1 -1
View File
@@ -19,7 +19,7 @@
<style>
.urn {
display: inline-flex;
font-size: 1rem;
font-size: var(--font-size-regular);
line-height: 2rem;
color: var(--color-foreground-90);
vertical-align: middle;
src/Search.svelte
+1 -1
View File
@@ -19,7 +19,7 @@
input {
height: 100%;
width: 100%;
font-size: 0.875rem;
font-size: var(--font-size-small);
text-overflow: ellipsis;
margin: 0;
padding: 0.5rem 1.25rem;
src/SeedAddress.svelte
+1 -1
View File
@@ -16,7 +16,7 @@
}
.seed-address {
display: inline-flex;
font-size: 1rem;
font-size: var(--font-size-regular);
line-height: 2rem;
color: var(--color-foreground-90);
vertical-align: middle;
src/ToggleButton.svelte
+1 -1
View File
@@ -35,7 +35,7 @@
color: var(--color-foreground-80);
cursor: pointer;
font-family: var(--font-family-monospace);
font-size: 0.75rem;
font-size: var(--font-size-tiny);
height: var(--button-tiny-height);
padding: 0.25rem 0.5rem;
border: none;
src/base/faucet/Index.svelte
+11 -5
View File
@@ -80,7 +80,7 @@
<style>
div.input-caption {
font-size: 1.25rem;
font-size: var(--font-size-medium);
text-align: left;
margin-left: 1.5rem;
padding-left: 1.5rem;
@@ -124,17 +124,23 @@
<div>
{#if config.network.name === "homestead"}
<div class="input-caption">
To get RAD tokens on <strong>{config.network.name}</strong>
To get RAD tokens on <span class="txt-bold">
{config.network.name}
</span>
, please check the known exchanges.
</div>
{:else if !$session}
<div class="input-caption">
To get RAD tokens on <strong>{config.network.name}</strong>
To get RAD tokens on <span class="txt-bold">
{config.network.name}
</span>
, please connect your wallet.
</div>
{:else}
<div class="input-caption">
Obtain RAD tokens on <strong>{config.network.name}</strong>
Obtain RAD tokens on <span class="txt-bold">
{config.network.name}
</span>
</div>
<div class="input-main">
<div class="name">
@@ -146,7 +152,7 @@
<Button variant="primary" on:click={withdraw}>Withdraw</Button>
</div>
{#if error}
<div class="error description invalid text-small faded">
<div class="error description invalid txt-small faded">
{error}
</div>
{/if}
src/base/home/Index.svelte
+6 -6
View File
@@ -44,7 +44,7 @@
color: var(--color-foreground-90);
padding: 0rem;
max-width: 70%;
font-size: 1.25rem;
font-size: var(--font-size-medium);
text-align: left;
border-radius: var(--border-radius);
margin-bottom: 1.5rem;
@@ -62,7 +62,7 @@
.heading {
color: var(--color-secondary);
padding: 1rem 0rem;
font-size: 1.25rem;
font-size: var(--font-size-medium);
margin-bottom: 1rem;
}
.loading {
@@ -71,10 +71,10 @@
@media (max-width: 720px) {
.blurb {
max-width: none;
font-size: 1rem;
font-size: var(--font-size-regular);
}
.heading {
font-size: 1rem;
font-size: var(--font-size-regular);
}
}
</style>
@@ -98,7 +98,7 @@
{:then results}
{#if results.length}
<div class="heading">
Explore <strong>projects</strong>
Explore <span class="txt-bold">projects</span>
on the Radicle network.
</div>
@@ -117,7 +117,7 @@
{:catch}
<div class="padding">
<Message error>
<strong>Error:</strong>
<span class="txt-bold">Error:</span>
failed to load projects.
</Message>
</div>
src/base/orgs/Create.svelte
+4 -4
View File
@@ -111,7 +111,7 @@
}
label[for="address"] {
margin-left: 1.5rem;
font-size: 0.75rem;
font-size: var(--font-size-tiny);
color: var(--color-secondary);
}
input[name="address"] {
@@ -119,7 +119,7 @@
width: 100%;
}
.notice {
font-size: 0.875rem;
font-size: var(--font-size-small);
border-radius: var(--border-radius);
color: var(--color-yellow);
background-color: var(--color-yellow-background);
@@ -136,7 +136,7 @@
<span slot="title">🎉</span>
<span slot="subtitle">
<strong>Your org was successfully created.</strong>
<span class="txt-bold">Your org was successfully created.</span>
</span>
<span slot="body">
@@ -181,7 +181,7 @@
{#if state === State.Idle}
<div class="configuration">
<div class="notice">
<strong>Notice:</strong>
<span class="txt-bold">Notice:</span>
Orgs V1 are being deprecated. It is recommended not to create new orgs
at this point.
</div>
src/base/orgs/Index.svelte
+8 -8
View File
@@ -34,7 +34,7 @@
}
main header {
color: var(--color-secondary);
font-size: 1.25rem;
font-size: var(--font-size-medium);
display: flex;
align-items: center;
padding: 1rem 0;
@@ -46,8 +46,6 @@
}
.orgs-empty {
padding: 2rem 0 1rem 0;
font-style: italic;
color: var(--color-foreground-faded);
}
.loading {
@@ -64,7 +62,7 @@
<div class="my-orgs">
<header>
<span>
My <strong>Orgs</strong>
My <span class="txt-bold">Orgs</span>
</span>
<Button variant="secondary" on:click={onCreate} disabled={!account}>
Create
@@ -77,12 +75,14 @@
</div>
{:then orgs}
<Cards {config} {orgs}>
<div class="orgs-empty">Orgs you are a member of show up here.</div>
<div class="orgs-empty txt-missing">
Orgs you are a member of show up here.
</div>
</Cards>
{:catch}
<div>
<Message error>
<strong>Error:</strong>
<span class="txt-bold">Error:</span>
failed to load orgs.
</Message>
</div>
@@ -92,7 +92,7 @@
<header>
<span>
<strong>Orgs</strong>
<span class="txt-bold">Orgs</span>
of the Radicle network
</span>
</header>
@@ -108,7 +108,7 @@
{:catch}
<div>
<Message error>
<strong>Error:</strong>
<span class="txt-bold">Error:</span>
failed to load orgs.
</Message>
</div>
src/base/orgs/TransferOwnership.svelte
+10 -8
View File
@@ -78,9 +78,11 @@
<div slot="title">✅</div>
<div slot="subtitle">
The ownership of <strong>{formatAddress(org.address)}</strong>
The ownership of <span class="txt-bold">
{formatAddress(org.address)}
</span>
was successfully transfered to
<strong>{newOwner}</strong>
<span class="txt-bold">{newOwner}</span>
.
</div>
@@ -96,11 +98,11 @@
<div slot="subtitle">
<p>
The transaction to set the owner of <strong>
The transaction to set the owner of <span class="txt-bold">
{formatAddress(org.address)}
</strong>
</span>
to
<strong>{newOwner}</strong>
<span class="txt-bold">{newOwner}</span>
was proposed to:
</p>
<p><Address address={org.owner} {config} compact /></p>
@@ -126,12 +128,12 @@
Waiting for transaction to be processed...
{:else if state === State.Proposing && org}
Proposal is being submitted to the safe
<strong>{formatAddress(org.owner)}</strong>
<span class="txt-bold">{formatAddress(org.owner)}</span>
, please sign the transaction in your wallet.
{:else if state === State.Idle}
Transfer the ownership of Org <strong>
Transfer the ownership of Org <span class="txt-bold">
{formatAddress(org.address)}
</strong>
</span>
to a new address.
{:else if state === State.Failed}
<div class="error">
src/base/profiles/AnchorActions.svelte
+9 -5
View File
@@ -114,7 +114,7 @@
<span class="confirmations">
{#if pending > 0}
<strong>{pending}</strong>
<span class="txt-bold">{pending}</span>
signature(s) pending
{/if}
</span>
@@ -177,9 +177,9 @@
{#if state === State.Confirm}
<div class="table">
<div>Project</div>
<code>{anchor.id}</code>
<span class="txt-monospace">{anchor.id}</span>
<div>Hash</div>
<code>{anchor.anchor.stateHash}</code>
<span class="txt-monospace">{anchor.anchor.stateHash}</span>
</div>
{:else if state === State.Failed}
<div>{error}</div>
@@ -231,9 +231,13 @@
{#if state === State.Confirm}
<div class="table">
<div>TxHash</div>
<code>{utils.formatHash(anchor.safeTxHash)}</code>
<span class="txt-monospace">
{utils.formatHash(anchor.safeTxHash)}
</span>
<div>Quorum</div>
<code>{anchor.confirmations.length} of {safe.threshold}</code>
<span class="txt-monospace">
{anchor.confirmations.length} of {safe.threshold}
</span>
</div>
{:else if state === State.Failed}
<div>{error}</div>
src/base/projects/Blob.svelte
+5 -5
View File
@@ -38,7 +38,7 @@
}
header .file-name {
font-weight: normal;
font-weight: var(--font-weight-normal);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -49,14 +49,14 @@
padding: 0.5rem;
color: var(--color-secondary);
background-color: var(--color-secondary-background);
font-size: 0.75rem;
font-size: var(--font-size-tiny);
border-radius: var(--border-radius-small);
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.last-commit .hash {
font-weight: bold;
font-weight: var(--font-weight-bold);
font-family: var(--font-family-monospace);
margin-right: 0.25rem;
}
@@ -124,7 +124,7 @@
@media (max-width: 960px) {
.code,
.line-numbers {
font-size: 0.875rem;
font-size: var(--font-size-small);
}
.highlight {
display: none;
@@ -150,7 +150,7 @@
{#if blob.binary}
<div class="binary">
<div>👀</div>
<span class="small">Binary content</span>
<span class="txt-tiny">Binary content</span>
</div>
{:else}
{#if line}
src/base/projects/Browser.svelte
+1 -1
View File
@@ -187,7 +187,7 @@
<Placeholder icon="🍂">
<span slot="title">
{#if path !== "/"}
<div><code>{path}</code></div>
<div class="txt-monospace">{path}</div>
{/if}
</span>
<span slot="body">
src/base/projects/CloneButton.svelte
+1 -1
View File
@@ -42,7 +42,7 @@
label {
color: var(--color-foreground-faded);
display: block;
font-size: 0.75rem;
font-size: var(--font-size-tiny);
padding: 0.5rem 0.5rem 0 0.25rem;
}
</style>
src/base/projects/Commit.svelte
+5 -5
View File
@@ -40,7 +40,7 @@
}
.sha1 {
color: var(--color-foreground-80);
font-size: 0.875rem;
font-size: var(--font-size-small);
}
.authorship {
display: flex;
@@ -58,15 +58,15 @@
<div class="commit">
<header>
<div class="summary">
<div class="text-medium">{commit.header.summary}</div>
<div class="desktop font-mono sha1">
<div class="txt-medium">{commit.header.summary}</div>
<div class="desktop txt-monospace sha1">
<span>{commit.header.sha1}</span>
</div>
<div class="mobile font-mono sha1 text-small">
<div class="mobile txt-monospace sha1 txt-small">
{formatCommit(commit.header.sha1)}
</div>
</div>
<pre class="description text-small">{commit.header.description}</pre>
<pre class="description txt-small">{commit.header.description}</pre>
<div class="authorship">
<CommitAuthorship {commit} />
{#if commit.context?.committer}
src/base/projects/Commit/CommitAuthorship.svelte
+4 -4
View File
@@ -36,14 +36,14 @@
}
</style>
<span class="authorship text-xsmall">
<span class="authorship txt-tiny">
{#if commit.header.author.email === commit.header.committer.email}
<img
class="avatar"
alt="avatar"
src={gravatarURL(commit.header.committer.email)} />
{#if commit.context?.committer}
<span class="bold committer verified-committer">
<span class="txt-bold committer verified-committer">
{commit.context?.committer.peer.person.name}
</span>
<span>&nbsp;committed</span>
@@ -67,7 +67,7 @@
alt="avatar"
src={gravatarURL(commit.header.committer.email)} />
{#if commit.context?.committer}
<span class="bold committer verified-committer">
<span class="txt-bold committer verified-committer">
{commit.context?.committer.peer.person.name}
</span>
<span>&nbsp;committed</span>
@@ -80,7 +80,7 @@
{/if}
{#if showTime}
<span>&nbsp;</span>
<span class="desktop-inline text-xsmall time">
<span class="desktop-inline txt-tiny time">
{formatTimestamp(commit.header.committerTime)}
</span>
{/if}
src/base/projects/Commit/CommitTeaser.svelte
+1 -1
View File
@@ -19,7 +19,7 @@
<style>
.hash {
font-family: var(--font-family-monospace);
font-size: 0.75rem;
font-size: var(--font-size-tiny);
padding: 0 1.5rem;
}
.commit-teaser {
src/base/projects/Commit/CommitVerifiedBadge.svelte
+2 -2
View File
@@ -28,7 +28,7 @@
border-radius: var(--border-radius-small);
box-shadow: 16px 16px 32px 32px var(--color-shadow);
color: var(--color-foreground);
font-size: 0.75rem;
font-size: var(--font-size-tiny);
left: -10rem;
margin-top: 0.5rem;
padding: 0.5rem 0;
@@ -75,7 +75,7 @@
<CommitAuthorship {commit} showAuthor={false} showTime={false} />
{#if commit.context.committer}
<div class="peer">
<span class="text-faded">{commit.context.committer.peer.id}</span>
<span class="faded">{commit.context.committer.peer.id}</span>
</div>
{/if}
</div>
src/base/projects/Header.svelte
+5 -5
View File
@@ -41,7 +41,7 @@
<style>
header {
font-size: 0.75rem;
font-size: var(--font-size-tiny);
padding: 0 2rem 0 8rem;
margin-bottom: 2rem;
display: flex;
@@ -131,7 +131,7 @@
class="stat commit-count clickable widget"
class:active={content === ProjectContent.History}
on:click={() => toggleContent(ProjectContent.History, true)}>
<strong>{tree.stats.commits}</strong>
<span class="txt-bold">{tree.stats.commits}</span>
commit(s)
</div>
{#if project.issues}
@@ -141,7 +141,7 @@
class:not-allowed={project.issues === 0}
class:clickable={project.issues > 0}
on:click={() => toggleContent(ProjectContent.Issues, false)}>
<strong>{project.issues}</strong>
<span class="txt-bold">{project.issues}</span>
issue(s)
</div>
{/if}
@@ -152,12 +152,12 @@
class:not-allowed={project.patches === 0}
class:clickable={project.patches > 0}
on:click={() => toggleContent(ProjectContent.Patches, false)}>
<strong>{project.patches}</strong>
<span class="txt-bold">{project.patches}</span>
patch(es)
</div>
{/if}
<div class="stat contributor-count widget">
<strong>{tree.stats.contributors}</strong>
<span class="txt-bold">{tree.stats.contributors}</span>
contributor(s)
</div>
</header>
src/base/projects/History.svelte
+1 -1
View File
@@ -41,7 +41,7 @@
<style>
.history {
padding: 0 2rem 0 8rem;
font-size: 0.875rem;
font-size: var(--font-size-small);
}
.commit-group header {
color: var(--color-foreground-faded);
src/base/projects/Issue.svelte
+7 -7
View File
@@ -39,7 +39,7 @@
flex-basis: 18rem;
margin-left: 1rem;
border-radius: var(--border-radius);
font-size: 0.875rem;
font-size: var(--font-size-small);
padding-left: 1rem;
}
.metadata-section {
@@ -47,7 +47,7 @@
border-bottom: 1px dashed var(--color-foreground-subtle);
}
.metadata-section-header {
font-size: 0.875rem;
font-size: var(--font-size-small);
margin-bottom: 0.75rem;
color: var(--color-foreground-faded);
}
@@ -63,7 +63,7 @@
background-color: var(--color-tertiary-background);
padding: 0.25rem 0.75rem;
margin-right: 0.5rem;
font-size: 0.875rem;
font-size: var(--font-size-small);
line-height: 1.6;
}
@@ -82,7 +82,7 @@
display: flex;
}
.id {
font-size: 0.75rem;
font-size: var(--font-size-tiny);
margin-left: 0.75rem;
color: var(--color-foreground-faded);
}
@@ -112,11 +112,11 @@
<header>
<div class="summary">
<div class="summary-left">
<span class="summary-title text-medium">
<span class="summary-title txt-medium">
{issue.title}
</span>
<span class="font-mono id desktop">{issue.id}</span>
<span class="font-mono id mobile">{formatObjectId(issue.id)}</span>
<span class="txt-monospace id desktop">{issue.id}</span>
<span class="txt-monospace id mobile">{formatObjectId(issue.id)}</span>
</div>
<div
class="summary-state"
src/base/projects/Issue/IssueTeaser.svelte
+3 -3
View File
@@ -39,7 +39,7 @@
}
.issue-id {
color: var(--color-foreground-faded);
font-size: 0.75rem;
font-size: var(--font-size-tiny);
font-family: var(--font-family-monospace);
margin-left: 0.5rem;
}
@@ -56,7 +56,7 @@
}
.comment-count {
color: var(--color-foreground-70);
font-weight: bold;
font-weight: var(--font-weight-bold);
}
.comment-count .emoji {
margin-right: 0.25rem;
@@ -122,7 +122,7 @@
{#if commentCount > 0}
<div class="column-right">
<div class="comment-count">
<span class="text-xsmall emoji">💬</span>
<span class="txt-tiny emoji">💬</span>
<span>{commentCount}</span>
</div>
</div>
src/base/projects/Issues.svelte
+1 -1
View File
@@ -44,7 +44,7 @@
<style>
.issues {
padding: 0 2rem 0 8rem;
font-size: 0.875rem;
font-size: var(--font-size-small);
}
.issues-list {
border-radius: var(--border-radius);
src/base/projects/Patch.svelte
+4 -4
View File
@@ -64,7 +64,7 @@
margin-right: 0.75rem;
}
.id {
font-size: 0.75rem;
font-size: var(--font-size-tiny);
color: var(--color-foreground-faded);
}
.summary-state {
@@ -97,11 +97,11 @@
<header>
<div class="summary">
<div class="summary-left">
<span class="summary-title text-medium">
<span class="summary-title txt-medium">
{patch.title}
</span>
<span class="font-mono id desktop">{patch.id}</span>
<span class="font-mono id mobile">{formatObjectId(patch.id)}</span>
<span class="txt-monospace id desktop">{patch.id}</span>
<span class="txt-monospace id mobile">{formatObjectId(patch.id)}</span>
</div>
<div
class="summary-state"
src/base/projects/Patch/PatchSideBar.svelte
+3 -3
View File
@@ -9,7 +9,7 @@
flex-basis: 18rem;
margin-left: 1rem;
border-radius: var(--border-radius-medium);
font-size: 0.875rem;
font-size: var(--font-size-small);
padding-left: 1rem;
}
.metadata-section {
@@ -17,7 +17,7 @@
border-bottom: 1px dashed var(--color-foreground-subtle);
}
.metadata-section-header {
font-size: 0.875rem;
font-size: var(--font-size-small);
margin-bottom: 0.75rem;
color: var(--color-foreground-faded);
}
@@ -33,7 +33,7 @@
background-color: var(--color-tertiary-background);
padding: 0.25rem 0.75rem;
margin-right: 0.5rem;
font-size: 0.875rem;
font-size: var(--font-size-small);
line-height: 1.6;
}
</style>
src/base/projects/Patch/PatchTabBar.svelte
+3 -3
View File
@@ -57,7 +57,7 @@
border: none;
color: var(--color-foreground-80);
font-family: var(--font-family-monospace);
font-size: 0.75rem;
font-size: var(--font-size-tiny);
height: var(--button-tiny-height);
padding: 0.25rem 0.5rem;
background-color: var(--color-background);
@@ -72,7 +72,7 @@
}
</style>
<div class="bar text-small">
<div class="bar txt-small">
<ToggleButton
{options}
on:select={e => {
@@ -83,7 +83,7 @@
<Floating disabled={revisions.length <= 1}>
<button
slot="toggle"
class="text-small revision-toggle"
class="txt-small revision-toggle"
disabled={revisions.length <= 1}>
{formatRevisionName(revisions[revisionNumber], revisionNumber)}
</button>
src/base/projects/Patch/PatchTeaser.svelte
+3 -3
View File
@@ -39,7 +39,7 @@
}
.patch-id {
color: var(--color-foreground-faded);
font-size: 0.75rem;
font-size: var(--font-size-tiny);
font-family: var(--font-family-monospace);
margin-left: 0.5rem;
}
@@ -56,7 +56,7 @@
}
.comment-count {
color: var(--color-foreground-70);
font-weight: bold;
font-weight: var(--font-weight-bold);
}
.comment-count .emoji {
margin-right: 0.25rem;
@@ -122,7 +122,7 @@
{#if commentCount > 0}
<div class="column-right">
<div class="comment-count">
<span class="text-xsmall emoji">💬</span>
<span class="txt-tiny emoji">💬</span>
<span>{commentCount}</span>
</div>
</div>
src/base/projects/Patches.svelte
+1 -1
View File
@@ -41,7 +41,7 @@
<style>
.patches {
padding: 0 2rem 0 8rem;
font-size: 0.875rem;
font-size: var(--font-size-small);
}
.patches-list {
border-radius: var(--border-radius-small);
src/base/projects/PeerSelector.svelte
+1 -1
View File
@@ -33,7 +33,7 @@
console.debug("Not able to resolve peer identity for: ", p.id);
}
const key = p.person?.name
? `<strong>${p.person.name}</strong> ${p.id}`
? `<span class="txt-bold">${p.person.name}</span> ${p.id}`
: p.id;
return {
src/base/projects/Project.svelte
+5 -3
View File
@@ -94,11 +94,11 @@
{/if}
{:catch err}
<div class="container center-content">
<div class="error error-message text-xsmall">
<div class="error error-message txt-tiny">
<!-- TODO: Differentiate between (1) commit doesn't exist and (2) failed
to fetch - this needs a change to the backend. -->
API request to
<code class="text-xsmall">{err.url}</code>
<span class="txt-monospace">{err.url}</span>
failed
</div>
</div>
@@ -141,7 +141,9 @@
<div class="content">
{#if peer}
<Placeholder icon="🍂">
<span slot="title"><code>{formatSeedId(peer)}</code></span>
<span slot="title">
<span class="txt-monospace">{formatSeedId(peer)}</span>
</span>
<span slot="body">Couldn't load remote source tree.</span>
</Placeholder>
{:else}
src/base/projects/ProjectMeta.svelte
+13 -7
View File
@@ -26,17 +26,17 @@
display: flex;
align-items: center;
justify-content: left;
font-size: 2rem;
font-size: var(--font-size-huge);
margin-bottom: 0.5rem;
}
.title .divider {
color: var(--color-foreground-subtle);
margin: 0 0.5rem;
font-weight: normal;
font-weight: var(--font-weight-normal);
}
.title .peer-id {
color: var(--color-foreground-subtle);
font-weight: normal;
font-weight: var(--font-weight-normal);
display: flex;
align-items: center;
}
@@ -47,7 +47,7 @@
}
.urn {
font-family: var(--font-family-monospace);
font-size: 0.75rem;
font-size: var(--font-size-tiny);
color: var(--color-foreground-faded);
overflow-wrap: anywhere;
display: flex;
@@ -66,6 +66,12 @@
padding: 0 2rem 0 8rem;
}
.truncate {
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden;
}
@media (max-width: 960px) {
.content {
padding-left: 2rem;
@@ -74,7 +80,7 @@
</style>
<header class="content">
<div class="title bold">
<div class="title txt-bold txt-title">
{#if project.profile}
<a
class="org-avatar"
@@ -86,7 +92,7 @@
</a>
<span class="divider">/</span>
{/if}
<span class="text-truncate">
<span class="truncate">
<Link to={rootPath()}>{project.name}</Link>
</span>
{#if peer}
@@ -98,7 +104,7 @@
{/if}
</div>
<div class="urn">
<span class="text-truncate">{project.urn}</span>
<span class="truncate">{project.urn}</span>
<Clipboard small text={project.urn} />
</div>
{#if !noDescription}
src/base/projects/SourceBrowser/FileDiff.svelte
+1 -4
View File
@@ -108,9 +108,6 @@
td.diff-line-number {
color: var(--color-foreground-4);
}
.file-path {
font-size: 1rem;
}
.browse {
display: flex;
}
@@ -119,7 +116,7 @@
<article id={file.path} class="changeset-file">
<header class="file-header" on:click={collapse}>
<div class="actions">
<p class="file-path">{file.path}</p>
<p class="txt-regular">{file.path}</p>
{#if mode === "created"}
<Badge variant="positive">created</Badge>
{:else if mode === "deleted"}
src/base/projects/Widget.svelte
+7 -7
View File
@@ -79,17 +79,17 @@
border-color: var(--color-foreground-faded);
}
article .id {
font-size: 1rem;
font-weight: 600;
font-size: var(--font-size-regular);
font-weight: var(--font-weight-medium);
margin-bottom: 0.5rem;
}
article .description {
margin-bottom: 0.25rem;
font-size: 0.75rem;
font-size: var(--font-size-tiny);
}
article .stateHash {
color: var(--color-secondary);
font-size: 0.75rem;
font-size: var(--font-size-tiny);
min-height: 2rem;
display: flex;
align-items: center;
@@ -116,9 +116,9 @@
article .id .urn {
visibility: hidden;
color: var(--color-foreground-faded);
font-weight: normal;
font-weight: var(--font-weight-normal);
font-family: var(--font-family-monospace);
font-size: 0.75rem;
font-size: var(--font-size-tiny);
}
article .anchor-badge {
display: none;
@@ -152,7 +152,7 @@
{project.head}
{/if}
{:else}
<span class="subtle">✗ No head</span>
<span class="txt-missing">✗ No head</span>
{/if}
</slot>
</span>
src/base/registrations/Index.svelte
+6 -5
View File
@@ -35,7 +35,7 @@
<style>
div.input-caption {
font-size: 1.25rem;
font-size: var(--font-size-medium);
text-align: left;
margin-left: 1.5rem;
padding-left: 1.5rem;
@@ -69,12 +69,13 @@
<main class="off-centered">
<div>
<div class="input-caption">
Register a <strong>{config.registrar.domain}</strong>
Register a <span class="txt-bold">{config.registrar.domain}</span>
name
<div class="text-small explainer">
Register a unique name with our ENS registrar, under the <strong>
<div class="txt-small explainer">
Register a unique name with our ENS registrar, under the <span
class="txt-bold">
radicle.eth
</strong>
</span>
domain (e.g. cloudhead.radicle.eth). Radicle names never expire and free
to register.
</div>
src/base/registrations/New.svelte
+5 -5
View File
@@ -82,22 +82,22 @@
<span slot="body">
{#if state === State.NameAvailable}
{#if registrationOwner}
The name <strong>{name}</strong>
The name <span class="txt-bold">{name}</span>
is available for registration under account
<strong>{formatAddress(registrationOwner)}</strong>
<span class="txt-bold">{formatAddress(registrationOwner)}</span>
.
{:else}
The name <strong>{name}</strong>
The name <span class="txt-bold">{name}</span>
is available.
{/if}
{:else if state === State.NameUnavailable}
This name is <strong>not available</strong>
This name is <span class="txt-bold">not available</span>
for registration.
{:else if state === State.CheckingAvailability}
<Loading small center />
{:else if state === State.CheckingFailed && error}
<Message error>
<strong>Error:</strong>
<span class="txt-bold">Error:</span>
{error}
</Message>
{/if}
src/base/registrations/Submit.svelte
+3 -3
View File
@@ -70,17 +70,17 @@
{:else if $state.connection === State.SigningPermit}
Approving registration fee. Please confirm in your wallet.
{:else if $state.connection === State.SigningCommit}
Committing to <strong>{name}</strong>
Committing to <span class="txt-bold">{name}</span>
. Please confirm transaction in your wallet.
{:else if $state.connection === State.Committing}
Waiting for <strong>commit</strong>
Waiting for <span class="txt-bold">commit</span>
transaction to be processed&hellip;
{:else if $state.connection === State.WaitingToRegister && $state.commitmentBlock}
Waiting for commitment to mature. This may take a moment.
{:else if $state.connection === State.SigningRegister}
Proceeding with registration. Please confirm transaction in your wallet.
{:else if $state.connection === State.Registering}
Waiting for <strong>register</strong>
Waiting for <span class="txt-bold">register</span>
transaction to be processed&hellip;
{/if}
</span>
src/base/registrations/Update.svelte
+1 -1
View File
@@ -63,7 +63,7 @@
<p>Your registration was successfully updated.</p>
{:else if state.status === Status.Failed}
<p class="error">
<strong>Error:</strong>
<span class="txt-bold">Error:</span>
{state.error}
</p>
{/if}
src/base/registrations/View.svelte
+5 -2
View File
@@ -226,6 +226,9 @@
padding-right: 1rem;
}
}
.domain {
margin-bottom: 2rem;
}
</style>
<svelte:head>
@@ -249,7 +252,7 @@
<span slot="body">
<p>
The name <strong>{domain}</strong>
The name <span class="txt-bold">{domain}</span>
is not registered.
</p>
</span>
@@ -261,7 +264,7 @@
{:else if state.status === Status.Found}
<main>
<header>
<h1 class="bold">{domain}</h1>
<div class="domain txt-title txt-bold">{domain}</div>
<div style="width: 4rem;">
{#if !editable}
<Button
src/base/resolver/List.svelte
+2 -2
View File
@@ -23,8 +23,8 @@
<Modal subtle>
<span slot="title">️🔍</span>
<span slot="subtitle">
<p class="highlight text-medium">
<strong>Multiple names found for {query}</strong>
<p class="highlight txt-medium">
<span class="txt-bold">Multiple names found for {query}</span>
</p>
</span>
<span slot="body">
src/base/seeds/View.svelte
+3 -3
View File
@@ -107,8 +107,8 @@
{:then seed}
<main>
<header>
<span class="title">
<span class="bold">
<span class="title txt-title">
<span class="txt-bold">
{hostName}
<span class="desktop inline">{seed.emoji}</span>
</span>
@@ -118,7 +118,7 @@
{#if session?.signer}
{#if siweSession}
<div class="session-info">
<span class="signed-in text-small">Signed in as</span>
<span class="signed-in txt-small">Signed in as</span>
<Address
address={siweSession.address}
{config}
src/base/vesting/Index.svelte
+5 -5
View File
@@ -39,7 +39,7 @@
<style>
div.input-caption {
font-size: 1.25rem;
font-size: var(--font-size-medium);
text-align: left;
margin-left: 1.5rem;
padding-left: 1.5rem;
@@ -85,21 +85,21 @@
<td class="label">Allocation</td>
<td>
{info.totalVesting}
<strong>{info.symbol}</strong>
<span class="txt-bold">{info.symbol}</span>
</td>
</tr>
<tr>
<td class="label">Withdrawn</td>
<td>
{info.withdrawn}
<strong>{info.symbol}</strong>
<span class="txt-bold">{info.symbol}</span>
</td>
</tr>
<tr>
<td class="label">Withdrawable</td>
<td>
{info.withdrawableBalance}
<strong>{info.symbol}</strong>
<span class="txt-bold">{info.symbol}</span>
</td>
</tr>
</table>
@@ -128,7 +128,7 @@
</Modal>
{:else}
<div class="input-caption">
Enter your Radicle <strong>vesting contract</strong>
Enter your Radicle <span class="txt-bold">vesting contract</span>
address
</div>
<div class="input-main">
src/components/Modal/ConnectWallet.svelte
+3 -3
View File
@@ -62,10 +62,10 @@
</div>
<div slot="subtitle">
<div class="text-small">
Scan the QR code with <strong>WalletConnect</strong>
<div class="txt-small">
Scan the QR code with <span class="txt-bold">WalletConnect</span>
or use
<strong>Metamask</strong>
<span class="txt-bold">Metamask</span>
.
</div>
</div>
src/ens/SetName.svelte
+10 -8
View File
@@ -79,7 +79,7 @@
<div slot="subtitle">
The ENS name for {entity.address} was set to
<strong>{name}.{config.registrar.domain}</strong>
<span class="txt-bold">{name}.{config.registrar.domain}</span>
.
</div>
@@ -95,11 +95,11 @@
<div slot="subtitle">
<p>
The transaction to set the ENS name for <strong>
The transaction to set the ENS name for <span class="txt-bold">
{formatAddress(entity.address)}
</strong>
</span>
to
<strong>{name}.{config.registrar.domain}</strong>
<span class="txt-bold">{name}.{config.registrar.domain}</span>
was proposed to:
</p>
<p><Address address={org.owner} {config} compact /></p>
@@ -113,9 +113,9 @@
</Modal>
{:else if state === State.Mismatch}
<Error floating title="🧣" on:close>
The name <strong>{name}.{config.registrar.domain}</strong>
The name <span class="txt-bold">{name}.{config.registrar.domain}</span>
does not resolve to
<strong>{entity.address}</strong>
<span class="txt-bold">{entity.address}</span>
. Please update the ENS record for {name}.{config.registrar.domain} to point
to the correct address and try again.
@@ -146,10 +146,12 @@
Waiting for transaction to be processed...
{:else if state === State.Proposing && org}
Proposal is being submitted
<strong>{formatAddress(org.owner)}</strong>
<span class="txt-bold">{formatAddress(org.owner)}</span>
, please sign the transaction in your wallet.
{:else}
Set an ENS name for <strong>{formatAddress(entity.address)}</strong>
Set an ENS name for <span class="txt-bold">
{formatAddress(entity.address)}
</span>
to associate a profile. ENS profiles provide human-identifiable data to your
{label}, such as a unique name, avatar and URL, and help make your {label}
more discoverable.