fixes

ui/component/claimSupportButton/view.jsx

@@ -23,7 +23,7 @@ export default function ClaimSupportButton(props: Props) {
 
   return (
     <Button
-      button={fileAction ? undefined : 'alt'}
+      button={fileAction ? undefined : 'secondary'}
       className={classnames({ 'button--file-action': fileAction })}
       icon={ICONS.LBC}
       iconSize={fileAction ? 22 : undefined}

ui/component/shareButton/view.jsx

@@ -14,7 +14,7 @@ export default function ShareButton(props: Props) {
 
   return (
     <Button
-      button="alt"
+      button="secondary"
       icon={ICONS.SHARE}
       label={__('Share')}
       title={__('Share this channel')}

ui/component/sideNavigation/view.jsx

@@ -109,29 +109,6 @@ function SideNavigation(props: Props) {
     icon: ICONS.STACK,
   };
 
-  const UNAUTH_LINKS: Array<SideNavLink> = [
-    {
-      title: 'Log In',
-      link: `/$/${PAGES.AUTH_SIGNIN}`,
-      icon: ICONS.SIGN_IN,
-    },
-    {
-      title: 'Sign Up',
-      link: `/$/${PAGES.AUTH}`,
-      icon: ICONS.SIGN_UP,
-    },
-    {
-      title: 'Settings',
-      link: `/$/${PAGES.SETTINGS}`,
-      icon: ICONS.SETTINGS,
-    },
-    {
-      title: 'Help',
-      link: `/$/${PAGES.HELP}`,
-      icon: ICONS.HELP,
-    },
-  ];
-
   const MOBILE_LINKS: Array<SideNavLink> = [
     {
       title: 'Upload',
@@ -450,7 +427,6 @@ function SideNavigation(props: Props) {
             </ul>
             <ul className="navigation-links--absolute mobile-only">
               {email && MOBILE_LINKS.map((linkProps) => getLink(linkProps))}
-              {!email && UNAUTH_LINKS.map((linkProps) => getLink(linkProps))}
             </ul>
 
             {getSubscriptionSection()}

ui/scss/component/_channel.scss

@@ -580,7 +580,6 @@ $actions-z-index: 2;
 }
 
 .channel-staked__wrapper {
-  z-index: 5;
   z-index: 10;
   display: flex;
   position: absolute;
@@ -595,9 +594,7 @@ $actions-z-index: 2;
   //  height: 100%;
   //}
   padding: 0.2rem;
-  bottom: -0.75rem;
   bottom: -0.5rem;
-  right: -0.8rem;
   right: -0.5rem;
   //background-color: white;
   background-color: var(--color-card-background);

ui/scss/component/_claim-list.scss

@@ -144,7 +144,7 @@
       width: 225px;
       padding-top: 4px;
       padding-right: 8px;
-      background-color: rgba(var(--color-primary-dynamic), 0.9);
+      background-color: var(--color-brand-blue);
       color: var(--color-primary-contrast);
       text-align: center;
       z-index: 1;
@@ -1146,7 +1146,7 @@
       width: 225px;
       padding-top: 4px;
       padding-right: 8px;
-      background-color: rgba(var(--color-primary-dynamic), 0.9);
+      background-color: var(--color-brand-blue);
       color: var(--color-primary-contrast);
       text-align: center;
       z-index: 1;

ui/scss/component/_comments.scss

@@ -75,7 +75,6 @@ $thumbnailWidthSmall: 1rem;
 
     .channel-staked__wrapper {
       padding: 0;
-      left: calc(#{$thumbnailWidthSmall} / 4);
       bottom: -1rem;
       padding: -1rem;
       margin-left: 0;

ui/scss/component/_header.scss

@@ -36,11 +36,11 @@
   .header__menu--right {
     .header__navigationItem--balance {
       .button__label {
-        margin-left: var(--spacing-xxs) !important;
+        margin-left: var(--spacing-xxs);
       }
       &:hover {
         .button__label {
-          color: var(--color-primary) !important;
+          color: var(--color-primary);
         }
         .icon {
           stroke: var(--color-primary);
@@ -165,7 +165,6 @@
     color: var(--color-text);
 
     &:hover {
-      background-color: var(--color-brand);
       color: var(--color-brand-contrast);
     }
   }

ui/scss/component/_main.scss

@@ -397,7 +397,7 @@ body {
       .button--file-action {
         &:hover {
           .icon {
-            stroke: white !important;
+            stroke: white;
           }
         }
       }

ui/scss/component/_status-bar.scss

@@ -1,8 +1,5 @@
 .status-bar {
-  background-color: #505050;
+  background-color: var(--color-card-background);
-  border: solid 1px #707070;
-  border-bottom-color: #505050;
-  border-left-color: #505050;
   color: #e0e0e0;
   position: fixed;
   left: 0;
@@ -15,6 +12,7 @@
   opacity: 0;
   transition: opacity 0.3s ease;
   transition-delay: 400ms;
+  z-index: 10;
 
   &.visible {
     opacity: 1;