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>
   );
 }

src/app/organisms/settings/Settings.scss

@@ -1,6 +1,6 @@
 .settings-window {
   & .pw__content-container {
-    height: 100%;
+    min-height: 100%;
   }
 }
 
@@ -11,8 +11,28 @@
     margin-left: var(--sp-extra-tight);
     margin-right: var(--sp-normal);
   }
+
+  & .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)
+    }
+  }
 }