liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

clean up formatting

Browse Source
This commit is contained in:
Spectralitree 2021-06-26 20:24:21 +02:00
parent 9d01a83f17
commit ee2de19b28
1 changed files with 140 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

212
src/Pages/Settings.js
View File

@ -1,104 +1,172 @@
import React from 'react'; import React from "react";
import * as BS from "react-bootstrap"; import * as BS from "react-bootstrap";
import { FaCog } from "react-icons/fa"; import { FaCog } from "react-icons/fa";
import Toggle from 'react-toggle' import Toggle from "react-toggle";
const Settings = ({forceUpdate}) => { const Settings = ({ forceUpdate }) => {
return ( // this all should be pretty self-explanatory, might add comments later tho
<BS.Card> return (
<BS.Card.Header className="d-flex align-items-center justify-content-between"> <BS.Card>
<BS.Card.Title><FaCog className="mr-3" />Settings</BS.Card.Title> <BS.Card.Header className="d-flex align-items-center justify-content-between">
</BS.Card.Header> <BS.Card.Title>
<BS.Card.Body> <FaCog className="mr-3" />
<p>Change how you view and use pk-webs here, changes will be saved after refreshing. You will have to apply them again in different browsers and on different devices.</p> Settings
<hr/> </BS.Card.Title>
<BS.Row> </BS.Card.Header>
<BS.Col xs={12} lg={4} className="mx-1 mb-4 d-flex align-items-center row"> <BS.Card.Body>
{ localStorage.getItem('opendyslexic') ? <p>
<Toggle className="mr-2" Change how you view and use pk-webs here, changes will be saved after
refreshing. You will have to apply them again in different browsers
and on different devices.
</p>
<hr />
<BS.Row>
<BS.Col
xs={12}
lg={4}
className="mx-1 mb-4 d-flex align-items-center row"
>
{localStorage.getItem("opendyslexic") ? (
<Toggle
className="mr-2"
defaultChecked={true} defaultChecked={true}
icons={false} icons={false}
onChange={() => { onChange={() => {
localStorage.removeItem('opendyslexic'); localStorage.removeItem("opendyslexic");
forceUpdate()}} /> : forceUpdate();
<Toggle className="mr-2" }}
/>
) : (
<Toggle
className="mr-2"
defaultChecked={false} defaultChecked={false}
icons={false} icons={false}
onChange={() => { onChange={() => {
localStorage.setItem('opendyslexic', 'true') localStorage.setItem("opendyslexic", "true");
forceUpdate()}} /> } forceUpdate();
Use opendyslexic? }}
</BS.Col> />
<BS.Col xs={12} lg={4} className="mx-1 mb-4 d-flex align-items-center row"> )}
{ localStorage.getItem('twemoji') ? Use opendyslexic?
<Toggle className="mr-2" </BS.Col>
<BS.Col
xs={12}
lg={4}
className="mx-1 mb-4 d-flex align-items-center row"
>
{localStorage.getItem("twemoji") ? (
<Toggle
className="mr-2"
defaultChecked={true} defaultChecked={true}
icons={false} icons={false}
onChange={() => { onChange={() => {
localStorage.removeItem('twemoji'); localStorage.removeItem("twemoji");
forceUpdate()}} /> : forceUpdate();
<Toggle className="mr-2" }}
/>
) : (
<Toggle
className="mr-2"
defaultChecked={false} defaultChecked={false}
icons={false} icons={false}
onChange={() => { onChange={() => {
localStorage.setItem('twemoji', 'true') localStorage.setItem("twemoji", "true");
forceUpdate()}} /> } forceUpdate();
Use twemoji? }}
</BS.Col> />
<BS.Col xs={12} lg={4} className="mx-1 mb-4 d-flex align-items-center row"> )}
{ localStorage.getItem('pagesonly') ? Use twemoji?
<Toggle className="mr-2" </BS.Col>
<BS.Col
xs={12}
lg={4}
className="mx-1 mb-4 d-flex align-items-center row"
>
{localStorage.getItem("pagesonly") ? (
<Toggle
className="mr-2"
defaultChecked={true} defaultChecked={true}
icons={false} icons={false}
onChange={() => { onChange={() => {
localStorage.removeItem('pagesonly'); localStorage.removeItem("pagesonly");
forceUpdate()}} /> : forceUpdate();
<Toggle className="mr-2" }}
/>
) : (
<Toggle
className="mr-2"
defaultChecked={false} defaultChecked={false}
icons={false} icons={false}
onChange={() => { onChange={() => {
localStorage.setItem('pagesonly', 'true') localStorage.setItem("pagesonly", "true");
forceUpdate()}} /> } forceUpdate();
Use only member pages? }}
</BS.Col> />
<BS.Col xs={12} lg={4} className="mx-1 mb-4 d-flex align-items-center row"> )}
{ localStorage.getItem('colorbg') ? Use only member pages?
<Toggle className="mr-2" </BS.Col>
<BS.Col
xs={12}
lg={4}
className="mx-1 mb-4 d-flex align-items-center row"
>
{localStorage.getItem("colorbg") ? (
<Toggle
className="mr-2"
defaultChecked={true} defaultChecked={true}
icons={false} icons={false}
onChange={() => { onChange={() => {
localStorage.removeItem('colorbg'); localStorage.removeItem("colorbg");
forceUpdate()}} /> : forceUpdate();
<Toggle className="mr-2" }}
/>
) : (
<Toggle
className="mr-2"
defaultChecked={false} defaultChecked={false}
icons={false} icons={false}
onChange={() => { onChange={() => {
localStorage.setItem('colorbg', 'false') localStorage.setItem("colorbg", "false");
forceUpdate()}} /> } forceUpdate();
Hide colored backgrounds? }}
</BS.Col> />
<BS.Col xs={12} lg={4} className="mx-1 mb-4 d-flex align-items-center row"> )}
{ localStorage.getItem('expandcards') ? Hide colored backgrounds?
<Toggle className="mr-2" </BS.Col>
<BS.Col
xs={12}
lg={4}
className="mx-1 mb-4 d-flex align-items-center row"
>
{localStorage.getItem("expandcards") ? (
<Toggle
className="mr-2"
defaultChecked={true} defaultChecked={true}
icons={false} icons={false}
onChange={() => { onChange={() => {
localStorage.removeItem('expandcards'); localStorage.removeItem("expandcards");
forceUpdate()}} /> : forceUpdate();
<Toggle className="mr-2" }}
/>
) : (
<Toggle
className="mr-2"
defaultChecked={false} defaultChecked={false}
icons={false} icons={false}
onChange={() => { onChange={() => {
localStorage.setItem('expandcards', 'true') localStorage.setItem("expandcards", "true");
forceUpdate()}} /> } forceUpdate();
Expand member cards on default? }}
</BS.Col> />
</BS.Row> )}
</BS.Card.Body> Expand member cards on default?
</BS.Card> </BS.Col>
); </BS.Row>
</BS.Card.Body>
</BS.Card>
);
}; };
export default Settings; export default Settings;