From 306120321e63d8580c931255cdfc1683784a4d73 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Wed, 25 Mar 2020 03:32:54 +1300
Subject: [PATCH 1/9] Add timelog to gitignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 038dd68bd..5e024fd98 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,4 @@ tmp/
 dist
 coverage
 __coverage__
+csak-timelog.json

From 847d7e6e062e6913316e05a43d39ba7a60637ee6 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Wed, 25 Mar 2020 03:33:53 +1300
Subject: [PATCH 2/9] Fix spelling of tertiary

---
 src/renderer/components/ft-input/ft-input.css             | 8 ++++----
 .../components/ft-list-dropdown/ft-list-dropdown.css      | 4 ++--
 src/renderer/components/ft-select/ft-select.css           | 4 ++--
 .../components/watch-video-info/watch-video-info.css      | 2 +-
 src/renderer/themes.css                                   | 8 ++++----
 src/renderer/views/Channel/Channel.css                    | 2 +-
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index 12a26bdec..46c15355b 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -14,12 +14,12 @@
     margin-bottom: 10px;
     font: 16px;
     height: 45px;
-    color: var(--teritary-text-color);
-    border-bottom: 1px solid var(--teritary-text-color);
+    color: var(--secondary-text-color);
+    border-bottom: 1px solid var(--secondary-text-color);
 }
 
 .ft-input-component ::-webkit-input-placeholder {
-  color: var(--teritary-text-color);
+  color: var(--tertiary-text-color);
 }
 
 .search .ft-input {
@@ -57,7 +57,7 @@
 }
 
 .inputAction:active {
-  background-color: var(--teritary-text-color);
+  background-color: var(--tertiary-text-color);
   -moz-transition: background 0.2s ease-in;
   -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
diff --git a/src/renderer/components/ft-list-dropdown/ft-list-dropdown.css b/src/renderer/components/ft-list-dropdown/ft-list-dropdown.css
index cbe33e1c3..d61933a91 100644
--- a/src/renderer/components/ft-list-dropdown/ft-list-dropdown.css
+++ b/src/renderer/components/ft-list-dropdown/ft-list-dropdown.css
@@ -38,7 +38,7 @@
   padding-left: 15px;
   padding-right: 15px;
   cursor: pointer;
-  color: var(--teritary-text-color);
+  color: var(--tertiary-text-color);
   background-color: var(--secondary-card-bg-color);
 }
 
@@ -52,7 +52,7 @@
   padding-left: 15px;
   padding-right: 15px;
   cursor: pointer;
-  color: var(--teritary-text-color);
+  color: var(--tertiary-text-color);
   background-color: var(--secondary-card-bg-color);
   -webkit-transition: background 0.2s ease-out;
   -moz-transition: background 0.2s ease-out;
diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index 4946f86bf..f6cbe2aba 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -65,7 +65,7 @@
 	border-left: 6px solid transparent;
 	border-right: 6px solid transparent;
 	pointer-events: none;
-  color: var(--teritary-text-color);
+  color: var(--tertiary-text-color);
 }
 
 
@@ -78,7 +78,7 @@
 	left: 0;
 	top: 10px;
 	transition: 0.2s ease all;
-  color: var(--teritary-text-color);
+  color: var(--tertiary-text-color);
 }
 
 /* active state */
diff --git a/src/renderer/components/watch-video-info/watch-video-info.css b/src/renderer/components/watch-video-info/watch-video-info.css
index 92abbf4d8..da65114e2 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.css
+++ b/src/renderer/components/watch-video-info/watch-video-info.css
@@ -82,7 +82,7 @@
   right: 15px;
   bottom: 0px;
   font-size: 12px;
