hippoz/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

improved about section in settings

Browse source
This commit is contained in:
unknown 2021-07-31 21:50:15 +05:30
parent 81f4f1c46f
commit f163e24201
2 changed files with 46 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/app/organisms/settings/Settings.jsx
View file

@ -7,6 +7,7 @@ import settings from '../../../client/state/settings';
import Text from '../../atoms/text/Text'; import Text from '../../atoms/text/Text';
import IconButton from '../../atoms/button/IconButton'; import IconButton from '../../atoms/button/IconButton';
import Button from '../../atoms/button/Button';
import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls'; import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls';
import PopupWindow, { PWContentSelector } from '../../molecules/popup-window/PopupWindow'; 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 InfoIC from '../../../../public/res/ic/outlined/info.svg';
import CrossIC from '../../../../public/res/ic/outlined/cross.svg'; import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
import CinnySVG from '../../../../public/res/svg/cinny.svg';
function AppearanceSection() { function AppearanceSection() {
return ( return (
<div className="settings-content"> <div className="settings-content">
@ -40,17 +43,31 @@ function AppearanceSection() {
} }
function SecuritySection() { function SecuritySection() {
return <div className="settings-content" />; return (
<div className="settings-content">
<Text>{`Device ID: ${initMatrix.matrixClient.getDeviceId()}`}</Text>
</div>
);
} }
function AboutSection() { function AboutSection() {
return ( return (
<div className="settings-content"> <div className="settings-content settings__about">
<Text className="settings__about" variant="b1"> <div className="settings__about__branding">
<a href="https://cinny.in/#about" target="_blank" rel="noreferrer">About</a> <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>
<Text className="settings__about">Version: 1.0.0</Text> <Text>Yet another matrix client</Text>
<Text className="settings__about">{`Device ID: ${initMatrix.matrixClient.getDeviceId()}`}</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> </div>
); );
} }

24
src/app/organisms/settings/Settings.scss
View file

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