<commit_before>import * as React from 'react';

import store from '~/renderer/views/app/store';
import { darkTheme, lightTheme } from '~/renderer/constants';
import { Dropdown } from '~/renderer/components/Dropdown';
import { DropdownItem } from '~/renderer/components/Dropdown/styles';
import Switch from '~/renderer/components/Switch';
import { Section, Title, Row, Control } from '../style';

const onThemeChange = (value: 'Light' | 'Dark') => {
  store.settings.object.isDarkTheme = value === 'Dark';
  store.theme = value === 'Dark' ? darkTheme : lightTheme;
  store.settings.save();
};

const Theme = () => {
  const defaultValue = store.settings.object.isDarkTheme ? 'Dark' : 'Light';

  return (
    <Row>
      <Title>Theme</Title>
      <Control>
        <Dropdown defaultValue={defaultValue} onChange={onThemeChange}>
          <DropdownItem>Light</DropdownItem>
          <DropdownItem>Dark</DropdownItem>
        </Dropdown>
      </Control>
    </Row>
  );
};

const onAnimationsChange = (value: boolean) => {
  store.settings.object.areAnimationsToggled = value;
  store.settings.save();
};

const OverlayAnimations = () => {
  const { areAnimationsToggled } = store.settings.object;

  return (
    <Row>
      <Title>Overlay animations</Title>
      <Control>
        <Switch
          onChange={onAnimationsChange}
          defaultValue={areAnimationsToggled}
        />
      </Control>
    </Row>
  );
};

const FontSize = () => {
  return (
    <Row>
      <Title>Font size</Title>
      <Control>
        <Dropdown defaultValue="Medium (Recommended)" onChange={onThemeChange}>
          <DropdownItem>Very small</DropdownItem>
          <DropdownItem>Small</DropdownItem>
          <DropdownItem>Medium (Recommended)</DropdownItem>
          <DropdownItem>Large</DropdownItem>
          <DropdownItem>Very large</DropdownItem>
        </Dropdown>
      </Control>
    </Row>
  );
};

export const Appearance = () => {
  return (
    <Section>
      <Theme />
      <OverlayAnimations />
      <FontSize />
    </Section>
  );
};<commit_msg>feat: add overlay blur section<commit_after>import * as React from 'react';

import store from '~/renderer/views/app/store';
import { darkTheme, lightTheme } from '~/renderer/constants';
import { Dropdown } from '~/renderer/components/Dropdown';
import { DropdownItem } from '~/renderer/components/Dropdown/styles';
import Switch from '~/renderer/components/Switch';
import { Section, Title, Row, Control } from '../style';

const onThemeChange = (value: 'Light' | 'Dark') => {
  store.settings.object.isDarkTheme = value === 'Dark';
  store.theme = value === 'Dark' ? darkTheme : lightTheme;
  store.settings.save();
};

const Theme = () => {
  const defaultValue = store.settings.object.isDarkTheme ? 'Dark' : 'Light';

  return (
    <Row>
      <Title>Theme</Title>
      <Control>
        <Dropdown defaultValue={defaultValue} onChange={onThemeChange}>
          <DropdownItem>Light</DropdownItem>
          <DropdownItem>Dark</DropdownItem>
        </Dropdown>
      </Control>
    </Row>
  );
};

const onAnimationsChange = (value: boolean) => {
  store.settings.object.areAnimationsToggled = value;
  store.settings.save();
};

const OverlayAnimations = () => {
  const { areAnimationsToggled } = store.settings.object;

  return (
    <Row>
      <Title>Overlay animations</Title>
      <Control>
        <Switch
          onChange={onAnimationsChange}
          defaultValue={areAnimationsToggled}
        />
      </Control>
    </Row>
  );
};

const FontSize = () => {
  return (
    <Row>
      <Title>Font size</Title>
      <Control>
        <Dropdown defaultValue="Medium (Recommended)" onChange={onThemeChange}>
          <DropdownItem>Very small</DropdownItem>
          <DropdownItem>Small</DropdownItem>
          <DropdownItem>Medium (Recommended)</DropdownItem>
          <DropdownItem>Large</DropdownItem>
          <DropdownItem>Very large</DropdownItem>
        </Dropdown>
      </Control>
    </Row>
  );
};

const OverlayBlur = () => {
  return (
    <Row>
      <Title>Overlay blur</Title>
      <Control>
        <Switch />
      </Control>
    </Row>
  );
};

export const Appearance = () => {
  return (
    <Section>
      <Theme />
      <OverlayAnimations />
      <FontSize />
      <OverlayBlur />
    </Section>
  );
};
{'fraction_non_alphanumeric': 0.15069444444444444, 'fraction_numerical': 0.0, 'mean_word_length': 2.875336322869955, 'pattern_counts': {'":': 0, '<': 95, '<?xml version=': 0, '>': 108, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1797143', 'n_tokens_mistral': 1331, 'n_tokens_neox': 1329, 'n_words': 253}