Zakhar Timoshenko
81b2c7d675
- Added new icons for settings and theme options in Icons.tsx. - Enhanced local storage functions to return success status in storage.ts. - Updated styles to support new theme settings in styles.scss. - Created a new settings page with theme selection options in Settings.tsx. - Implemented theme management logic in theme.ts, allowing users to choose between system, light, and dark themes. - Added Playwright tests for theme settings functionality in settings.spec.ts. - Introduced new SCSS file for settings styles in _settings.scss.
48 lines
2.3 KiB
TypeScript
48 lines
2.3 KiB
TypeScript
import {
|
|
Icon20ArrowDownOutline, Icon20ArrowRightOutline, Icon20ArrowUpRightOutline,
|
|
Icon20BusOutline, Icon20Check, Icon20ClockOutline, Icon20DownloadOutline,
|
|
Icon20GlobeCrossOutline, Icon20RefreshOutline, Icon20ShareOutline,
|
|
Icon24Bookmark, Icon24BookmarkOutline, Icon24Cancel,
|
|
Icon24ChevronDown, Icon24LocationOutline, Icon24SearchOutline,
|
|
Icon24Add, Icon24HomeOutline, Icon24WorkOutline, Icon24WarningTriangleOutline,
|
|
Icon28SettingsOutline, Icon28MoonOutline, Icon28SunOutline, Icon28ComputerSmartphoneOutline,
|
|
} from '@vkontakte/icons';
|
|
import type { ComponentType } from 'react';
|
|
|
|
type IconProps = { size?: number; className?: string };
|
|
type VkIcon = ComponentType<{ width?: number; height?: number; className?: string }>;
|
|
|
|
function adapt(Icon: VkIcon) {
|
|
return function AppIcon({ size = 20, className }: IconProps) {
|
|
return <Icon width={size} height={size} className={className} aria-hidden="true" />;
|
|
};
|
|
}
|
|
|
|
export const ArrowDown = adapt(Icon20ArrowDownOutline);
|
|
export const ArrowRight = adapt(Icon20ArrowRightOutline);
|
|
export const ArrowUpRight = adapt(Icon20ArrowUpRightOutline);
|
|
export const BusFront = adapt(Icon20BusOutline);
|
|
export const Check = adapt(Icon20Check);
|
|
export const Clock3 = adapt(Icon20ClockOutline);
|
|
export const Download = adapt(Icon20DownloadOutline);
|
|
export const WifiOff = adapt(Icon20GlobeCrossOutline);
|
|
export const RefreshCw = adapt(Icon20RefreshOutline);
|
|
export const X = adapt(Icon24Cancel);
|
|
export const ChevronDown = adapt(Icon24ChevronDown);
|
|
export const MapPin = adapt(Icon24LocationOutline);
|
|
export const Search = adapt(Icon24SearchOutline);
|
|
export const Plus = adapt(Icon24Add);
|
|
export const Home = adapt(Icon24HomeOutline);
|
|
export const Work = adapt(Icon24WorkOutline);
|
|
export const Warning = adapt(Icon24WarningTriangleOutline);
|
|
export const Share = adapt(Icon20ShareOutline);
|
|
export const SettingsIcon = adapt(Icon28SettingsOutline);
|
|
export const Moon = adapt(Icon28MoonOutline);
|
|
export const Sun = adapt(Icon28SunOutline);
|
|
export const Devices = adapt(Icon28ComputerSmartphoneOutline);
|
|
|
|
export function Bookmark({ size = 24, className, fill }: IconProps & { fill?: string }) {
|
|
const Icon = fill === 'currentColor' ? Icon24Bookmark : Icon24BookmarkOutline;
|
|
return <Icon width={size} height={size} className={className} aria-hidden="true" />;
|
|
}
|