From f10a29a93dc2dc66cabc91bec58d489204f53841 Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Fri, 8 Dec 2023 13:01:16 +1000
Subject: [PATCH] Make help button more obvious, and remove hover animations

There's been a fair bit of talk on the forums about users not discovering
the help info, so this will hopefully make finding it easier.

Ideally we'd use a single var(--fg), but it feels a bit too strong in
light mode.

The animations we were showing on hover/focus made the UI feel
laggy. This has come up before, and we already disable them for buttons.
I experimented with removing the transitions (but keeping the change on
hover) - it feels much more responsive, but I also didn't feel that it
was contributing anything useful - the user knows where they've placed
the mouse or cursor, and the extra movement feels like a bit of a
distraction. Happy to discuss if people feel differently, though.
---
 ts/components/HelpModal.svelte       |  2 +-
 ts/components/TitledContainer.svelte | 32 +++++++---------------------
 ts/components/icons.ts               |  2 +-
 3 files changed, 10 insertions(+), 26 deletions(-)

diff --git a/ts/components/HelpModal.svelte b/ts/components/HelpModal.svelte
index 95cfaf323..ac840a11d 100644
--- a/ts/components/HelpModal.svelte
+++ b/ts/components/HelpModal.svelte
@@ -53,7 +53,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let activeIndex = startIndex;
 </script>
 
-<Badge on:click={() => modal.show()}>
+<Badge on:click={() => modal.show()} iconSize={125}>
     {@html infoCircle}
 </Badge>
 
diff --git a/ts/components/TitledContainer.svelte b/ts/components/TitledContainer.svelte
index 71da94ccb..64316d39c 100644
--- a/ts/components/TitledContainer.svelte
+++ b/ts/components/TitledContainer.svelte
@@ -41,31 +41,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         border-radius: var(--border-radius-medium, 10px);
 
         &.light {
-            @include elevation(2, $opacity-boost: -0.08);
-            &:hover,
-            &:focus-within {
-                @include elevation(3);
-            }
+            @include elevation(3);
         }
         &.dark {
-            @include elevation(3, $opacity-boost: -0.08);
-            &:hover,
-            &:focus-within {
-                @include elevation(4);
-            }
+            @include elevation(4);
         }
 
         padding: 1rem 1.75rem 0.75rem 1.25rem;
         &.rtl {
             padding: 1rem 1.25rem 0.75rem 1.75rem;
         }
-        &:hover,
-        &:focus-within {
-            .help-badge {
-                color: var(--fg-subtle);
-            }
-        }
-        transition: box-shadow var(--transition) ease-in-out;
         page-break-inside: avoid;
     }
     h1 {
@@ -73,16 +58,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
     .help-badge {
         right: 0;
-        bottom: 4px;
-        color: var(--fg-faint);
-        transition: color var(--transition) linear;
-        &:hover {
-            transition: none;
-            color: var(--fg);
-        }
+        bottom: 12px;
+        color: #555;
         &.rtl {
             right: unset;
             left: 0;
         }
     }
+
+    :global(.night-mode) .help-badge {
+        color: var(--fg);
+    }
 </style>
diff --git a/ts/components/icons.ts b/ts/components/icons.ts
index fd930c95a..b8795b306 100644
--- a/ts/components/icons.ts
+++ b/ts/components/icons.ts
@@ -12,5 +12,5 @@ export { default as chevronRight } from "@mdi/svg/svg/chevron-right.svg";
 export { default as chevronUp } from "@mdi/svg/svg/chevron-up.svg";
 export { default as horizontalHandle } from "@mdi/svg/svg/drag-horizontal.svg";
 export { default as verticalHandle } from "@mdi/svg/svg/drag-vertical.svg";
+export { default as infoCircle } from "@mdi/svg/svg/help-circle.svg";
 export { default as revertIcon } from "bootstrap-icons/icons/arrow-counterclockwise.svg";
-export { default as infoCircle } from "bootstrap-icons/icons/info-circle.svg";