external-repos/LifeTrinket
1
0
Fork 1
mirror of https://github.com/Vikeo/LifeTrinket.git synced 2025-11-16 07:47:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

finish up tailwind

Browse Source
This commit is contained in:
Viktor Rådberg
2024-01-13 14:50:36 +01:00
parent 3cd982c643
commit 4f231ba6f4
19 changed files with 274 additions and 581 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/Components/Misc/SettingsModal.tsx
View File

@@ -1,38 +1,17 @@
import { Button, FormLabel, Modal, Switch } from '@mui/material';
import { ModalWrapper } from './InfoModal';
import styled from 'styled-components';
import { twc } from 'react-twc';
import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
import { theme } from '../../Data/theme';
import { ModalWrapper } from './InfoModal';
import { Separator } from './Separator';
import { Paragraph } from './TextComponents';
const SettingContainer = styled.div`
width: 100%;
display: flex;
flex-direction: column;
`;
const SettingContainer = twc.div`w-full flex flex-col`;
const ToggleContainer = styled.div`
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
`;
const ToggleContainer = twc.div`flex flex-row justify-between items-center`;
const Container = styled.div`
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
`;
const Container = twc.div`flex flex-col items-center w-full`;
const Description = styled.p`
margin-top: -0.25rem;
margin-right: 3.5rem;
font-size: 0.8rem;
text-align: left;
color: ${theme.palette.text.secondary};
`;
const Description = twc.p`mr-16 text-xs text-left text-text-secondary`;
type SettingsModalProps = {
isOpen: boolean;
@@ -100,7 +79,7 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
</SettingContainer>
{!isPWA && (
<>
<Separator height="2px" />
<Separator height="1px" />
<SettingContainer>
<ToggleContainer>
<Paragraph>
@@ -110,19 +89,19 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
normal app!
</Paragraph>
</ToggleContainer>
<Description>
<Description className="mt-1">
If you do, this app will work offline and the toolbar will be
automatically hidden.
</Description>
</SettingContainer>
</>
)}
<Separator height="2px" />
<Separator height="1px" />
<SettingContainer>
{/* @ts-expect-error is defined in vite.config.ts*/}
<Paragraph>Version: {APP_VERSION}</Paragraph>
</SettingContainer>
<Separator height="2px" />
<Separator height="1px" />
<Button variant="contained" onClick={closeModal}>
Save and Close