ui/component/claimCollectionAdd/view.jsx

@@ -115,19 +115,13 @@ const ClaimCollectionAdd = (props: Props) => {
                 inputButton={
                   <>
                     <Button
-                      button={'alt'}
                       icon={ICONS.ADD}
                       className={'button-toggle'}
                       disabled={!newCollectionName.length}
                       onClick={() => handleAddCollection()}
                       ref={buttonref}
                     />
-                    <Button
-                      button={'alt'}
-                      className={'button-toggle'}
-                      icon={ICONS.REMOVE}
-                      onClick={() => handleClearNew()}
-                    />
+                    <Button className={'button-toggle'} icon={ICONS.REMOVE} onClick={() => handleClearNew()} />
                   </>
                 }
                 onChange={handleNameInput}

ui/component/claimList/view.jsx

@@ -144,7 +144,7 @@ export default function ClaimList(props: Props) {
         const mainEl = document.querySelector(`.${MAIN_CLASS}`);
 
         if (mainEl && !loading && urisLength >= pageSize) {
-          const contentWrapperAtBottomOfPage = mainEl.getBoundingClientRect().bottom - 0.5 <= window.innerHeight;
+          const contentWrapperAtBottomOfPage = mainEl.getBoundingClientRect().bottom - 1.5 <= window.innerHeight;
 
           if (contentWrapperAtBottomOfPage) {
             onScrollBottom();

ui/component/claimListHeader/view.jsx

@@ -230,7 +230,6 @@ function ClaimListHeader(props: Props) {
               {CS.ORDER_BY_TYPES.map((type) => (
                 <Button
                   key={type}
-                  button="alt"
                   onClick={(e) =>
                     handleChange({
                       key: CS.ORDER_BY_KEY,
@@ -251,7 +250,6 @@ function ClaimListHeader(props: Props) {
           <div className="claim-search__menu-group">
             {!hideAdvancedFilter && (
               <Button
-                button="alt"
                 aria-label={__('More')}
                 className={classnames(`button-toggle button-toggle--top button-toggle--more`, {
                   'button-toggle--custom': isFiltered(),

ui/component/playlistsMine/view.jsx

@@ -125,7 +125,6 @@ export default function PlaylistsMine(props: Props) {
                 <Button
                   label={__(value)}
                   key={value}
-                  button="alt"
                   onClick={() => handleFilterType(value)}
                   className={classnames('button-toggle', {
                     'button-toggle--active': filterType === value,

ui/component/searchOptions/view.jsx

@@ -109,7 +109,6 @@ const SearchOptions = (props: Props) => {
             return (
               <Button
                 key={option}
-                button="alt"
                 label={t[1]}
                 className={classnames(`button-toggle`, {
                   'button-toggle--active': options[SEARCH_OPTIONS.CLAIM_TYPE] === option,

ui/component/txoList/view.jsx

@@ -254,7 +254,6 @@ function TxoList(props: Props) {
                       <div className={'txo__radios'}>
                         {/* active transactions button */}
                         <Button
-                          button="alt"
                           onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'active' })}
                           className={classnames(`button-toggle`, {
                             'button-toggle--active': active === TXO.ACTIVE,
@@ -263,7 +262,6 @@ function TxoList(props: Props) {
                         />
                         {/* historical transactions button */}
                         <Button
-                          button="alt"
                           onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'spent' })}
                           className={classnames(`button-toggle`, {
                             'button-toggle--active': active === 'spent',
@@ -272,7 +270,6 @@ function TxoList(props: Props) {
                         />
                         {/* all transactions button */}
                         <Button
-                          button="alt"
                           onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'all' })}
                           className={classnames(`button-toggle`, {
                             'button-toggle--active': active === 'all',

ui/component/walletTipAmountSelector/view.jsx

@@ -231,7 +231,6 @@ function WalletTipAmountSelector(props: Props) {
             <Button
               key={defaultAmount}
               disabled={shouldDisableAmountSelector(defaultAmount)}
-              button="alt"
               className={classnames('button-toggle button-toggle--expandformobile', {
                 'button-toggle--active':
                   convertToTwoDecimalsOrMore(defaultAmount) === convertToTwoDecimalsOrMore(amount) && !useCustomTip,
@@ -247,7 +246,6 @@ function WalletTipAmountSelector(props: Props) {
           ))}
 
         <Button
-          button="alt"
           disabled={shouldDisableFiatSelectors}
           className={classnames('button-toggle button-toggle--expandformobile', {
             'button-toggle--active': useCustomTip,

ui/page/fileListDownloaded/view.jsx

@@ -59,7 +59,6 @@ function FileListDownloaded(props: Props) {
         <div className="section__actions--inline">
           <Button
             icon={ICONS.LIBRARY}
-            button="alt"
             label={__('Downloads')}
             className={classnames(`button-toggle`, {
               'button-toggle--active': viewMode === VIEW_DOWNLOADS,
@@ -68,7 +67,6 @@ function FileListDownloaded(props: Props) {
           />
           <Button
             icon={ICONS.PURCHASED}
-            button="alt"
             label={__('Purchases')}
             className={classnames(`button-toggle`, {
               'button-toggle--active': viewMode === VIEW_PURCHASES,

ui/page/fileListPublished/view.jsx

@@ -134,7 +134,6 @@ function FileListPublished(props: Props) {
               header={
                 <span>
                   <Button
-                    button="alt"
                     label={__('All')}
                     aria-label={__('All uploads')}
                     onClick={() => setFilterBy(FILTER_ALL)}
@@ -143,7 +142,6 @@ function FileListPublished(props: Props) {
                     })}
                   />
                   <Button
-                    button="alt"
                     label={__('Uploads')}
                     onClick={() => setFilterBy(FILTER_UPLOADS)}
                     className={classnames(`button-toggle`, {
@@ -151,7 +149,6 @@ function FileListPublished(props: Props) {
                     })}
                   />
                   <Button
-                    button="alt"
                     label={__('Reposts')}
                     onClick={() => {
                       setFilterBy(FILTER_REPOSTS);

ui/page/listBlocked/view.jsx

@@ -206,7 +206,6 @@ function ListBlocked(props: Props) {
     return (
       <Button
         icon={icon}
-        button="alt"
         label={__(label)}
         className={classnames(`button-toggle`, {
           'button-toggle--active': viewMode === view,
@@ -221,7 +220,6 @@ function ListBlocked(props: Props) {
       myChannelClaimIds && (
         <Button
           icon={ICONS.REFRESH}
-          button="alt"
           label={__('Refresh')}
           onClick={() => {
             fetchModBlockedList();

ui/page/top/view.jsx

@@ -58,7 +58,6 @@ function TopPage(props: Props) {
           <div className="claim-search__menu-group">
             <Button
               label={queryName}
-              button="alt"
               onClick={() => setChannelActive(false)}
               className={classnames('button-toggle', {
                 'button-toggle--active': !channelActive,
@@ -66,7 +65,6 @@ function TopPage(props: Props) {
             />
             <Button
               label={`@${queryName}`}
-              button="alt"
               onClick={() => setChannelActive(true)}
               className={classnames('button-toggle', {
                 'button-toggle--active': channelActive,

ui/scss/component/_badge.scss

@@ -22,7 +22,7 @@
 
 .badge--tag-mature {
   @extend .badge;
-  background-color: var(--color-tertiary-alt);
+  background-color: var(--color-tertiary) !important;
   color: var(--color-tertiary);
 }
 

ui/scss/component/_button.scss

@@ -85,10 +85,10 @@
   &:hover {
     background-color: var(--color-button-secondary-bg-hover) !important;
     .button__label {
-      color: var(--color-button-secondary-text-hover) !important;
+      color: var(--color-button-secondary-text-hover);
     }
     .icon {
-      stroke: var(--color-button-secondary-text-hover) !important;
+      stroke: var(--color-button-secondary-text-hover);
     }
   }
 
@@ -107,8 +107,8 @@
 }
 
 .button--alt {
-  background-color: var(--color-button-alt-bg);
-  color: var(--color-button-alt-text);
+  background-color: var(--color-feature-background);
+  color: var(--color-text);
   &:hover {
     background-color: var(--color-button-alt-bg-hover);
     color: var(--color-button-alt-text-hover);
@@ -468,14 +468,15 @@ svg + .button__label {
 }
 
 .button-toggle {
+  @extend .button--alt;
   padding: 0 var(--spacing-m);
   height: var(--height-button);
   font-size: var(--font-base);
   border-left-width: 0;
   border-radius: 0;
   margin: 0;
-  color: var(--color-button-toggle-text) !important;
-  background-color: var(--color-button-toggle-bg) !important;
+  color: var(--color-button-toggle-text);
+  background-color: var(--color-button-toggle-bg);
 
   -webkit-user-select: none;
   user-select: none;
@@ -490,6 +491,10 @@ svg + .button__label {
     }
   }
 
+  .button-toggle--active {
+    background-color: var(--color-button-toggle-bg-active);
+  }
+
   @media (max-width: $breakpoint-small) {
     padding: var(--spacing-m) var(--spacing-s);
   }
@@ -524,7 +529,7 @@ svg + .button__label {
   // color: var(--color-button-toggle-text) !important;
   //box-shadow: 0px 0px 0px 1px var(--color-primary) inset;
   color: var(--color-button-toggle-text-active) !important;
-  background-color: var(--color-button-toggle-bg-active) !important;
+  background-color: var(--color-button-toggle-bg-active);
 
   .icon {
     opacity: 1;

ui/scss/component/_card.scss

@@ -416,12 +416,9 @@
 
   .button--alt {
     color: var(--color-button-alt-text);
-    background-color: var(--color-button-alt-bg);
     &:hover {
-      color: var(--color-primary-contrast);
-      background-color: var(--color-primary);
       .icon {
-        stroke: var(--color-primary-contrast);
+        stroke: var(--color-button-alt-text-hover);
       }
     }
   }

ui/scss/component/_channel.scss

@@ -3,26 +3,27 @@ $metadata-z-index: 1;
 $actions-z-index: 2;
 
 .channelPage-wrapper {
-  .button-group {
-    .button__content {
-      .icon {
-        stroke: var(--color-text);
+  .channel__quick-actions {
+    .button-group {
+      .button__content {
+        .icon {
+          stroke: var(--color-text);
+        }
       }
-    }
-    .button-following {
-      color: var(--color-text) !important;
-      background-color: var(--color-button-alt-bg) !important;
-      .icon {
-        stroke: var(--color-text) !important;
+      .button-following {
+        &.button--alt {
+          color: var(--color-text);
+          background-color: var(--color-button-alt-bg);
+          .icon {
+            stroke: var(--color-text);
+          }
+          &:hover {
+            color: var(--color-primary);
+          }
+        }
       }
-      &:hover {
-        color: var(--color-primary) !important;
-      }
-    }
-    .button-following:last-of-type {
-      margin-left: 2px;
-      &:hover {
-        color: var(--color-text) !important;
+      .button-following:last-of-type {
+        margin-left: 2px;
       }
     }
   }
@@ -407,12 +408,13 @@ $actions-z-index: 2;
 
   .button,
   .menu__button {
+    background-color: var(--color-header-background);
     &:hover {
-      color: var(--color-link);
+      //color: var(--color-link);
       background-color: rgba(var(--color-header-background-base), 0.95);
 
       .icon {
-        stroke: var(--color-link);
+        //stroke: var(--color-link);
       }
     }
   }
@@ -457,16 +459,6 @@ $actions-z-index: 2;
   [role='menuitem'] {
     margin: 0;
 
-    &[data-selected] {
-      // background: transparent;
-      .channel__list-item,
-      .channel-staked__wrapper {
-        .claim-preview__title {
-          color: var(--color-primary-contrast);
-        }
-      }
-    }
-
     &:last-child {
       .channel__list-item {
         border-bottom-left-radius: var(--border-radius);
@@ -529,14 +521,6 @@ $actions-z-index: 2;
       border-radius: 50%;
     }
   }
-
-  &:hover {
-    background-color: var(--color-primary);
-
-    .channel__list-text {
-      color: var(--color-menu-icon-active);
-    }
-  }
 }
 
 .channel__list-item--selected {
@@ -545,12 +529,6 @@ $actions-z-index: 2;
   .icon--ChevronDown {
     margin-left: var(--spacing-l);
   }
-
-  &:hover {
-    .claim-preview__title {
-      color: white;
-    }
-  }
 }
 
 .channel__list-text {

ui/scss/component/_claim-list.scss

@@ -119,18 +119,6 @@
     margin-top: var(--spacing-xxs);
   }
 
-  .claim__tags {
-    .tag {
-      color: var(--color-text);
-      background-color: var(--color-header-button);
-
-      &:hover {
-        background-color: var(--color-primary);
-        color: var(--color-primary-contrast);
-      }
-    }
-  }
-
   .claim-preview__repost-author {
     width: 120px;
     height: 120px;
@@ -567,7 +555,7 @@
     width: auto;
 
     .button--alt {
-      color: var(--color-primary-contrast);
+      color: var(--color-text);
 
       .icon {
         stroke: var(--color-primary-contrast);

ui/scss/component/_claim-search.scss

@@ -29,13 +29,15 @@
 
 .claim-search__dropdown {
   font-size: var(--font-body);
-  background-color: var(--color-card-background);
+  background-color: var(--color-input-bg);
   background-position: right var(--spacing-m) center;
 }
 
 .claim-search__dropdown--selected {
-  color: var(--color-primary-contrast);
-  background-color: var(--color-brand-blue);
+  color: var(--color-brand-blue);
+  option {
+    color: var(--color-text);
+  }
 }
 
 .claim-search__input-container {

ui/scss/component/_comments.scss

@@ -72,13 +72,6 @@ $thumbnailWidthSmall: 1rem;
     @media (min-width: $breakpoint-small) {
       @include handleChannelGif($thumbnailWidth);
     }
-
-    .channel-staked__wrapper {
-      padding: 0;
-      bottom: -1rem;
-      padding: -1rem;
-      margin-left: 0;
-    }
     .channel-staked__indicator {
       @media (max-width: $breakpoint-small) {
         margin-left: 0.1rem;
@@ -222,10 +215,6 @@ $thumbnailWidthSmall: 1rem;
 
   .channel-name {
     color: var(--color-link);
-
-    &:hover {
-      color: var(--color-secondary);
-    }
   }
 }
 

ui/scss/component/_header.scss

@@ -207,7 +207,7 @@
       height: calc(var(--header-height-mobile) - var(--spacing-m));
       background-color: rgba(var(--color-primary-static), 0.6);
       .icon {
-        stroke: var(--color-brand-contrast);
+        stroke: var(--color-text);
       }
     }
 
@@ -285,10 +285,6 @@
     transform: rotate(0deg);
     &:not(.button-rotate) {
       background-color: var(--color-header-button-hover);
-
-      .icon {
-        stroke: var(--color-brand-contrast);
-      }
     }
   }
 

ui/scss/component/_main.scss

@@ -152,10 +152,6 @@ body {
       .date_time {
         font-size: var(--font-xsmall) !important;
         color: rgba(var(--color-text-base), 0.6);
-
-        &:hover {
-          color: var(--color-text);
-        }
       }
     }
 

ui/scss/component/_markdown-editor.scss

@@ -41,6 +41,12 @@
     }
   }
 
+  button.active {
+    &.preview {
+      color: var(--color-brand-blue);
+    }
+  }
+
   button {
     color: var(--color-header-link);
     border-color: transparent;
@@ -107,7 +113,6 @@
     button:not(.button) {
       padding-right: 0;
       padding-left: 0;
-      background-color: transparent !important;
       border: transparent;
 
       &:hover {

ui/scss/component/_modal.scss

@@ -97,13 +97,13 @@
     margin: 0;
 
     padding: var(--spacing-l);
-    border: 2px solid black;
-    border-radius: var(--border-radius);
 
-    .button-toggle {
-      background-color: rgba(var(--color-header-button-base), 0.4) !important;
-      &:hover {
-        background-color: rgba(var(--color-header-button-base), 0.9) !important;
+    .button-toggle:not(.button-toggle--active) {
+      &.button--alt {
+        background-color: rgba(var(--color-header-button-base), 0.4);
+        &:hover {
+          background-color: rgba(var(--color-header-button-base), 0.9) !important;
+        }
       }
     }
 
@@ -114,24 +114,20 @@
     }
     .channel__list-item {
       &:hover {
-        background-color: var(--color-primary);
+        background-color: var(--color-feature-background);
         color: var(--color-primary-contrast);
       }
     }
 
+    .button-toggle--active {
+      background-color: var(--color-feature-background);
+    }
+
     label {
       color: var(--color-text);
       font-size: var(--font-medium);
     }
 
-    [data-reach-menu-button] {
-      &:hover {
-        .channel__list-item--selected {
-          background-color: var(--color-primary) !important;
-        }
-      }
-    }
-
     @media (max-width: $breakpoint-small) {
       .card__main-actions {
         border-top: unset !important;

ui/scss/component/_textarea-suggestions.scss

@@ -133,6 +133,10 @@
   box-shadow: var(--card-box-shadow);
   color: var(--color-text) !important;
 
+  .textareaSuggestions__topSeparator {
+    margin-top: var(--spacing-m);
+    margin-bottom: var(--spacing-m);
+  }
   .textarea-suggestions__group {
     &:last-child hr {
       display: none;
@@ -275,13 +279,6 @@
       background-color: var(--color-header-button);
     }
   }
-
-  .button-toggle {
-    background-color: rgba(var(--color-header-button-base), 0.4) !important;
-    &:hover {
-      background-color: rgba(var(--color-header-button-base), 0.9) !important;
-    }
-  }
   .button-toggle--active {
     background-color: rgba(var(--color-header-button-base), 0.9) !important;
   }

ui/scss/component/menu-button.scss

@@ -8,18 +8,15 @@ reach-portal {
   [data-reach-menu] {
     [data-reach-menu-items] {
       &:focus-visible {
-        //background-color: var(--color-header-background);
         background-color: var(--color-header-background);
       }
 
       [data-reach-menu-item][data-selected] {
         .menu__link {
-          //color: var(--color-primary-contrast);
-          color: var(--color-alt-contrast);
+          color: var(--color-primary-contrast);
         }
         .icon {
-          //stroke: var(--color-primary-contrast);
-          stroke: var(--color-alt-contrast);
+          stroke: var(--color-primary-contrast);
         }
       }
     }
@@ -72,7 +69,6 @@ reach-portal {
 
 [data-reach-menu-item][data-selected] {
   background-color: var(--color-menu-background--active);
-  color: var(--color-primary-contrast) !important;
   box-shadow: none;
 
   .icon {
@@ -125,25 +121,15 @@ reach-portal {
   @extend .menu__list;
 
   [data-reach-menu-item][data-selected] {
-    .menu__link {
-      color: var(--color-brand-contrast) !important;
-    }
-    .icon {
-      stroke: var(--color-primary-contrast);
-    }
-  }
-
-  [data-reach-menu-item][data-selected] {
-    color: var(--color-brand-contrast) !important;
-    background-color: var(--color-brand) !important;
+    background-color: var(--color-menu-background--active);
     box-shadow: none;
 
     .icon {
-      stroke: var(--color-brand-contrast) !important;
+      stroke: var(--color-brand-contrast);
     }
 
     .comment__menu-help {
-      color: var(--color-brand-contrast) !important;
+      color: var(--color-brand-contrast);
     }
   }
 

ui/scss/init/_gui.scss

@@ -896,6 +896,9 @@ img {
       }
     }
   }
+  &.card {
+    padding: 0;
+  }
 }
 
 .scheduledLivestream-wrapper {

ui/scss/themes/dark.scss

@@ -22,6 +22,7 @@
   --color-card-background: var(--color-gray-9);
   --color-card-background2: var(--color-header-background);
   --color-card-background-highlighted: var(--color-gray-8);
+  --color-feature-background: var(--color-header-background);
 
   // Text
   --color-text-base: 255, 255, 255;

ui/scss/themes/light.scss

@@ -13,7 +13,7 @@
   --color-brand: var(--color-primary-static);
   --color-brand-bright: rgb(56, 217, 169);
   --color-accent: var(--color-brand-blue);
-  --color-secondary: rgb(219, 234, 254);
+  --color-secondary: var(--color-brand-blue);
   --color-secondary-alt: rgb(191, 219, 254);
   --color-secondary-alt-2: rgb(30, 64, 175);
   --color-secondary-static: var(--color-secondary);
@@ -24,7 +24,7 @@
   --color-border: #ededed;
   --color-background: #fafafa;
   --color-background-overlay: #21252980;
-  --color-card-background: #ffffff;
+  --color-card-background: var(--color-gray-1);
   --color-card-background-highlighted: #fff5f5;
 
   //Text
@@ -43,14 +43,16 @@
   --color-tooltip-text: #fafafa;
 
   // Header
-  --color-header-button: var(--color-button-alt-bg);
+  --color-header-button: var(--color-white); //var(--color-button-alt-bg);
   --color-header-button-text: var(--color-black);
   --color-header-background: #ffffff;
+  --color-feature-background: #ffffff;
 
   // Button
-  --color-button-alt-bg: var(--color-gray-1);
-  --color-button-alt-bg-hover: var(--color-gray-2);
-  --color-button-alt-text: black;
+  --color-button-alt-bg: var(--color-feature-background);
+  --color-button-alt-bg-hover: var(--color-gray-1);
+  --color-button-alt-text: var(--color-text);
+  --color-button-alt-text-hover: var(--color-text);
   // pri
   --color-button-primary-bg: var(--color-primary);
   --color-button-primary-bg-hover: var(--color-accent);
@@ -60,22 +62,22 @@
   --color-button-secondary-bg: var(--color-gray-1);
   --color-button-secondary-border: var(--color-secondary-alt-3);
   --color-button-secondary-text: var(--color-gray-6);
-  --color-button-secondary-bg-hover: var(--color-card-background);
+  --color-button-secondary-bg-hover: var(--color-feature-background);
   --color-button-secondary-text-hover: var(--color-primary);
   // toggle
   --color-button-toggle-text: var(--color-gray-6);
   --color-button-toggle-bg: var(--color-gray-1);
-  --color-button-toggle-bg-hover: var(--color-card-background);
+  --color-button-toggle-bg-hover: var(--color-feature-background);
   --color-button-border: var(--color-gray-3);
-  --color-button-toggle-text-hover: var(--color-primary);
-  --color-button-toggle-bg-active: var(--color-card-background);
-  --color-button-toggle-text-active: var(--color-gray-6);
-  --color-toggle-custom: var(--color-secondary);
+  --color-button-toggle-text-hover: var(--color-text);
+  --color-button-toggle-bg-active: var(--color-header-background);
+  --color-button-toggle-text-active: var(--color-text);
+  --color-toggle-custom: var(--color-brand-blue);
   // link / util
   --color-link-active: var(--color-primary);
   --color-link-focus-bg: #f1f1f1;
   --color-link: var(--color-primary-alt-2);
-  --color-button-alt-text-hover: var(--color-text);
+
   --color-link-hover: var(--color-primary);
 
   // Input
@@ -143,10 +145,10 @@
   --color-spinner-light: #ffffff;
   --color-spinner-dark: #212529;
   --color-placeholder-background: #f0f0f0;
-  --color-file-viewer-background: var(--color-card-background);
-  --color-tabs-background: var(--color-card-background);
+  --color-file-viewer-background: var(--color-feature-background);
+  --color-tabs-background: var(--color-feature-background);
   --color-tab-divider: var(--color-primary);
-  --color-modal-background: var(--color-card-background);
+  --color-modal-background: var(--color-gray-1);
 
   // Icons
   --color-follow-bg: #ffd4da;