diff --git a/apps/phone/src/apps/settings/components/SettingItem.tsx b/apps/phone/src/apps/settings/components/SettingItem.tsx index 49058d18b..772be8331 100644 --- a/apps/phone/src/apps/settings/components/SettingItem.tsx +++ b/apps/phone/src/apps/settings/components/SettingItem.tsx @@ -3,16 +3,15 @@ import { ListItem, ListItemText, ListItemIcon, - ListItemButton, ListItemSecondaryAction, Box, Slider, IconButton, Typography, - Switch, } from '@mui/material'; import { Tooltip } from '@ui/components/Tooltip'; import PlayCircleIcon from '@mui/icons-material/PlayCircle'; +import { NPWDButton, ListItem as NPWDListItem, SwitchRoot, SwitchThumb } from '@npwd/keyos'; interface SettingItemProps { options?: any; @@ -29,12 +28,15 @@ export const SettingItem: React.FC = ({ value, onClick, icon, - theme + theme, }) => ( - onClick?.(options)} button> - {icon} - {label}} secondary={{value ? value : undefined}} /> - + onClick?.(options, label)} + button + startElement={icon} + primaryText={label} + secondaryText={value ? value.toString() : null} + /> ); interface SoundItemProps { @@ -56,25 +58,25 @@ export const SoundItem: React.FC = ({ icon, tooltip, onPreviewClicked, - theme }) => ( - - onPreviewClicked()}> + onClick={() => onClick?.(options, label)} + primaryText={label} + secondaryText={value ? value.toString() : undefined} + startElement={icon} + endElement={ + + { + e.stopPropagation(); + onPreviewClicked?.(options, label); + }}> - + } - disablePadding > - onClick?.(options)}> - {icon} - {label}} secondary={{value ? value : undefined}} /> - - + ); interface SettingSliderProps { @@ -90,11 +92,18 @@ export const SettingItemSlider: React.FC = ({ label, value, onCommit, - theme + theme, }) => ( {icon} - {label}} secondary={{value ? value : undefined}} /> + {label}} + secondary={ + + {value ? value : undefined} + + } + /> = ({ onClick, icon, secondary, - theme }) => ( - - {icon} - {label}} secondary={{secondary}} /> - - onClick(value)} /> - - + onClick(value)}> + + + } + /> ); interface SettingItemIconActionProps { @@ -153,23 +164,24 @@ export const SettingItemIconAction: React.FC = ({ actionIcon, labelSecondary, actionLabel, - theme + theme, }) => ( <> - - {icon} - {label}} secondary={{labelSecondary}} /> - + {actionLabel}} - placement="top-end" + placement="left" > - + {actionIcon} - + - - + } + /> ); diff --git a/apps/phone/src/apps/settings/components/SettingsApp.tsx b/apps/phone/src/apps/settings/components/SettingsApp.tsx index b9d75088f..7f68bbe8e 100644 --- a/apps/phone/src/apps/settings/components/SettingsApp.tsx +++ b/apps/phone/src/apps/settings/components/SettingsApp.tsx @@ -13,22 +13,23 @@ import { SoundItem, } from './SettingItem'; import { useTranslation } from 'react-i18next'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; + +import { FileCopy } from '@mui/icons-material'; import { - FilterList, - Brush, + BookA, + EyeOff, + FileMusic, + LayoutGrid, Wallpaper, + Palette, Phone, + ShieldOff, + Volume2, Smartphone, ZoomIn, - LibraryMusic, - VolumeUp, - FileCopy, - Book, - DeleteForever, - Apps, - PersonOff, -} from '@mui/icons-material'; + ListFilter, + Eraser, +} from 'lucide-react'; import makeStyles from '@mui/styles/makeStyles'; import { useTheme } from '@mui/material'; import { useResetSettings, useSettings } from '../hooks/useSettings'; @@ -164,7 +165,6 @@ export const SettingsApp: React.FC = () => { const theme = useTheme(); return ( - {/* Used for picking and viewing a custom wallpaper */}
@@ -185,161 +185,163 @@ export const SettingsApp: React.FC = () => { height: 'auto', }} > - - } - actionIcon={} - handleAction={handleCopyPhoneNumber} - theme={theme} - /> - } - tooltip={t('SETTINGS.PREVIEW_SOUND')} - onPreviewClicked={() => { - fetchNui(SettingEvents.PREVIEW_RINGTONE); - }} - theme={theme} - /> - } - tooltip={t('SETTINGS.PREVIEW_SOUND')} - onPreviewClicked={() => { - fetchNui(SettingEvents.PREVIEW_ALERT); - }} - theme={theme} - /> - } - value={settings.streamerMode} - onClick={(curr) => handleSettingChange('streamerMode', !curr)} - theme={theme} - /> - } - value={settings.anonymousMode} - onClick={(curr) => handleSettingChange('anonymousMode', !curr)} - theme={theme} - /> - } - value={settings.callVolume} - onCommit={(_, val) => handleSettingChange('callVolume', val)} - theme={theme} - /> - - - } - theme={theme} - /> - } - theme={theme} - /> - } - theme={theme} - /> - } - theme={theme} - /> - } - theme={theme} - /> - } - theme={theme} - /> - - - } - theme={theme} - /> - } - theme={theme} - /> - handleSettingChange('TWITTER_notiSoundVol', val)} - icon={} - theme={theme} - /> - - - } - onClick={(curr) => handleSettingChange('MARKETPLACE_notifyNewListing', !curr)} - theme={theme} - /> - - - } - onClick={openMenu} - options={resetSettingsOpts} - theme={theme} - /> - +
+ + } + actionIcon={} + handleAction={handleCopyPhoneNumber} + theme={theme} + /> + } + tooltip={t('SETTINGS.PREVIEW_SOUND')} + onPreviewClicked={() => { + fetchNui(SettingEvents.PREVIEW_RINGTONE); + }} + theme={theme} + /> + } + tooltip={t('SETTINGS.PREVIEW_SOUND')} + onPreviewClicked={() => { + fetchNui(SettingEvents.PREVIEW_ALERT); + }} + theme={theme} + /> + } + value={settings.streamerMode} + onClick={(curr) => handleSettingChange('streamerMode', !curr)} + theme={theme} + /> + } + value={settings.anonymousMode} + onClick={(curr) => handleSettingChange('anonymousMode', !curr)} + theme={theme} + /> + } + value={settings.callVolume} + onCommit={(_, val) => handleSettingChange('callVolume', val)} + theme={theme} + /> + + + } + theme={theme} + /> + } + theme={theme} + /> + } + theme={theme} + /> + } + theme={theme} + /> + } + theme={theme} + /> + } + theme={theme} + /> + + + } + theme={theme} + /> + } + theme={theme} + /> + handleSettingChange('TWITTER_notiSoundVol', val)} + icon={} + theme={theme} + /> + + + } + onClick={(curr) => handleSettingChange('MARKETPLACE_notifyNewListing', !curr)} + theme={theme} + /> + + + } + onClick={openMenu} + options={resetSettingsOpts} + theme={theme} + /> + +
diff --git a/apps/phone/src/apps/settings/components/SettingsCategory.tsx b/apps/phone/src/apps/settings/components/SettingsCategory.tsx index 3b78e26d1..2528db2c0 100644 --- a/apps/phone/src/apps/settings/components/SettingsCategory.tsx +++ b/apps/phone/src/apps/settings/components/SettingsCategory.tsx @@ -1,6 +1,7 @@ -import { List, ListSubheader } from '@mui/material'; +import { ListSubheader } from '@mui/material'; import React from 'react'; import { ListProps } from '@mui/material/List'; +import { List } from '@npwd/keyos'; const SubHeaderComp: React.FC<{ text: string }> = ({ text }) => ( @@ -17,7 +18,10 @@ export const SettingsCategory: React.FC = ({ title, ...otherProps }) => ( - } {...otherProps} disablePadding> - {children} - +
+
+

{title}

+
+ {children} +
); diff --git a/apps/phone/src/ui/components/ContextMenu.tsx b/apps/phone/src/ui/components/ContextMenu.tsx index e061d1e9b..acd780748 100644 --- a/apps/phone/src/ui/components/ContextMenu.tsx +++ b/apps/phone/src/ui/components/ContextMenu.tsx @@ -1,21 +1,8 @@ import React from 'react'; -import { ListItemIcon, ListItemText, Slide, Paper } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; -import { List } from './List'; -import { ListItem } from './ListItem'; +import { Slide } from '@mui/material'; import { useTranslation } from 'react-i18next'; - -const useStyles = makeStyles((theme) => ({ - root: { - borderTop: '1px solid', - borderColor: theme.palette.primary.main, - width: '100%', - minHeight: '10%', - maxHeight: '100%', - zIndex: 2, - overflow: 'auto', - }, -})); +import { ListItem, List } from '@npwd/keyos'; +import { X } from 'lucide-react'; export interface IContextMenuOption { onClick(e, option): void; @@ -30,21 +17,16 @@ interface ContextMenuProps { open: boolean; onClose: () => void; options: Array; + settingLabel: string; } -export const ContextMenu: React.FC = ({ open, onClose, options }) => { - const classes = useStyles(); - const [t] = useTranslation(); - - const _options = onClose - ? [ - ...options, - { - label: t('GENERIC.CLOSE'), - onClick: onClose, - } as IContextMenuOption, - ] - : options; +export const ContextMenu: React.FC = ({ + open, + onClose, + options, + settingLabel, +}) => { + const _options = options; return ( = ({ open, onClose, options mountOnEnter unmountOnExit > - - +
+
+

{settingLabel}

+ +
+ {_options.map((option) => ( { + option.onClick(e, option); + onClose(); + }} + /> + /* = ({ open, onClose, options > {option.icon && {option.icon}} - + */ ))} - +
); }; diff --git a/apps/phone/src/ui/hooks/useContextMenu.tsx b/apps/phone/src/ui/hooks/useContextMenu.tsx index 1419d5d76..11789bd2a 100644 --- a/apps/phone/src/ui/hooks/useContextMenu.tsx +++ b/apps/phone/src/ui/hooks/useContextMenu.tsx @@ -28,18 +28,20 @@ export const MapSettingItem = export const useContextMenu = (_options?: IContextMenuOption[]): UseContextMenu => { const [open, setOpen] = useState(false); const [options, setOptions] = useState(_options || []); + const [label, setLabel] = useState('' as string); const onClose = () => setOpen(false); - const onOpen = (opts) => { + const onOpen = (opts, label) => { setOptions(opts); + setLabel(label); setOpen(true); }; return [ onOpen, onClose, - () => , + () => , open, ]; }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7a8935dde..9fd0d3607 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -509,12 +509,18 @@ importers: packages/ui: dependencies: + '@radix-ui/react-switch': + specifier: ^1.0.3 + version: 1.0.3(@types/react@18.2.6)(react-dom@17.0.2)(react@17.0.2) class-variance-authority: specifier: ^0.4.0 version: 0.4.0(typescript@4.9.5) clsx: specifier: ^2.0.0 version: 2.0.0 + lucide-react: + specifier: ^0.294.0 + version: 0.294.0(react@17.0.2) tailwind-merge: specifier: ^1.10.0 version: 1.10.0 @@ -4823,6 +4829,173 @@ packages: uuid: 8.3.2 dev: false + /@radix-ui/primitive@1.0.1: + resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==} + dependencies: + '@babel/runtime': 7.21.5 + dev: false + + /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.6)(react@17.0.2): + resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.21.5 + '@types/react': 18.2.6 + react: 17.0.2 + dev: false + + /@radix-ui/react-context@1.0.1(@types/react@18.2.6)(react@17.0.2): + resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.21.5 + '@types/react': 18.2.6 + react: 17.0.2 + dev: false + + /@radix-ui/react-primitive@1.0.3(@types/react@18.2.6)(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/react-slot': 1.0.2(@types/react@18.2.6)(react@17.0.2) + '@types/react': 18.2.6 + react: 17.0.2 + react-dom: 17.0.2(react@17.0.2) + dev: false + + /@radix-ui/react-slot@1.0.2(@types/react@18.2.6)(react@17.0.2): + resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@17.0.2) + '@types/react': 18.2.6 + react: 17.0.2 + dev: false + + /@radix-ui/react-switch@1.0.3(@types/react@18.2.6)(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@17.0.2) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.6)(react@17.0.2) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.6)(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.6)(react@17.0.2) + '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.6)(react@17.0.2) + '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.6)(react@17.0.2) + '@types/react': 18.2.6 + react: 17.0.2 + react-dom: 17.0.2(react@17.0.2) + dev: false + + /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.6)(react@17.0.2): + resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.21.5 + '@types/react': 18.2.6 + react: 17.0.2 + dev: false + + /@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.6)(react@17.0.2): + resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.6)(react@17.0.2) + '@types/react': 18.2.6 + react: 17.0.2 + dev: false + + /@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.6)(react@17.0.2): + resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.21.5 + '@types/react': 18.2.6 + react: 17.0.2 + dev: false + + /@radix-ui/react-use-previous@1.0.1(@types/react@18.2.6)(react@17.0.2): + resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.21.5 + '@types/react': 18.2.6 + react: 17.0.2 + dev: false + + /@radix-ui/react-use-size@1.0.1(@types/react@18.2.6)(react@17.0.2): + resolution: {integrity: sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.6)(react@17.0.2) + '@types/react': 18.2.6 + react: 17.0.2 + dev: false + /@rollup/plugin-babel@5.3.1(@babel/core@7.23.2)(rollup@2.77.2): resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==} engines: {node: '>= 10.0.0'}