From 61299232f3901060b09c7bd9aef4bf0811924a15 Mon Sep 17 00:00:00 2001
From: Yuri Sizov <yuris@humnom.net>
Date: Fri, 24 Mar 2023 00:51:55 +0100
Subject: [PATCH] Small styling clean-up

---
 .../components/changes/ChangesToolbar.js      |  1 +
 .../index/components/versions/VersionItem.js  | 16 +++--
 .../index/components/versions/VersionList.js  | 60 ++-----------------
 3 files changed, 18 insertions(+), 59 deletions(-)

diff --git a/src/paths/index/components/changes/ChangesToolbar.js b/src/paths/index/components/changes/ChangesToolbar.js
index 29ada59..09bdad2 100644
--- a/src/paths/index/components/changes/ChangesToolbar.js
+++ b/src/paths/index/components/changes/ChangesToolbar.js
@@ -51,6 +51,7 @@ export default class ChangesToolbar extends LitElement {
             color: var(--g-font-color);
             display: inline-block;
             font-size: 20px;
+            font-weight: 600;
             line-height: 24px;
             margin-top: 6px;
             margin-bottom: 12px;
diff --git a/src/paths/index/components/versions/VersionItem.js b/src/paths/index/components/versions/VersionItem.js
index 2a00752..c568145 100644
--- a/src/paths/index/components/versions/VersionItem.js
+++ b/src/paths/index/components/versions/VersionItem.js
@@ -29,8 +29,8 @@ export default class VersionItem extends LitElement {
             cursor: pointer;
             display: flex;
             flex-direction: row;
-            gap: 8px;
-            padding: 6px 16px 6px 10px;
+            gap: 6px;
+            padding: 6px 16px 6px 4px;
             align-items: center;
           }
           :host .version-item:hover {
@@ -41,6 +41,10 @@ export default class VersionItem extends LitElement {
             border-left: 5px solid var(--tab-active-border-color);
           }
 
+          :host .version-item--sub {
+            padding: 4px 16px 4px 20px;
+          }
+
           :host .version-icon {
             display: none;
           }
@@ -119,7 +123,11 @@ export default class VersionItem extends LitElement {
 
           @media only screen and (max-width: 900px) {
             :host .version-item {
-              padding: 10px 20px 10px 16px;
+              padding: 10px 20px 10px 8px;
+            }
+
+            :host .version-item--sub {
+              padding: 8px 20px 8px 24px;
             }
 
             :host .version-title,
@@ -145,7 +153,7 @@ export default class VersionItem extends LitElement {
     }
 
     render(){
-        const classList = [ "version-item" ];
+        const classList = [ "version-item", "version-item--" + this.type ];
         if (this.active) {
             classList.push("version-item--active");
         }
diff --git a/src/paths/index/components/versions/VersionList.js b/src/paths/index/components/versions/VersionList.js
index fc2865c..385ab1a 100644
--- a/src/paths/index/components/versions/VersionList.js
+++ b/src/paths/index/components/versions/VersionList.js
@@ -31,51 +31,17 @@ export default class VersionList extends LitElement {
           }
 
           :host .version-list-sub {
+            background-color: rgba(0, 0, 0, 0.08);
             filter: saturate(0.35) brightness(1.0);
-            margin: 4px 0 4px 12px;
+            padding: 4px 0 4px 12px;
           }
           @media (prefers-color-scheme: dark) {
             :host .version-list-sub {
+              background-color: rgba(255, 255, 255, 0.08);
               filter: saturate(0.15) brightness(1.1);
             }
           }
 
-          :host .branch-selector {
-            display: none;
-            position: absolute;
-            top: 32px;
-            left: 0;
-            right: 0;
-            flex-direction: column;
-            gap: 4px;
-            background-color: var(--g-background-extra2-color);
-            border-top: 2px solid var(--g-background-color);
-            border-bottom: 2px solid var(--g-background-color);
-            padding: 10px 14px;
-          }
-          :host .branch-selector.branch-selector--active {
-            display: flex;
-          }
-
-          :host .branch-selector ul {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-end;
-            gap: 2px;
-            list-style: none;
-            margin: 0;
-            padding: 0;
-          }
-
-          :host .branch-selector ul li {
-            color: var(--link-font-color);
-            cursor: pointer;
-            padding: 2px 0;
-          }
-          :host .branch-selector ul li:hover {
-            color: var(--link-font-color-hover);
-          }
-
           @media only screen and (max-width: 900px) {
             :host {
               width: 100%
@@ -84,22 +50,6 @@ export default class VersionList extends LitElement {
             :host .version-list {
               width: 100% !important;
             }
-
-            :host .branch-selector {
-              border-top-width: 4px;
-              border-bottom-width: 4px;
-              font-size: 105%;
-              padding: 16px 24px;
-              top: 40px;
-            }
-
-            :host .branch-selector ul {
-              gap: 4px;
-            }
-
-            :host .branch-selector ul li {
-              padding: 4px 8px;
-            }
           }
         `;
     }
@@ -170,7 +120,7 @@ export default class VersionList extends LitElement {
                                 @iconclick="${this._onItemIconClicked.bind(this, "main", item.name, "")}"
                             ></gr-version-item>
 
-                            ${(this.toggledVersions.includes(item.name)) ? 
+                            ${(this.toggledVersions.includes(item.name)) ?
                               html`
                                 <div class="version-list-sub">
                                     ${item.releases.map((release) => {
@@ -183,7 +133,7 @@ export default class VersionList extends LitElement {
                                                 @click="${this._onItemClicked.bind(this, "sub", item.name, release.name)}"
                                                 @iconclick="${this._onItemIconClicked.bind(this, "sub", item.name, release.name)}"
                                             ></gr-version-item>
-                                        `; 
+                                        `;
                                     })}
                                 </div>
                               ` : null