make yin yang red when invert is active #2545

src/renderer/src/BottomBar.tsx

@@ -60,7 +60,7 @@ const InvertCutModeButton = memo(({ invertCutSegments, setInvertCutSegments }: {
         <FaYinYang
           role="button"
           title={invertCutSegments ? t('Discard selected segments') : t('Keep selected segments')}
-          style={{ display: 'block', fontSize: '1.5em', color: invertCutSegments ? primaryTextColor : undefined }}
+          style={{ display: 'block', fontSize: '1.5em', color: invertCutSegments ? dangerColor : undefined }}
           onClick={onYinYangClick}
         />
       </motion.div>

src/renderer/src/SegmentList.tsx

@@ -382,7 +382,7 @@ function SegmentList({
     if (segmentsOrInverse.length === 0) {
       if (invertCutSegments) {
         return (
-          <Trans>You have enabled the &quot;invert segments&quot; mode <FaYinYang style={{ verticalAlign: 'middle' }} /> which will cut away selected segments instead of keeping them. But there is no space between any segments, or at least two segments are overlapping. This would not produce any output. Either make room between segments or click the Yinyang <FaYinYang style={{ verticalAlign: 'middle', color: primaryTextColor }} /> symbol below to disable this mode. Alternatively you may combine overlapping segments from the menu.</Trans>
+          <Trans>You have enabled the &quot;invert segments&quot; mode <FaYinYang style={{ verticalAlign: 'middle' }} /> which will cut away selected segments instead of keeping them. But there is no space between any segments, or at least two segments are overlapping. This would not produce any output. Either make room between segments or click the Yinyang <FaYinYang style={{ verticalAlign: 'middle' }} /> symbol below to disable this mode. Alternatively you may combine overlapping segments from the menu.</Trans>
         );
       }
       return t('No segments to export.');

src/renderer/src/components/AutoExportToggler.tsx

@@ -4,6 +4,7 @@ import { FaBan, FaFileExport } from 'react-icons/fa';
 
 import useUserSettings from '../hooks/useUserSettings';
 import Button from './Button';
+import { dangerColor } from '../colors';
 
 function AutoExportToggler() {
   const { t } = useTranslation();
@@ -13,7 +14,7 @@ function AutoExportToggler() {
 
   return (
     <Button style={{ padding: '0.3em 1em' }} onClick={() => setAutoExportExtraStreams(!autoExportExtraStreams)}>
-      <Icon style={{ verticalAlign: 'middle', marginRight: '.5em' }} />{autoExportExtraStreams ? t('Extract') : t('Discard')}
+      <Icon style={{ verticalAlign: 'middle', marginRight: '.5em', color: autoExportExtraStreams ? undefined : dangerColor }} />{autoExportExtraStreams ? t('Extract') : t('Discard')}
     </Button>
   );
 }

src/renderer/src/components/Settings.tsx

@@ -17,7 +17,7 @@ import ButtonRaw, { ButtonProps } from './Button';
 import { getModifierKeyNames } from '../hooks/useTimelineScroll';
 import { TunerType } from '../types';
 import Truncated from './Truncated';
-import { primaryColor } from '../colors';
+import { dangerColor } from '../colors';
 
 // eslint-disable-next-line react/jsx-props-no-spreading
 const Button = ({ style, ...props }: ButtonProps) => <ButtonRaw style={{ padding: '.5em .9em', ...style }} {...props} />;
@@ -227,7 +227,7 @@ function Settings({
           </KeyCell>
           <td>
             <Button onClick={() => setInvertCutSegments((v) => !v)}>
-              <FaYinYang style={{ verticalAlign: 'middle', marginRight: '.3em', color: invertCutSegments ? primaryColor : undefined }} /> {invertCutSegments ? t('Remove') : t('Keep')}
+              <FaYinYang style={{ verticalAlign: 'middle', marginRight: '.3em', color: invertCutSegments ? dangerColor : undefined }} /> {invertCutSegments ? t('Remove') : t('Keep')}
             </Button>
           </td>
         </Row>