From da0d51356f6cd66d75b391583946d0a8ffccffc6 Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Tue, 27 Jun 2023 14:05:36 +0800
Subject: [PATCH] Improve media player styling

Add emphasis on play/pause buttons.
---
 .../components/AudioFilePreview/index.tsx     | 100 +++++++++--------
 .../components/VideoFilePreview/index.tsx     | 102 +++++++++---------
 2 files changed, 106 insertions(+), 96 deletions(-)

diff --git a/packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx b/packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx
index 987e2b2..b14254c 100644
--- a/packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx
+++ b/packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx
@@ -162,55 +162,61 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
               </div>
               {enhanced && (
                 <div className="w-full flex-shrink-0 h-10 flex gap-4 items-center">
-                  <button
-                    className={clsx(
-                      'w-10 h-full flex-shrink-0 text-primary flex items-center justify-center',
-                      'focus:text-secondary focus:outline-0',
-                      'active:text-tertiary',
-                      'disabled:text-primary disabled:cursor-not-allowed disabled:opacity-50',
-                    )}
-                    type="submit"
-                    name="action"
-                    value="togglePlayback"
-                    form={formId}
+                  <div
+                    className="py-1 w-14 h-full flex-shrink-0 text-primary flex items-center justify-center"
                   >
-                    {
-                      isPlaying
-                        ? (
-                          <svg
-                            aria-label="Pause"
-                            viewBox="0 0 24 24"
-                            className="w-6 h-6 fill-none stroke-current stroke-2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          >
-                            <rect
-                              x="6"
-                              y="4"
-                              width="4"
-                              height="16"
-                            />
-                            <rect
-                              x="14"
-                              y="4"
-                              width="4"
-                              height="16"
-                            />
-                          </svg>
-                        )
-                        : (
-                          <svg
-                            aria-label="Play"
-                            viewBox="0 0 24 24"
-                            className="w-6 h-6 fill-none stroke-current stroke-2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          >
-                            <polygon points="5 3 19 12 5 21 5 3" />
-                          </svg>
+                    <button
+                      className={
+                        clsx(
+                          'w-full h-full flex-shrink-0 text-primary flex items-center justify-center bg-primary/30 rounded',
+                          'focus:text-secondary focus:outline-0 focus:bg-secondary/30',
+                          'active:text-tertiary active:bg-tertiary/30',
+                          'disabled:text-primary disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-primary/30',
                         )
-                    }
-                  </button>
+                      }
+                      type="submit"
+                      name="action"
+                      value="togglePlayback"
+                      form={formId}
+                    >
+                      {
+                        isPlaying
+                          ? (
+                            <svg
+                              aria-label="Pause"
+                              viewBox="0 0 24 24"
+                              className="w-6 h-6 fill-none stroke-current stroke-2"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            >
+                              <rect
+                                x="6"
+                                y="4"
+                                width="4"
+                                height="16"
+                              />
+                              <rect
+                                x="14"
+                                y="4"
+                                width="4"
+                                height="16"
+                              />
+                            </svg>
+                          )
+                          : (
+                            <svg
+                              aria-label="Play"
+                              viewBox="0 0 24 24"
+                              className="w-6 h-6 fill-none stroke-current stroke-2"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            >
+                              <polygon points="5 3 19 12 5 21 5 3" />
+                            </svg>
+                          )
+                      }
+                    </button>
+                  </div>
                   <div className="flex-auto w-full flex items-center gap-2 text-sm relative">
                     <button
                       className="absolute overflow-hidden w-12 opacity-0 h-10 peer/seek"
diff --git a/packages/web-kitchensink-reactnext/src/categories/blob/react/components/VideoFilePreview/index.tsx b/packages/web-kitchensink-reactnext/src/categories/blob/react/components/VideoFilePreview/index.tsx
index 31c1e72..253ec4d 100644
--- a/packages/web-kitchensink-reactnext/src/categories/blob/react/components/VideoFilePreview/index.tsx
+++ b/packages/web-kitchensink-reactnext/src/categories/blob/react/components/VideoFilePreview/index.tsx
@@ -104,57 +104,61 @@ export const VideoFilePreview = React.forwardRef<VideoFilePreviewDerivedComponen
               </div>
               {enhanced && (
                 <div className="w-full flex-shrink-0 h-10 flex gap-4 items-center">
-                  <button
-                    className={
-                      clsx(
-                        'w-10 h-full flex-shrink-0 text-primary flex items-center justify-center',
-                        'focus:text-secondary focus:outline-0',
-                        'active:text-tertiary',
-                        'disabled:text-primary disabled:cursor-not-allowed disabled:opacity-50'
-                      )
-                    }
-                    type="submit"
-                    name="action"
-                    value="togglePlayback"
-                    form={formId}
+                  <div
+                    className="py-1 w-14 h-full flex-shrink-0 text-primary flex items-center justify-center"
                   >
-                    {
-                      isPlaying
-                        ? (
-                          <svg
-                            aria-label="Pause"
-                            viewBox="0 0 24 24"
-                            className="w-6 h-6 fill-none stroke-current stroke-2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          >
-                            <rect
-                              x="6"
-                              y="4"
-                              width="4"
-                              height="16"
-                            />
-                            <rect
-                              x="14"
-                              y="4"
-                              width="4"
-                              height="16"
-                            />
-                          </svg>
-                        )
-                        : (
-                          <svg
-                            aria-label="Play"
-                            viewBox="0 0 24 24"
-                            className="w-6 h-6 fill-none stroke-current stroke-2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          >
-                            <polygon points="5 3 19 12 5 21 5 3" />
-                          </svg>
+                    <button
+                      className={
+                        clsx(
+                          'w-full h-full flex-shrink-0 text-primary flex items-center justify-center bg-primary/30 rounded',
+                          'focus:text-secondary focus:outline-0 focus:bg-secondary/30',
+                          'active:text-tertiary active:bg-tertiary/30',
+                          'disabled:text-primary disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-primary/30',
                         )
-                    }
-                  </button>
+                      }
+                      type="submit"
+                      name="action"
+                      value="togglePlayback"
+                      form={formId}
+                    >
+                      {
+                        isPlaying
+                          ? (
+                            <svg
+                              aria-label="Pause"
+                              viewBox="0 0 24 24"
+                              className="w-6 h-6 fill-none stroke-current stroke-2"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            >
+                              <rect
+                                x="6"
+                                y="4"
+                                width="4"
+                                height="16"
+                              />
+                              <rect
+                                x="14"
+                                y="4"
+                                width="4"
+                                height="16"
+                              />
+                            </svg>
+                          )
+                          : (
+                            <svg
+                              aria-label="Play"
+                              viewBox="0 0 24 24"
+                              className="w-6 h-6 fill-none stroke-current stroke-2"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            >
+                              <polygon points="5 3 19 12 5 21 5 3" />
+                            </svg>
+                          )
+                      }
+                    </button>
+                  </div>
                   <div className="flex-auto w-full flex items-center gap-2 text-sm relative">
                     <button
                       className="absolute overflow-hidden w-12 opacity-0 h-10 peer/seek"