From 83cc802ecd9aa41d38a201fa35558302a6999ade Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 29 Apr 2024 17:27:52 +0200
Subject: [PATCH] Styles cleanup, might break stuff
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/components/icon-button.tsx                |  6 +-
 src/components/location-search.tsx            | 12 ++--
 src/features/aliases/components/search.tsx    |  4 +-
 src/features/audio/index.tsx                  | 20 +++----
 .../list-editor/components/search.tsx         |  4 +-
 .../ui/components/modals/actions-modal.tsx    |  2 +-
 src/features/video/index.tsx                  | 14 ++---
 src/styles/application.scss                   |  2 -
 src/styles/components/audio-player.scss       | 43 --------------
 src/styles/components/icon.scss               |  4 --
 src/styles/components/media-gallery.scss      |  4 --
 src/styles/components/modal.scss              | 19 +------
 src/styles/components/search.scss             | 23 --------
 src/styles/components/video-player.scss       | 56 +------------------
 src/styles/ui.scss                            |  8 ---
 15 files changed, 36 insertions(+), 185 deletions(-)
 delete mode 100644 src/styles/components/audio-player.scss
 delete mode 100644 src/styles/components/search.scss

diff --git a/src/components/icon-button.tsx b/src/components/icon-button.tsx
index 4eb0dccca..47cb41b69 100644
--- a/src/components/icon-button.tsx
+++ b/src/components/icon-button.tsx
@@ -68,7 +68,7 @@ const IconButton: React.FC<IIconButton> = ({
 
   const classes = clsx(className, 'icon-button', {
     active,
-    disabled,
+    'opacity-20 cursor-default': disabled,
   });
 
   return (
@@ -89,10 +89,10 @@ const IconButton: React.FC<IIconButton> = ({
       disabled={disabled}
       type='button'
     >
-      <div>
+      <div className='flex items-center justify-center'>
         <Icon className={iconClassName} src={src} aria-hidden='true' />
       </div>
-      {text && <span className='icon-button__text'>{text}</span>}
+      {text && <span className='pl-0.5'>{text}</span>}
     </button>
   );
 };
diff --git a/src/components/location-search.tsx b/src/components/location-search.tsx
index 8a09050f9..7a745eda8 100644
--- a/src/components/location-search.tsx
+++ b/src/components/location-search.tsx
@@ -29,9 +29,7 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
 
   const [value, setValue] = useState('');
 
-  const isEmpty = (): boolean => {
-    return !(value.length > 0);
-  };
+  const empty = !(value.length > 0);
 
   const handleChange: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
     refreshCancelToken();
@@ -48,7 +46,7 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
   const handleClear: React.MouseEventHandler = e => {
     e.preventDefault();
 
-    if (!isEmpty()) {
+    if (!empty) {
       setValue('');
     }
   };
@@ -99,9 +97,9 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
         onKeyDown={handleKeyDown}
         renderSuggestion={AutosuggestLocation}
       />
-      <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-        <Icon src={require('@tabler/icons/outline/search.svg')} className={clsx('svg-icon--search', { active: isEmpty() })} />
-        <Icon src={require('@tabler/icons/outline/backspace.svg')} className={clsx('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
+      <div role='button' tabIndex={0} className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto' onClick={handleClear}>
+        <Icon src={require('@tabler/icons/outline/search.svg')} className={clsx('h-5 w-5 text-gray-600', { 'hidden': !empty })} />
+        <Icon src={require('@tabler/icons/outline/backspace.svg')} className={clsx('h-5 w-5 text-gray-600', { 'hidden': empty })} aria-label={intl.formatMessage(messages.placeholder)} />
       </div>
     </div>
   );
diff --git a/src/features/aliases/components/search.tsx b/src/features/aliases/components/search.tsx
index 5b654a777..dcb995253 100644
--- a/src/features/aliases/components/search.tsx
+++ b/src/features/aliases/components/search.tsx
@@ -52,8 +52,8 @@ const Search: React.FC = () => {
           placeholder={intl.formatMessage(messages.search)}
         />
 
-        <div role='button' tabIndex={hasValue ? 0 : -1} className='search__icon' onClick={handleClear}>
-          <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
+        <div role='button' tabIndex={hasValue ? 0 : -1} className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto' onClick={handleClear}>
+          <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('h-5 w-5 text-gray-600', { 'hidden': !hasValue })} />
         </div>
       </label>
       <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
diff --git a/src/features/audio/index.tsx b/src/features/audio/index.tsx
index 57dfc01f9..836e46bd9 100644
--- a/src/features/audio/index.tsx
+++ b/src/features/audio/index.tsx
@@ -438,7 +438,7 @@ const Audio: React.FC<IAudio> = (props) => {
 
   return (
     <div
-      className={clsx('audio-player', { editable })}
+      className={clsx('relative box-border overflow-hidden rounded-[10px] bg-black pb-11 [direction:ltr]', { 'rounded-none h-full': editable })}
       ref={player}
       style={{
         backgroundColor: _getBackgroundColor(),
@@ -490,24 +490,24 @@ const Audio: React.FC<IAudio> = (props) => {
         />
       )}
 
-      <div className='video-player__seek' onMouseDown={handleMouseDown} ref={seek}>
+      <div className='video-player__seek before:top-0 before:bg-white/10' onMouseDown={handleMouseDown} ref={seek}>
 
-        <div className='video-player__seek__buffer' style={{ width: `${buffer}%` }} />
+        <div className='absolute top-0 block h-1 rounded bg-white/20' style={{ width: `${buffer}%` }} />
 
         <div
-          className='video-player__seek__progress'
+          className='absolute top-0 block h-1 rounded bg-accent-500'
           style={{ width: `${progress}%`, backgroundColor: accentColor }}
         />
 
         <span
-          className={clsx('video-player__seek__handle', { active: dragging })}
+          className={clsx('video-player__seek__handle -top-1', { 'opacity-100': dragging })}
           tabIndex={0}
           style={{ left: `${progress}%`, backgroundColor: accentColor }}
           onKeyDown={handleAudioKeyDown}
         />
       </div>
 
-      <div className='video-player__controls absolute bottom-0 left-0 z-[2] box-border px-4 py-0 opacity-100 ring-0 transition-opacity duration-100 ease-in-out'>
+      <div className='video-player__controls absolute bottom-0 left-0 z-[2] box-border bg-transparent px-4 py-0 pt-2.5 opacity-100 ring-0 transition-opacity duration-100 ease-in-out'>
         <div className='-mx-[5px] my-0 flex justify-between pb-2'>
           <div className='video-player__buttons left'>
 
@@ -515,7 +515,7 @@ const Audio: React.FC<IAudio> = (props) => {
               type='button'
               title={intl.formatMessage(paused ? messages.play : messages.pause)}
               aria-label={intl.formatMessage(paused ? messages.play : messages.pause)}
-              className='player-button'
+              className='player-button text-current opacity-[75] hover:text-current hover:opacity-100 focus:text-current focus:opacity-100 active:text-current active:opacity-100'
               onClick={togglePlay}
             >
               <Icon src={paused ? require('@tabler/icons/outline/player-play.svg') : require('@tabler/icons/outline/player-pause.svg')} />
@@ -525,14 +525,14 @@ const Audio: React.FC<IAudio> = (props) => {
               type='button'
               title={intl.formatMessage(muted ? messages.unmute : messages.mute)}
               aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)}
-              className='player-button'
+              className='player-button text-current opacity-[75] hover:text-current hover:opacity-100 focus:text-current focus:opacity-100 active:text-current active:opacity-100'
               onClick={toggleMute}
             >
               <Icon src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')} />
             </button>
 
             <div
-              className={clsx('video-player__volume', { active: hovered })}
+              className={clsx('video-player__volume before:bg-white/10', { 'overflow-visible w-12 mr-4': hovered })}
               ref={slider}
               onMouseDown={handleVolumeMouseDown}
             >
@@ -545,7 +545,7 @@ const Audio: React.FC<IAudio> = (props) => {
               />
 
               <span
-                className='video-player__volume__handle'
+                className={clsx('video-player__volume__handle', { 'opacity-100': dragging || hovered })}
                 tabIndex={0}
                 style={{ left: `${volume * 100}%`, backgroundColor: _getAccentColor() }}
               />
diff --git a/src/features/list-editor/components/search.tsx b/src/features/list-editor/components/search.tsx
index e3c3812c7..2c6e0a066 100644
--- a/src/features/list-editor/components/search.tsx
+++ b/src/features/list-editor/components/search.tsx
@@ -44,8 +44,8 @@ const Search = () => {
             onChange={handleChange}
             placeholder={intl.formatMessage(messages.search)}
           />
-          <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-            <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
+          <div role='button' tabIndex={0} className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto' onClick={handleClear}>
+            <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('h-5 w-5 text-gray-600', { hidden: !hasValue })} />
           </div>
         </label>
 
diff --git a/src/features/ui/components/modals/actions-modal.tsx b/src/features/ui/components/modals/actions-modal.tsx
index ae4f2ddf4..c08cdd584 100644
--- a/src/features/ui/components/modals/actions-modal.tsx
+++ b/src/features/ui/components/modals/actions-modal.tsx
@@ -56,7 +56,7 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
     <Motion defaultStyle={{ top: 100 }} style={{ top: spring(0) }}>
       {({ top }) => (
         <div
-          className='actions-modal pointer-events-auto relative z-[9999] m-auto flex max-h-[calc(100vh-3rem)] w-full max-w-lg flex-col overflow-hidden rounded-2xl bg-white text-gray-400 shadow-xl black:bg-black dark:bg-gray-900'
+          className='pointer-events-auto relative z-[9999] m-auto flex max-h-[calc(100vh-3rem)] w-full max-w-lg flex-col overflow-hidden rounded-2xl bg-white text-gray-400 shadow-xl black:bg-black dark:bg-gray-900'
           style={{ top: `${top}%` }}
         >
           {status && (
diff --git a/src/features/video/index.tsx b/src/features/video/index.tsx
index fa3b1e326..42f5f07f4 100644
--- a/src/features/video/index.tsx
+++ b/src/features/video/index.tsx
@@ -500,13 +500,13 @@ const Video: React.FC<IVideo> = ({
         onVolumeChange={handleVolumeChange}
       />
 
-      <div className={clsx('video-player__controls absolute bottom-0 left-0 z-[2] box-border px-4 py-0 opacity-0 ring-0 transition-opacity duration-100 ease-in-out', { 'opacity-100': paused || hovered })}>
+      <div className={clsx('video-player__controls absolute inset-x-0 bottom-0 z-[2] box-border px-4 py-0 opacity-0 ring-0 transition-opacity duration-100 ease-in-out', { 'opacity-100': paused || hovered })}>
         <div className='video-player__seek' onMouseDown={handleMouseDown} ref={seek}>
-          <div className='video-player__seek__buffer' style={{ width: `${buffer}%` }} />
-          <div className='video-player__seek__progress' style={{ width: `${progress}%` }} />
+          <div className='absolute top-3.5 block h-1 rounded bg-white/20' style={{ width: `${buffer}%` }} />
+          <div className='absolute top-3.5 block h-1 rounded bg-accent-500' style={{ width: `${progress}%` }} />
 
           <span
-            className={clsx('video-player__seek__handle', { active: dragging })}
+            className={clsx('video-player__seek__handle', { 'opacity-100': dragging })}
             tabIndex={0}
             style={{ left: `${progress}%` }}
             onKeyDown={handleVideoKeyDown}
@@ -536,10 +536,10 @@ const Video: React.FC<IVideo> = ({
               <Icon src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')} />
             </button>
 
-            <div className={clsx('video-player__volume', { active: hovered })} onMouseDown={handleVolumeMouseDown} ref={slider}>
+            <div className={clsx('video-player__volume', { 'overflow-visible w-12 mr-4': hovered })} onMouseDown={handleVolumeMouseDown} ref={slider}>
               <div className='video-player__volume__current' style={{ width: `${volume * 100}%` }} />
               <span
-                className={clsx('video-player__volume__handle')}
+                className={clsx('video-player__volume__handle', { 'opacity-100': dragging || hovered })}
                 tabIndex={0}
                 style={{ left: `${volume * 100}%` }}
               />
@@ -554,7 +554,7 @@ const Video: React.FC<IVideo> = ({
             )}
 
             {link && (
-              <span className='video-player__link'>{link}</span>
+              <span className='video-player__link px-2.5 py-0.5'>{link}</span>
             )}
           </div>
 
diff --git a/src/styles/application.scss b/src/styles/application.scss
index 9509a8e6d..20a654607 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -12,9 +12,7 @@
 @import 'components/media-gallery';
 @import 'components/notification';
 @import 'components/columns';
-@import 'components/search';
 @import 'components/video-player';
-@import 'components/audio-player';
 @import 'components/icon';
 @import 'forms';
 @import 'utilities';
diff --git a/src/styles/components/audio-player.scss b/src/styles/components/audio-player.scss
deleted file mode 100644
index 55b2fc668..000000000
--- a/src/styles/components/audio-player.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.audio-player {
-  @apply [direction:ltr] relative box-border overflow-hidden rounded-[10px] bg-black pb-11;
-
-  &.editable {
-    @apply rounded-none h-full;
-  }
-
-  .video-player__seek {
-    @apply before:top-0;
-  }
-
-  .video-player__volume,
-  .video-player__seek {
-    @apply before:bg-white/10;
-  }
-
-  .video-player__seek__buffer {
-    @apply bg-white/20;
-  }
-
-  .video-player__buttons button {
-    @apply text-current opacity-[75];
-
-    &:active,
-    &:hover,
-    &:focus {
-      @apply text-current opacity-100;
-    }
-  }
-
-  .video-player__seek__buffer,
-  .video-player__seek__progress {
-    @apply top-0;
-  }
-
-  .video-player__seek__handle {
-    @apply -top-1;
-  }
-
-  .video-player__controls {
-    @apply pt-2.5 bg-transparent;
-  }
-}
diff --git a/src/styles/components/icon.scss b/src/styles/components/icon.scss
index c6030638b..4257ffb4a 100644
--- a/src/styles/components/icon.scss
+++ b/src/styles/components/icon.scss
@@ -6,7 +6,3 @@
     @apply h-full w-full transition duration-200;
   }
 }
-
-.icon-button > div {
-  @apply flex items-center justify-center;
-}
diff --git a/src/styles/components/media-gallery.scss b/src/styles/components/media-gallery.scss
index 739a6639f..0eea348a9 100644
--- a/src/styles/components/media-gallery.scss
+++ b/src/styles/components/media-gallery.scss
@@ -28,10 +28,6 @@
 
   &__preview {
     @apply bg-gray-200 dark:bg-gray-900 rounded-lg w-full h-full object-cover absolute top-0 left-0 z-0;
-
-    &--hidden {
-      @apply hidden;
-    }
   }
 
   &__gifv {
diff --git a/src/styles/components/modal.scss b/src/styles/components/modal.scss
index 17175f6b7..1d43bfaaa 100644
--- a/src/styles/components/modal.scss
+++ b/src/styles/components/modal.scss
@@ -1,19 +1,15 @@
 .media-modal {
   .audio-player.detailed,
   .extended-video-player {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    @apply flex items-center justify-center;
   }
 
   .audio-player {
-    max-width: 800px;
-    max-height: 600px;
+    @apply max-w-[800px] max-h-[600px];
   }
 
   .extended-video-player {
-    width: 100%;
-    height: 100%;
+    @apply w-full h-full;
 
     video {
       @apply max-w-full max-h-[80%];
@@ -21,12 +17,3 @@
   }
 }
 
-.actions-modal ul li {
-  a,
-  button {
-    .svg-icon svg {
-      @apply stroke-[1.5];
-    }
-  }
-}
-
diff --git a/src/styles/components/search.scss b/src/styles/components/search.scss
deleted file mode 100644
index 3dd8fc811..000000000
--- a/src/styles/components/search.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.search__icon {
-  @apply focus:outline-0 #{!important};
-
-  &::-moz-focus-inner {
-    @apply border-0 outline-0 #{!important};
-  }
-
-  .svg-icon {
-    @apply right-4 rtl:left-4 rtl:right-auto text-gray-400 cursor-default inline-block absolute top-1/2 -translate-y-1/2 z-[2] w-4.5 h-4.5 opacity-0 pointer-events-none text-lg;
-
-    &.active {
-      @apply pointer-events-auto opacity-100;
-    }
-
-    &--search.active {
-      @apply pointer-events-none;
-    }
-
-    &--backspace {
-      @apply cursor-pointer w-[22px] h-[22px];
-    }
-  }
-}
diff --git a/src/styles/components/video-player.scss b/src/styles/components/video-player.scss
index 6eb13db2e..e0928282a 100644
--- a/src/styles/components/video-player.scss
+++ b/src/styles/components/video-player.scss
@@ -20,7 +20,7 @@
     flex: 0 1 auto;
 
     .player-button {
-      @apply inline-block outline-0 bg-transparent text-base border-0 text-white/75;
+      @apply inline-block outline-0 bg-transparent text-base border-0 text-white/75 active:text-white hover:text-white focus:text-white;
       flex: 0 0 auto;
       padding: 5px 6px;
 
@@ -37,27 +37,14 @@
   }
 
   &__volume {
-    @apply inline-flex cursor-pointer h-6 relative overflow-hidden;
+    @apply inline-flex cursor-pointer h-6 relative overflow-hidden before:content-[''] before:w-12 before:bg-white/35 before:rounded before:absolute before:h-1 before:left-0 before:top-1/2;
     flex: 0 0 auto;
 
     .no-reduce-motion & {
       transition: all 100ms linear;
     }
 
-    &.active {
-      @apply overflow-visible w-12 mr-4;
-    }
-
     &::before {
-      content: '';
-      width: 50px;
-      background: rgba(#fff, 0.35);
-      border-radius: 4px;
-      display: block;
-      position: absolute;
-      height: 4px;
-      left: 0;
-      top: 50%;
       transform: translate(0, -50%);
     }
 
@@ -75,43 +62,16 @@
         transition: opacity 100ms linear;
       }
     }
-
-    &.active &__handle {
-      @apply opacity-100;
-    }
   }
 
   &__link {
-    @apply py-0.5 px-2.5;
-
     a {
       @apply no-underline text-sm font-medium text-white hover:underline active:underline focus:underline;
     }
   }
 
   &__seek {
-    cursor: pointer;
-    height: 24px;
-    position: relative;
-
-    &::before {
-      content: '';
-      width: 100%;
-      background: rgba(#fff, 0.35);
-      border-radius: 4px;
-      display: block;
-      position: absolute;
-      height: 4px;
-      top: 14px;
-    }
-
-    &__progress {
-      @apply block absolute h-1 rounded top-3.5 bg-accent-500;
-    }
-
-    &__buffer {
-      @apply block absolute h-1 rounded top-3.5 bg-white/20;
-    }
+    @apply cursor-pointer h-6 relative before:content-[''] before:w-full before:bg-white/35 before:rounded before:block before:absolute before:h-1 before:top-3.5;
 
     &__handle {
       @apply bg-accent-500 absolute z-[3] opacity-0 rounded-[50%] size-3 top-2.5 -ml-1.5;
@@ -120,16 +80,6 @@
       .no-reduce-motion & {
         transition: opacity 0.1s ease;
       }
-
-      &.active {
-        @apply opacity-100;
-      }
-    }
-
-    &:hover {
-      .video-player__seek__handle {
-        @apply opacity-100;
-      }
     }
   }
 }
diff --git a/src/styles/ui.scss b/src/styles/ui.scss
index 26b576c30..bc3b62b5b 100644
--- a/src/styles/ui.scss
+++ b/src/styles/ui.scss
@@ -1,20 +1,12 @@
 .icon-button {
   @apply text-black dark:text-white inline-flex items-center p-0 border-0 bg-transparent cursor-pointer transition duration-100 ease-in opacity-40;
 
-  &__text {
-    @apply pl-0.5;
-  }
-
   &:hover,
   &:active,
   &:focus {
     @apply opacity-60 transition-colors duration-200 ease-out;
   }
 
-  &.disabled {
-  @apply opacity-20 cursor-default;
-  }
-
   &::-moz-focus-inner {
     @apply border-0;
   }