From e16d13f5f86d38e889847cb9173d1c1fcb9a87df Mon Sep 17 00:00:00 2001
From: ludwiczakpawel <ludwiczakpawel@gmail.com>
Date: Thu, 2 Apr 2020 11:50:05 +0200
Subject: [PATCH] Topbar icons states (#7012)

* topbar

* little update

* whoops

* gitattributes
---
 .gitattributes                             |  2 +-
 app/assets/stylesheets/config/_colors.scss |  2 +
 app/assets/stylesheets/themes/hacker.scss  |  2 +
 app/assets/stylesheets/themes/minimal.scss |  2 +
 app/assets/stylesheets/themes/night.scss   |  2 +
 app/assets/stylesheets/themes/pink.scss    |  2 +
 app/assets/stylesheets/top-bar.scss        | 65 +++++++++++++---------
 7 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/.gitattributes b/.gitattributes
index 421adefa8..1bbec1e33 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -2,4 +2,4 @@
 # On Windows, the default git setting for `core.autocrlf`
 # means that when checking out code, LF endings get converted
 # to CRLF.
-*.svg text eol=lf
+# *.svg text eol=lf
diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.scss
index 252b43696..9a756d3e6 100644
--- a/app/assets/stylesheets/config/_colors.scss
+++ b/app/assets/stylesheets/config/_colors.scss
@@ -68,6 +68,8 @@
 
   // Header
   --header-bg: var(--base-inverted);
+  --header-bg-hover: var(--base-10);
+  --header-bg-current: var(--base-20);
   --header-shadow: rgba(0, 0, 0, 0.1);
   --header-icons-color: var(--base-70);
   --header-icons-color-hover: var(--base-100);
diff --git a/app/assets/stylesheets/themes/hacker.scss b/app/assets/stylesheets/themes/hacker.scss
index 2f1b6842b..d50c7e23e 100644
--- a/app/assets/stylesheets/themes/hacker.scss
+++ b/app/assets/stylesheets/themes/hacker.scss
@@ -56,6 +56,8 @@
 
   // Header
   --header-bg: var(--base-10);
+  --header-bg-hover: var(--base-20);
+  --header-bg-current: var(--base-0);
   --header-shadow: rgba(0, 0, 0, 0.1);
   --header-icons-color: var(--base-70);
   --header-icons-color-hover: var(--base-100);
diff --git a/app/assets/stylesheets/themes/minimal.scss b/app/assets/stylesheets/themes/minimal.scss
index 564ccfbdb..37afc5dfe 100644
--- a/app/assets/stylesheets/themes/minimal.scss
+++ b/app/assets/stylesheets/themes/minimal.scss
@@ -56,6 +56,8 @@
 
   // Header
   --header-bg: var(--base-0);
+  --header-bg-hover: var(--base-10);
+  --header-bg-current: var(--base-20);
   --header-shadow: rgba(0, 0, 0, 0.1);
   --header-icons-color: #0a0a0a;
   --header-icons-color-hover: #000;
diff --git a/app/assets/stylesheets/themes/night.scss b/app/assets/stylesheets/themes/night.scss
index ba971d96e..05ca513f9 100644
--- a/app/assets/stylesheets/themes/night.scss
+++ b/app/assets/stylesheets/themes/night.scss
@@ -56,6 +56,8 @@
 
   // Header
   --header-bg: var(--base-10);
+  --header-bg-hover: var(--base-0);
+  --header-bg-current: var(--base-20);
   --header-shadow: rgba(0, 0, 0, 0.3);
   --header-icons-color: rgba(255, 255, 255, 0.8);
   --header-icons-color-hover: #fff;
diff --git a/app/assets/stylesheets/themes/pink.scss b/app/assets/stylesheets/themes/pink.scss
index 5da3bb20f..fd337ec9b 100644
--- a/app/assets/stylesheets/themes/pink.scss
+++ b/app/assets/stylesheets/themes/pink.scss
@@ -56,6 +56,8 @@
 
   // Header
   --header-bg: var(--base-40);
+  --header-bg-hover: var(--base-50);
+  --header-bg-current: var(--base-50);
   --header-shadow: transparent;
   --header-icons-color: var(--base-10);
   --header-icons-color-hover: var(--base-0);
diff --git a/app/assets/stylesheets/top-bar.scss b/app/assets/stylesheets/top-bar.scss
index 13f9cd4a2..c266a1545 100644
--- a/app/assets/stylesheets/top-bar.scss
+++ b/app/assets/stylesheets/top-bar.scss
@@ -3,6 +3,9 @@
 @import 'mixins';
 
 .top-bar {
+  --indicator-outline: var(--header-bg);
+  --dropdown-display: none;
+
   position: fixed;
   top: 0px;
   left: 0px;
@@ -31,9 +34,9 @@
 
   .crayons-indicator {
     position: absolute;
-    top: $su-1;
-    right: $su-1;
-    box-shadow: 0 0 0 2px var(--header-bg);
+    top: -$su-1;
+    right: 0;
+    box-shadow: 0 0 0 2px var(--indicator-outline);
   }
 }
 
@@ -77,51 +80,58 @@
 .top-bar__link {
   position: relative;
   display: flex;
-  padding: 0 $su-3;
-  height: 100%;
+  padding: $su-2;
+  margin: 0 $su-1;
+  border-radius: 50%;
   align-items: center;
   color: var(--header-icons-color);
+  outline: 0;
+  transition: background $transition-props;
+
+  &:hover,
+  &:focus {
+    --indicator-outline: var(--header-bg-hover);
 
-  &:hover {
     color: var(--header-icons-color-hover);
+    background: var(--header-bg-hover);
+  }
+
+  &--current {
+    --indicator-outline: var(--header-bg-current);
+
+    color: var(--header-icons-color-hover);
+    background: var(--header-bg-current);
   }
 }
 
 // Dropdown under profile picture / hamburger icon
 .top-bar__menu {
   height: 100%;
+  display: flex;
+  align-items: center;
 
   &__trigger {
     all: unset;
-    display: flex;
-    height: 100%;
-    padding: 0 $su-2;
-    align-items: center;
-    cursor: pointer;
+    padding: $su-1;
+    margin: 0 $su-1;
+    border-radius: 50%;
     color: var(--header-icons-color);
-
-    &:hover {
-      color: var(--header-icons-color-hover);
-    }
+    cursor: pointer;
   }
 
   &__dropdown {
+    display: var(--dropdown-display);
     top: $header-height;
   }
 
-  &.showing {
-    .top-bar__menu__dropdown {
-      display: block;
-    }
-  }
+  &.showing,
+  &.desktop:hover,
+  &.desktop:focus {
+    --dropdown-display: block;
 
-  &.desktop {
-    &:hover,
-    &:active,
-    &:focus {
-      .top-bar__menu__dropdown {
-        display: block;
-      }
+    .top-bar__menu__trigger {
+      color: var(--header-icons-color-hover);
+      background: var(--header-bg-hover);
     }
   }
 }
@@ -138,6 +148,7 @@
   pointer-events: none;
   opacity: 0;
   border-radius: $br-default;
+  outline: 0;
 
   &:focus {
     pointer-events: auto;