Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Make dropdown styling consistent with design system
Rūdolfs Ošiņš committed 2 years ago
commit 4fb457c7cb043c6530d907f8761ce7254cfba721
parent af6462c3a7b54a5611efb904cef5d04755fbd221
9 files changed +19 -48
modified src/App/Header/Authenticate.svelte
@@ -49,10 +49,6 @@
    align-items: center;

    gap: 1rem;

  }
- 
  .identity {
- 
    color: var(--color-fill-secondary);
- 
    display: flex;
- 
  }

</style>



{#if $httpdStore.state === "authenticated"}
@@ -67,7 +63,6 @@
        <NodeId

          large

          disableTooltip
- 
          styleColor="var(--color-fill-primary)"

          nodeId={$httpdStore.session.publicKey}

          alias={$httpdStore.session.alias} />

      </div>
@@ -76,11 +71,9 @@
    <div slot="popover" class="container">

      <div class="status">Authenticated as</div>

      <div class="user">
- 
        <div class="identity">
- 
          <NodeId
- 
            nodeId={$httpdStore.session.publicKey}
- 
            alias={$httpdStore.session.alias} />
- 
        </div>
+ 
        <NodeId
+ 
          nodeId={$httpdStore.session.publicKey}
+ 
          alias={$httpdStore.session.alias} />

        <IconButton

          on:click={() => {

            void httpd.disconnect();
modified src/components/Button.svelte
@@ -92,7 +92,7 @@


  .gray {

    background-color: var(--color-fill-ghost);
- 
    color: var(--color-fill-secondary);
+ 
    color: var(--color-foreground-contrast);

  }

  .gray[disabled] {

    background-color: var(--color-fill-ghost);
@@ -100,7 +100,7 @@
  }

  .gray:not([disabled]):hover {

    background-color: var(--color-fill-ghost-hover);
- 
    color: var(--color-fill-secondary);
+ 
    color: var(--color-foreground-contrast);

  }



  .gray-white {
modified src/components/DropdownList/DropdownListItem.svelte
@@ -27,14 +27,14 @@
    background-color: var(--color-fill-ghost);

  }

  .selected {
- 
    color: var(--color-foreground-match-background);
- 
    background-color: var(--color-fill-secondary);
+ 
    color: var(--color-fill-secondary);
+ 
    background-color: var(--color-fill-ghost);

  }

  .item:hover.selected {
- 
    background-color: var(--color-fill-secondary-hover);
+ 
    background-color: var(--color-fill-ghost-hover);

  }

  .item:hover.selected.disabled {
- 
    background-color: var(--color-fill-secondary);
+ 
    background-color: var(--color-fill-ghost);

  }

  .item:hover.disabled {

    cursor: not-allowed;
modified src/components/NodeId.svelte
@@ -9,8 +9,6 @@
  export let alias: string | undefined = undefined;

  export let disableTooltip: boolean = false;

  export let large: boolean = false;
-
- 
  export let styleColor: string | undefined = undefined;

</script>



<style>
@@ -23,7 +21,6 @@
    font-family: var(--font-family-monospace);

    font-weight: var(--font-weight-semibold);

    font-size: var(--font-size-small);
- 
    color: var(--color-foreground-contrast);

  }

  .large {

    height: 1.25rem;
@@ -37,13 +34,11 @@
    font-family: var(--font-family-monospace);

    font-weight: var(--font-weight-semibold);

    font-size: var(--font-size-small);
- 
    color: var(--color-foreground-contrast);

  }

  .popover-container {

    display: flex;

    align-items: center;

    gap: 1rem;
- 
    color: white;

  }

</style>
@@ -52,7 +47,7 @@
  stylePopoverPositionLeft="-4.5rem"

  stylePopoverPadding="0.5rem 0.5rem 0.5rem 0.75rem"

  stylePopoverPositionTop="-4.5rem">
- 
  <div slot="toggle" class="avatar-alias" style:color={styleColor} class:large>
+ 
  <div slot="toggle" class="avatar-alias" class:large>

    <Avatar {nodeId} />

    {#if alias}

      {alias}
modified src/views/projects/Cob/CobStateButton.svelte
@@ -62,7 +62,7 @@
      <DropdownList items={items.filter(i => !isEqual(i, state))}>

        <svelte:fragment slot="item" let:item>

          <DropdownListItem
- 
            selected={false}
+ 
            selected={isEqual(item[1], selectedItem[1])}

            on:click={() => switchCaption(item)}>

            <IconSmall name="patch" />

            {item[0]}
modified src/views/projects/Issues.svelte
@@ -116,7 +116,7 @@
              <DropdownListItem selected={item === state}>

                <div

                  style:color={item === state
- 
                    ? "var(--color-foreground-white)"
+ 
                    ? "var(--color-fill-secondary)"

                    : stateColor[item]}>

                  <Icon name="issue" />

                </div>
modified src/views/projects/Patch.svelte
@@ -813,14 +813,12 @@
                        <span

                          style:font-weight="var(--font-weight-regular)"

                          style:color={item.id === view.revision
- 
                            ? "var(--color-foreground-match-background)"
+ 
                            ? "var(--color-fill-secondary)"

                            : "var(--color-fill-gray)"}>

                          Revision

                        </span>

                        <span
- 
                          style:color={item.id === view.revision
- 
                            ? "var(--color-foreground-match-background)"
- 
                            : "var(--color-fill-secondary)"}
+ 
                          style:color="var(--color-fill-secondary)"

                          style:font-family="var(--font-family-monospace)">

                          {utils.formatObjectId(item.id)}

                        </span>
modified src/views/projects/Patches.svelte
@@ -120,7 +120,7 @@
              <DropdownListItem selected={item === state}>

                <div

                  style:color={item === state
- 
                    ? "var(--color-foreground-white)"
+ 
                    ? "var(--color-fill-secondary)"

                    : stateColor[item]}>

                  <Icon name="patch" />

                </div>
modified src/views/projects/Source/PeerSelector.svelte
@@ -27,16 +27,6 @@
  }

</script>
- 
<style>
- 
  .avatar-id {
- 
    display: flex;
- 
    gap: 0.5rem;
- 
    color: var(--color-fill-secondary);
- 
    align-items: center;
- 
    justify-content: center;
- 
  }
- 
</style>
- 


<Popover

  popoverPadding="0"

  popoverPositionTop="2.5rem"
@@ -70,15 +60,10 @@
        <DropdownListItem

          selected={item.selected}

          title={createTitle(item.remote)}>
- 
          <span class="avatar-id">
- 
            <NodeId
- 
              disableTooltip
- 
              styleColor={item.selected
- 
                ? "var(--color-foreground-match-background)"
- 
                : undefined}
- 
              nodeId={item.remote.id}
- 
              alias={item.remote.alias} />
- 
          </span>
+ 
          <NodeId
+ 
            disableTooltip
+ 
            nodeId={item.remote.id}
+ 
            alias={item.remote.alias} />

          {#if item.remote.delegate}

            <div style:color="var(--color-fill-secondary)">

              <Badge