improved about section in settings

src/app/organisms/settings/Settings.jsx

@@ -7,6 +7,7 @@ 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, { PWContentSelector } from '../../molecules/popup-window/PopupWindow';
@@ -17,6 +18,8 @@ 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">
@@ -40,17 +43,31 @@ function AppearanceSection() {
 }
 
 function SecuritySection() {
-  return <div className="settings-content" />;
+  return (
+    <div className="settings-content">
+      <Text>{`Device ID: ${initMatrix.matrixClient.getDeviceId()}`}</Text>
+    </div>
+  );
 }
 
 function AboutSection() {
   return (
-    <div className="settings-content">
-      <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>
-      <Text className="settings__about">{`Device ID: ${initMatrix.matrixClient.getDeviceId()}`}</Text>
+    <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>
   );
 }