Add ButtonRSWP class

gilbarbara · Sep 19, 2023 · 37aeecc · 37aeecc
1 parent 18b76ea
commit 37aeecc
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 71 deletions.
diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx
@@ -147,6 +147,7 @@ function Controls(props: Props) {
         <div>
           <Button
             aria-label={locale.previous}
+            className="ButtonRSWP"
             disabled={!isActive && !isExternalDevice}
             onClick={onClickPrevious}
             title={locale.previous}
@@ -158,7 +159,7 @@ function Controls(props: Props) {
         <div>
           <Button
             aria-label={isPlaying ? locale.pause : locale.play}
-            className="rswp__toggle"
+            className="ButtonRSWP rswp__toggle"
             onClick={onClickTogglePlay}
             title={isPlaying ? locale.pause : locale.play}
             type="button"
@@ -169,6 +170,7 @@ function Controls(props: Props) {
         <div>
           <Button
             aria-label={locale.next}
+            className="ButtonRSWP"
             disabled={!nextTracks.length && !isActive && !isExternalDevice}
             onClick={onClickNext}
             title={locale.next}

diff --git a/src/components/Devices.tsx b/src/components/Devices.tsx
@@ -58,6 +58,7 @@ const Wrapper = styled('div')(
         alignItems: 'center',
         display: 'flex',
         whiteSpace: 'nowrap',
+        width: '100%',
 
         '&:not(:last-of-type)': {
           marginBottom: px(12),
@@ -250,6 +251,7 @@ export default function Devices(props: Props) {
                       <button
                         key={device.id}
                         aria-label={device.name}
+                        className="ButtonRSWP"
                         data-id={device.id}
                         onClick={handleClickSetDevice}
                         type="button"
@@ -265,6 +267,7 @@ export default function Devices(props: Props) {
             )}
             <button
               aria-label={locale.devices}
+              className="ButtonRSWP"
               onClick={handleClickToggleList}
               title={locale.devices}
               type="button"

diff --git a/src/components/Info.tsx b/src/components/Info.tsx
@@ -36,7 +36,7 @@ const Wrapper = styled('div')(
     '> a': {
       display: 'inline-flex',
       textDecoration: 'none',
-      minHeigth: px(64),
+      minHeight: px(64),
       minWidth: px(64),
 
       '&:hover': {
@@ -299,7 +299,7 @@ function Info(props: Props) {
     favorite = (
       <button
         aria-label={isSaved ? locale.removeTrack : locale.saveTrack}
-        className={isSaved ? 'rswp__active' : undefined}
+        className={`ButtonRSWP${isSaved ? ' rswp__active' : ''}`}
         onClick={handleClickIcon}
         title={isSaved ? locale.removeTrack : locale.saveTrack}
         type="button"

diff --git a/src/components/Player.tsx b/src/components/Player.tsx
@@ -1,54 +1,27 @@
 import { forwardRef } from 'react';
 
-import { put, px } from '~/modules/styled';
+import { px } from '~/modules/styled';
 
 import { ComponentsProps } from '~/types';
 
-put('.PlayerRSWP', {
-  boxSizing: 'border-box',
-  fontSize: 'inherit',
-  width: '100%',
-
-  '*': {
-    boxSizing: 'border-box',
-  },
-
-  button: {
-    appearance: 'none',
-    background: 'transparent',
-    border: 0,
-    borderRadius: 0,
-    color: 'inherit',
-    cursor: 'pointer',
-    display: 'inline-flex',
-    lineHeight: 1,
-    padding: 0,
-
-    ':focus': {
-      outlineColor: '#000',
-      outlineOffset: 3,
-    },
-  },
-
-  p: {
-    margin: 0,
-  },
+const Player = forwardRef<HTMLDivElement, ComponentsProps>((props, ref) => {
+  const {
+    children,
+    styles: { bgColor, height },
+    ...rest
+  } = props;
+
+  return (
+    <div
+      ref={ref}
+      className="PlayerRSWP"
+      data-component-name="Player"
+      style={{ background: bgColor, minHeight: px(height) }}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
 });
 
-const Player = forwardRef<HTMLDivElement, ComponentsProps>(
-  ({ children, styles: { bgColor, height }, ...rest }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className="PlayerRSWP"
-        data-component-name="Player"
-        style={{ background: bgColor, minHeight: px(height) }}
-        {...rest}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
 export default Player;
diff --git a/src/components/Volume.tsx b/src/components/Volume.tsx
@@ -236,6 +236,7 @@ export default function Volume(props: Props) {
         )}
         <button
           aria-label={locale.volume}
+          className="ButtonRSWP"
           onClick={handleClickToggleList}
           title={locale.volume}
           type="button"

diff --git a/src/components/Wrapper.tsx b/src/components/Wrapper.tsx
@@ -43,7 +43,9 @@ const StyledWrapper = styled('div')(
   'WrapperRSWP',
 );
 
-function Wrapper({ children, layout, styles }: ComponentsProps) {
+function Wrapper(props: ComponentsProps) {
+  const { children, layout, styles } = props;
+
   return (
     <StyledWrapper data-component-name="Wrapper" style={{ h: styles.height, layout }}>
       {children}

diff --git a/src/index.tsx b/src/index.tsx
@@ -25,6 +25,7 @@ import {
   setDevice,
   setVolume,
 } from '~/modules/spotify';
+import { put } from '~/modules/styled';
 
 import Actions from '~/components/Actions';
 import Controls from '~/components/Controls';
@@ -52,6 +53,37 @@ import {
   StylesOptions,
 } from './types';
 
+put('.PlayerRSWP', {
+  boxSizing: 'border-box',
+  fontSize: 'inherit',
+  width: '100%',
+
+  '*': {
+    boxSizing: 'border-box',
+  },
+
+  p: {
+    margin: 0,
+  },
+});
+
+put('.ButtonRSWP', {
+  appearance: 'none',
+  background: 'transparent',
+  border: 0,
+  borderRadius: 0,
+  color: 'inherit',
+  cursor: 'pointer',
+  display: 'inline-flex',
+  lineHeight: 1,
+  padding: 0,
+
+  ':focus': {
+    outlineColor: '#000',
+    outlineOffset: 3,
+  },
+});
+
 class SpotifyWebPlayer extends PureComponent<Props, State> {
   private isMounted = false;
   private emptyTrack = {