initial commit

src/app/organisms/settings/Settings.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Settings.scss';
+
+import settings from '../../../client/state/settings';
+
+import Text from '../../atoms/text/Text';
+import IconButton from '../../atoms/button/IconButton';
+import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls';
+
+import PopupWindow from '../../molecules/popup-window/PopupWindow';
+import SettingTile from '../../molecules/setting-tile/SettingTile';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+function Settings({ isOpen, onRequestClose }) {
+  return (
+    <PopupWindow
+      className="settings-window"
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      title="Settings"
+      contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
+    >
+      <div className="settings-content">
+        <SettingTile
+          title="Theme"
+          content={(
+            <SegmentedControls
+              selected={settings.getThemeIndex()}
+              segments={[
+                { text: 'Light' },
+                { text: 'Silver' },
+                { text: 'Dark' },
+                { text: 'Butter' },
+              ]}
+              onSelect={(index) => settings.setTheme(index)}
+            />
+          )}
+        />
+        <div style={{ flex: '1' }} />
+        <Text className="settings__about" variant="b1">
+          <a href="https://cinny.in/#about" target="_blank" rel="noreferrer">About</a>
+        </Text>
+        <Text className="settings__about">Version: 1.0.0</Text>
+      </div>
+    </PopupWindow>
+  );
+}
+
+Settings.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onRequestClose: PropTypes.func.isRequired,
+};
+
+export default Settings;