8e58038 Tweak tab visuals — radicle-explorer

modified src/App/Header.svelte

@@ -25,14 +25,14 @@

     justify-content: space-between;
     align-items: center;
     margin: 0;
     padding: 0.5rem;
     padding: 0.5rem 1rem;
     height: 3.5rem;
   }
   .left,
   .right {
     display: flex;
     align-items: center;
     gap: 1rem;
     gap: 0.5rem;
   }
   .logo {

modified src/App/Settings.svelte

@@ -42,14 +42,14 @@

         <Button
           ariaLabel="Light Mode"
           styleBorderRadius="0"
           variant={$theme === "light" ? "gray-white" : "dim"}
           variant={$theme === "light" ? "selected" : "not-selected"}
           on:click={() => storeTheme("light")}>
           <Icon name="sun" />
         </Button>
         <Button
           ariaLabel="Dark Mode"
           styleBorderRadius="0"
           variant={$theme === "dark" ? "gray-white" : "dim"}
           variant={$theme === "dark" ? "selected" : "not-selected"}
           on:click={() => storeTheme("dark")}>
           <Icon name="moon" />
         </Button>

@@ -65,7 +65,9 @@

             styleBorderRadius="0"
             styleFontFamily={font.fontFamily}
             on:click={() => storeCodeFont(font.storedName)}
             variant={$codeFont === font.storedName ? "gray-white" : "dim"}>
             variant={$codeFont === font.storedName
               ? "selected"
               : "not-selected"}>
             {font.displayName}
           </Button>
         {/each}

modified src/components/Button.svelte

@@ -3,9 +3,10 @@

   export let title: string | undefined = undefined;
   export let variant:
     | "background"
     | "dim"
     | "not-selected"
     | "gray"
     | "gray-white"
     | "selected"
     | "none"
     | "outline"
     | "primary-toggle-off"

@@ -75,29 +76,33 @@

   }
   .background {
     color: var(--color-foreground-dim);
     color: var(--color-foreground-contrast);
     background-color: var(--color-background-default);
     font-weight: var(--font-weight-regular);
   }
   .background[disabled] {
     color: var(--color-foreground-disabled);
     background-color: var(--color-background-default);
     font-weight: var(--font-weight-regular);
   }
   .background:not([disabled]):hover {
     color: var(--color-foreground-contrast);
     background-color: var(--color-fill-ghost);
   }
   .dim {
   .not-selected {
     background-color: var(--color-fill-float-hover);
     color: var(--color-foreground-dim);
     color: var(--color-foreground-contrast);
     font-weight: var(--font-weight-normal);
   }
   .dim[disabled] {
   .not-selected[disabled] {
     background-color: var(--color-fill-float-hover);
     color: var(--color-fill-secondary);
     font-weight: var(--font-weight-normal);
   }
   .dim:not([disabled]):hover {
   .not-selected:not([disabled]):hover {
     background-color: var(--color-fill-ghost-hover);
     color: var(--color-foreground-dim);
     color: var(--color-foreground-contrast);
   }
   .gray {

@@ -125,6 +130,15 @@

     background-color: var(--color-fill-ghost-hover);
     color: var(--color-foreground-contrast);
   }
   .selected {
     background-color: var(--color-fill-ghost);
     color: var(--color-foreground-contrast);
     cursor: default;
   }
   .selected[disabled] {
     background-color: var(--color-fill-ghost);
     color: var(--color-foreground-disabled);
   }
   .none {
     background-color: transparent;

@@ -342,8 +356,9 @@

   class:regular={size === "regular"}
   class:large={size === "large"}
   class:background={variant === "background"}
   class:dim={variant === "dim"}
   class:not-selected={variant === "not-selected"}
   class:gray-white={variant === "gray-white"}
   class:selected={variant === "selected"}
   class:gray={variant === "gray"}
   class:none={variant === "none"}
   class:outline={variant === "outline"}

modified src/components/ExtendedTextarea.svelte

@@ -169,7 +169,7 @@

   <Radio>
     <Button
       styleBorderRadius="0"
       variant={!preview ? "gray-white" : "dim"}
       variant={!preview ? "selected" : "not-selected"}
       on:click={() => {
         preview = false;
       }}>

@@ -179,7 +179,7 @@

     <Button
       styleBorderRadius="0"
       disabled={validateBody && !body}
       variant={preview ? "gray-white" : "dim"}
       variant={preview ? "selected" : "not-selected"}
       on:click={() => {
         preview = true;
       }}>

modified src/views/projects/Patch.svelte

@@ -754,7 +754,7 @@

               <Button
                 styleBorderRadius="0"
                 size="regular"
                 variant={name === view.name ? "gray-white" : "dim"}>
                 variant={name === view.name ? "selected" : "not-selected"}>
                 <IconSmall name={icon} />
                 {capitalize(name)}
               </Button>

modified src/views/projects/Source/Blob.svelte

@@ -204,7 +204,7 @@

         <Radio ariaLabel="Toggle render method">
           <Button
             styleBorderRadius="0"
             variant={showMarkdown ? "gray-white" : "dim"}
             variant={showMarkdown ? "selected" : "not-selected"}
             on:click={() => {
               window.location.hash = "";
               showMarkdown = true;

@@ -213,7 +213,7 @@

           </Button>
           <Button
             styleBorderRadius="0"
             variant={!showMarkdown ? "gray-white" : "dim"}
             variant={!showMarkdown ? "selected" : "not-selected"}
             on:click={() => {
               showMarkdown = false;
             }}>

modified src/views/projects/Source/BranchSelector.svelte

@@ -98,7 +98,7 @@

   <Button
     title="Current HEAD"
     variant="dim"
     variant="not-selected"
     styleBorderRadius={selectedBranch
       ? "0 var(--border-radius-tiny) var(--border-radius-tiny) 0"
       : "var(--border-radius-tiny)"}>

modified src/views/projects/Source/Header.svelte

@@ -104,6 +104,7 @@

       }}>
       <Button
         styleBorderRadius="0"
         size="large"
         variant={filesLinkActive ? "tab-active" : "tab"}>
         <IconSmall name="file" />Files
       </Button>

@@ -119,6 +120,7 @@

       }}>
       <Button
         styleBorderRadius="0"
         size="large"
         variant={historyLinkActive ? "tab-active" : "tab"}>
         <IconSmall name="commit" />
         <div class="title-counter">

@@ -133,7 +135,12 @@

   <div class="global-hide-on-mobile">
     <HoverPopover stylePopoverPositionLeft="0" stylePopoverPositionTop="0.5rem">
       <Button disabled notAllowed={false} variant="tab" slot="toggle">
       <Button
         disabled
         notAllowed={false}
         variant="tab"
         slot="toggle"
         size="large">
         <IconSmall name="user" />
         <div class="title-counter">
           Contributors

modified tests/e2e/project.spec.ts

@@ -113,7 +113,7 @@ test("navigate line numbers", async ({ page }) => {

   // file.
   await page.getByRole("link", { name: "footnotes.md" }).click();
   await expect(page.getByRole("button", { name: "Markdown" })).toHaveClass(
     /gray-white/,
     /selected/,
   );
 });

@@ -239,17 +239,17 @@ test("markdown files", async ({ page }) => {

   // Switch between raw and rendered modes.
   {
     await expect(page.getByRole("button", { name: "Markdown" })).toHaveClass(
       /gray-white/,
       /selected/,
     );
     await expect(page.getByRole("button", { name: "Plain" })).not.toHaveClass(
       /gray-white/,
     await expect(page.getByRole("button", { name: "Plain" })).toHaveClass(
       /not-selected/,
     );
     await page.getByRole("button", { name: "Plain" }).click();
     await expect(
       page.getByRole("button", { name: "Markdown" }),
     ).not.toHaveClass(/gray-white/);
     await expect(page.getByRole("button", { name: "Markdown" })).toHaveClass(
       /not-selected/,
     );
     await expect(page.getByRole("button", { name: "Plain" })).toHaveClass(
       /gray-white/,
       /selected/,
     );
     await expect(page.getByText("##### Table of Contents")).toBeVisible();
     await page.getByRole("button", { name: "Markdown" }).click();

modified tests/e2e/theme.spec.ts

@@ -68,11 +68,11 @@ test("change code font", async ({ page }) => {

   await page.getByRole("button", { name: "Settings" }).first().click();
   await page.getByText("System").click();
   await expect(page.getByText("System")).toHaveClass(/gray-white/);
   await expect(page.getByText("System")).toHaveClass(/selected/);
   await expect(page.locator("html")).toHaveAttribute("data-codefont", "system");
   await page.getByText("JetBrains Mono").click();
   await expect(page.getByText("JetBrains Mono")).toHaveClass(/gray-white/);
   await expect(page.getByText("JetBrains Mono")).toHaveClass(/selected/);
   await expect(page.locator("html")).toHaveAttribute(
     "data-codefont",
     "jetbrains",