fb737e2021
* Refactor icons passed as props with the new way Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> * Update more files Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> * Fix according to review * Fix according to review * Fix according to review * Fix chromatic regressions --------- Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> Co-authored-by: Charles Bochet <charles@twenty.com>
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import styled from '@emotion/styled';
|
|
|
|
import { ColorSchemePicker } from '@/ui/color-scheme/components/ColorSchemePicker';
|
|
import { IconSettings } from '@/ui/icon';
|
|
import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
|
|
import { Section } from '@/ui/section/components/Section';
|
|
import { useColorScheme } from '@/ui/theme/hooks/useColorScheme';
|
|
import { H1Title } from '@/ui/typography/components/H1Title';
|
|
import { H2Title } from '@/ui/typography/components/H2Title';
|
|
|
|
const StyledContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: ${({ theme }) => theme.spacing(8)};
|
|
padding-bottom: ${({ theme }) => theme.spacing(10)};
|
|
width: 350px;
|
|
`;
|
|
|
|
export function SettingsExperience() {
|
|
const { colorScheme, setColorScheme } = useColorScheme();
|
|
|
|
return (
|
|
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
|
|
<StyledContainer>
|
|
<H1Title title="Experience" />
|
|
<Section>
|
|
<H2Title title="Appearance" />
|
|
<ColorSchemePicker value={colorScheme} onChange={setColorScheme} />
|
|
</Section>
|
|
</StyledContainer>
|
|
</SubMenuTopBarContainer>
|
|
);
|
|
}
|