diff options
author | 2022-05-06 20:12:53 -0500 | |
---|---|---|
committer | 2022-05-06 20:12:53 -0500 | |
commit | e9d8d2a5109c81933af98cefef12d18a0f673688 (patch) | |
tree | 160d138d3971846241daed77efb9fbbad27e7526 | |
parent | Update npm modules. (diff) | |
download | ferdium-app-e9d8d2a5109c81933af98cefef12d18a0f673688.tar.gz ferdium-app-e9d8d2a5109c81933af98cefef12d18a0f673688.tar.zst ferdium-app-e9d8d2a5109c81933af98cefef12d18a0f673688.zip |
Minor refactoring for css styles of headings (fontSize)
-rw-r--r-- | src/components/settings/services/EditServiceForm.js | 15 | ||||
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.js | 32 | ||||
-rw-r--r-- | src/components/ui/headline/index.tsx | 14 |
3 files changed, 34 insertions, 27 deletions
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index fcf540ba0..8e2696e6b 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js | |||
@@ -21,6 +21,7 @@ import Select from '../../ui/Select'; | |||
21 | import { isMac } from '../../../environment'; | 21 | import { isMac } from '../../../environment'; |
22 | import globalMessages from '../../../i18n/globalMessages'; | 22 | import globalMessages from '../../../i18n/globalMessages'; |
23 | import { Icon } from '../../ui/icon'; | 23 | import { Icon } from '../../ui/icon'; |
24 | import { H3 } from '../../ui/headline'; | ||
24 | 25 | ||
25 | const messages = defineMessages({ | 26 | const messages = defineMessages({ |
26 | saveService: { | 27 | saveService: { |
@@ -324,7 +325,7 @@ class EditServiceForm extends Component { | |||
324 | <div className="service-flex-grid"> | 325 | <div className="service-flex-grid"> |
325 | <div className="settings__options"> | 326 | <div className="settings__options"> |
326 | <div className="settings__settings-group"> | 327 | <div className="settings__settings-group"> |
327 | <h3>{intl.formatMessage(messages.headlineNotifications)}</h3> | 328 | <H3>{intl.formatMessage(messages.headlineNotifications)}</H3> |
328 | <Toggle field={form.$('isNotificationEnabled')} /> | 329 | <Toggle field={form.$('isNotificationEnabled')} /> |
329 | <Toggle field={form.$('isMuted')} /> | 330 | <Toggle field={form.$('isMuted')} /> |
330 | <p className="settings__help indented__help"> | 331 | <p className="settings__help indented__help"> |
@@ -333,7 +334,7 @@ class EditServiceForm extends Component { | |||
333 | </div> | 334 | </div> |
334 | 335 | ||
335 | <div className="settings__settings-group"> | 336 | <div className="settings__settings-group"> |
336 | <h3>{intl.formatMessage(messages.headlineBadges)}</h3> | 337 | <H3>{intl.formatMessage(messages.headlineBadges)}</H3> |
337 | <Toggle field={form.$('isBadgeEnabled')} /> | 338 | <Toggle field={form.$('isBadgeEnabled')} /> |
338 | {recipe.hasIndirectMessages && | 339 | {recipe.hasIndirectMessages && |
339 | form.$('isBadgeEnabled').value && ( | 340 | form.$('isBadgeEnabled').value && ( |
@@ -352,7 +353,7 @@ class EditServiceForm extends Component { | |||
352 | </div> | 353 | </div> |
353 | 354 | ||
354 | <div className="settings__settings-group"> | 355 | <div className="settings__settings-group"> |
355 | <h3>{intl.formatMessage(messages.headlineGeneral)}</h3> | 356 | <H3>{intl.formatMessage(messages.headlineGeneral)}</H3> |
356 | <Toggle field={form.$('isEnabled')} /> | 357 | <Toggle field={form.$('isEnabled')} /> |
357 | <Toggle field={form.$('isHibernationEnabled')} /> | 358 | <Toggle field={form.$('isHibernationEnabled')} /> |
358 | <p className="settings__help indented__help"> | 359 | <p className="settings__help indented__help"> |
@@ -362,11 +363,11 @@ class EditServiceForm extends Component { | |||
362 | <Toggle field={form.$('isDarkModeEnabled')} /> | 363 | <Toggle field={form.$('isDarkModeEnabled')} /> |
363 | {form.$('isDarkModeEnabled').value && ( | 364 | {form.$('isDarkModeEnabled').value && ( |
364 | <> | 365 | <> |
365 | <h3> | 366 | <H3> |
366 | {intl.formatMessage( | 367 | {intl.formatMessage( |
367 | messages.headlineDarkReaderSettings, | 368 | messages.headlineDarkReaderSettings, |
368 | )} | 369 | )} |
369 | </h3> | 370 | </H3> |
370 | <Slider field={form.$('darkReaderBrightness')} /> | 371 | <Slider field={form.$('darkReaderBrightness')} /> |
371 | <Slider field={form.$('darkReaderContrast')} /> | 372 | <Slider field={form.$('darkReaderContrast')} /> |
372 | <Slider field={form.$('darkReaderSepia')} /> | 373 | <Slider field={form.$('darkReaderSepia')} /> |
@@ -391,10 +392,10 @@ class EditServiceForm extends Component { | |||
391 | 392 | ||
392 | {isProxyFeatureEnabled && ( | 393 | {isProxyFeatureEnabled && ( |
393 | <div className="settings__settings-group"> | 394 | <div className="settings__settings-group"> |
394 | <h3> | 395 | <H3> |
395 | {intl.formatMessage(messages.headlineProxy)} | 396 | {intl.formatMessage(messages.headlineProxy)} |
396 | <span className="badge badge--success">beta</span> | 397 | <span className="badge badge--success">beta</span> |
397 | </h3> | 398 | </H3> |
398 | <Toggle field={form.$('proxy.isEnabled')} /> | 399 | <Toggle field={form.$('proxy.isEnabled')} /> |
399 | {form.$('proxy.isEnabled').value && ( | 400 | {form.$('proxy.isEnabled').value && ( |
400 | <> | 401 | <> |
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index 870264dfb..a59314eb7 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js | |||
@@ -13,7 +13,7 @@ import Toggle from '../../ui/Toggle'; | |||
13 | import Select from '../../ui/Select'; | 13 | import Select from '../../ui/Select'; |
14 | import Input from '../../ui/Input'; | 14 | import Input from '../../ui/Input'; |
15 | import Infobox from '../../ui/Infobox'; | 15 | import Infobox from '../../ui/Infobox'; |
16 | import { H1, H2 } from '../../ui/headline'; | 16 | import { H1, H2, H3, H5 } from '../../ui/headline'; |
17 | 17 | ||
18 | import { | 18 | import { |
19 | DEFAULT_APP_SETTINGS, | 19 | DEFAULT_APP_SETTINGS, |
@@ -336,7 +336,7 @@ class EditSettingsForm extends Component { | |||
336 | > | 336 | > |
337 | {/* Titles */} | 337 | {/* Titles */} |
338 | <div className="recipes__navigation"> | 338 | <div className="recipes__navigation"> |
339 | <h2 | 339 | <H5 |
340 | id="general" | 340 | id="general" |
341 | className={ | 341 | className={ |
342 | this.state.activeSetttingsTab === 'general' | 342 | this.state.activeSetttingsTab === 'general' |
@@ -348,8 +348,8 @@ class EditSettingsForm extends Component { | |||
348 | }} | 348 | }} |
349 | > | 349 | > |
350 | {intl.formatMessage(messages.headlineGeneral)} | 350 | {intl.formatMessage(messages.headlineGeneral)} |
351 | </h2> | 351 | </H5> |
352 | <h2 | 352 | <H5 |
353 | id="appearance" | 353 | id="appearance" |
354 | className={ | 354 | className={ |
355 | this.state.activeSetttingsTab === 'appearance' | 355 | this.state.activeSetttingsTab === 'appearance' |
@@ -361,8 +361,8 @@ class EditSettingsForm extends Component { | |||
361 | }} | 361 | }} |
362 | > | 362 | > |
363 | {intl.formatMessage(messages.headlineAppearance)} | 363 | {intl.formatMessage(messages.headlineAppearance)} |
364 | </h2> | 364 | </H5> |
365 | <h2 | 365 | <H5 |
366 | id="privacy" | 366 | id="privacy" |
367 | className={ | 367 | className={ |
368 | this.state.activeSetttingsTab === 'privacy' | 368 | this.state.activeSetttingsTab === 'privacy' |
@@ -374,8 +374,8 @@ class EditSettingsForm extends Component { | |||
374 | }} | 374 | }} |
375 | > | 375 | > |
376 | {intl.formatMessage(messages.headlinePrivacy)} | 376 | {intl.formatMessage(messages.headlinePrivacy)} |
377 | </h2> | 377 | </H5> |
378 | <h2 | 378 | <H5 |
379 | id="language" | 379 | id="language" |
380 | className={ | 380 | className={ |
381 | this.state.activeSetttingsTab === 'language' | 381 | this.state.activeSetttingsTab === 'language' |
@@ -387,8 +387,8 @@ class EditSettingsForm extends Component { | |||
387 | }} | 387 | }} |
388 | > | 388 | > |
389 | {intl.formatMessage(messages.headlineLanguage)} | 389 | {intl.formatMessage(messages.headlineLanguage)} |
390 | </h2> | 390 | </H5> |
391 | <h2 | 391 | <H5 |
392 | id="advanced" | 392 | id="advanced" |
393 | className={ | 393 | className={ |
394 | this.state.activeSetttingsTab === 'advanced' | 394 | this.state.activeSetttingsTab === 'advanced' |
@@ -400,8 +400,8 @@ class EditSettingsForm extends Component { | |||
400 | }} | 400 | }} |
401 | > | 401 | > |
402 | {intl.formatMessage(messages.headlineAdvanced)} | 402 | {intl.formatMessage(messages.headlineAdvanced)} |
403 | </h2> | 403 | </H5> |
404 | <h2 | 404 | <H5 |
405 | id="updates" | 405 | id="updates" |
406 | className={ | 406 | className={ |
407 | this.state.activeSetttingsTab === 'updates' | 407 | this.state.activeSetttingsTab === 'updates' |
@@ -416,7 +416,7 @@ class EditSettingsForm extends Component { | |||
416 | {automaticUpdates && (updateIsReadyToInstall || isUpdateAvailable || showServicesUpdatedInfoBar) && ( | 416 | {automaticUpdates && (updateIsReadyToInstall || isUpdateAvailable || showServicesUpdatedInfoBar) && ( |
417 | <span className="update-available">•</span> | 417 | <span className="update-available">•</span> |
418 | )} | 418 | )} |
419 | </h2> | 419 | </H5> |
420 | </div> | 420 | </div> |
421 | 421 | ||
422 | {/* General */} | 422 | {/* General */} |
@@ -781,7 +781,7 @@ class EditSettingsForm extends Component { | |||
781 | <Hr /> | 781 | <Hr /> |
782 | 782 | ||
783 | <div className="settings__settings-group"> | 783 | <div className="settings__settings-group"> |
784 | <h3>{intl.formatMessage(messages.subheadlineCache)}</h3> | 784 | <H3>{intl.formatMessage(messages.subheadlineCache)}</H3> |
785 | <p> | 785 | <p> |
786 | {intl.formatMessage(messages.cacheInfo, { | 786 | {intl.formatMessage(messages.cacheInfo, { |
787 | size: cacheSize, | 787 | size: cacheSize, |
@@ -817,9 +817,9 @@ class EditSettingsForm extends Component { | |||
817 | <Hr /> | 817 | <Hr /> |
818 | 818 | ||
819 | <div className="settings__settings-group"> | 819 | <div className="settings__settings-group"> |
820 | <h3> | 820 | <H3> |
821 | {intl.formatMessage(messages.subheadlineFerdiumProfile)} | 821 | {intl.formatMessage(messages.subheadlineFerdiumProfile)} |
822 | </h3> | 822 | </H3> |
823 | <p> | 823 | <p> |
824 | <div className="settings__open-settings-file-container"> | 824 | <div className="settings__open-settings-file-container"> |
825 | <Button | 825 | <Button |
diff --git a/src/components/ui/headline/index.tsx b/src/components/ui/headline/index.tsx index d9954c38f..b5a5f695f 100644 --- a/src/components/ui/headline/index.tsx +++ b/src/components/ui/headline/index.tsx | |||
@@ -10,6 +10,7 @@ interface IProps extends WithStylesProps<typeof styles> { | |||
10 | className?: string; | 10 | className?: string; |
11 | children: string | ReactNode; | 11 | children: string | ReactNode; |
12 | id?: string; | 12 | id?: string; |
13 | onClick?: () => void; | ||
13 | } | 14 | } |
14 | 15 | ||
15 | const styles = (theme: Theme) => ({ | 16 | const styles = (theme: Theme) => ({ |
@@ -21,23 +22,26 @@ const styles = (theme: Theme) => ({ | |||
21 | textAlign: 'left', | 22 | textAlign: 'left', |
22 | }, | 23 | }, |
23 | h1: { | 24 | h1: { |
24 | fontSize: 30, | 25 | fontSize: theme.uiFontSize + 3, |
25 | marginTop: 0, | 26 | marginTop: 0, |
26 | }, | 27 | }, |
27 | h2: { | 28 | h2: { |
28 | fontSize: 20, | 29 | fontSize: theme.uiFontSize + 2, |
29 | }, | 30 | }, |
30 | h3: { | 31 | h3: { |
31 | fontSize: 18, | 32 | fontSize: theme.uiFontSize + 1, |
32 | }, | 33 | }, |
33 | h4: { | 34 | h4: { |
34 | fontSize: theme.uiFontSize, | 35 | fontSize: theme.uiFontSize, |
35 | }, | 36 | }, |
37 | h5: { | ||
38 | fontSize: theme.uiFontSize - 1, | ||
39 | }, | ||
36 | }); | 40 | }); |
37 | 41 | ||
38 | class HeadlineComponent extends Component<IProps> { | 42 | class HeadlineComponent extends Component<IProps> { |
39 | render() { | 43 | render() { |
40 | const { classes, level, className, children, id } = this.props; | 44 | const { classes, level, className, children, id, onClick } = this.props; |
41 | 45 | ||
42 | return createElement( | 46 | return createElement( |
43 | `h${level}`, | 47 | `h${level}`, |
@@ -49,6 +53,7 @@ class HeadlineComponent extends Component<IProps> { | |||
49 | [`${className}`]: className, | 53 | [`${className}`]: className, |
50 | }), | 54 | }), |
51 | 'data-type': 'franz-headline', | 55 | 'data-type': 'franz-headline', |
56 | onClick, | ||
52 | }, | 57 | }, |
53 | children, | 58 | children, |
54 | ); | 59 | ); |
@@ -68,3 +73,4 @@ export const H1 = createH(1); | |||
68 | export const H2 = createH(2); | 73 | export const H2 = createH(2); |
69 | export const H3 = createH(3); | 74 | export const H3 = createH(3); |
70 | export const H4 = createH(4); | 75 | export const H4 = createH(4); |
76 | export const H5 = createH(5); | ||