improve color #2007

src/renderer/src/components/ExportConfirm.tsx

@@ -35,7 +35,7 @@ const boxStyle: CSSProperties = { margin: '15px 15px 50px 15px', borderRadius: 1
 
 const outDirStyle: CSSProperties = { ...highlightedTextStyle, wordBreak: 'break-all', cursor: 'pointer' };
 
-const warningStyle: CSSProperties = { color: 'var(--red11)', fontSize: '80%', marginBottom: '.5em' };
+const warningStyle: CSSProperties = { color: 'var(--orange8)', fontSize: '80%', marginBottom: '.5em' };
 
 const HelpIcon = ({ onClick, style }: { onClick: () => void, style?: CSSProperties }) => <IoIosHelpCircle size={20} role="button" onClick={withBlur(onClick)} style={{ cursor: 'pointer', color: primaryTextColor, verticalAlign: 'middle', ...style }} />;
 
@@ -519,7 +519,7 @@ const ExportConfirm = memo(({
               animate={{ opacity: 1, translateX: 0 }}
               exit={{ opacity: 0, translateX: 50 }}
               transition={{ duration: 0.4, easings: ['easeOut'] }}
-              style={{ display: 'flex', alignItems: 'flex-end', background: 'rgba(0,0,0,0.5)' }}
+              style={{ display: 'flex', alignItems: 'flex-end', background: 'var(--gray2)' }}
             >
               <ToggleExportConfirm size={25} />
               <div style={{ fontSize: 13, marginLeft: 3, marginRight: 7, maxWidth: 120, lineHeight: '100%', color: exportConfirmEnabled ? 'var(--gray12)' : 'var(--gray11)', cursor: 'pointer' }} role="button" onClick={toggleExportConfirmEnabled}>{t('Show this page before exporting?')}</div>

src/renderer/src/main.css

@@ -3,6 +3,7 @@ https://www.radix-ui.com/docs/colors/palette-composition/the-scales
 https://www.radix-ui.com/docs/colors/palette-composition/understanding-the-scale
 */
 @import '@radix-ui/colors/red.css';
+@import '@radix-ui/colors/orange.css';
 @import '@radix-ui/colors/redDark.css';
 @import '@radix-ui/colors/amber.css';
 @import '@radix-ui/colors/amberDark.css';