Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Fix project card badge colors and size
dnlklmn committed 2 years ago
commit 9927520429c7bf17a817bee6b2137f6c8091be5b
parent 88ac279fe6467ad247508e2e0c8bc90bd282f86c
2 files changed +18 -25
modified public/colors.css
@@ -13,7 +13,7 @@
  --color-foreground-primary-hover: #ff80ff;

  --color-foreground-success: #4fa877;

  --color-foreground-red: #aa5078;
- 
  --color-foreground-yellow: #e5c001;
+ 
  --color-foreground-yellow: #b29401;

  --color-foreground-disabled: #9b9bb1;

  --color-border-hint: #dbdbff;

  --color-border-default: #dbdbff;
@@ -50,6 +50,8 @@
  --color-fill-warning: #ffffe5;

  --color-fill-counter: #dbdbff;

  --color-fill-counter-emphasized: #dbdbff;
+ 
  --color-fill-delegate: #ffe5ff;
+ 
  --color-fill-private: #fff5d6;

}



:root[data-theme="dark"] {
@@ -104,4 +106,6 @@
  --color-fill-warning: #191500;

  --color-fill-counter: #393a46;

  --color-fill-counter-emphasized: #232563;
+ 
  --color-fill-delegate: #3d003d;
+ 
  --color-fill-private: #4c4000;

}
modified src/components/ProjectCard.svelte
@@ -114,21 +114,10 @@
    display: flex;

    align-items: center;

    justify-content: center;
- 
    width: 1.5rem;
- 
    height: 1.5rem;

    border-radius: 50%;

    overflow: hidden;

    position: relative;
- 
  }
-
- 
  .badge-background {
- 
    position: absolute;
- 
    top: 0;
- 
    left: 0;
- 
    width: 100%;
- 
    height: 100%;
- 
    border-radius: 50%;
- 
    opacity: 0.25;
+ 
    padding: 0.25rem;

  }



  h4,
@@ -166,26 +155,26 @@
        <h4 use:twemoji>{name}</h4>

        <div class="badges">

          {#if isPrivate}
- 
            <div title="Private" class="badge">
- 
              <div
- 
                class="badge-background"
- 
                style:background-color="var(--color-fill-yellow)" />
+ 
            <div
+ 
              title="Private"
+ 
              class="badge"
+ 
              style="background-color: var(--color-fill-private); color: var(--color-foreground-yellow)">

              <IconSmall name="lock" />

            </div>

          {/if}

          {#if isDelegate}
- 
            <div title="Delegate" class="badge">
- 
              <div
- 
                class="badge-background"
- 
                style:background-color="var(--color-foreground-primary)" />
+ 
            <div
+ 
              title="Delegate"
+ 
              class="badge"
+ 
              style="background-color: var(--color-fill-delegate); color: var(--color-foreground-primary)">

              <IconSmall name="badge" />

            </div>

          {/if}

          {#if isSeeding}
- 
            <div title="Seeding" class="badge">
- 
              <div
- 
                class="badge-background"
- 
                style:background-color="var(--color-fill-secondary)" />
+ 
            <div
+ 
              title="Seeding"
+ 
              class="badge"
+ 
              style="background-color: var(--color-fill-counter-emphasized); color: var(--color-foreground-emphasized)">

              <IconSmall name="network" />

            </div>

          {/if}