Minor fixes
This commit is contained in:
@@ -97,7 +97,7 @@ export function BackgroundModal({
|
|||||||
}}
|
}}
|
||||||
fullScreen={isMobile}
|
fullScreen={isMobile}
|
||||||
centered
|
centered
|
||||||
keepMounted={false}
|
keepMounted={true}
|
||||||
>
|
>
|
||||||
<Modal.Overlay />
|
<Modal.Overlay />
|
||||||
<Modal.Content>
|
<Modal.Content>
|
||||||
|
|||||||
@@ -1,95 +0,0 @@
|
|||||||
import { ColorSwatch, Group, Stack, Text } from '@mantine/core';
|
|
||||||
import { colorSwatchClasses, textClasses } from 'styles';
|
|
||||||
import type { Theme } from 'types';
|
|
||||||
|
|
||||||
export function ThemeModalColorSwatches({
|
|
||||||
selectedTheme,
|
|
||||||
openPicker,
|
|
||||||
setColorId,
|
|
||||||
setColorValue,
|
|
||||||
}: {
|
|
||||||
selectedTheme: Theme;
|
|
||||||
openPicker: () => void;
|
|
||||||
setColorId: (colorId: string) => void;
|
|
||||||
setColorValue: (colorValue: string) => void;
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<Stack justify='center'>
|
|
||||||
<Group justify='space-between'>
|
|
||||||
<Text className={textClasses.label} classNames={textClasses}>
|
|
||||||
Primary Color
|
|
||||||
</Text>
|
|
||||||
<ColorSwatch
|
|
||||||
onClick={() => {
|
|
||||||
setColorId('primaryColor');
|
|
||||||
openPicker();
|
|
||||||
setColorValue(selectedTheme.primaryColor);
|
|
||||||
}}
|
|
||||||
color={selectedTheme.primaryColor}
|
|
||||||
className={colorSwatchClasses.default}
|
|
||||||
classNames={colorSwatchClasses}
|
|
||||||
/>
|
|
||||||
</Group>
|
|
||||||
<Group justify='space-between'>
|
|
||||||
<Text className={textClasses.label} classNames={textClasses}>
|
|
||||||
Accent Color
|
|
||||||
</Text>
|
|
||||||
<ColorSwatch
|
|
||||||
onClick={() => {
|
|
||||||
setColorId('accentColor');
|
|
||||||
openPicker();
|
|
||||||
setColorValue(selectedTheme.accentColor);
|
|
||||||
}}
|
|
||||||
color={selectedTheme.accentColor}
|
|
||||||
className={colorSwatchClasses.default}
|
|
||||||
classNames={colorSwatchClasses}
|
|
||||||
/>
|
|
||||||
</Group>
|
|
||||||
<Group justify='space-between'>
|
|
||||||
<Text className={textClasses.label} classNames={textClasses}>
|
|
||||||
Background Color
|
|
||||||
</Text>
|
|
||||||
<ColorSwatch
|
|
||||||
onClick={() => {
|
|
||||||
setColorId('background');
|
|
||||||
openPicker();
|
|
||||||
setColorValue(selectedTheme.backgroundColor);
|
|
||||||
}}
|
|
||||||
color={selectedTheme.backgroundColor}
|
|
||||||
className={colorSwatchClasses.default}
|
|
||||||
classNames={colorSwatchClasses}
|
|
||||||
/>
|
|
||||||
</Group>
|
|
||||||
<Group justify='space-between'>
|
|
||||||
<Text className={textClasses.label} classNames={textClasses}>
|
|
||||||
Border Color
|
|
||||||
</Text>
|
|
||||||
<ColorSwatch
|
|
||||||
onClick={() => {
|
|
||||||
setColorId('borderColor');
|
|
||||||
openPicker();
|
|
||||||
setColorValue(selectedTheme.borderColor);
|
|
||||||
}}
|
|
||||||
color={selectedTheme.borderColor}
|
|
||||||
className={colorSwatchClasses.default}
|
|
||||||
classNames={colorSwatchClasses}
|
|
||||||
/>
|
|
||||||
</Group>
|
|
||||||
<Group justify='space-between'>
|
|
||||||
<Text className={textClasses.label} classNames={textClasses}>
|
|
||||||
Search Background Color
|
|
||||||
</Text>
|
|
||||||
<ColorSwatch
|
|
||||||
onClick={() => {
|
|
||||||
setColorId('searchBackground');
|
|
||||||
openPicker();
|
|
||||||
setColorValue(selectedTheme.searchColor);
|
|
||||||
}}
|
|
||||||
color={selectedTheme.searchColor}
|
|
||||||
className={colorSwatchClasses.default}
|
|
||||||
classNames={colorSwatchClasses}
|
|
||||||
/>
|
|
||||||
</Group>
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,5 +1,4 @@
|
|||||||
import { Select, Stack, Text } from '@mantine/core';
|
import { Select, Stack, Text } from '@mantine/core';
|
||||||
import SearchSelectItem from 'pages/homepage/components/Search/SearchSelectItem';
|
|
||||||
import { selectClasses } from 'styles';
|
import { selectClasses } from 'styles';
|
||||||
import type { Theme } from 'types';
|
import type { Theme } from 'types';
|
||||||
import { ThemeExampleApp } from './ThemeExampleApp';
|
import { ThemeExampleApp } from './ThemeExampleApp';
|
||||||
@@ -51,15 +50,6 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
|
|||||||
autoFocus={false}
|
autoFocus={false}
|
||||||
leftSection={'Google Search'}
|
leftSection={'Google Search'}
|
||||||
rightSection={<div />}
|
rightSection={<div />}
|
||||||
renderOption={(item: any) => {
|
|
||||||
return (
|
|
||||||
<SearchSelectItem
|
|
||||||
item={item}
|
|
||||||
handleSearchHistoryItem={undefined}
|
|
||||||
searchEndpoint={undefined}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
<Stack gap={0} w={'100%'}>
|
<Stack gap={0} w={'100%'}>
|
||||||
<Text
|
<Text
|
||||||
|
|||||||
@@ -5,7 +5,6 @@ export { ThemeExampleApp } from './ThemeExampleApp';
|
|||||||
export { ThemeManagementPill } from './ThemeManagementPill';
|
export { ThemeManagementPill } from './ThemeManagementPill';
|
||||||
export { ThemeMiniCard } from './ThemeMiniCard';
|
export { ThemeMiniCard } from './ThemeMiniCard';
|
||||||
export { ThemeModal } from './ThemeModal/ThemeModal';
|
export { ThemeModal } from './ThemeModal/ThemeModal';
|
||||||
export { ThemeModalColorSwatches } from './ThemeModalColorSwatches';
|
|
||||||
export { ThemeModalContent } from './ThemeModalContent';
|
export { ThemeModalContent } from './ThemeModalContent';
|
||||||
export { ThemePreviewMiddleware } from './ThemePreviewMiddleware';
|
export { ThemePreviewMiddleware } from './ThemePreviewMiddleware';
|
||||||
export { ThemeSelect } from './ThemeSelect';
|
export { ThemeSelect } from './ThemeSelect';
|
||||||
|
|||||||
Reference in New Issue
Block a user