From 3aba4218c58aa8755010181b7b4be26dc860633c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 14 Feb 2023 18:49:32 +0100
Subject: [PATCH] Use clsx instead of template strings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/ui/select/select.tsx   |  6 +++-
 .../compose/components/privacy-dropdown.tsx   |  2 +-
 .../ui/components/modals/media-modal.tsx      | 32 ++++++++-----------
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/app/soapbox/components/ui/select/select.tsx b/app/soapbox/components/ui/select/select.tsx
index 4c88ae5bd..2c03d083c 100644
--- a/app/soapbox/components/ui/select/select.tsx
+++ b/app/soapbox/components/ui/select/select.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React from 'react';
 
 interface ISelect extends React.SelectHTMLAttributes<HTMLSelectElement> {
@@ -11,7 +12,10 @@ const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
   return (
     <select
       ref={ref}
-      className={`w-full truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm ${className}`}
+      className={clsx(
+        'w-full truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm',
+        className,
+      )}
       {...filteredProps}
     >
       {children}
diff --git a/app/soapbox/features/compose/components/privacy-dropdown.tsx b/app/soapbox/features/compose/components/privacy-dropdown.tsx
index 652a7560d..e33edbb67 100644
--- a/app/soapbox/features/compose/components/privacy-dropdown.tsx
+++ b/app/soapbox/features/compose/components/privacy-dropdown.tsx
@@ -120,7 +120,7 @@ const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({ style, items, pla
         // It should not be transformed when mounting because the resulting
         // size will be used to determine the coordinate of the menu by
         // react-overlays
-        <div className={`privacy-dropdown__dropdown ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : undefined }} role='listbox' ref={node}>
+        <div className={clsx('privacy-dropdown__dropdown', placement)} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : undefined }} role='listbox' ref={node}>
           {items.map(item => (
             <div role='option' tabIndex={0} key={item.value} data-index={item.value} onKeyDown={handleKeyDown} onClick={handleClick} className={clsx('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? focusedItem : null}>
               <div className='privacy-dropdown__option__icon'>
diff --git a/app/soapbox/features/ui/components/modals/media-modal.tsx b/app/soapbox/features/ui/components/modals/media-modal.tsx
index 032d19f34..abac79ee9 100644
--- a/app/soapbox/features/ui/components/modals/media-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/media-modal.tsx
@@ -142,24 +142,20 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
   );
 
   if (media.size > 1) {
-    pagination = media.toArray().map((item, i) => {
-      const classes = ['media-modal__button'];
-      if (i === getIndex()) {
-        classes.push('media-modal__button--active');
-      }
-      return (
-        <li className='media-modal__page-dot' key={i}>
-          <button
-            tabIndex={0}
-            className={classes.join(' ')}
-            onClick={handleChangeIndex}
-            data-index={i}
-          >
-            {i + 1}
-          </button>
-        </li>
-      );
-    });
+    pagination = media.toArray().map((item, i) => (
+      <li className='media-modal__page-dot' key={i}>
+        <button
+          tabIndex={0}
+          className={clsx('media-modal__button', {
+            'media-modal__button--active': i === getIndex(),
+          })}
+          onClick={handleChangeIndex}
+          data-index={i}
+        >
+          {i + 1}
+        </button>
+      </li>
+    ));
   }
 
   const isMultiMedia = media.map((image) => image.type !== 'image').toArray();