You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import { AnimatePresence } from 'framer-motion';
|
|
import styled from 'styled-components';
|
|
import { useDispatch } from 'react-redux';
|
|
import { Flex } from '../../basic/Flex';
|
|
import { SpacerMD, SpacerSM } from '../../basic/Text';
|
|
import { updateDebugMenuModal } from '../../../state/ducks/modalDialog';
|
|
import { AboutInfo, DebugActions, FeatureFlags, OtherInfo } from './components';
|
|
import { SessionWrapperModal } from '../../SessionWrapperModal';
|
|
|
|
const StyledContent = styled(Flex)`
|
|
padding-inline: var(--margins-sm);
|
|
|
|
h2 {
|
|
font-size: var(--font-size-xl);
|
|
}
|
|
|
|
h2,
|
|
h3 {
|
|
margin: var(--margins-md) 0;
|
|
padding: 0;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
p,
|
|
i {
|
|
line-height: 1.4;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: start;
|
|
}
|
|
`;
|
|
|
|
export function DebugMenuModal() {
|
|
const dispatch = useDispatch();
|
|
|
|
const onClose = () => {
|
|
dispatch(updateDebugMenuModal(null));
|
|
};
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
<SessionWrapperModal title={'Debug Menu'} onClose={onClose} showExitIcon={true}>
|
|
<StyledContent
|
|
container={true}
|
|
flexDirection="column"
|
|
alignItems="flex-start"
|
|
padding="var(--margins-sm) 0"
|
|
>
|
|
<DebugActions />
|
|
<SpacerSM />
|
|
<FeatureFlags flags={window.sessionFeatureFlags} />
|
|
<SpacerMD />
|
|
<AboutInfo />
|
|
<OtherInfo />
|
|
<SpacerMD />
|
|
</StyledContent>
|
|
</SessionWrapperModal>
|
|
</AnimatePresence>
|
|
);
|
|
}
|