From 039b56f8fe1302a0b947ef9d4debb836778ac2c4 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Thu, 20 Oct 2022 23:35:45 +0200
Subject: [PATCH] Improve appearance of main window

---
 qt/aqt/data/web/css/deckbrowser.scss     | 10 +++++-
 qt/aqt/data/web/css/reviewer-bottom.scss | 14 ++++----
 qt/aqt/data/web/css/toolbar.scss         | 41 +++++++++++-------------
 qt/aqt/toolbar.py                        |  2 +-
 sass/buttons.scss                        |  7 ++--
 ts/graphs/graphs-base.scss               |  2 +-
 6 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/qt/aqt/data/web/css/deckbrowser.scss b/qt/aqt/data/web/css/deckbrowser.scss
index 282c6e49f..3904867e7 100644
--- a/qt/aqt/data/web/css/deckbrowser.scss
+++ b/qt/aqt/data/web/css/deckbrowser.scss
@@ -1,6 +1,6 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
-@use "sass/base";
+@use "root-vars";
 @use "sass/vars" as *;
 @use "sass/card-counts";
 
@@ -38,6 +38,9 @@ body {
 
 .current {
     background-color: color(shadow-subtle);
+    .gears {
+        visibility: visible;
+    }
 }
 
 .decktd {
@@ -72,6 +75,11 @@ body {
     opacity: 0.5;
     padding-top: 0.2em;
     cursor: pointer;
+    visibility: hidden;
+}
+
+tr:hover .gears {
+    visibility: visible;
 }
 
 .nightMode {
diff --git a/qt/aqt/data/web/css/reviewer-bottom.scss b/qt/aqt/data/web/css/reviewer-bottom.scss
index 516d39e7e..ab19ad511 100644
--- a/qt/aqt/data/web/css/reviewer-bottom.scss
+++ b/qt/aqt/data/web/css/reviewer-bottom.scss
@@ -1,12 +1,12 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use "sass/base";
-@use "vars";
+@use "root-vars";
+@use "sass/vars" as *;
 @use "sass/card-counts";
 
 :root {
-    --focus-color: #{vars.palette-of(border-focus)};
+    --focus-color: #{palette-of(border-focus)};
 
     .isMac {
         --focus-color: rgba(0 103 244 / 0.247);
@@ -52,11 +52,11 @@ button {
 }
 
 :focus {
-    outline: 1px auto var(--focus-color);
+    outline: 1px auto color(focus-color);
 
     .nightMode & {
         outline: none;
-        box-shadow: 0 0 0 2px var(--focus-color);
+        box-shadow: 0 0 0 2px color(focus-color);
     }
 }
 
@@ -75,13 +75,13 @@ button {
 }
 
 #outer {
-    border-top: 1px solid var(--border);
+    border-top: 1px solid color(border);
     /* Better compatibility with graphics pad/touchscreen */
     -webkit-user-select: none;
 }
 
 .nightMode {
     #outer {
-        border-top-color: var(--border-subtle);
+        border-top-color: color(border-subtle);
     }
 }
diff --git a/qt/aqt/data/web/css/toolbar.scss b/qt/aqt/data/web/css/toolbar.scss
index 64458043e..c7d08efbc 100644
--- a/qt/aqt/data/web/css/toolbar.scss
+++ b/qt/aqt/data/web/css/toolbar.scss
@@ -1,16 +1,22 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use "sass/base";
+@use "root-vars";
+@use "sass/vars" as *;
+@use "sass/elevation";
+@use "sass/button-mixins" as button;
 
 #header {
-    padding: 3px;
-    font-weight: bold;
-    border-bottom: 1px solid var(--border);
+    padding-bottom: 12px;
 }
 
 .tdcenter {
     white-space: nowrap;
+    border-radius: prop(border-radius);
+    border-bottom-left-radius: prop(border-radius-large);
+    border-bottom-right-radius: prop(border-radius-large);
+    @include button.base($with-hover: false);
+    @include elevation.elevation(2);
 }
 
 body {
@@ -25,28 +31,17 @@ body {
 }
 
 .hitem {
-    padding-right: 12px;
-    padding-left: 12px;
+    font-weight: bold;
+    margin: 6px 12px;
     text-decoration: none;
-    color: var(--fg);
-}
-
-.hitem:hover {
-    text-decoration: underline;
+    color: color(fg);
+    display: inline-block;
 }
 
 .hitem:focus {
     outline: 0;
 }
 
-.nightMode #header {
-    border-bottom-color: var(--border-subtle);
-}
-
-.isMac.nightMode #header {
-    border-bottom-color: var(--canvas-elevated);
-}
-
 @keyframes spin {
     0% {
         -webkit-transform: rotate(0deg);
@@ -57,25 +52,27 @@ body {
 }
 
 .spin {
+    width: 16px;
     animation: spin;
     animation-duration: 2s;
     animation-iteration-count: infinite;
     display: inline-block;
     visibility: visible !important;
     animation-timing-function: linear;
+    transition: all 0.2s ease-in;
 }
 
 #sync-spinner {
-    width: 16px;
     height: 16px;
     margin-bottom: -3px;
     visibility: hidden;
+    width: 0;
 }
 
 .normal-sync {
-    color: var(--state-new);
+    color: color(state-new);
 }
 
 .full-sync {
-    color: var(--state-learn);
+    color: color(state-learn);
 }
diff --git a/qt/aqt/toolbar.py b/qt/aqt/toolbar.py
index 34b3e652e..cae262e5b 100644
--- a/qt/aqt/toolbar.py
+++ b/qt/aqt/toolbar.py
@@ -196,7 +196,7 @@ class Toolbar:
 
     _body = """
 <center id=outer>
-<table id=header width=100%%>
+<table id=header>
 <tr>
 <td class=tdcenter align=center>%s</td>
 </tr></table>
diff --git a/sass/buttons.scss b/sass/buttons.scss
index b52f1540d..5658fe51d 100644
--- a/sass/buttons.scss
+++ b/sass/buttons.scss
@@ -1,5 +1,6 @@
 @use "vars";
 @use "button-mixins" as button;
+@use "elevation";
 
 :root {
     --focus-color: #{vars.palette-of(shadow-focus)};
@@ -23,6 +24,8 @@
 
 button {
     @include button.base;
-    border-radius: var(--border-radius);
-    padding: 5px 10px;
+    @include elevation.elevation(2);
+    border-radius: var(--border-radius-large);
+    padding: 6px 12px;
+    font-weight: 500;
 }
diff --git a/ts/graphs/graphs-base.scss b/ts/graphs/graphs-base.scss
index 24c5f559a..ce9379e02 100644
--- a/ts/graphs/graphs-base.scss
+++ b/ts/graphs/graphs-base.scss
@@ -1,4 +1,4 @@
-@use "sass/base";
+@use "root-vars";
 @use "sass/button-mixins" as button;
 
 label,