From f06ca142f685ae4c042938af70d3eaf38bde55bb Mon Sep 17 00:00:00 2001
From: OxygenCobalt <oxycblt@abstractr.net>
Date: Sat, 21 Aug 2021 12:09:17 -0600
Subject: [PATCH] style: fix accessibility issues

Fix a plethora of style issues that lead to a worse touch experience.
I tried to optimize these solutions so that they didn't reduce the layout
density too much. More updates may have to be made in the future.
---
 .../main/java/org/oxycblt/auxio/AuxioUtils.kt |  7 ---
 .../java/org/oxycblt/auxio/MainFragment.kt    |  2 -
 .../auxio/excluded/ExcludedDatabase.kt        |  2 +-
 .../auxio/playback/CompactPlaybackFragment.kt | 10 +---
 .../oxycblt/auxio/playback/PlayPauseButton.kt | 47 -------------------
 .../auxio/playback/PlaybackFragment.kt        | 24 +---------
 .../auxio/playback/PlaybackViewModel.kt       | 18 -------
 .../java/org/oxycblt/auxio/widgets/Forms.kt   | 13 ++---
 .../main/res/color/color_accent_active.xml    |  6 +++
 app/src/main/res/drawable/ic_loop_one.xml     |  2 +-
 .../main/res/drawable/ic_loop_one_tinted.xml  | 11 -----
 ...loop_all_tinted.xml => ic_loop_tinted.xml} |  0
 .../main/res/drawable/ic_playing_state.xml    |  6 +++
 .../res/drawable/ui_background_ripple.xml     | 10 ++--
 .../main/res/drawable/ui_circle_ripple.xml    |  3 +-
 .../layout-land/fragment_compact_playback.xml |  7 ++-
 .../res/layout-land/fragment_playback.xml     |  4 +-
 .../layout-xlarge-land/fragment_playback.xml  |  4 +-
 .../res/layout-xlarge/fragment_playback.xml   |  4 +-
 .../res/layout/fragment_compact_playback.xml  |  6 +--
 app/src/main/res/layout/fragment_playback.xml |  6 ++-
 app/src/main/res/layout/item_accent.xml       |  2 +-
 .../main/res/layout/item_action_header.xml    |  2 +-
 app/src/main/res/layout/item_album.xml        |  4 +-
 app/src/main/res/layout/item_album_song.xml   |  4 +-
 app/src/main/res/layout/item_artist.xml       |  4 +-
 app/src/main/res/layout/item_artist_album.xml |  4 +-
 app/src/main/res/layout/item_artist_song.xml  |  6 +--
 app/src/main/res/layout/item_excluded_dir.xml |  6 +--
 app/src/main/res/layout/item_genre.xml        |  4 +-
 app/src/main/res/layout/item_genre_song.xml   |  6 +--
 app/src/main/res/layout/item_queue_song.xml   | 22 ++++-----
 app/src/main/res/layout/item_song.xml         |  4 +-
 app/src/main/res/layout/widget_full.xml       |  2 +-
 app/src/main/res/values-night/colors.xml      |  3 +-
 app/src/main/res/values/colors.xml            |  1 +
 app/src/main/res/values/dimens.xml            | 21 ++++-----
 app/src/main/res/values/strings.xml           |  2 +
 app/src/main/res/values/styles_component.xml  | 12 ++---
 app/src/main/res/values/styles_core.xml       |  2 +
 app/src/main/res/values/styles_ui.xml         | 18 +++----
 41 files changed, 113 insertions(+), 208 deletions(-)
 delete mode 100644 app/src/main/java/org/oxycblt/auxio/playback/PlayPauseButton.kt
 create mode 100644 app/src/main/res/color/color_accent_active.xml
 delete mode 100644 app/src/main/res/drawable/ic_loop_one_tinted.xml
 rename app/src/main/res/drawable/{ic_loop_all_tinted.xml => ic_loop_tinted.xml} (100%)
 create mode 100644 app/src/main/res/drawable/ic_playing_state.xml

diff --git a/app/src/main/java/org/oxycblt/auxio/AuxioUtils.kt b/app/src/main/java/org/oxycblt/auxio/AuxioUtils.kt
index 2bc079132..1bf82d042 100644
--- a/app/src/main/java/org/oxycblt/auxio/AuxioUtils.kt
+++ b/app/src/main/java/org/oxycblt/auxio/AuxioUtils.kt
@@ -185,13 +185,6 @@ fun @receiver:ColorRes Int.resolveStateList(context: Context) =
 fun @receiver:DrawableRes Int.resolveDrawable(context: Context) =
     requireNotNull(ContextCompat.getDrawable(context, this))
 
-/**
- * Resolve a drawable resource into an [AnimatedVectorDrawable]
- * @see resolveDrawable
- */
-fun @receiver:DrawableRes Int.resolveAnimDrawable(context: Context) =
-    resolveDrawable(context) as AnimatedVectorDrawable
-
 /**
  * Resolve this int into a color as if it was an attribute
  */
diff --git a/app/src/main/java/org/oxycblt/auxio/MainFragment.kt b/app/src/main/java/org/oxycblt/auxio/MainFragment.kt
index ccf032694..1de60aba4 100644
--- a/app/src/main/java/org/oxycblt/auxio/MainFragment.kt
+++ b/app/src/main/java/org/oxycblt/auxio/MainFragment.kt
@@ -161,8 +161,6 @@ class MainFragment : Fragment() {
             } else {
                 View.GONE
             }
-
-            playbackModel.disableAnimation()
         } else {
             binding.compactPlayback.visibility = View.VISIBLE
         }
