replace caret with X icon #2595

src/renderer/src/SegmentList.tsx

@@ -1,5 +1,5 @@
-import { memo, useMemo, useRef, useCallback, useState, SetStateAction, Dispatch, ReactNode, MouseEventHandler, CSSProperties, useEffect } from 'react';
-import { FaYinYang, FaSave, FaPlus, FaMinus, FaTag, FaSortNumericDown, FaAngleRight, FaRegCheckCircle, FaRegCircle } from 'react-icons/fa';
+import { memo, useMemo, useRef, useCallback, useState, SetStateAction, Dispatch, MouseEventHandler, CSSProperties, useEffect } from 'react';
+import { FaYinYang, FaSave, FaPlus, FaMinus, FaTag, FaSortNumericDown, FaAngleRight, FaRegCheckCircle, FaRegCircle, FaTimes } from 'react-icons/fa';
 import { AiOutlineSplitCells } from 'react-icons/ai';
 import { motion } from 'framer-motion';
 import { useTranslation, Trans } from 'react-i18next';
@@ -608,16 +608,15 @@ function SegmentList({
         exit={{ x: width }}
         transition={springAnimation}
       >
-        <div style={{ fontSize: '.8em', padding: '.3em .5em', color: 'var(--gray-12)' }} className="no-user-select">
-          <FaAngleRight
+        <div style={{ padding: '.2em .5em', color: 'var(--gray-12)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '.2em' }} className="no-user-select">
+          <span style={{ fontSize: '.8em' }}>{getHeader()}</span>
+
+          <FaTimes
             title={t('Close sidebar')}
-            size={20}
-            style={{ verticalAlign: 'middle', color: 'var(--gray-11)', cursor: 'pointer', padding: '.1em' }}
+            style={{ fontSize: '1.1em', verticalAlign: 'middle', color: 'var(--gray-11)', cursor: 'pointer', padding: '.2em .3em' }}
             role="button"
             onClick={toggleSegmentsList}
           />
-
-          {getHeader()}
         </div>
 
         <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd} onDragStart={handleDragStart} modifiers={[restrictToVerticalAxis]}>

src/renderer/src/components/BatchFilesList.tsx

@@ -17,9 +17,7 @@ const iconStyle = {
   flexShrink: 0,
   color: 'var(--gray-12)',
   cursor: 'pointer',
-  paddingTop: 3,
-  paddingBottom: 3,
-  padding: '3px 5px',
+  padding: '.2em .3em',
 };
 
 function BatchFilesList({ selectedBatchFiles, filePath, width, batchFiles, setBatchFiles, onBatchFileSelect, batchListRemoveFile, closeBatch, onMergeFilesClick, onBatchConvertToSupportedFormatClick, onDrop }: {
@@ -90,12 +88,12 @@ function BatchFilesList({ selectedBatchFiles, filePath, width, batchFiles, setBa
       onDrop={onDrop}
     >
       <div style={{ paddingBottom: '.5em', paddingTop: 0, paddingLeft: '.5em', display: 'flex', alignItems: 'center', justifyContent: 'flex-end', flexWrap: 'wrap', gap: '.2em' }}>
-        <div style={{ fontSize: '.9em' }}>{t('Batch file list')}{batchFiles.length > 0 && ` (${batchFiles.length})`}</div>
+        <div style={{ fontSize: '.8em' }}>{t('Batch file list')}{batchFiles.length > 0 && ` (${batchFiles.length})`}</div>
         <div style={{ flexGrow: 1 }} />
         <FaHatWizard role="button" title={`${t('Convert to supported format')}...`} style={iconStyle} onClick={onBatchConvertToSupportedFormatClick} />
         <SortIcon role="button" title={t('Sort items')} style={iconStyle} onClick={onSortClick} />
         <AiOutlineMergeCells className={simpleMode ? 'export-animation' : undefined} role="button" title={`${t('Merge/concatenate files')}...`} style={{ ...iconStyle, color: 'white', background: primaryColor, borderRadius: '.5em' }} onClick={onMergeFilesClick} />
-        <FaTimes role="button" title={t('Close batch')} style={{ ...iconStyle, color: 'var(--gray-11)' }} onClick={closeBatch} />
+        <FaTimes role="button" title={t('Close batch')} style={{ ...iconStyle, fontSize: '1.1em', color: 'var(--gray-11)' }} onClick={closeBatch} />
       </div>
 
       <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd} onDragStart={handleDragStart} modifiers={[restrictToVerticalAxis]}>