From 9141f00e49b45df25a18767f218e55fdd80267fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lloren=C3=A7=20Muntaner?= <llorenc.muntaner@dfinity.org>
Date: Tue, 12 Sep 2023 14:42:53 +0200
Subject: [PATCH] GIX-1864: Improve ICP logo token selector (#3305)

# Motivation

The logo of ICP in the token selector doesn't have enough contrast when
user hovers or when it's the selected one.

In this PR, I add an outline to the logo to help with the contrast. See
screencast.

# Changes

* Use `noPadding` prop in Card for `SelectUniverseCard` and change the
variable that sets the logo frame color on hover, focus and selected.

# Tests

* Only CSS changes.

# Todos

- [ ] Add entry to changelog (if necessary).
---
 CHANGELOG-Nns-Dapp.md                                  |  1 +
 .../lib/components/universe/SelectUniverseCard.svelte  | 10 ++++++++++
 2 files changed, 11 insertions(+)

diff --git a/CHANGELOG-Nns-Dapp.md b/CHANGELOG-Nns-Dapp.md
index c3d74fd538c..e3b97a532ad 100644
--- a/CHANGELOG-Nns-Dapp.md
+++ b/CHANGELOG-Nns-Dapp.md
@@ -17,6 +17,7 @@ The NNS Dapp is released through proposals in the Network Nervous System. Theref
 * Show the token selector also when not signed in.
 * Use consistent positioning for the copy icon in the Hash component.
 * Allow setting a dissolve delay that's shorter than what's required for voting power.
+* Improve contrast of token selector's logo in light theme.
 
 #### Deprecated
 #### Removed
diff --git a/frontend/src/lib/components/universe/SelectUniverseCard.svelte b/frontend/src/lib/components/universe/SelectUniverseCard.svelte
index a9f32d744bd..3127477a79e 100644
--- a/frontend/src/lib/components/universe/SelectUniverseCard.svelte
+++ b/frontend/src/lib/components/universe/SelectUniverseCard.svelte
@@ -42,6 +42,7 @@
   on:click
   {icon}
   testId="select-universe-card"
+  noPadding
 >
   <div class="container" class:selected>
     <UniverseLogo size="big" {universe} framed={true} />
@@ -67,12 +68,21 @@
     display: flex;
     align-items: center;
     gap: var(--padding-2x);
+    // Same as Card padding
+    // We want to padding in the container to use the hover effect on ALL the card surface.
+    padding: calc(var(--padding-2x) - var(--card-border-size));
 
     --value-color: var(--text-color);
 
     &:not(.selected) {
       --logo-framed-background: transparent;
     }
+
+    &:hover,
+    &:focus,
+    &.selected {
+      --logo-framed-background: var(--input-border-color);
+    }
   }
 
   .content {