enhancing watched videos appearnce (#806)

package-lock.json

@@ -8982,7 +8982,7 @@
     },
     "humanize-plus": {
       "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/humanize-plus/-/humanize-plus-1.8.2.tgz",
+      "resolved": "http://registry.npmjs.org/humanize-plus/-/humanize-plus-1.8.2.tgz",
       "integrity": "sha1-pls0RZrWNnrbs3B6gqPJ+RYWcDA=",
       "dev": true
     },
@@ -14309,7 +14309,7 @@
     },
     "safe-regex": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
       "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
       "dev": true,
       "requires": {

src/renderer/components/ft-auto-grid/ft-auto-grid.sass

@@ -1,10 +1,9 @@
 .ft-auto-grid
   &.grid
     display: grid
-    grid-template-columns: repeat(auto-fill, 240px)
+    grid-template-columns: repeat(auto-fill, 262px)
     justify-content: space-evenly
-    grid-gap: 5px
 
   &.list
     display: grid
-    grid-gap: 16px
+    grid-gap: 4px

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

@@ -25,6 +25,13 @@
     &:active
       background-color: var(--side-nav-active-color)
 
+  &.base-no-default
+    &: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)

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

@@ -5,9 +5,7 @@
       :title="title"
       :icon="icon"
       :class="{
-        base: theme === 'base',
-        primary: theme === 'primary',
-        secondary: theme === 'secondary',
+        [theme]: true,
         shadow: useShadow
       }"
       :style="{

src/renderer/components/ft-list-video/ft-list-video.vue

@@ -4,7 +4,8 @@
     :class="{
       list: (listType === 'list' || forceListType === 'list') && forceListType !== 'grid',
       grid: (listType === 'grid' || forceListType === 'list') && forceListType !== 'list',
-      [appearance]: true
+      [appearance]: true,
+      watched: watched
     }"
   >
     <div
@@ -33,6 +34,7 @@
         v-if="!isLive"
         icon="star"
         class="favoritesIcon"
+        theme="base"
         :padding="appearance === `watchPlaylistItem` ? 5 : 6"
         :size="appearance === `watchPlaylistItem` ? 14 : 18"
         :class="{ favorited: isFavorited }"
@@ -54,7 +56,7 @@
       <ft-icon-button
         class="optionsButton"
         title="More Options"
-        theme="base"
+        theme="base-no-default"
         :size="16"
         :use-shadow="false"
         dropdown-position-x="left"

src/renderer/sass-partials/_ft-list-item.sass

@@ -20,7 +20,29 @@ $thumbnail-overlay-opacity: 0.85
     .watchPlaylistItem#{&}, .recommendation#{&}
       @content
 
+@mixin low-contrast-when-watched($col)
+  color: $col
+
+  @at-root
+    .watched &, .watched#{&}
+      color: var(--tertiary-text-color)
+
+    .watched:hover &, .watched:hover#{&}
+      color: $col
+
 .ft-list-item
+  padding: 6px
+
+  &.watched
+    background-color: var(--bg-color)
+    @include low-contrast-when-watched(var(--primary-text-color))
+
+    .thumbnailImage
+      opacity: 0.3
+
+    &:hover .thumbnailImage
+      opacity: 1
+
   .videoThumbnail
     display: flex
     position: relative
@@ -43,7 +65,7 @@ $thumbnail-overlay-opacity: 0.85
       padding: 2px
       opacity: $thumbnail-overlay-opacity
       color: var(--primary-text-color)
-      background-color: var(--card-bg-color)
+      background-color: var(--bg-color)
       pointer-events: none
 
     .videoDuration
@@ -124,7 +146,7 @@ $thumbnail-overlay-opacity: 0.85
 
     .title
       font-size: 20px
-      color: var(--primary-text-color)
+      @include low-contrast-when-watched(var(--primary-text-color))
       text-decoration: none
       word-wrap: break-word
       word-break: break-word
@@ -139,12 +161,15 @@ $thumbnail-overlay-opacity: 0.85
       @include is-sidebar-item
         font-size: 12px
 
-      &, .channelName
-        color: var(--secondary-text-color)
+      &
+        @include low-contrast-when-watched(var(--secondary-text-color))
+
+      .channelName
+        @include low-contrast-when-watched(var(--secondary-text-color))
 
     .description
       font-size: 14px
-      color: var(--secondary-text-color)
+      @include low-contrast-when-watched(var(--secondary-text-color))
 
   &.list
     display: flex