Layout tweaks

package-lock.json

@@ -10119,7 +10119,7 @@
     },
     "finalhandler": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
       "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
       "dev": true,
       "requires": {
@@ -11167,7 +11167,7 @@
     },
     "got": {
       "version": "9.6.0",
-      "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
+      "resolved": "http://registry.npmjs.org/got/-/got-9.6.0.tgz",
       "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
       "dev": true,
       "requires": {
@@ -11511,7 +11511,7 @@
     },
     "http-errors": {
       "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
       "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
       "dev": true,
       "requires": {
@@ -14687,7 +14687,7 @@
     },
     "media-typer": {
       "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
       "dev": true
     },
@@ -17926,7 +17926,7 @@
       "dependencies": {
         "http-errors": {
           "version": "1.6.3",
-          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+          "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
           "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
           "dev": true,
           "requires": {
@@ -19051,7 +19051,7 @@
     },
     "through": {
       "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
       "dev": true
     },

src/renderer/components/ft-icon-button/ft-icon-button.css

@@ -1,116 +0,0 @@
-.ftIconButton {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-evenly;
-  position: relative;
-}
-
-.iconButton {
-  width: 1em;
-  height: 1em;
-  padding: 10px;
-  font-size: 20px;
-  border-radius: 50%;
-  cursor: pointer;
-  -moz-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
-  transition: background 0.2s ease-out;
-}
-
-.shadow {
-  box-shadow: 0 1px 2px rgba(0,0,0,.5);
-}
-
-.iconButton:hover {
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
-}
-
-.base {
-  background-color: var(--card-bg-color);
-  color: var(--primary-text-color);
-}
-
-.base:hover {
-  background-color: var(--side-nav-hover-color);
-}
-
-.base:active {
-  background-color: var(--side-nav-active-color);
-}
-
-.primary {
-  background-color: var(--primary-color);
-  color: var(--text-with-main-color);
-}
-
-.primary:hover {
-  background-color: var(--primary-color-hover);
-}
-
-.primary:active {
-  background-color: var(--primary-color-active);
-}
-
-.secondary {
-  background-color: var(--accent-color);
-  color: var(--text-with-accent-color);
-}
-
-.secondary:hover {
-  background-color: var(--accent-color-hover);
-}
-
-.secondary:active {
-  background-color: var(--accent-color-active);
-}
-
-.iconDropdown {
-  position: absolute;
-  text-align: center;
-  list-style-type: none;
-  z-index: 100;
-  margin-top: 45px;
-  font-size: 12px;
-  box-shadow: 0 1px 2px rgba(0,0,0,.5);
-  background-color: var(--card-bg-color);
-  color: var(--secondary-text-color);
-}
-
-.iconDropdown p {
-    padding: 10px;
-    margin: 0;
-    white-space: nowrap;
-    cursor: pointer;
-    -moz-transition: background 0.2s ease-out;
-    -o-transition: background 0.2s ease-out;
-    transition: background 0.2s ease-out;
-}
-
-.iconDropdown p: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;
-}
-
-.iconDropdown p:active {
-  background-color: var(--side-nav-active-color);
-  -moz-transition: background 0.1s ease-in;
-  -o-transition: background 0.1s ease-in;
-  transition: background 0.1s ease-in;
-}
-
-.iconDropdown p a {
-    text-decoration: none;
-    color: inherit;
-}
-
-.left {
-  right: 50%;
-}
-
-.right {
-  left: 50%;
-}

src/renderer/components/ft-icon-button/ft-icon-button.sass

@@ -0,0 +1,85 @@
+.ftIconButton
+  display: flex
+  flex-flow: row wrap
+  justify-content: space-evenly
+  position: relative
+
+.iconButton
+  width: 1em
+  height: 1em
+  padding: 10px
+  font-size: 20px
+  border-radius: 50%
+  cursor: pointer
+  transition: background 0.15s ease-out
+
+  &.shadow
+    box-shadow: 0 1px 2px rgba(0,0,0,.5)
+
+  &.base
+    background-color: var(--card-bg-color)
+    color: var(--primary-text-color)
+
+    &:hover
+      background-color: var(--side-nav-hover-color)
+
+    &:active
+      background-color: var(--side-nav-active-color)
+
+  &.primary
+    background-color: var(--primary-color)
+    color: var(--text-with-main-color)
+
+    &:hover
+      background-color: var(--primary-color-hover)
+
+    &:active
+      background-color: var(--primary-color-active)
+
+  &.secondary
+    background-color: var(--accent-color)
+    color: var(--text-with-accent-color)
+
+    &:hover
+      background-color: var(--accent-color-hover)
+
+    &:active
+      background-color: var(--accent-color-active)
+
+.iconDropdown
+  position: absolute
+  text-align: center
+  list-style-type: none
+  z-index: 100
+  margin-top: 45px
+  font-size: 12px
+  box-shadow: 0 1px 2px rgba(0,0,0,.5)
+  background-color: var(--side-nav-color)
+  color: var(--secondary-text-color)
+  user-select: none
+
+  &.left
+    right: 50%
+
+  &.right
+    left: 50%
+
+  .list
+    margin: 0
+    padding: 0
+    list-style-type: none
+
+  .listItem
+    padding: 10px
+    margin: 0
+    white-space: nowrap
+    cursor: pointer
+    transition: background 0.2s ease-out
+
+    &:hover
+      background-color: var(--side-nav-hover-color)
+      transition: background 0.2s ease-in
+
+    &:active
+      background-color: var(--side-nav-active-color)
+      transition: background 0.1s ease-in

src/renderer/components/ft-icon-button/ft-icon-button.vue

@@ -21,16 +21,19 @@
         center: dropdownPosition === 'center'
       }"
     >
-      <p
+      <ul class="list">
-        v-for="(label, index) in dropdownNames"
+        <li
-        :key="index"
+          v-for="(label, index) in dropdownNames"
-        @click="handleDropdownClick(index)"
+          class="listItem"
-      >
+          :key="index"
-        {{ label }}
+          @click="handleDropdownClick(index)"
-      </p>
+        >
+          {{ label }}
+        </li>
+      </ul>
     </div>
   </div>
 </template>
 
 <script src="./ft-icon-button.js" />
-<style scoped src="./ft-icon-button.css" />
+<style scoped lang="sass" src="./ft-icon-button.sass" />

src/renderer/components/watch-video-info/watch-video-info.sass

@@ -7,7 +7,7 @@
     grid-template-columns: auto
 
 .videoTitle
-  font-size: 20px
+  font-size: 22px
   margin: 0 0 20px
 
 .channelInformation
@@ -20,12 +20,14 @@
 
   .channelName
     margin-left: 6px
-    margin-bottom: 4px
 
   .subscribeButton
-    padding: 6px
+    padding: 5px
     font-size: 14px
 
+.datePublished
+  margin-bottom: 24px
+
 .viewCount
   margin: 4px 0px 0px
   text-align: right