-  color: var(--teritary-text-color);
+  color: var(--tertiary-text-color);
 }
 
 .videoOptions {
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index a5512b272..6dda83633 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -1,7 +1,7 @@
 .light {
   --primary-text-color: #212121;
   --secondary-text-color: #424242;
-  --teritary-text-color: #757575;
+  --tertiary-text-color: #757575;
   --primary-input-color: rgba(0, 0, 0, 0.50);
   --primary-shadow-color: rgba(232, 232, 232, 1);
   --title-color: #3f7ac6;
@@ -19,8 +19,8 @@
 
 .dark {
   --primary-text-color: #EEEEEE;
-  --secondary-text-color: #E0E0E0;
-  --teritary-text-color: #F5F5F5;
+  --secondary-text-color: #ddd;
+  --tertiary-text-color: #888;
   --primary-input-color: rgba(0, 0, 0, 0.50);
   --primary-shadow-color: rgba(0, 0, 0, 0.75);
   --title-color: #EEEEEE;
@@ -39,7 +39,7 @@
 .gray {
   --primary-text-color: #EEEEEE;
   --secondary-text-color: #E0E0E0;
-  --teritary-text-color: #F5F5F5;
+  --tertiary-text-color: #F5F5F5;
   --primary-input-color: rgba(0, 0, 0, 0.50);
   --primary-shadow-color: rgba(0, 0, 0, 0.75);
   --title-color: #EEEEEE;
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index f2decc63d..5ce595b5e 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -47,7 +47,7 @@
 
 .channelSubCount {
   position: absolute;
-  color: var(--teritary-text-color);
+  color: var(--tertiary-text-color);
   top: 50px;
   left: 120px;
 }

From 4d6f6e2278d15681634628144b9873506a317974 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Wed, 25 Mar 2020 03:34:27 +1300
Subject: [PATCH 3/9] Add vscode tasks file

---
 .vscode/tasks.json | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 .vscode/tasks.json

diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100644
index 000000000..1db3b6de8
--- /dev/null
+++ b/.vscode/tasks.json
@@ -0,0 +1,12 @@
+{
+	// See https://go.microsoft.com/fwlink/?LinkId=733558 
+	// for the documentation about the tasks.json format
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "dev",
+			"problemMatcher": []
+		}
+	]
+}
\ No newline at end of file

From 8bae0b30aba5ab89755569afac4a2e78db690f12 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Wed, 25 Mar 2020 03:34:55 +1300
Subject: [PATCH 4/9] Start refactoring top bar

---
 _scripts/webpack.renderer.config.js          |   5 +-
 src/renderer/components/top-nav/top-nav.css  | 194 -------------------
 src/renderer/components/top-nav/top-nav.js   |   6 +-
 src/renderer/components/top-nav/top-nav.sass | 177 +++++++++++++++++
 src/renderer/components/top-nav/top-nav.vue  |  93 +++++----
 5 files changed, 234 insertions(+), 241 deletions(-)
 delete mode 100644 src/renderer/components/top-nav/top-nav.css
 create mode 100644 src/renderer/components/top-nav/top-nav.sass

diff --git a/_scripts/webpack.renderer.config.js b/_scripts/webpack.renderer.config.js
index c2db410e9..2063d7674 100644
--- a/_scripts/webpack.renderer.config.js
+++ b/_scripts/webpack.renderer.config.js
@@ -60,7 +60,10 @@ const config = {
             options: {
               // eslint-disable-next-line
               implementation: require('sass'),
-            },
+              sassOptions: {
+                indentedSyntax: true
+              }
+            }
           },
         ],
       },