diff --git a/app/src/main/java/org/oxycblt/auxio/excluded/ExcludedDatabase.kt b/app/src/main/java/org/oxycblt/auxio/excluded/ExcludedDatabase.kt
index 0d15ce5e1..b1478b022 100644
--- a/app/src/main/java/org/oxycblt/auxio/excluded/ExcludedDatabase.kt
+++ b/app/src/main/java/org/oxycblt/auxio/excluded/ExcludedDatabase.kt
@@ -97,7 +97,7 @@ class ExcludedDatabase(context: Context) : SQLiteOpenHelper(context, DB_NAME, nu
         private var INSTANCE: ExcludedDatabase? = null
 
         /**
-         * Get/Instantiate the single instance of [PlaybackStateDatabase].
+         * Get/Instantiate the single instance of [ExcludedDatabase].
          */
         fun getInstance(context: Context): ExcludedDatabase {
             val currentInstance = INSTANCE
diff --git a/app/src/main/java/org/oxycblt/auxio/playback/CompactPlaybackFragment.kt b/app/src/main/java/org/oxycblt/auxio/playback/CompactPlaybackFragment.kt
index acdc2b086..dd15199c5 100644
--- a/app/src/main/java/org/oxycblt/auxio/playback/CompactPlaybackFragment.kt
+++ b/app/src/main/java/org/oxycblt/auxio/playback/CompactPlaybackFragment.kt
@@ -79,19 +79,11 @@ class CompactPlaybackFragment : Fragment() {
         }
 
         playbackModel.isPlaying.observe(viewLifecycleOwner) { isPlaying ->
-            binding.playbackPlayPause.setPlaying(isPlaying, playbackModel.canAnimate)
-
-            playbackModel.enableAnimation()
+            binding.playbackPlayPause.isActivated = isPlaying
         }
 
         logD("Fragment Created")
 
         return binding.root
     }
-
-    override fun onStart() {
-        super.onStart()
-
-        playbackModel.disableAnimation()
-    }
 }
