Update

CHANGELOG.md

@@ -4,6 +4,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [0.53.8] - [2022-11-17]
  
+### Added
+- Added the ability for users to hide content they've already watched throughout the app via a checkbox ([7645](Add Filter for Unwatched Content))
+
 ### Fixed
  - Selecting a large file in publish no longer crashes ([#7736](https://github.com/lbryio/lbry-desktop/pull/7736))
  - Unfollowing unpublished channels ([#7737](https://github.com/lbryio/lbry-desktop/pull/7737))

ui/scss/component/_claim-search.scss

@@ -17,7 +17,7 @@
   margin-top: var(--spacing-m);
   margin-bottom: var(--spacing-m);
   color: var(--color-text-subtitle);
-  align-items: flex-start;
+  align-items: baseline;
 
   @media (min-width: $breakpoint-small) {
     flex-direction: row;
@@ -27,6 +27,23 @@
   }
 }
 
+// UPDATE: Add style for checkbox
+.claim-search__checkbox {
+    padding-left: 45%;
+    padding-top: 7%;
+
+}
+
+//UPDATE: Added style for checkbox on search page
+.claim-search__checkbox_searchbox {
+    // Placeholder.
+}
+
+// UPDATE: Add style for checkbox label
+.checkbox-label {
+    padding-left: 10px;
+}
+
 .claim-search__dropdown {
   font-size: var(--font-body);
   background-color: var(--color-input-bg);

ui/scss/component/_file-thumbnail.scss

@@ -1,13 +1,13 @@
 .file-thumbnail__viewed-bar {
-  position: absolute;
+    position: absolute;
-  bottom: 0;
+    bottom: 0;
-  left: 0;
+    left: 0;
-  width: 100%;
+    width: 100%;
-  height: 5px;
+    height: 10px; // UPDATE: Changed thumbnail viewed bar height to 10px
-  background-color: var(--color-gray-7);
+    background-color: var(--color-gray-7);
 }
 
 .file-thumbnail__viewed-bar-progress {
-  height: 5px;
+    height: 10px; // UPDATE: Changed thumbnail viewed progress bar height to 10px
-  background-color: var(--color-primary);
+    background-color: red; // UPDATE: Changed progress bar color to red
 }

ui/scss/component/_search.scss

@@ -90,7 +90,7 @@
   .radio,
   .checkbox {
     display: inline-block;
-    margin-top: 0;
+    margin-top: 5px;    // UPDATE: Helps to align items in "Other Options" in search
 
     &:not(:first-of-type) {
       margin-top: var(--spacing-s);