diff --git a/src/renderer/components/top-nav/top-nav.css b/src/renderer/components/top-nav/top-nav.css
deleted file mode 100644
index a2529042d..000000000
--- a/src/renderer/components/top-nav/top-nav.css
+++ /dev/null
@@ -1,194 +0,0 @@
-.topNav {
-    background-color: var(--card-bg-color);
-    width: 100%;
-    height: 60px;
-    line-height: 60px;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 4;
-    -webkit-box-shadow: 0px 2px 1px 0px var(--primary-shadow-color);
-}
-
-.topNavBarColor {
-  background-color: var(--primary-color);
-}
-
-.menuIcon {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-}
-
-.navIcon {
-  font-size: 20px;
-  padding: 10px;
-  cursor: pointer;
-  color: var(--primary-text-color);
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
-  -webkit-transition: background 0.2s ease-out;
-  -moz-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
-  transition: background 0.2s ease-out;
-}
-
-.topNavBarColor .navIcon {
-  color: var(--text-with-main-color);
-}
-
-.navIcon:hover {
-  background-color: var(--side-nav-hover-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
-}
-
-.topNavBarColor .navIcon:hover {
-  background-color: var(--primary-color-hover);
-}
-
-.navIcon:active {
-  background-color: var(--teritary-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
-}
-
-.topNavBarColor .menuIcon:active {
-  background-color: var(--primary-color-active)
-}
-
-.navBackIcon {
-  position: absolute;
-  top: 10px;
-  left: 50px;
-}
-
-.navForwardIcon {
-  position: absolute;
-  top: 10px;
-  left: 85px;
-}
-
-.navSearchIcon {
-  position: absolute;
-  top: 10px;
-  display: none;
-}
-
-.logoIcon {
-  background-image: var(--logo-icon);
-  background-repeat: no-repeat;
-  background-position: right top;
-  background-size: 25px;
-  position: absolute;
-  top: 20px;
-  left: 140px;
-  width: 25px;
-  height: 25px;
-}
-
-.logoIconBarColor {
-  background-image: var(--logo-icon-bar-color);
-}
-
-.logoText {
-  background-image: var(--logo-text);
-  background-repeat: no-repeat;
-  background-position: right top;
-  background-size: 100px;
-  position: absolute;
-  top: 9px;
-  left: 175px;
-  width: 100px;
-  height: 40px;
-}
-
-.logoTextBarColor {
-  background-image: var(--logo-text-bar-color);
-}
-
-.searchContainer {
-  margin: 0 auto;
-  width: 500px;
-  position: relative;
-}
-
-.searchInput {
-  width: 450px;
-}
-
-.navFilterIcon {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-}
-
-.searchFilters {
-  margin-left: 270px;
-  margin-right: 20px;
-  margin-top: 10px;
-  margin-bottom: 20px;
-  transition-property: margin;
-  transition-duration: 150ms;
-  transition-timing-function: ease-in-out;
-}
-
-.expand {
-  margin-left: 100px;
-}
-
-@media only screen and (max-width: 680px) {
-  .menuIcon {
-    display: none;
-  }
-
-  .navBackIcon {
-    left: 45px;
-  }
-
-  .navForwardIcon {
-    left: 80px;
-  }
-
-  .navSearchIcon {
-    display: block;
-    left: 120px;
-  }
-
-  .logoIcon {
-    left: 10px;
-  }
-
-  .logoText {
-    display: none;
-  }
-
-  .searchContainer {
-    position: fixed;
-    display: none;
-    width: 100%;
-    top: 60px;
-    background-color: var(--side-nav-color);
-  }
-
-  .topNavBarColor .searchContainer {
-    background-color: var(--primary-color-hover);
-  }
-
-  .searchInput {
-    width: 80%;
-    margin: 0 auto;
-  }
-
-  .navFilterIcon {
-    right: 0px;
-  }
-
-  .searchFilters {
-    margin-top: 130px;
-    margin-left: 10px;
-    margin-right: 10px;
-  }
-}
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 32e27d710..44f72859d 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -35,7 +35,7 @@ export default Vue.extend({
       const searchContainer = $('.searchContainer').get(0)
 
       if (width > 680) {
-        searchContainer.style.display = 'block'
+        searchContainer.style.display = ''
       } else {
         searchContainer.style.display = 'none'
       }
@@ -68,8 +68,8 @@ export default Vue.extend({
     toggleSearchContainer: function () {
       const searchContainer = $('.searchContainer').get(0)
 
-      if (searchContainer.style.display === 'none' || searchContainer.style.display === '') {
-        searchContainer.style.display = 'block'
+      if (searchContainer.style.display === 'none') {
+        searchContainer.style.display = ''
       } else {
         searchContainer.style.display = 'none'
       }
diff --git a/src/renderer/components/top-nav/top-nav.sass b/src/renderer/components/top-nav/top-nav.sass
new file mode 100644
index 000000000..e3fefd862
--- /dev/null
+++ b/src/renderer/components/top-nav/top-nav.sass
@@ -0,0 +1,177 @@
+.topNav
+  position: fixed
+  z-index: 4
+  left: 0
+  right: 0
+  top: 0
+  height: 60px
+  line-height: 60px
+  background-color: var(--card-bg-color)
+  -webkit-box-shadow: 0px 2px 1px 0px var(--primary-shadow-color)
+  display: grid
+  grid-template-columns: 1fr auto 1fr
+  align-items: center
+
+
+.side
+  display: flex
+  align-items: center
+
+
+.topNavBarColor
+  background-color: var(--primary-color)
+
+
+.navIcon
+  font-size: 20px
+  padding: 10px
+  cursor: pointer
+  color: var(--primary-text-color)
+  border-radius: 50%
+  transition: background 0.2s ease-out
+
+
+.topNavBarColor .navIcon
+  color: var(--text-with-main-color)
+
+
+.navIcon:hover
+  background-color: var(--side-nav-hover-color)
+  transition: background 0.2s ease-in
+
+
+.topNavBarColor .navIcon:hover
+  background-color: var(--primary-color-hover)
+
+
+.navIcon:active
+  background-color: var(--tertiary-text-color)
+  transition: background 0.2s ease-in
+
+
+.topNavBarColor .menuIcon:active
+  background-color: var(--primary-color-active)
+
+
+.navBackIcon
+  top: 10px
+  left: 50px
+
+
+.navForwardIcon
+  top: 10px
+  left: 85px
+
+
+.navSearchIcon
+  top: 10px
+  display: none
+
+.logo
+  display: flex
+  align-items: center
+  padding: 0px 25px 0px 10px
+
+  .logoIcon
+    background-image: var(--logo-icon)
+    background-repeat: no-repeat
+    background-position: right top
+    background-size: 25px
+    width: 25px
+    height: 25px
+
+
+  .logoIconBarColor
+    background-image: var(--logo-icon-bar-color)
+
+
+  .logoText
+    margin-left: 5px
+    position: relative
+    top: -3px
+    background-image: var(--logo-text)
+    background-repeat: no-repeat
+    background-position: right top
+    background-size: 100px
+    width: 100px
+    height: 40px
+
+
+  .logoTextBarColor
+    background-image: var(--logo-text-bar-color)
+
+.middle
+
+  .searchContainer
+    display: flex
+    align-items: center
+
+  .searchInput
+    width: 400px
+
+  .searchFilters
+    position: absolute
+    margin-left: 270px
+    margin-right: 20px
+    margin-top: 10px
+    margin-bottom: 20px
+    transition-property: margin
+    transition-duration: 150ms
+    transition-timing-function: ease-in-out
+
+
+.expand
+  margin-left: 100px
+
+
+@media only screen and (max-width: 680px)
+  .menuIcon
+    display: none
+
+
+  .navBackIcon
+    left: 45px
+
+
+  .navForwardIcon
+    left: 80px
+
+
+  .navSearchIcon
+    display: block
+    left: 120px
+
+
+  .logoIcon
+    left: 10px
+
+
+  .logoText
+    display: none
+
+
+  .searchContainer
+    position: fixed
+    display: none
+    width: 100%
+    top: 60px
+    background-color: var(--side-nav-color)
+
+
+  .topNavBarColor .searchContainer
+    background-color: var(--primary-color-hover)
+
+
+  .searchInput
+    width: 80%
+    margin: 0 auto
+
+
+  .navFilterIcon
+    right: 0px
+
+
+  .searchFilters
+    margin-top: 130px
+    margin-left: 10px
+    margin-right: 10px
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index 6f06bda61..549125815 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -3,54 +3,61 @@
     class="topNav"
     :class="{ topNavBarColor: barColor }"
   >
-    <font-awesome-icon
-      class=" menuIcon navIcon"
-      icon="bars"
-      @click="toggleSideNav"
-    />
-    <font-awesome-icon
-      class="navBackIcon navIcon"
-      icon="arrow-left"
-      @click="historyBack"
-    />
-    <font-awesome-icon
-      class="navForwardIcon navIcon"
-      icon="arrow-right"
-      @click="historyForward"
-    />
-    <font-awesome-icon
-      class="navSearchIcon navIcon"
-      icon="search"
-      @click="toggleSearchContainer"
-    />
-    <div
-      class="logoIcon"
-      :class="{ logoIconBarColor: barColor }"
-    />
-    <div
-      class="logoText"
-      :class="{ logoTextBarColor: barColor }"
-    />
-    <div class="searchContainer">
-      <ft-input
-        placeholder="Search / Go to URL"
-        class="searchInput"
-        :is-search="true"
-        @click="goToSearch"
+    <div class="side">
+      <font-awesome-icon
+        class=" menuIcon navIcon"
+        icon="bars"
+        @click="toggleSideNav"
       />
       <font-awesome-icon
-        class="navFilterIcon navIcon"
-        icon="filter"
-        @click="showFilters = !showFilters"
+        class="navBackIcon navIcon"
+        icon="arrow-left"
+        @click="historyBack"
+      />
+      <font-awesome-icon
+        class="navForwardIcon navIcon"
+        icon="arrow-right"
+        @click="historyForward"
+      />
+      <font-awesome-icon
+        class="navSearchIcon navIcon"
+        icon="search"
+        @click="toggleSearchContainer"
+      />
+      <div class="logo">
+        <div
+          class="logoIcon"
+          :class="{ logoIconBarColor: barColor }"
+        />
+        <div
+          class="logoText"
+          :class="{ logoTextBarColor: barColor }"
+        />
+      </div>
+    </div>
+    <div class="middle">
+      <div class="searchContainer">
+        <ft-input
+          placeholder="Search / Go to URL"
+          class="searchInput"
+          :is-search="true"
+          @click="goToSearch"
+        />
+        <font-awesome-icon
+          class="navFilterIcon navIcon"
+          icon="filter"
+          @click="showFilters = !showFilters"
+        />
+      </div>
+      <ft-search-filters
+        v-show="showFilters"
+        class="searchFilters"
+        :class="{ expand: !isSideNavOpen }"
       />
     </div>
-    <ft-search-filters
-      v-show="showFilters"
-      class="searchFilters"
-      :class="{ expand: !isSideNavOpen }"
-    />
+    <div class="side" />
   </div>
 </template>
 
 <script src="./top-nav.js" />
-<style scoped src="./top-nav.css" />
+<style scoped lang="sass" src="./top-nav.sass" />

From 229e169bbf025603629778aebd33896cd392915e Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Wed, 25 Mar 2020 04:25:36 +1300
Subject: [PATCH 5/9] Getting there

---
 src/renderer/components/top-nav/top-nav.sass | 204 ++++++++-----------
 1 file changed, 81 insertions(+), 123 deletions(-)

diff --git a/src/renderer/components/top-nav/top-nav.sass b/src/renderer/components/top-nav/top-nav.sass
index e3fefd862..ec0028b03 100644
--- a/src/renderer/components/top-nav/top-nav.sass
+++ b/src/renderer/components/top-nav/top-nav.sass
@@ -1,3 +1,10 @@
+@use "sass:selector"
+
+@mixin top-nav-is-colored
+  @at-root
+    .topNavBarColor &, .topNavBarColor#{&}
+      @content
+
 .topNav
   position: fixed
   z-index: 4
@@ -12,15 +19,12 @@
   grid-template-columns: 1fr auto 1fr
   align-items: center
 
+  @include top-nav-is-colored
+    background-color: var(--primary-color)
 
-.side
-  display: flex
-  align-items: center
-
-
-.topNavBarColor
-  background-color: var(--primary-color)
-
+.menuIcon
+  @include top-nav-is-colored
+    background-color: var(--primary-color-active)
 
 .navIcon
   font-size: 20px
@@ -29,149 +33,103 @@
   color: var(--primary-text-color)
   border-radius: 50%
   transition: background 0.2s ease-out
+  width: 1em
+  height: 1em
 
+  @include top-nav-is-colored
+    color: var(--text-with-main-color)
 
-.topNavBarColor .navIcon
-  color: var(--text-with-main-color)
+    &:hover
+      background-color: var(--primary-color-hover)
 
+  &:hover
+    background-color: var(--side-nav-hover-color)
+    transition: background 0.2s ease-in
 
-.navIcon:hover
-  background-color: var(--side-nav-hover-color)
-  transition: background 0.2s ease-in
+  &:active
+    background-color: var(--tertiary-text-color)
+    transition: background 0.2s ease-in
 
-
-.topNavBarColor .navIcon:hover
-  background-color: var(--primary-color-hover)
-
-
-.navIcon:active
-  background-color: var(--tertiary-text-color)
-  transition: background 0.2s ease-in
-
-
-.topNavBarColor .menuIcon:active
-  background-color: var(--primary-color-active)
-
-
-.navBackIcon
-  top: 10px
-  left: 50px
-
-
-.navForwardIcon
-  top: 10px
-  left: 85px
-
-
-.navSearchIcon
-  top: 10px
-  display: none
-
-.logo
+.side
   display: flex
   align-items: center
-  padding: 0px 25px 0px 10px
 
-  .logoIcon
-    background-image: var(--logo-icon)
-    background-repeat: no-repeat
-    background-position: right top
-    background-size: 25px
-    width: 25px
-    height: 25px
+  .navSearchIcon
+    @media only screen and (min-width: 681px)
+      display: none
+
+  .logo
+    display: flex
+    align-items: center
+    padding: 0px 25px 0px 10px
+
+    .logoIcon
+      background-image: var(--logo-icon)
+      background-repeat: no-repeat
+      background-position: right top
+      background-size: 25px
+      width: 25px
+      height: 25px
 
 
-  .logoIconBarColor
-    background-image: var(--logo-icon-bar-color)
+    .logoIconBarColor
+      background-image: var(--logo-icon-bar-color)
 
 
-  .logoText
-    margin-left: 5px
-    position: relative
-    top: -3px
-    background-image: var(--logo-text)
-    background-repeat: no-repeat
-    background-position: right top
-    background-size: 100px
-    width: 100px
-    height: 40px
+    .logoText
+      margin-left: 5px
+      position: relative
+      top: -3px
+      background-image: var(--logo-text)
+      background-repeat: no-repeat
+      background-position: right top
+      background-size: 100px
+      width: 100px
+      height: 40px
 
+      @media only screen and (max-width: 680px)
+        display: none
 
-  .logoTextBarColor
-    background-image: var(--logo-text-bar-color)
+    .logoTextBarColor
+      background-image: var(--logo-text-bar-color)
 
 .middle
-
   .searchContainer
     display: flex
     align-items: center
 
-  .searchInput
-    width: 400px
+    @include top-nav-is-colored
+      background-color: var(--primary-color-hover)
+
+    @media only screen and (max-width: 680px)
+      position: fixed
+      left: 0
+      right: 0
+      top: 60px
+      display: none
+      background-color: var(--side-nav-color)
+
+    .searchInput
+      width: 420px
+
+      @media only screen and (max-width: 680px)
+        flex: 1
 
   .searchFilters
     position: absolute
-    margin-left: 270px
-    margin-right: 20px
-    margin-top: 10px
-    margin-bottom: 20px
-    transition-property: margin
-    transition-duration: 150ms
-    transition-timing-function: ease-in-out
+    margin: 10px 20px 20px 270px
+    transition: margin 150ms ease-in-out
 
+    @media only screen and (max-width: 680px)
+      left: 0
+      right: 0
+      margin: 95px 10px 0px
 
+// ?
 .expand
   margin-left: 100px
 
-
+// unsure where to group this selector instead
 @media only screen and (max-width: 680px)
   .menuIcon
     display: none
-
-
-  .navBackIcon
-    left: 45px
-
-
-  .navForwardIcon
-    left: 80px
-
-
-  .navSearchIcon
-    display: block
-    left: 120px
-
-
-  .logoIcon
-    left: 10px
-
-
-  .logoText
-    display: none
-
-
-  .searchContainer
-    position: fixed
-    display: none
-    width: 100%
-    top: 60px
-    background-color: var(--side-nav-color)
-
-
-  .topNavBarColor .searchContainer
-    background-color: var(--primary-color-hover)
-
-
-  .searchInput
-    width: 80%
-    margin: 0 auto
-
-
-  .navFilterIcon
-    right: 0px
-
-
-  .searchFilters
-    margin-top: 130px
-    margin-left: 10px
-    margin-right: 10px

From 01caaf2f3452bf874b6aaad34234829c7c30c5db Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Fri, 27 Mar 2020 03:17:59 +1300
Subject: [PATCH 6/9] Fix search filters and add comments

---
 src/renderer/components/top-nav/top-nav.sass | 43 ++++++++------------
 src/renderer/components/top-nav/top-nav.vue  |  4 +-
 2 files changed, 18 insertions(+), 29 deletions(-)

diff --git a/src/renderer/components/top-nav/top-nav.sass b/src/renderer/components/top-nav/top-nav.sass
index ec0028b03..f53229e76 100644
--- a/src/renderer/components/top-nav/top-nav.sass
+++ b/src/renderer/components/top-nav/top-nav.sass
@@ -1,5 +1,3 @@
-@use "sass:selector"
-
 @mixin top-nav-is-colored
   @at-root
     .topNavBarColor &, .topNavBarColor#{&}
@@ -22,11 +20,14 @@
   @include top-nav-is-colored
     background-color: var(--primary-color)
 
-.menuIcon
+.menuIcon // the hamburger menu button
   @include top-nav-is-colored
     background-color: var(--primary-color-active)
 
-.navIcon
+  @media only screen and (max-width: 680px)
+    display: none
+
+.navIcon // all icons in the top navigation
   font-size: 20px
   padding: 10px
   cursor: pointer
@@ -50,7 +51,7 @@
     background-color: var(--tertiary-text-color)
     transition: background 0.2s ease-in
 
-.side
+.side // parts of the top nav either side of the search bar
   display: flex
   align-items: center
 
@@ -58,7 +59,7 @@
     @media only screen and (min-width: 681px)
       display: none
 
-  .logo
+  .logo // parts that make up the logo
     display: flex
     align-items: center
     padding: 0px 25px 0px 10px
@@ -71,10 +72,8 @@
       width: 25px
       height: 25px
 
-
-    .logoIconBarColor
-      background-image: var(--logo-icon-bar-color)
-
+      @include top-nav-is-colored
+        background-image: var(--logo-icon-bar-color)
 
     .logoText
       margin-left: 5px
@@ -90,23 +89,19 @@
       @media only screen and (max-width: 680px)
         display: none
 
-    .logoTextBarColor
-      background-image: var(--logo-text-bar-color)
+      @include top-nav-is-colored
+        background-image: var(--logo-text-bar-color)
 
-.middle
+.middle // the middle part of the top nav which contains the search bar
   .searchContainer
     display: flex
     align-items: center
 
-    @include top-nav-is-colored
-      background-color: var(--primary-color-hover)
-
     @media only screen and (max-width: 680px)
       position: fixed
       left: 0
       right: 0
       top: 60px
-      display: none
       background-color: var(--side-nav-color)
 
     .searchInput
@@ -117,7 +112,9 @@
 
   .searchFilters
     position: absolute
-    margin: 10px 20px 20px 270px
+    left: 0
+    right: 0
+    margin: 10px 20px 20px 220px
     transition: margin 150ms ease-in-out
 
     @media only screen and (max-width: 680px)
@@ -125,11 +122,5 @@
       right: 0
       margin: 95px 10px 0px
 
-// ?
-.expand
-  margin-left: 100px
-
-// unsure where to group this selector instead
-@media only screen and (max-width: 680px)
-  .menuIcon
-    display: none
+    &.expand
+      margin-left: 100px
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index 549125815..685c86b5f 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -5,7 +5,7 @@
   >
     <div class="side">
       <font-awesome-icon
-        class=" menuIcon navIcon"
+        class="menuIcon navIcon"
         icon="bars"
         @click="toggleSideNav"
       />
@@ -27,11 +27,9 @@
       <div class="logo">
         <div
           class="logoIcon"
-          :class="{ logoIconBarColor: barColor }"
         />
         <div
           class="logoText"
-          :class="{ logoTextBarColor: barColor }"
         />
       </div>
     </div>

From 99f3a5dbccc28be41aa7872d7a1a2442ddbe5e17 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Fri, 27 Mar 2020 17:02:55 +1300
Subject: [PATCH 7/9] Fixes:

- Top bar uses flex until it's wide enough, then grid
- Fix button active style when top bar has colour
---
 src/renderer/components/top-nav/top-nav.sass | 23 +++++++++++---------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/top-nav/top-nav.sass b/src/renderer/components/top-nav/top-nav.sass
index f53229e76..d3aa374a4 100644
--- a/src/renderer/components/top-nav/top-nav.sass
+++ b/src/renderer/components/top-nav/top-nav.sass
@@ -13,17 +13,17 @@
   line-height: 60px
   background-color: var(--card-bg-color)
   -webkit-box-shadow: 0px 2px 1px 0px var(--primary-shadow-color)
-  display: grid
-  grid-template-columns: 1fr auto 1fr
+  display: flex
   align-items: center
+  align-content: center
+
+  @media only screen and (min-width: 901px)
+    display: grid
+    grid-template-columns: 1fr 440px 1fr
 
   @include top-nav-is-colored
     background-color: var(--primary-color)
 
-.menuIcon // the hamburger menu button
-  @include top-nav-is-colored
-    background-color: var(--primary-color-active)
-
   @media only screen and (max-width: 680px)
     display: none
 
@@ -51,6 +51,9 @@
     background-color: var(--tertiary-text-color)
     transition: background 0.2s ease-in
 
+    @include top-nav-is-colored
+      background-color: var(--primary-color-active)
+
 .side // parts of the top nav either side of the search bar
   display: flex
   align-items: center
@@ -93,6 +96,9 @@
         background-image: var(--logo-text-bar-color)
 
 .middle // the middle part of the top nav which contains the search bar
+  max-width: 440px
+  flex: 1
+
   .searchContainer
     display: flex
     align-items: center
@@ -105,10 +111,7 @@
       background-color: var(--side-nav-color)
 
     .searchInput
-      width: 420px
-
-      @media only screen and (max-width: 680px)
-        flex: 1
+      flex: 1
 
   .searchFilters
     position: absolute

From bd0e9af7ff51a05c501b275e81d9da5ba8b9e4a7 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Fri, 27 Mar 2020 20:25:11 +1300
Subject: [PATCH 8/9] Add back missing line

---
 src/renderer/components/top-nav/top-nav.sass | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/components/top-nav/top-nav.sass b/src/renderer/components/top-nav/top-nav.sass
index d3aa374a4..173ae3827 100644
--- a/src/renderer/components/top-nav/top-nav.sass
+++ b/src/renderer/components/top-nav/top-nav.sass
@@ -24,6 +24,7 @@
   @include top-nav-is-colored
     background-color: var(--primary-color)
 
+.menuIcon // the hamburger button
   @media only screen and (max-width: 680px)
     display: none
 

From fbb8f1513ef43a6891f4351427bd601c093ce246 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Sat, 28 Mar 2020 17:04:37 +1300
Subject: [PATCH 9/9] Fixes:

- Search bar is primary-color-hover in thin mode with match top bar set
- Search filters .expand class does not take effect in thin mode
- Grid point moved from 901 to 961 px
---
 src/renderer/components/top-nav/top-nav.sass | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/top-nav/top-nav.sass b/src/renderer/components/top-nav/top-nav.sass
index 173ae3827..4040bcb30 100644
--- a/src/renderer/components/top-nav/top-nav.sass
+++ b/src/renderer/components/top-nav/top-nav.sass
@@ -17,7 +17,7 @@
   align-items: center
   align-content: center
 
-  @media only screen and (min-width: 901px)
+  @media only screen and (min-width: 961px)
     display: grid
     grid-template-columns: 1fr 440px 1fr
 
@@ -111,6 +111,9 @@
       top: 60px
       background-color: var(--side-nav-color)
 
+      @include top-nav-is-colored
+        background-color: var(--primary-color-hover)
+
     .searchInput
       flex: 1
 
@@ -126,5 +129,6 @@
       right: 0
       margin: 95px 10px 0px
 
-    &.expand
-      margin-left: 100px
+    @media only screen and (min-width: 681px)
+      &.expand
+        margin-left: 100px