Merge remote-tracking branch 'upstream/master' into moritzdietz/fix-typos-and-wording

src/app/molecules/popup-window/PopupWindow.scss

@@ -5,7 +5,7 @@
 }
 
 .pw {
-  --popup-window-drawer-width: 312px;
+  --popup-window-drawer-width: 280px;
 
   width: 100%;
   height: 100%;
@@ -51,26 +51,21 @@
 
 .pw__drawer {
   & .header {
-    padding-left: var(--sp-extra-tight);
-
-    & .ic-btn-surface:first-child {
-      margin-right: var(--sp-ultra-tight);
+    padding-left: var(--sp-tight);
+    & .header__title-wrapper {
+      margin: 0 var(--sp-extra-tight);
     }
-
     [dir=rtl] & {
-        padding-right: var(--sp-extra-tight);
-      & .ic-btn-surface:first-child {
-        margin-right: 0;
-        margin-left: var(--sp-ultra-tight);
-      }
+        padding-right: var(--sp-tight);
     }
   }
 }
 
 .pw-content-selector {
+  margin: 0 var(--sp-extra-tight);
+  border-radius: var(--bo-radius);
   &--selected {
-    border: 1px solid var(--bg-surface-border);
-    border-width: 1px 0;
+    box-shadow: var(--bs-surface-border);
     background-color: var(--bg-surface);
 
     & .context-menu__item > button {
@@ -81,17 +76,13 @@
   }
 
   & .context-menu__item > button {
+    border-radius: var(--bo-radius);
     & .text {
       color: var(--tc-surface-normal);
     }
-    padding-left: var(--sp-normal);
     & .ic-raw {
       margin-right: var(--sp-tight);
-    }
-
-    [dir=rtl] & {
-      padding-right: var(--sp-normal);
-      & .ic-raw {
+      [dir=rtl] & {
         margin-right: 0;
         margin-left: var(--sp-tight);
       }

src/app/organisms/settings/Settings.jsx

@@ -1,49 +1,121 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './Settings.scss';
 
+import initMatrix from '../../../client/initMatrix';
 import settings from '../../../client/state/settings';
 
 import Text from '../../atoms/text/Text';
 import IconButton from '../../atoms/button/IconButton';
+import Button from '../../atoms/button/Button';
 import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls';
 
-import PopupWindow from '../../molecules/popup-window/PopupWindow';
+import PopupWindow, { PWContentSelector } from '../../molecules/popup-window/PopupWindow';
 import SettingTile from '../../molecules/setting-tile/SettingTile';
 
+import SunIC from '../../../../public/res/ic/outlined/sun.svg';
+import LockIC from '../../../../public/res/ic/outlined/lock.svg';
+import InfoIC from '../../../../public/res/ic/outlined/info.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
+import CinnySVG from '../../../../public/res/svg/cinny.svg';
+
+function AppearanceSection() {
+  return (
+    <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>
+  );
+}
+
+function SecuritySection() {
+  return (
+    <div className="settings-content">
+      <Text>{`Device ID: ${initMatrix.matrixClient.getDeviceId()}`}</Text>
+    </div>
+  );
+}
+
+function AboutSection() {
+  return (
+    <div className="settings-content settings__about">
+      <div className="settings__about__branding">
+        <img width="60" height="60" src={CinnySVG} alt="Cinny logo" />
+        <div>
+          <Text variant="h2">
+            Cinny
+            <span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>v1.0.0</span>
+          </Text>
+          <Text>Yet another matrix client</Text>
+
+          <div className="settings__about__btns">
+            <Button onClick={() => window.open('https://github.com/ajbura/cinny')}>Source code</Button>
+            <Button onClick={() => window.open('https://liberapay.com/ajbura/donate')}>Support</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function Settings({ isOpen, onRequestClose }) {
+  const settingSections = [{
+    name: 'Appearance',
+    iconSrc: SunIC,
+    render() {
+      return <AppearanceSection />;
+    },
+  }, {
+    name: 'Security & Privacy',
+    iconSrc: LockIC,
+    render() {
+      return <SecuritySection />;
+    },
+  }, {
+    name: 'Help & About',
+    iconSrc: InfoIC,
+    render() {
+      return <AboutSection />;
+    },
+  }];
+  const [selectedSection, setSelectedSection] = useState(settingSections[0]);
+
   return (
     <PopupWindow
       className="settings-window"
       isOpen={isOpen}
       onRequestClose={onRequestClose}
       title="Settings"
+      contentTitle={selectedSection.name}
+      drawer={
+        settingSections.map((section) => (
+          <PWContentSelector
+            key={section.name}
+            selected={selectedSection.name === section.name}
+            onClick={() => setSelectedSection(section)}
+            iconSrc={section.iconSrc}
+          >
+            {section.name}
+          </PWContentSelector>
+        ))
+      }
       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>
+      {selectedSection.render()}
     </PopupWindow>
   );
 }

src/app/organisms/settings/Settings.scss

@@ -1,6 +1,6 @@
 .settings-window {
   & .pw__content-container {
-    height: 100%;
+    min-height: 100%;
   }
 }
 
@@ -12,11 +12,27 @@
     margin-right: var(--sp-normal);
   }
 
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+  & .setting-tile {
+    margin-top: var(--sp-normal);
+  }
 }
 
 .settings__about {
-  text-align: center;
+  &__branding {
+    margin-top: var(--sp-extra-tight);
+    margin-bottom: var(--sp-normal);
+    display: flex;
+
+    & > div {
+      margin: 0 calc(var(--sp-loose) + var(--sp-ultra-tight));
+    }
+
+  }
+  &__btns {
+    margin: 0;
+    margin-top: var(--sp-normal);
+    & button:last-child {
+      margin: 0 var(--sp-tight)
+    }
+  }
 }