Add lullaby and change update styles

src/components/app/about-tab/index.jsx

@@ -80,13 +80,12 @@ const AboutTabComponent = ({ version, isUpdateAvailable, isOnline }) => {
             Patreon
           </a>
           <a
-            href="https://paypal.me/alexbainter"
+            href="https://alexbainter.com/tip"
             target="_blank"
             rel="noreferrer noopener"
           >
-            PayPal
+            PayPal, Bandcamp, Crypto, etc
           </a>
-          <span>BTC: 3DMb8BQVTtfVv59pMLmZmHr6xSoJsb3P4Z</span>
         </span>
       </p>
       <p>{`v${version}`}</p>

src/components/app/app.scss

@@ -8,6 +8,8 @@
 
   a {
     color: $secondaryColor;
+    text-decoration: none;
+    border-bottom: 1px solid $secondaryColor;
   }
 
   &__content {
@@ -22,6 +24,7 @@
     position: fixed;
     bottom: 0;
     left: 0;
+    box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.25);
   }
 
   .centered-tab {

src/components/app/controls/control-button/control-button.scss

@@ -11,6 +11,10 @@
   cursor: pointer;
   margin: 0.25rem;
   color: $primaryColor;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 200ms;
 
   @include hoverStyle(#{&}) {
     &:hover {
@@ -37,6 +41,8 @@
   &--is-primary {
     border: 1px solid $primaryColor;
     border-radius: 50%;
+    display: flex;
+    transition: border-color 200ms;
 
     @include hoverStyle(#{&}) {
       &:hover {
@@ -82,19 +88,16 @@
     left: 50%;
     transform: translate(-50%, -50%);
     margin-bottom: 0.8rem;
+    transition: background-color 200ms;
   }
 
   & > .svg-inline--fa {
-    position: absolute;
-    top: 50%;
-    left: 50%;
     font-size: 1.5em;
-    transform: translate(-50%, -50%);
   }
 
   // Optically center the "play" icon
   & > .fa-play {
-    transform: translate(-37%, -50%);
+    transform: translateX(14%);
   }
 }
 

src/components/app/controls/controls.scss

@@ -4,10 +4,9 @@
 $sideControlWidth: 33%;
 
 .controls {
-  background: $backgroundColor;
+  background: #1e1e1e;
   height: $controlsHeight;
   width: 100%;
-  border-top: 1px solid $secondaryColor;
   display: flex;
   justify-content: space-between;
   align-items: center;

src/components/app/controls/main-controls/timer-config/timer-config.scss

@@ -2,11 +2,12 @@
 @import '_mixins';
 
 .timer-box {
-  border: 1px solid $secondaryColor;
-  background-color: $backgroundColor;
+  background-color: #252525;
   color: $primaryColor;
   padding: 1em;
   text-align: center;
+  border-radius: 6px;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
 
   &__title {
     margin-top: 0;
@@ -20,17 +21,18 @@
   }
 
   &__btn {
+    transition: background-color 200ms;
     &:hover {
-      background: $primaryHoverColor;
+      background-color: $primaryHoverColor;
     }
 
     &:active {
-      background: $primaryActiveColor;
+      background-color: $primaryActiveColor;
     }
 
     &:disabled {
       &:hover {
-        background: $primaryActiveColor;
+        background-color: $primaryActiveColor;
       }
     }
   }
@@ -55,6 +57,7 @@
         cursor: pointer;
         font-size: 1em;
         color: $primaryColor;
+        transition: background-color 200ms;
 
         // no need for @include hoverStyle since clicking
         // will hide these

src/components/app/index.jsx

@@ -49,9 +49,7 @@ const AppComponent = () => {
       <div className={classNames('app', { 'has-hover': isHoverEnabled })}>
         <div className="app__content">
           <div>
-            <nav>
-              <TitleNavContainer />
-            </nav>
+            <TitleNavContainer />
             <main>
               <Switch>
                 <Route exact path="/" component={PiecesTabContainer} />

src/components/app/pieces-tab/piece/piece.scss

@@ -34,7 +34,7 @@ $pieceWidth: 12em;
   overflow: hidden;
   width: $pieceWidth;
   margin: 0 1em 2.5em;
-  transition: box-shadow 150ms;
+  transition: filter 200ms;
 
   &--is-disabled {
     .piece__image {
@@ -46,18 +46,20 @@ $pieceWidth: 12em;
     width: $pieceWidth;
     height: $pieceWidth;
     position: relative;
-    background-color: #eee;
     cursor: pointer;
     transition: filter 150ms;
+    border-radius: 6px;
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
 
     @include hoverStyle(#{&}) {
       &:hover {
-        filter: invert(0.25);
+        filter: brightness(33%);
       }
     }
 
     & > img {
       max-width: 100%;
+      border-radius: 6px;
     }
 
     &__is-playing-indicator {

src/components/app/title-nav/index.jsx

@@ -49,6 +49,7 @@ const TitleNavComponent = ({
   dismissNotification,
   promptInstallation,
 }) => {
+  notifications.push({ link: 'hi', message: 'beep boop beep boop' });
   let notification;
   if (notifications.length > 0) {
     //eslint-disable-next-line prefer-destructuring
@@ -56,7 +57,7 @@ const TitleNavComponent = ({
   }
 
   return (
-    <div className="title-nav">
+    <nav className="title-nav">
       <div className="title-nav__header">
         <div className="title-nav__header__info">
           <h1 className="title-nav__header__info__title title-nav__header__info__title--primary">
@@ -136,7 +137,7 @@ const TitleNavComponent = ({
           />
         </div>
       )}
-    </div>
+    </nav>
   );
 };
 

src/components/app/title-nav/title-nav.scss

@@ -2,12 +2,13 @@
 @import '_mixins.scss';
 
 .title-nav {
-  background-color: $backgroundColor;
+  background-color: #1e1e1e;
   color: $primaryColor;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+  position: relative;
 
   &__header {
     padding: 0 1em;
-    border-bottom: 1px solid $secondaryColor;
     overflow-y: auto;
 
     &__info {
@@ -36,18 +37,6 @@
       &__install-btn {
         float: right;
       }
-
-      .secret-link {
-        @include hoverStyle(#{&}) {
-          & {
-            text-decoration: none;
-
-            &:hover {
-              text-decoration: underline;
-            }
-          }
-        }
-      }
     }
 
     &__tab-list {
@@ -66,12 +55,12 @@
 
         a#{&}__link {
           border: none;
-          background: $backgroundColor;
           cursor: pointer;
           padding: 0;
           text-decoration: none;
           font-size: 1.1em;
           color: $primaryColor;
+          transition: color 200ms;
 
           @include hoverStyle(#{&}) {
             &:hover {
@@ -131,18 +120,30 @@
   }
 
   &__notification {
-    border-bottom: 1px solid $secondaryColor;
+    background-color: $highlightColor;
     padding: 0.25em;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
 
-    &__msg {
+    a#{&}__msg {
       margin: auto;
+      color: $backgroundColor;
+      border-color: $backgroundColor;
     }
 
     &__close {
       margin-right: 0.25em;
+      color: $backgroundColor;
+
+      &:hover {
+        color: lighten($backgroundColor, 15%) !important;
+      }
+
+      &:active {
+        color: lighten($backgroundColor, 30%) !important;
+      }
     }
   }
 }

src/components/shared/icon-button/icon-button.scss

@@ -7,6 +7,7 @@
   color: $primaryColor;
   border: none;
   cursor: pointer;
+  transition: color 200ms;
 
   &:focus {
     outline: none;

src/components/shared/more-button/more-button.scss

@@ -2,23 +2,26 @@
 
 .more-btn {
   &__menu {
-    border: 1px solid $secondaryColor;
+    background: #252525;
+    border-radius: 3px;
+    overflow: hidden;
 
     &__btn {
       padding: 0.5em;
-      background-color: $backgroundColor;
+      background-color: transparent;
       color: $primaryColor;
-      border: none;
       font-size: 0.9em;
       cursor: pointer;
+      border: none;
+      transition: background-color 200ms;
 
       // don't need @include hoverStyle since the menu will close on click
       &:hover {
-        background-color: hsl(0, 0%, 20%);
+        background-color: lighten(#252525, 15%);
       }
 
       &:active {
-        background-color: hsl(0, 0%, 30%);
+        background-color: lighten(#252525, 30%);
       }
 
       &:focus {

src/styles/_colors.scss

@@ -1,4 +1,4 @@
-$backgroundColor: hsl(0, 0%, 10%);
+$backgroundColor: #121212;
 
 $primaryColor: white;
 $primaryHoverColor: #999;
@@ -8,7 +8,6 @@ $secondaryColor: #aaa;
 $secondaryHoverColor: #888;
 $secondaryActiveColor: #767676;
 
-$highlightColor: #9055a2;
-$highlightHoverColor: #734481;
-$highlightActiveColor: #563361;
-$highlightInteractColor: #bb6ed3;
+$highlightColor: #ffd700;
+$highlightHoverColor: darken(#ffd700, 15%);
+$highlightActiveColor: darken(#ffd700, 30%);