Import emojis from scss and work around emoji bug on macos

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2021-12-30 21:26:56 +01:00
parent 1a9a5e815a
commit 4de82b774b
8 changed files with 27 additions and 15 deletions

View file

@ -15,7 +15,10 @@
@import './hints';
.CodeMirror {
font-family: "Fira Code", "Twemoji", Consolas, monaco, monospace;
& {
@import '../../../../../global-styles/variables.module';
font-family: "Fira Code", $font-family-emojis, Consolas, monaco, monospace;
}
letter-spacing: 0.025em;
line-height: 1.25;
font-size: 18px;

View file

@ -12,6 +12,7 @@ import { useIsDarkModeActivated } from '../../../../../hooks/common/use-is-dark-
import styles from './emoji-picker.module.scss'
import forkawesomeIcon from './forkawesome.png'
import { ForkAwesomeIcons } from '../../../../common/fork-awesome/fork-awesome-icons'
import fontStyles from '../../../../../../global-styles/variables.module.scss'
export interface EmojiPickerProps {
show: boolean
@ -35,7 +36,7 @@ export const emojiPickerConfig = {
const twemojiStyle = (): HTMLStyleElement => {
const style = document.createElement('style')
style.textContent = 'section.picker { --font-family: "Twemoji" !important; }'
style.textContent = `section.picker { --font-family: ${fontStyles['font-family-emojis']} !important; }`
return style
}

View file

@ -6,8 +6,6 @@
.abcjs-score {
@import "../../../../../global-styles/variables";
:global(.markdown-body) & {
overflow-x: auto !important;
}
@ -17,6 +15,7 @@
}
&, text {
@import "../../../../../global-styles/variables.module";
font-family: $font-family-base;
}
}

View file

@ -10,6 +10,7 @@ import { Trans, useTranslation } from 'react-i18next'
import { useIsDarkModeActivated } from '../../../../hooks/common/use-is-dark-mode-activated'
import { Logger } from '../../../../utils/logger'
import { cypressId } from '../../../../utils/cypress-attribute'
import fontStyles from '../../../../../global-styles/variables.module.scss'
const log = new Logger('FlowChart')
@ -40,7 +41,7 @@ export const FlowChart: React.FC<FlowChartProps> = ({ code }) => {
'line-color': darkModeActivated ? '#ffffff' : '#000000',
'element-color': darkModeActivated ? '#ffffff' : '#000000',
'font-color': darkModeActivated ? '#ffffff' : '#000000',
'font-family': 'Source Sans Pro, "Twemoji", monospace'
'font-family': fontStyles['font-family-base']
})
setError(false)
} catch (error) {