diff --git a/app/src/main/java/org/oxycblt/auxio/playback/PlayPauseButton.kt b/app/src/main/java/org/oxycblt/auxio/playback/PlayPauseButton.kt
deleted file mode 100644
index 3dd1eb994..000000000
--- a/app/src/main/java/org/oxycblt/auxio/playback/PlayPauseButton.kt
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * Copyright (c) 2021 Auxio Project
- * PlayPauseButton.kt is part of Auxio.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-package org.oxycblt.auxio.playback
-
-import android.content.Context
-import android.util.AttributeSet
-import androidx.appcompat.widget.AppCompatImageButton
-import org.oxycblt.auxio.R
-
-/**
- * Custom [AppCompatImageButton] that handles the animated play/pause icons.
- * @author OxygenCobalt
- * TODO: Replace this with a material icon that does the path manipulation manually.
- */
-class PlayPauseButton @JvmOverloads constructor(
-    context: Context,
-    attrs: AttributeSet? = null,
-    defStyleAttr: Int = -1
-) : AppCompatImageButton(context, attrs, defStyleAttr) {
-    /**
-     * Update the play/pause icon to reflect [isPlaying]
-     * @param animate Whether the icon change should be animated or not.
-     */
-    fun setPlaying(isPlaying: Boolean, animate: Boolean) {
-        if (isPlaying) {
-            setImageResource(R.drawable.ic_pause)
-        } else {
-            setImageResource(R.drawable.ic_play)
-        }
-    }
-}
diff --git a/app/src/main/java/org/oxycblt/auxio/playback/PlaybackFragment.kt b/app/src/main/java/org/oxycblt/auxio/playback/PlaybackFragment.kt
index 58838df52..f979fb285 100644
--- a/app/src/main/java/org/oxycblt/auxio/playback/PlaybackFragment.kt
+++ b/app/src/main/java/org/oxycblt/auxio/playback/PlaybackFragment.kt
@@ -107,11 +107,7 @@ class PlaybackFragment : Fragment(), SeekBar.OnSeekBarChangeListener {
         }
 
         playbackModel.isShuffling.observe(viewLifecycleOwner) { isShuffling ->
-            binding.playbackShuffle.imageTintList = if (isShuffling) {
-                accentColor
-            } else {
-                controlColor
-            }
+            binding.playbackShuffle.isActivated = isShuffling
         }
 
         playbackModel.loopMode.observe(viewLifecycleOwner) { loopMode ->
@@ -174,17 +170,7 @@ class PlaybackFragment : Fragment(), SeekBar.OnSeekBarChangeListener {
         }
 
         playbackModel.isPlaying.observe(viewLifecycleOwner) { isPlaying ->
-            binding.playbackPlayPause.apply {
-                if (isPlaying) {
-                    backgroundTintList = accentColor
-                    setPlaying(true, playbackModel.canAnimate)
-                } else {
-                    backgroundTintList = controlColor
-                    setPlaying(false, playbackModel.canAnimate)
-                }
-            }
-
-            playbackModel.enableAnimation()
+            binding.playbackPlayPause.isActivated = isPlaying
         }
 
         detailModel.navToItem.observe(viewLifecycleOwner) { item ->
@@ -198,12 +184,6 @@ class PlaybackFragment : Fragment(), SeekBar.OnSeekBarChangeListener {
         return binding.root
     }
 
-    override fun onStart() {
-        super.onStart()
-
-        playbackModel.disableAnimation()
-    }
-
     // --- SEEK CALLBACKS ---
 
     override fun onProgressChanged(seekBar: SeekBar, progress: Int, fromUser: Boolean) {
diff --git a/app/src/main/java/org/oxycblt/auxio/playback/PlaybackViewModel.kt b/app/src/main/java/org/oxycblt/auxio/playback/PlaybackViewModel.kt
index bf1e2ef57..8fcf0834d 100644
--- a/app/src/main/java/org/oxycblt/auxio/playback/PlaybackViewModel.kt
+++ b/app/src/main/java/org/oxycblt/auxio/playback/PlaybackViewModel.kt
@@ -70,7 +70,6 @@ class PlaybackViewModel : ViewModel(), PlaybackStateManager.Callback {
     // Other
     private val mIsSeeking = MutableLiveData(false)
     private var mIntentUri: Uri? = null
-    private var mCanAnimate = false
 
     /** The current song. */
     val song: LiveData<Song?> get() = mSong
@@ -94,7 +93,6 @@ class PlaybackViewModel : ViewModel(), PlaybackStateManager.Callback {
     val loopMode: LiveData<LoopMode> get() = mLoopMode
 
     val isSeeking: LiveData<Boolean> get() = mIsSeeking
-    val canAnimate: Boolean get() = mCanAnimate
 
     /** The position as a duration string. */
     val formattedPosition = Transformations.map(mPosition) {
@@ -351,8 +349,6 @@ class PlaybackViewModel : ViewModel(), PlaybackStateManager.Callback {
      * Flip the playing status, e.g from playing to paused
      */
     fun invertPlayingStatus() {
-        enableAnimation()
-
         playbackManager.setPlaying(!playbackManager.isPlaying)
     }
 
@@ -435,20 +431,6 @@ class PlaybackViewModel : ViewModel(), PlaybackStateManager.Callback {
         mIsSeeking.value = isSeeking
     }
 
-    /**
-     * Enable animation on the play/pause button, usually done after the first LiveData fire
-     */
-    fun enableAnimation() {
-        mCanAnimate = true
-    }
-
-    /**
-     * Disable animation on play/pause button, usually done after when a UI is created
-     */
-    fun disableAnimation() {
-        mCanAnimate = false
-    }
-
     // --- OVERRIDES ---
 
     override fun onCleared() {
diff --git a/app/src/main/java/org/oxycblt/auxio/widgets/Forms.kt b/app/src/main/java/org/oxycblt/auxio/widgets/Forms.kt
index 93c6093ae..5e47eaa43 100644
--- a/app/src/main/java/org/oxycblt/auxio/widgets/Forms.kt
+++ b/app/src/main/java/org/oxycblt/auxio/widgets/Forms.kt
@@ -19,6 +19,7 @@
 package org.oxycblt.auxio.widgets
 
 import android.content.Context
+import android.util.Log
 import android.widget.RemoteViews
 import androidx.annotation.LayoutRes
 import org.oxycblt.auxio.R
@@ -118,20 +119,20 @@ fun createFullWidget(context: Context, state: WidgetState): RemoteViews {
         )
     )
 
-    // The main way the large widget differs from the other widgets is the addition of extra
-    // controls. However, since we can't retrieve the context of our views here, we cant
-    // dynamically set the image view attributes. More duplicate resources it is. This is
-    // getting really tiring.
+    // While it is technically possible to use the setColorFilter to tint these buttons, its
+    // actually less efficent than using duplicate drawables.
+    // And no, we can't control state drawables with RemoteViews. Because of course we can't.
 
     val shuffleRes = when {
         state.isShuffled -> R.drawable.ic_shuffle_tinted
         else -> R.drawable.ic_shuffle
     }
 
+
     val loopRes = when (state.loopMode) {
         LoopMode.NONE -> R.drawable.ic_loop
-        LoopMode.ALL -> R.drawable.ic_loop_all_tinted
-        LoopMode.TRACK -> R.drawable.ic_loop_one_tinted
+        LoopMode.ALL -> R.drawable.ic_loop_tinted
+        LoopMode.TRACK -> R.drawable.ic_loop_one
     }
 
     views.setImageViewResource(R.id.widget_shuffle, shuffleRes)
diff --git a/app/src/main/res/color/color_accent_active.xml b/app/src/main/res/color/color_accent_active.xml
new file mode 100644
index 000000000..9b80db312
--- /dev/null
+++ b/app/src/main/res/color/color_accent_active.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:color="?attr/colorAccent"
+        android:state_activated="true" />
+    <item android:color="?attr/colorControlNormal" />
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/ic_loop_one.xml b/app/src/main/res/drawable/ic_loop_one.xml
index cdcdfc760..349dd776a 100644
--- a/app/src/main/res/drawable/ic_loop_one.xml
+++ b/app/src/main/res/drawable/ic_loop_one.xml
@@ -2,7 +2,7 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="24dp"
     android:height="24dp"
-    android:tint="?attr/colorControlNormal"
+    android:tint="?attr/colorAccent"
     android:viewportWidth="24"
     android:viewportHeight="24">
     <path
diff --git a/app/src/main/res/drawable/ic_loop_one_tinted.xml b/app/src/main/res/drawable/ic_loop_one_tinted.xml
deleted file mode 100644
index 349dd776a..000000000
--- a/app/src/main/res/drawable/ic_loop_one_tinted.xml
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:tint="?attr/colorAccent"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
-    <path
-        android:fillColor="@android:color/white"
-        android:pathData="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4zm-4-2V9h-1l-2 1v1h1.5v4H13z" />
-</vector>
diff --git a/app/src/main/res/drawable/ic_loop_all_tinted.xml b/app/src/main/res/drawable/ic_loop_tinted.xml
similarity index 100%
rename from app/src/main/res/drawable/ic_loop_all_tinted.xml
rename to app/src/main/res/drawable/ic_loop_tinted.xml
diff --git a/app/src/main/res/drawable/ic_playing_state.xml b/app/src/main/res/drawable/ic_playing_state.xml
new file mode 100644
index 000000000..b03eab616
--- /dev/null
+++ b/app/src/main/res/drawable/ic_playing_state.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/ic_pause"
+        android:state_activated="true" />
+    <item android:drawable="@drawable/ic_play" />
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/ui_background_ripple.xml b/app/src/main/res/drawable/ui_background_ripple.xml
index 1c6a4919c..de45c3c95 100644
--- a/app/src/main/res/drawable/ui_background_ripple.xml
+++ b/app/src/main/res/drawable/ui_background_ripple.xml
@@ -1,15 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-    <item>
-        <shape android:shape="rectangle">
-            <solid android:color="?attr/colorSurface" />
-        </shape>
-    </item>
     <item>
         <ripple android:color="?attr/colorControlHighlight">
             <item android:id="@android:id/mask">
-                <shape android:shape="rectangle">
-                    <solid android:color="?attr/colorControlHighlight" />
+                <shape android:shape="rectangle"
+                    android:tint="?attr/colorSurface">
+                    <solid android:color="@android:color/white" />
                 </shape>
             </item>
         </ripple>
diff --git a/app/src/main/res/drawable/ui_circle_ripple.xml b/app/src/main/res/drawable/ui_circle_ripple.xml
index bf4d9664d..8875a4317 100644
--- a/app/src/main/res/drawable/ui_circle_ripple.xml
+++ b/app/src/main/res/drawable/ui_circle_ripple.xml
@@ -2,7 +2,8 @@
 <ripple xmlns:android="http://schemas.android.com/apk/res/android"
     android:color="?attr/colorControlHighlight">
     <item>
-        <shape android:shape="oval">
+        <shape android:shape="oval"
+            android:tint="@color/color_accent_active">
             <solid android:color="@android:color/white" />
         </shape>
     </item>
diff --git a/app/src/main/res/layout-land/fragment_compact_playback.xml b/app/src/main/res/layout-land/fragment_compact_playback.xml
index 4e25f0afc..d2ef2e9d8 100644
--- a/app/src/main/res/layout-land/fragment_compact_playback.xml
+++ b/app/src/main/res/layout-land/fragment_compact_playback.xml
@@ -60,17 +60,16 @@
             app:layout_constraintTop_toBottomOf="@+id/playback_song"
             tools:text="Artist Name / Album Name" />
 
-        <org.oxycblt.auxio.playback.PlayPauseButton
+        <ImageButton
             android:id="@+id/playback_play_pause"
             style="@style/Widget.Button.Unbounded"
-            android:padding="0dp"
+            android:src="@drawable/ic_playing_state"
             android:layout_margin="@dimen/spacing_small"
             android:contentDescription="@string/desc_play_pause"
             android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
-            tools:src="@drawable/ic_pause" />
+            app:layout_constraintTop_toTopOf="parent" />
 
         <ProgressBar
             android:id="@+id/playback_progress"
diff --git a/app/src/main/res/layout-land/fragment_playback.xml b/app/src/main/res/layout-land/fragment_playback.xml
index 5f1818b46..bab4c7b70 100644
--- a/app/src/main/res/layout-land/fragment_playback.xml
+++ b/app/src/main/res/layout-land/fragment_playback.xml
@@ -156,9 +156,10 @@
             app:layout_constraintStart_toEndOf="@+id/playback_loop"
             app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
 
-        <org.oxycblt.auxio.playback.PlayPauseButton
+        <ImageButton
             android:id="@+id/playback_play_pause"
             style="@style/Widget.Component.Playback.PlayPause"
+            android:contentDescription="@string/desc_play_pause"
             android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="@+id/playback_song_duration"
@@ -184,6 +185,7 @@
             android:contentDescription="@string/desc_shuffle"
             android:onClick="@{() -> playbackModel.invertShuffleStatus()}"
             android:src="@drawable/ic_shuffle"
+            app:tint="@color/color_accent_active"
             app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next"
             app:layout_constraintEnd_toEndOf="@+id/playback_song_duration"
             app:layout_constraintTop_toTopOf="@+id/playback_skip_next" />
diff --git a/app/src/main/res/layout-xlarge-land/fragment_playback.xml b/app/src/main/res/layout-xlarge-land/fragment_playback.xml
index 049f9cab1..9923ab0ef 100644
--- a/app/src/main/res/layout-xlarge-land/fragment_playback.xml
+++ b/app/src/main/res/layout-xlarge-land/fragment_playback.xml
@@ -157,9 +157,10 @@
             app:layout_constraintEnd_toStartOf="@+id/playback_play_pause"
             app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
 
-        <org.oxycblt.auxio.playback.PlayPauseButton
+        <ImageButton
             android:id="@+id/playback_play_pause"
             style="@style/Widget.Component.Playback.PlayPause"
+            android:contentDescription="@string/desc_play_pause"
             android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="@+id/playback_song_container_duration"
@@ -185,6 +186,7 @@
             android:contentDescription="@string/desc_shuffle"
             android:onClick="@{() -> playbackModel.invertShuffleStatus()}"
             android:src="@drawable/ic_shuffle"
+            app:tint="@color/color_accent_active"
             app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next"
             app:layout_constraintStart_toEndOf="@+id/playback_skip_next"
             app:layout_constraintTop_toTopOf="@+id/playback_skip_next" />
diff --git a/app/src/main/res/layout-xlarge/fragment_playback.xml b/app/src/main/res/layout-xlarge/fragment_playback.xml
index 2fdf0d76f..50409b5c4 100644
--- a/app/src/main/res/layout-xlarge/fragment_playback.xml
+++ b/app/src/main/res/layout-xlarge/fragment_playback.xml
@@ -144,11 +144,12 @@
             app:layout_constraintEnd_toStartOf="@+id/playback_play_pause"
             app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
 
-        <org.oxycblt.auxio.playback.PlayPauseButton
+        <ImageButton
             android:id="@+id/playback_play_pause"
             style="@style/Widget.Component.Playback.PlayPause"
             android:layout_marginBottom="@dimen/spacing_large"
             android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
+            android:contentDescription="@string/desc_play_pause"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="@+id/playback_song_duration"
             app:layout_constraintStart_toStartOf="@+id/playback_duration_current"
@@ -172,6 +173,7 @@
             android:contentDescription="@string/desc_shuffle"
             android:onClick="@{() -> playbackModel.invertShuffleStatus()}"
             android:src="@drawable/ic_shuffle"
+            app:tint="@color/color_accent_active"
             app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next"
             app:layout_constraintStart_toEndOf="@+id/playback_skip_next"
             app:layout_constraintTop_toTopOf="@+id/playback_skip_next" />
diff --git a/app/src/main/res/layout/fragment_compact_playback.xml b/app/src/main/res/layout/fragment_compact_playback.xml
index a795c2eff..46f4c3354 100644
--- a/app/src/main/res/layout/fragment_compact_playback.xml
+++ b/app/src/main/res/layout/fragment_compact_playback.xml
@@ -68,16 +68,16 @@
             app:layout_constraintTop_toBottomOf="@+id/playback_song"
             tools:text="Artist Name / Album Name" />
 
-        <org.oxycblt.auxio.playback.PlayPauseButton
+        <ImageButton
             android:id="@+id/playback_play_pause"
             style="@style/Widget.Button.Unbounded"
             android:layout_margin="@dimen/spacing_small"
             android:contentDescription="@string/desc_play_pause"
+            android:src="@drawable/ic_playing_state"
             android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
-            tools:src="@drawable/ic_pause" />
+            app:layout_constraintTop_toTopOf="parent" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/fragment_playback.xml b/app/src/main/res/layout/fragment_playback.xml
index d76d2198e..2cb8f0d5a 100644
--- a/app/src/main/res/layout/fragment_playback.xml
+++ b/app/src/main/res/layout/fragment_playback.xml
@@ -140,15 +140,16 @@
             app:layout_constraintStart_toEndOf="@+id/playback_loop"
             app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
 
-        <org.oxycblt.auxio.playback.PlayPauseButton
+        <ImageButton
             android:id="@+id/playback_play_pause"
             style="@style/Widget.Component.Playback.PlayPause"
             android:layout_marginBottom="@dimen/spacing_medium"
+            android:contentDescription="@string/desc_play_pause"
             android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="@+id/playback_song_duration"
             app:layout_constraintStart_toStartOf="@+id/playback_duration_current"
-            tools:src="@drawable/ic_pause" />
+            tools:src="@drawable/ic_play" />
 
         <ImageButton
             android:id="@+id/playback_skip_next"
@@ -168,6 +169,7 @@
             android:contentDescription="@string/desc_shuffle"
             android:onClick="@{() -> playbackModel.invertShuffleStatus()}"
             android:src="@drawable/ic_shuffle"
+            app:tint="@color/color_accent_active"
             app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next"
             app:layout_constraintEnd_toEndOf="@+id/playback_song_duration"
             app:layout_constraintTop_toTopOf="@+id/playback_skip_next" />
diff --git a/app/src/main/res/layout/item_accent.xml b/app/src/main/res/layout/item_accent.xml
index e63fa0f71..ee375e862 100644
--- a/app/src/main/res/layout/item_accent.xml
+++ b/app/src/main/res/layout/item_accent.xml
@@ -18,7 +18,7 @@
             android:scaleType="fitCenter"
             android:src="@drawable/ic_check"
             tools:backgroundTint="?attr/colorAccent"
-            tools:ignore="contentDescription" />
+            tools:ignore="ContentDescription, SpeakableTextPresentCheck" />
 
     </FrameLayout>
 </layout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/item_action_header.xml b/app/src/main/res/layout/item_action_header.xml
index 817c1acd6..4ba795879 100644
--- a/app/src/main/res/layout/item_action_header.xml
+++ b/app/src/main/res/layout/item_action_header.xml
@@ -34,7 +34,7 @@
             android:layout_height="wrap_content"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toTopOf="@+id/header_title"
+            app:layout_constraintTop_toTopOf="parent"
             tools:ignore="ContentDescription"
             tools:src="@drawable/ic_clear" />
     </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/item_album.xml b/app/src/main/res/layout/item_album.xml
index ed2f28932..d1ff4cc86 100644
--- a/app/src/main/res/layout/item_album.xml
+++ b/app/src/main/res/layout/item_album.xml
@@ -25,7 +25,7 @@
 
         <TextView
             android:id="@+id/album_name"
-            style="@style/ItemText.Primary"
+            style="@style/Widget.TextView.Item.Primary"
             android:text="@{album.name}"
             app:layout_constraintBottom_toTopOf="@+id/album_info"
             app:layout_constraintEnd_toEndOf="parent"
@@ -36,7 +36,7 @@
 
         <TextView
             android:id="@+id/album_info"
-            style="@style/ItemText.Secondary"
+            style="@style/Widget.TextView.Item.Secondary"
             app:albumInfo="@{album}"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
diff --git a/app/src/main/res/layout/item_album_song.xml b/app/src/main/res/layout/item_album_song.xml
index 05bd61745..35c2b21e4 100644
--- a/app/src/main/res/layout/item_album_song.xml
+++ b/app/src/main/res/layout/item_album_song.xml
@@ -33,7 +33,7 @@
 
         <TextView
             android:id="@+id/song_name"
-            style="@style/ItemText.Primary"
+            style="@style/Widget.TextView.Item.Primary"
             android:text="@{song.name}"
             app:layout_constraintBottom_toTopOf="@+id/song_duration"
             app:layout_constraintEnd_toEndOf="parent"
@@ -44,7 +44,7 @@
 
         <TextView
             android:id="@+id/song_duration"
-            style="@style/ItemText.Secondary"
+            style="@style/Widget.TextView.Item.Secondary"
             android:text="@{song.formattedDuration}"
             android:textColor="?android:attr/textColorSecondary"
             app:layout_constraintBottom_toBottomOf="parent"
diff --git a/app/src/main/res/layout/item_artist.xml b/app/src/main/res/layout/item_artist.xml
index 75b493268..71f6ff08d 100644
--- a/app/src/main/res/layout/item_artist.xml
+++ b/app/src/main/res/layout/item_artist.xml
@@ -25,7 +25,7 @@
 
         <TextView
             android:id="@+id/artist_name"
-            style="@style/ItemText.Primary"
+            style="@style/Widget.TextView.Item.Primary"
             android:text="@{artist.name}"
             app:layout_constraintBottom_toTopOf="@+id/artist_details"
             app:layout_constraintEnd_toEndOf="parent"
@@ -36,7 +36,7 @@
 
         <TextView
             android:id="@+id/artist_details"
-            style="@style/ItemText.Secondary"
+            style="@style/Widget.TextView.Item.Secondary"
             app:artistCounts="@{artist}"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
diff --git a/app/src/main/res/layout/item_artist_album.xml b/app/src/main/res/layout/item_artist_album.xml
index 6b43eaa1d..ab45b600e 100644
--- a/app/src/main/res/layout/item_artist_album.xml
+++ b/app/src/main/res/layout/item_artist_album.xml
@@ -25,7 +25,7 @@
 
         <TextView
             android:id="@+id/album_name"
-            style="@style/ItemText.Primary"
+            style="@style/Widget.TextView.Item.Primary"
             android:text="@{album.name}"
             app:layout_constraintBottom_toTopOf="@+id/album_year"
             app:layout_constraintEnd_toEndOf="parent"
@@ -36,7 +36,7 @@
 
         <TextView
             android:id="@+id/album_year"
-            style="@style/ItemText.Secondary"
+            style="@style/Widget.TextView.Item.Secondary"
             app:albumYear="@{album}"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
diff --git a/app/src/main/res/layout/item_artist_song.xml b/app/src/main/res/layout/item_artist_song.xml
index 7bbb158e0..b8d22867a 100644
--- a/app/src/main/res/layout/item_artist_song.xml
+++ b/app/src/main/res/layout/item_artist_song.xml
@@ -25,7 +25,7 @@
 
         <TextView
             android:id="@+id/song_name"
-            style="@style/ItemText.Primary"
+            style="@style/Widget.TextView.Item.Primary"
             android:layout_marginEnd="@dimen/spacing_medium"
             android:text="@{song.name}"
             app:layout_constraintBottom_toTopOf="@+id/song_info"
@@ -37,7 +37,7 @@
 
         <TextView
             android:id="@+id/song_info"
-            style="@style/ItemText.Secondary"
+            style="@style/Widget.TextView.Item.Secondary"
             android:layout_marginEnd="@dimen/spacing_medium"
             android:text="@{song.album.name}"
             app:layout_constraintBottom_toBottomOf="parent"
@@ -48,7 +48,7 @@
 
         <TextView
             android:id="@+id/song_duration"
-            style="@style/ItemText.Secondary"
+            style="@style/Widget.TextView.Item.Secondary"
             android:ellipsize="none"
             android:gravity="end"
             android:text="@{song.formattedDuration}"
diff --git a/app/src/main/res/layout/item_excluded_dir.xml b/app/src/main/res/layout/item_excluded_dir.xml
index 91da06a7d..10ecbf1f1 100644
--- a/app/src/main/res/layout/item_excluded_dir.xml
+++ b/app/src/main/res/layout/item_excluded_dir.xml
@@ -10,7 +10,7 @@
 
         <TextView
             android:id="@+id/excluded_path"
-            style="@style/ItemText.Primary"
+            style="@style/Widget.TextView.Item.Primary"
             android:layout_marginStart="0dp"
             android:layout_marginEnd="@dimen/spacing_medium"
             android:maxLines="@null"
@@ -23,11 +23,9 @@
         <ImageButton
             android:id="@+id/excluded_clear"
             style="@style/Widget.Button.Unbounded"
-            android:layout_width="@dimen/size_clear"
-            android:layout_height="@dimen/size_clear"
             android:contentDescription="@string/desc_blacklist_delete"
             android:src="@drawable/ic_clear"
-            android:tint="?attr/colorControlNormal"
+            app:tint="?attr/colorControlNormal"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
diff --git a/app/src/main/res/layout/item_genre.xml b/app/src/main/res/layout/item_genre.xml
index 04acededd..7ec5daddc 100644
--- a/app/src/main/res/layout/item_genre.xml
+++ b/app/src/main/res/layout/item_genre.xml
@@ -25,7 +25,7 @@
 
         <TextView
             android:id="@+id/genre_name"
-            style="@style/ItemText.Primary"
+            style="@style/Widget.TextView.Item.Primary"
             android:text="@{genre.resolvedName}"
             app:layout_constraintBottom_toTopOf="@+id/genre_count"
             app:layout_constraintEnd_toEndOf="parent"
@@ -36,7 +36,7 @@
 
         <TextView
             android:id="@+id/genre_count"
-            style="@style/ItemText.Secondary"
+            style="@style/Widget.TextView.Item.Secondary"
             android:text="@{@plurals/fmt_song_count(genre.songs.size(), genre.songs.size())}"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
diff --git a/app/src/main/res/layout/item_genre_song.xml b/app/src/main/res/layout/item_genre_song.xml
index e00983c29..3f3d2db54 100644
--- a/app/src/main/res/layout/item_genre_song.xml
+++ b/app/src/main/res/layout/item_genre_song.xml
@@ -25,7 +25,7 @@
 
         <TextView
             android:id="@+id/song_name"
-            style="@style/ItemText.Primary"
+            style="@style/Widget.TextView.Item.Primary"
             android:layout_marginEnd="@dimen/spacing_medium"
             android:text="@{song.name}"
             app:layout_constraintBottom_toTopOf="@+id/song_info"
@@ -37,7 +37,7 @@
 
         <TextView
             android:id="@+id/song_info"
-            style="@style/ItemText.Secondary"
+            style="@style/Widget.TextView.Item.Secondary"
             android:layout_marginEnd="@dimen/spacing_medium"
             android:text="@{@string/format_info(song.album.artist.name, song.album.name)}"
             app:layout_constraintBottom_toBottomOf="parent"
@@ -48,7 +48,7 @@
 
         <TextView
             android:id="@+id/song_duration"
-            style="@style/ItemText.Secondary"
+            style="@style/Widget.TextView.Item.Secondary"
             android:ellipsize="none"
             android:gravity="end"
             android:text="@{song.formattedDuration}"
diff --git a/app/src/main/res/layout/item_queue_song.xml b/app/src/main/res/layout/item_queue_song.xml
index 9983481eb..d8223ca94 100644
--- a/app/src/main/res/layout/item_queue_song.xml
+++ b/app/src/main/res/layout/item_queue_song.xml
@@ -13,14 +13,14 @@
 
     <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:padding="@dimen/spacing_medium">
+        android:layout_height="wrap_content">
 
         <ImageView
             android:id="@+id/album_cover"
             style="@style/Widget.ImageView.Compact"
             android:contentDescription="@{@string/desc_album_cover(song.name)}"
             app:albumArt="@{song}"
+            android:layout_margin="@dimen/spacing_medium"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
@@ -28,7 +28,7 @@
 
         <TextView
             android:id="@+id/song_name"
-            style="@style/ItemText.Primary"
+            style="@style/Widget.TextView.Item.Primary"
             android:layout_marginEnd="@dimen/spacing_medium"
             android:text="@{song.name}"
             app:layout_constraintBottom_toTopOf="@+id/song_info"
@@ -40,8 +40,7 @@
 
         <TextView
             android:id="@+id/song_info"
-            style="@style/ItemText.Secondary"
-            android:layout_marginStart="@dimen/spacing_medium"
+            style="@style/Widget.TextView.Item.Secondary"
             android:layout_marginEnd="@dimen/spacing_medium"
             android:text="@{@string/format_info(song.album.artist.name, song.album.name)}"
             app:layout_constraintBottom_toBottomOf="parent"
@@ -52,16 +51,17 @@
 
         <ImageView
             android:id="@+id/song_drag_handle"
-            android:layout_width="wrap_content"
-            android:layout_height="0dp"
+            android:layout_width="@dimen/size_btn_small"
+            android:layout_height="@dimen/size_btn_small"
+            android:layout_marginEnd="@dimen/spacing_small"
             android:clickable="true"
+            android:contentDescription="@string/desc_queue_handle"
             android:focusable="true"
-            android:padding="@dimen/spacing_tiny"
+            android:scaleType="center"
             android:src="@drawable/ic_handle"
-            app:layout_constraintBottom_toBottomOf="@+id/song_info"
+            app:layout_constraintBottom_toBottomOf="@+id/album_cover"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toTopOf="@+id/song_name"
-            tools:ignore="ContentDescription" />
+            app:layout_constraintTop_toTopOf="@+id/song_name" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/item_song.xml b/app/src/main/res/layout/item_song.xml
index 57231417c..d09fd4f14 100644
--- a/app/src/main/res/layout/item_song.xml
+++ b/app/src/main/res/layout/item_song.xml
@@ -26,7 +26,7 @@
 
         <TextView
             android:id="@+id/song_name"
-            style="@style/ItemText.Primary"
+            style="@style/Widget.TextView.Item.Primary"
             android:layout_marginEnd="@dimen/spacing_medium"
             android:text="@{song.name}"
             app:layout_constraintBottom_toTopOf="@+id/song_info"
@@ -38,7 +38,7 @@
 
         <TextView
             android:id="@+id/song_info"
-            style="@style/ItemText.Secondary"
+            style="@style/Widget.TextView.Item.Secondary"
             android:layout_marginEnd="@dimen/spacing_medium"
             android:text="@{@string/format_info(song.album.artist.name, song.album.name)}"
             app:layout_constraintBottom_toBottomOf="parent"
diff --git a/app/src/main/res/layout/widget_full.xml b/app/src/main/res/layout/widget_full.xml
index 6f70d7fce..b37e5018b 100644
--- a/app/src/main/res/layout/widget_full.xml
+++ b/app/src/main/res/layout/widget_full.xml
@@ -46,7 +46,7 @@
                 android:id="@+id/widget_play_pause"
                 style="@style/Widget.Component.AppWidget.Button"
                 android:contentDescription="@string/desc_play_pause"
-                android:src="@drawable/ic_play" />
+                android:src="@drawable/ic_playing_state" />
 
             <ImageButton
                 android:id="@+id/widget_skip_next"
diff --git a/app/src/main/res/values-night/colors.xml b/app/src/main/res/values-night/colors.xml
index 4823af197..1361eb966 100644
--- a/app/src/main/res/values-night/colors.xml
+++ b/app/src/main/res/values-night/colors.xml
@@ -6,6 +6,7 @@
     <color name="inactive">#404040</color>
     <color name="control">#ffffff</color>
     <color name="nav_bar">#01151515</color>
+    <color name="secondary_text">#bebebe</color>
 
     <!--
     Base color set derived from Music Player GO.
@@ -27,6 +28,6 @@
     <color name="orange">#ffcc80</color>
     <color name="deep_orange">#ffab91</color>
     <color name="brown">#bcaaa4</color>
-    <color name="grey">#CFCFCF</color>
+    <color name="grey">#cfcfcf</color>
     <color name="blue_grey">#b0bec5</color>
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index c2a0f09b1..e9987c450 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -10,6 +10,7 @@
     <color name="divider">#cbcbcb</color>
     <color name="inactive">#c4c4c4</color>
     <color name="nav_bar">#01fafafa</color>
+    <color name="secondary_text">#546e7a</color>
 
     <!--
     Base color set derived from Music Player GO.
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
index fcbe61190..e26407a09 100644
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@@ -2,21 +2,16 @@
 <resources>
     <!--
     TODO: Redo these dimens to line up with the 8dp grid. Tiny spacing can be used for
-      internal elements, but micro spacing needs to be phased out. Certain dimens need to
-      be flattened and buttons need to become at least 48x48.
-      - The unbounded buttons can become 48x48 with 8dp of padding to keep icon dimens.
-      If the play icon is replaced then it will also be trivial to do with them as well.
+      internal elements, but micro spacing needs to be phased out.
     -->
 
     <!-- Spacing Namespace | Dimens for padding/margin attributes -->
-    <dimen name="spacing_micro">2dp</dimen>
     <dimen name="spacing_tiny">4dp</dimen>
     <dimen name="spacing_small">8dp</dimen>
     <dimen name="spacing_medium">16dp</dimen>
     <dimen name="spacing_mid_large">24dp</dimen>
     <dimen name="spacing_large">32dp</dimen>
     <dimen name="spacing_mid_huge">48dp</dimen>
-    <dimen name="spacing_huge">64dp</dimen>
     <dimen name="spacing_insane">128dp</dimen>
 
     <!-- Width Namespace | Width for UI elements -->
@@ -24,7 +19,10 @@
     <dimen name="width_fast_scroll">20dp</dimen>
 
     <!-- Size Namespace | Width & Heights for UI elements -->
-    <dimen name="size_small_unb_ripple">18dp</dimen>
+    <dimen name="size_btn_small">48dp</dimen>
+    <dimen name="size_btn_large">64dp</dimen>
+
+    <dimen name="size_small_unb_ripple">20dp</dimen>
     <dimen name="size_unb_ripple">24dp</dimen>
 
     <dimen name="size_cover_compact">48dp</dimen>
@@ -32,15 +30,12 @@
     <dimen name="size_cover_huge_land">136dp</dimen>
     <dimen name="size_cover_huge">264dp</dimen>
 
-    <dimen name="size_play_pause">64dp</dimen>
-    <dimen name="size_unbounded">36dp</dimen>
-    <dimen name="size_scroll_thumb">48dp</dimen>
-    <dimen name="size_clear">32dp</dimen>
-
-    <dimen name="size_app_icon">48dp</dimen>
     <dimen name="size_stroke_small">1dp</dimen>
     <dimen name="size_stroke_large">2dp</dimen>
 
+    <dimen name="size_app_icon">48dp</dimen>
+    <dimen name="size_scroll_thumb">48dp</dimen>
+
     <!-- Text Size Namespace | Text Sizes -->
     <dimen name="text_size_small">16sp</dimen>
     <dimen name="text_size_medium">18sp</dimen>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index ef84afa6d..d32fd8453 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -121,6 +121,7 @@
     <string name="desc_shuffle">Turn shuffle on or off</string>
 
     <string name="desc_clear_user_queue">Clear queue</string>
+    <string name="desc_queue_handle">Move queue song</string>
     <string name="desc_clear_search">Clear search query</string>
     <string name="desc_blacklist_delete">Remove excluded directory</string>
 
@@ -130,6 +131,7 @@
     <string name="desc_artist_image">Artist Image for %s</string>
     <string name="desc_genre_image">Genre Image for %s</string>
 
+
     <!-- Default Namespace | Placeholder values -->
     <string name="def_genre">Unknown Genre</string>
     <string name="def_artist">Unknown Artist</string>
diff --git a/app/src/main/res/values/styles_component.xml b/app/src/main/res/values/styles_component.xml
index ecfa3b15d..96019796e 100644
--- a/app/src/main/res/values/styles_component.xml
+++ b/app/src/main/res/values/styles_component.xml
@@ -3,13 +3,13 @@
     <!-- COMPONENT-SPECIFIC STYLES. NOT RE-USABLE. -->
 
     <style name="Widget.Component.Playback.PlayPause" parent="">
-        <item name="android:layout_height">@dimen/size_play_pause</item>
-        <item name="android:layout_width">@dimen/size_play_pause</item>
+        <item name="android:layout_height">@dimen/size_btn_large</item>
+        <item name="android:layout_width">@dimen/size_btn_large</item>
         <item name="android:background">@drawable/ui_circle_ripple</item>
-        <item name="android:backgroundTint">?attr/colorAccent</item>
         <item name="android:elevation">@dimen/elevation_normal</item>
         <item name="android:contentDescription">@string/desc_play_pause</item>
-        <item name="android:tint">?android:attr/windowBackground</item>
+        <item name="android:tint">?attr/colorSurface</item>
+        <item name="android:src">@drawable/ic_playing_state</item>
         <item name="android:layout_marginStart">@dimen/spacing_large</item>
         <item name="android:layout_marginTop">@dimen/spacing_medium</item>
         <item name="android:layout_marginEnd">@dimen/spacing_large</item>
@@ -48,11 +48,11 @@
     </style>
 
     <style name="Widget.Component.AppWidget.Button.Base" parent="Widget.AppCompat.Button.Borderless">
-        <item name="android:layout_height">@dimen/size_unbounded</item>
+        <item name="android:layout_height">@dimen/size_btn_small</item>
         <item name="android:layout_width">0dp</item>
         <item name="android:layout_weight">1</item>
         <item name="android:scaleType">fitCenter</item>
-        <item name="android:padding">@dimen/spacing_tiny</item>
+        <item name="android:padding">@dimen/spacing_small</item>
     </style>
 
     <style name="Widget.Component.AppWidget.Button" parent="Widget.Component.AppWidget.Button.Base">
diff --git a/app/src/main/res/values/styles_core.xml b/app/src/main/res/values/styles_core.xml
index 78a41296f..e738d3d4b 100644
--- a/app/src/main/res/values/styles_core.xml
+++ b/app/src/main/res/values/styles_core.xml
@@ -25,8 +25,10 @@
         <!-- Appearance -->
         <item name="android:windowBackground">?attr/colorSurface</item>
         <item name="android:colorBackground">?attr/colorSurface</item>
+        <item name="android:textColorSecondary">@color/secondary_text</item>
         <item name="android:fontFamily">@font/inter</item>
         <item name="android:textCursorDrawable">@drawable/ui_cursor</item>
+
         <item name="cornerRadius">0dp</item>
 
         <!-- System-specific magic -->
diff --git a/app/src/main/res/values/styles_ui.xml b/app/src/main/res/values/styles_ui.xml
index 8741be874..8d76959bc 100644
--- a/app/src/main/res/values/styles_ui.xml
+++ b/app/src/main/res/values/styles_ui.xml
@@ -78,7 +78,7 @@
     </style>
 
     <!-- TEXTVIEW STYLES -->
-    <style name="ItemText" parent="Widget.AppCompat.TextView">
+    <style name="Widget.TextView.Item.Base" parent="Widget.AppCompat.TextView">
         <item name="android:layout_width">0dp</item>
         <item name="android:layout_height">wrap_content</item>
         <item name="android:textAlignment">viewStart</item>
@@ -87,12 +87,12 @@
         <item name="android:layout_marginStart">@dimen/spacing_medium</item>
     </style>
 
-    <style name="ItemText.Primary" parent="ItemText">
+    <style name="Widget.TextView.Item.Primary" parent="Widget.TextView.Item.Base">
         <item name="android:textAppearance">?android:attr/textAppearanceListItem</item>
         <item name="android:textColor">?android:attr/textColorPrimary</item>
     </style>
 
-    <style name="ItemText.Secondary" parent="ItemText">
+    <style name="Widget.TextView.Item.Secondary" parent="Widget.TextView.Item.Base">
         <item name="android:textAppearance">?android:attr/textAppearanceListItemSecondary</item>
         <item name="android:textColor">?android:attr/textColorSecondary</item>
     </style>
@@ -141,7 +141,9 @@
         <item name="android:paddingTop">@dimen/spacing_small</item>
         <item name="android:paddingBottom">@dimen/spacing_small</item>
         <item name="android:paddingEnd">@dimen/spacing_medium</item>
+        <item name="android:minHeight">@dimen/size_btn_small</item>
         <item name="android:textSize">@dimen/text_size_medium</item>
+        <item name="android:gravity">center_vertical</item>
         <item name="android:textColor">?android:attr/textColorPrimary</item>
         <item name="android:fontFamily">@font/inter_semibold</item>
         <item name="android:background">@drawable/ui_header_dividers</item>
@@ -175,16 +177,16 @@
     <!-- BUTTON STYLES -->
 
     <style name="Widget.Button.Unbounded" parent="Widget.AppCompat.Button.Borderless">
-        <item name="android:layout_width">@dimen/size_unbounded</item>
-        <item name="android:layout_height">@dimen/size_unbounded</item>
+        <item name="android:layout_width">@dimen/size_btn_small</item>
+        <item name="android:layout_height">@dimen/size_btn_small</item>
         <item name="android:background">@drawable/ui_unbounded_ripple</item>
         <item name="android:scaleType">fitCenter</item>
-        <item name="android:padding">@dimen/spacing_micro</item>
+        <item name="android:padding">@dimen/spacing_small</item>
     </style>
 
     <style name="Widget.Button.Unbounded.Small" parent="Widget.AppCompat.Button.Borderless">
-        <item name="android:minWidth">0dp</item>
-        <item name="android:minHeight">0dp</item>
+        <item name="android:minWidth">@dimen/size_btn_small</item>
+        <item name="android:minHeight">@dimen/size_btn_small</item>
         <item name="android:paddingStart">@dimen/spacing_medium</item>
         <item name="android:paddingTop">@dimen/spacing_small</item>
         <item name="android:paddingBottom">@dimen/spacing_small</item>