Radish alpha
r
radicle-desktop
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Patches › 8b9c4088
Adjust font size
Draft did:key:z6MkkfM3...sVz5 opened 1 year ago

checkcheck-unit-testcheck-e2e

👉 Workflow runs 👉 Branch on GitHub

Activity Changes +117 -51
33 files changed +117 -51 c754c4f3 → 79c3af8f
modified public/typography.css
@@ -58,6 +58,7 @@
}



:root {
+ 
  --font-size: 16px;

  --font-family-sans-serif: Inter, sans-serif;

  --font-family-monospace: monospace;

  --font-weight-regular: 400;
@@ -89,10 +90,13 @@ html {
  font-feature-settings: "zero";

  /* The root element font size has to be set in px,

   * otherwise Safari breaks. */
- 
  font-size: 16px;
+ 
  font-size: var(--font-size);

  font-weight: var(--font-weight-regular);
+ 
}
+
+ 
body {

  /* On Safari this aligns text with different font-faces properly vertically. */
- 
  line-height: 22px;
+ 
  line-height: 1.375rem;

}



p {
modified src/App.svelte
@@ -7,11 +7,17 @@


  import * as router from "@app/lib/router";

  import { checkAuth, startup } from "@app/lib/auth.svelte";
- 
  import { dynamicInterval } from "@app/lib/interval";

  import { createEventEmittersOnce } from "@app/lib/startup.svelte";
+ 
  import { dynamicInterval } from "@app/lib/interval";

  import { invoke } from "@app/lib/invoke";
+ 
  import {
+ 
    resetFontSize,
+ 
    increaseFontSize,
+ 
    decreaseFontSize,
+ 
    fontSettings,
+ 
  } from "@app/lib/appearance.svelte";

  import { theme } from "@app/components/ThemeSwitch.svelte";
- 
  import { unreachable } from "@app/lib/utils";
+ 
  import { unreachable, isMac } from "@app/lib/utils";



  import Auth from "@app/views/booting/Auth.svelte";

  import CreateIdentity from "@app/views/booting/CreateIdentity.svelte";
@@ -70,9 +76,29 @@
    }

  });
+ 
  $effect(() =>
+ 
    document.documentElement.style.setProperty(
+ 
      "--font-size",
+ 
      `${fontSettings.size}px`,
+ 
    ),
+ 
  );

  $effect(() => document.documentElement.setAttribute("data-theme", $theme));

</script>
+ 
<svelte:document
+ 
  onkeydown={e => {
+ 
    const auxiliarKey = isMac() ? e.metaKey : e.ctrlKey;
+ 
    // Handles the position of the plus key on different keyboard layouts.
+ 
    const plusKey = e.key === "1" || e.key === "=";
+ 
    if (auxiliarKey && (e.key === "+" || plusKey)) {
+ 
      increaseFontSize();
+ 
    } else if (auxiliarKey && e.key === "-") {
+ 
      decreaseFontSize();
+ 
    } else if (auxiliarKey && e.key.toLowerCase() === "0") {
+ 
      resetFontSize();
+ 
    }
+ 
  }} />
+ 


{#if $activeRouteStore.resource === "booting"}

  {#if startup.error?.code === "IdentityError.MissingProfile"}

    <CreateIdentity />
modified src/components/Button.svelte
@@ -311,7 +311,7 @@
  .p3-3 {

    grid-area: p3-3;

    background-color: var(--button-color-1);
- 
    padding: 0 8px;
+ 
    padding: 0 0.5rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;
modified src/components/Changes.svelte
@@ -80,8 +80,8 @@
    border-left: 4px solid var(--color-background-default);

  }

  .commit-dot {
- 
    width: 4px;
- 
    height: 4px;
+ 
    width: 0.25rem;
+ 
    height: 0.25rem;

    position: absolute;

    top: 0.625rem;

    left: -18.5px;
modified src/components/CobCommitTeaser.svelte
@@ -48,7 +48,7 @@
    align-items: center;

    gap: 1rem;

    margin-left: auto;
- 
    height: 21px;
+ 
    height: 1.3125rem;

  }

  .commit-message {

    font-size: var(--font-size-tiny);
@@ -57,7 +57,7 @@
    user-select: text;

  }

  .commit-expand-button {
- 
    height: 21px;
+ 
    height: 1.3125rem;

    display: flex;

    align-items: center;

  }
@@ -81,7 +81,7 @@
      {#if commit.message.trim() !== commit.summary.trim()}

        <div class="commit-expand-button">

          <NakedButton
- 
            stylePadding="0 4px"
+ 
            stylePadding="0 0.25rem"

            variant="ghost"

            onclick={e => {

              e.stopPropagation();
modified src/components/CommitsContainer.svelte
@@ -48,7 +48,7 @@
  <div class="header" class:collapsed={!expanded}>

    <div class="left">

      <NakedButton
- 
        stylePadding="0 4px"
+ 
        stylePadding="0 0.25rem"

        variant="ghost"

        onclick={async () => {

          expanded = !expanded;
modified src/components/ConfirmClear.svelte
@@ -20,7 +20,7 @@


<Popover popoverPositionRight="0" popoverPositionTop="2.5rem">

  {#snippet toggle(onclick)}
- 
    <NakedButton stylePadding="0 4px" variant="ghost" {onclick}>
+ 
    <NakedButton stylePadding="0 0.25rem" variant="ghost" {onclick}>

      <Icon name="broom-double" />

    </NakedButton>

  {/snippet}
modified src/components/Diff.svelte
@@ -222,7 +222,7 @@
  .container {

    /* Make space for the box-shadow border, otherwise it gets cut off due to

       overflow: hide on the container. */
- 
    padding: 8px 1px;
+ 
    padding: 0.5rem 0.0625rem;

    font-size: var(--font-size-small);

    font-family: var(--font-family-monospace);

  }
@@ -315,7 +315,7 @@
    display: flex;

    background-color: var(--color-fill-ghost);

    clip-path: var(--1px-corner-fill);
- 
    padding: 0 8px;
+ 
    padding: 0 0.5rem;

    width: fit-content;

  }

</style>
modified src/components/HomeSidebar.svelte
@@ -37,7 +37,7 @@
    display: flex;

    font-size: var(--font-size-small);

    justify-content: space-between;
- 
    padding: 8px 4px 8px 8px;
+ 
    padding: 0.5rem 0.25rem 0.5rem 0.5rem;

    width: 100%;

  }

  .tab:not(.active) {
modified src/components/IssueStateButton.svelte
@@ -34,8 +34,8 @@
    font-size: var(--font-size-small);

  }

  .badge {
- 
    gap: 6px;
- 
    padding-right: 10px;
+ 
    gap: 0.375rem;
+ 
    padding-right: 0.625rem;

  }

</style>
modified src/components/IssuesSecondColumn.svelte
@@ -32,7 +32,7 @@
    display: flex;

    font-size: var(--font-size-small);

    justify-content: space-between;
- 
    padding: 8px 4px 8px 8px;
+ 
    padding: 0.5rem 0.25rem 0.5rem 0.5rem;

    width: 100%;

  }

  .tab:not(.active) {
@@ -128,7 +128,7 @@
        <div

          class="tab"

          style:color="var(--color-foreground-contrast)"
- 
          style:padding-left="12px">
+ 
          style:padding-left="0.75rem">

          <div class="global-flex"><Icon name="patch" />Patches</div>

          <div class="global-counter">

            {project.meta.patches.draft +
modified src/components/NakedButton.svelte
@@ -20,7 +20,7 @@
    variant,

    onclick,

    styleHeight = "2rem",
- 
    stylePadding = "0 8px",
+ 
    stylePadding = "0 0.5rem",

    active = false,

    keyShortcuts,

  }: Props = $props();
modified src/components/NotificationTeaser.svelte
@@ -212,7 +212,7 @@
    </div>

    <div class="clear-icon">

      <NakedButton
- 
        stylePadding="0 4px"
+ 
        stylePadding="0 0.25rem"

        variant="ghost"

        onclick={e => {

          e.stopPropagation();
modified src/components/OutlineButton.svelte
@@ -79,7 +79,7 @@
  }

  .p3-3 {

    grid-area: p3-3;
- 
    padding: 0 8px;
+ 
    padding: 0 0.5rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;
modified src/components/PatchStateButton.svelte
@@ -37,8 +37,8 @@
  }



  .badge {
- 
    gap: 6px;
- 
    padding-right: 10px;
+ 
    gap: 0.375rem;
+ 
    padding-right: 0.625rem;

  }

</style>
modified src/components/PatchTeaser.svelte
@@ -84,7 +84,7 @@
    class="patch-teaser"

    style:align-items="flex-start"

    style:clip-path={focussed ? "none" : undefined}
- 
    style:padding={focussed ? "1rem" : "20px"}
+ 
    style:padding={focussed ? "1rem" : "1.25rem"}

    onclick={async () => {

      if (loadPatch) {

        await loadPatch(patch.id);
modified src/components/PatchTimeline.svelte
@@ -90,7 +90,7 @@
    gap: 0.25rem;

  }

  .icon {
- 
    padding-top: 3px;
+ 
    padding-top: 0.1875rem;

  }

</style>
modified src/components/PatchesSecondColumn.svelte
@@ -31,7 +31,7 @@
    display: flex;

    font-size: var(--font-size-small);

    justify-content: space-between;
- 
    padding: 8px 4px 8px 8px;
+ 
    padding: 0.5rem 0.25rem 0.5rem 0.5rem;

    width: 100%;

  }

  .tab:not(.active) {
@@ -75,7 +75,7 @@
        <div

          class="tab"

          style:color="var(--color-foreground-contrast)"
- 
          style:padding-left="12px">
+ 
          style:padding-left="0.75rem">

          <div class="global-flex"><Icon name="issue" />Issues</div>

          <div class="global-counter">

            {project.meta.issues.open + project.meta.issues.closed}
modified src/components/ReactionSelector.svelte
@@ -36,7 +36,7 @@
    cursor: pointer;

    border: 0;

    background: none;
- 
    height: 24px;
+ 
    height: 1.5rem;

    clip-path: var(--1px-corner-fill);

    margin: 0;

    font-size: var(--font-size-small);
modified src/components/RepoCard.svelte
@@ -27,7 +27,7 @@
  }

  .description {

    color: var(--color-fill-gray);
- 
    margin-top: 4px;
+ 
    margin-top: 0.25rem;

  }

  .container {

    width: 100%;
@@ -38,7 +38,7 @@
  variant={focussed ? "secondary" : "ghost"}

  styleCursor="pointer"

  styleWidth="100%"
- 
  stylePadding="8px 12px"
+ 
  stylePadding="0.5rem 0.75rem"

  styleOverflow="hidden"

  hoverable

  {onclick}>
@@ -61,10 +61,10 @@


    <div class="global-flex footer">

      <div class="global-flex">
- 
        <div class="global-flex" style:gap="4px">
+ 
        <div class="global-flex" style:gap="0.25rem">

          <Icon name="issue" />{project.meta.issues.open}

        </div>
- 
        <div class="global-flex" style:gap="4px">
+ 
        <div class="global-flex" style:gap="0.25rem">

          <Icon name="patch" />{project.meta.patches.open}

        </div>

      </div>
modified src/components/RepoHeader.svelte
@@ -60,9 +60,9 @@
    <div class="global-flex">

      <div

        class="global-counter"
- 
        style:padding="0 6px"
+ 
        style:padding="0 0.375rem"

        style:background-color="var(--color-fill-ghost)"
- 
        style:gap="4px">
+ 
        style:gap="0.25rem">

        <Icon name="seedling" />

        {repo.seeding}

      </div>
modified src/components/RepoTeaser.svelte
@@ -17,9 +17,9 @@


  .seeding {

    margin-left: auto;
- 
    padding: 0 6px;
+ 
    padding: 0 0.375rem;

    background-color: var(--color-fill-ghost);
- 
    gap: 4px;
+ 
    gap: 0.25rem;

  }

</style>
modified src/components/RevisionBadges.svelte
@@ -14,7 +14,7 @@
{#if revision.id === revisions.slice(-1)[0].id}

  <span

    class="global-counter"
- 
    style:height="22px"
+ 
    style:height="1.375rem"

    style:color="var(--color-foreground-contrast)">

    Latest

  </span>
@@ -22,7 +22,7 @@
{#if revision.id === revisions[0].id}

  <span

    class="global-counter"
- 
    style:height="22px"
+ 
    style:height="1.375rem"

    style:color="var(--color-foreground-contrast)">

    Initial

  </span>
modified src/components/RevisionSelector.svelte
@@ -50,7 +50,7 @@
    margin-bottom: 1rem;

  }

  .icon {
- 
    min-width: 16px;
+ 
    min-width: 1rem;

  }

</style>
@@ -63,7 +63,7 @@
        e.preventDefault();

        onclick();

      }}
- 
      stylePadding="0 4px">
+ 
      stylePadding="0 0.25rem">

      <div style:color="var(--color-foreground-contrast)">

        <Icon name="chevron-down" />

      </div>
modified src/components/Tab.svelte
@@ -30,14 +30,14 @@
    display: flex;

    flex-direction: row;

    font-size: var(--font-size-small);
- 
    height: 38px;
+ 
    height: 2.375rem;

  }



  .wrapper {

    position: relative;

    display: flex;

    gap: 0.5rem;
- 
    padding: 3px 0;
+ 
    padding: 0.1875rem 0;

    align-items: center;

  }
modified src/components/TextInput.svelte
@@ -83,7 +83,7 @@
    width: 100%;

    height: 100%;

    margin: 0;
- 
    height: 32px;
+ 
    height: 2rem;

    border: 0;

  }

  input::placeholder {
modified src/components/VerdictBadge.svelte
@@ -18,8 +18,8 @@


<style>

  .badge {
- 
    gap: 6px;
- 
    padding-right: 10px;
+ 
    gap: 0.375rem;
+ 
    padding-right: 0.625rem;

  }

  .no-verdict {

    background-color: var(--color-fill-ghost);
added src/lib/appearance.svelte.ts
@@ -0,0 +1,36 @@
+ 
export const fontSettings = $state({ size: loadFontSize() });
+ 
const step = 2;
+ 
const minFontSize = 14;
+ 
const maxFontSize = 24;
+
+
+ 
export function increaseFontSize() {
+ 
  if (fontSettings.size + step <= maxFontSize) {
+ 
    setFontSize(fontSettings.size + step);
+ 
  }
+ 
}
+
+ 
export function decreaseFontSize() {
+ 
  if (fontSettings.size - step >= minFontSize) {
+ 
    setFontSize(fontSettings.size - step);
+ 
  }
+ 
}
+
+ 
export function resetFontSize() {
+ 
  setFontSize(16);
+ 
}
+
+ 
function loadFontSize(): number {
+ 
  const storedFontSize = localStorage ? localStorage.getItem("fontSize") : "16";
+
+ 
  if (storedFontSize === null) {
+ 
    return 16;
+ 
  } else {
+ 
    return parseInt(storedFontSize);
+ 
  }
+ 
}
+
+ 
function setFontSize(size: number) {
+ 
  fontSettings.size = size;
+ 
  localStorage.setItem("fontSize", size.toString());
+ 
}
modified src/views/home/Inbox.svelte
@@ -204,7 +204,7 @@
        styleJustifyContent="center">

        <div

          class="global-flex"
- 
          style:height="74px"
+ 
          style:height="4.625rem"

          style:justify-content="center">

          <div class="txt-missing txt-small global-flex" style:gap="0.25rem">

            <Icon name="none" />
modified src/views/home/Onboarding.svelte
@@ -71,7 +71,7 @@
    gap: 1.5rem;

  }

  .tab {
- 
    height: 24px;
+ 
    height: 1.5rem;

    color: var(--color-foreground-contrast);

  }

  .hint {
modified src/views/home/Repos.svelte
@@ -175,7 +175,7 @@
          styleJustifyContent="center">

          <div

            class="global-flex"
- 
            style:height="126px"
+ 
            style:height="7.875rem"

            style:justify-content="center">

            <div class="txt-missing txt-small global-flex" style:gap="0.25rem">

              <Icon name="none" />
modified src/views/repo/Issues.svelte
@@ -165,7 +165,7 @@
          styleJustifyContent="center">

          <div

            class="global-flex"
- 
            style:height="84px"
+ 
            style:height="5.25rem"

            style:justify-content="center">

            <div class="txt-missing txt-small global-flex" style:gap="0.25rem">

              <Icon name="none" />
modified src/views/repo/Patch.svelte
@@ -649,7 +649,7 @@
              {formatOid(patch.id)}

              <span

                class="global-counter"
- 
                style:height="24px"
+ 
                style:height="1.5rem"

                style:color="var(--color-foreground-contrast)">

                Initial

              </span>