From 8353640d058cbc8d7bbf373ec3d3a66a4c71d9fa Mon Sep 17 00:00:00 2001 From: jeffvli Date: Sat, 12 Nov 2022 18:44:51 -0800 Subject: [PATCH] Update various components --- .../player/components/player-button.tsx | 39 +++-- .../servers/components/server-list-item.tsx | 109 ++++++++++---- .../servers/components/server-list.tsx | 28 ++-- .../settings/components/playback-tab.tsx | 2 + .../titlebar/components/activity-menu.tsx | 2 +- .../features/titlebar/components/app-menu.tsx | 11 +- .../features/titlebar/components/titlebar.tsx | 7 +- .../features/users/components/user-list.tsx | 140 ++++++++++-------- 8 files changed, 205 insertions(+), 133 deletions(-) diff --git a/src/renderer/features/player/components/player-button.tsx b/src/renderer/features/player/components/player-button.tsx index e4700ed19..3290ccaf2 100644 --- a/src/renderer/features/player/components/player-button.tsx +++ b/src/renderer/features/player/components/player-button.tsx @@ -34,42 +34,29 @@ const MotionWrapper = styled(motion.div)` const ButtonMainVariant = css` padding: 0.5rem; - background-color: var(--playerbar-btn-bg); + background: var(--playerbar-btn-main-bg); border-radius: 50%; svg { display: flex; - fill: var(--playerbar-btn-fg); + fill: var(--playerbar-btn-main-fg); } &:focus-visible { - background: var(--playerbar-btn-bg-hover); + background: var(--playerbar-btn-main-bg-hover); } &:hover { - background: var(--playerbar-btn-bg-hover); + background: var(--playerbar-btn-main-bg-hover); svg { - fill: var(--playerbar-btn-fg-hover); + fill: var(--playerbar-btn-main-fg-hover); } } `; const ButtonSecondaryVariant = css` padding: 0.5rem; - - svg { - display: flex; - fill: var(--playerbar-btn-bg); - stroke: var(--playerbar-btn-bg); - } - - &:focus-visible { - svg { - fill: var(--playerbar-btn-bg-hover); - stroke: var(--playerbar-btn-bg-hover); - } - } `; const ButtonTertiaryVariant = css` @@ -81,8 +68,8 @@ const ButtonTertiaryVariant = css` &:focus-visible { svg { - fill: var(--playerbar-btn-bg-hover); - stroke: var(--playerbar-btn-bg-hover); + fill: var(--playerbar-btn-fg-hover); + stroke: var(--playerbar-btn-fg-hover); } } `; @@ -95,6 +82,7 @@ const StyledPlayerButton = styled(UnstyledButton)` width: 100%; padding: 0.5rem; overflow: visible; + background: var(--playerbar-btn-bg-hover); all: unset; cursor: default; @@ -103,6 +91,7 @@ const StyledPlayerButton = styled(UnstyledButton)` } &:focus-visible { + background: var(--playerbar-btn-bg-hover); outline: 1px var(--primary-color) solid; } @@ -111,12 +100,18 @@ const StyledPlayerButton = styled(UnstyledButton)` } svg { - fill: ${({ $isActive }) => $isActive && 'var(--primary-color)'}; + display: flex; + fill: ${({ $isActive }) => + $isActive ? 'var(--primary-color)' : 'var(--playerbar-btn-fg)'}; + stroke: var(--playerbar-btn-fg); } &:hover { + background: var(--playerbar-btn-bg-hover); + svg { - fill: ${({ $isActive }) => !$isActive && 'var(--playerbar-btn-bg-hover)'}; + fill: ${({ $isActive }) => + $isActive ? 'var(--primary-color)' : 'var(--playerbar-btn-fg-hover)'}; } } diff --git a/src/renderer/features/servers/components/server-list-item.tsx b/src/renderer/features/servers/components/server-list-item.tsx index 9d3bba90e..363e57e05 100644 --- a/src/renderer/features/servers/components/server-list-item.tsx +++ b/src/renderer/features/servers/components/server-list-item.tsx @@ -2,10 +2,16 @@ import { useMemo } from 'react'; import { Stack, Group, Divider } from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; import { useQueryClient } from '@tanstack/react-query'; -import { RiDeleteBin2Line, RiEdit2Fill } from 'react-icons/ri'; +import { RiDeleteBin2Line, RiEdit2Fill, RiMore2Fill } from 'react-icons/ri'; import { queryKeys } from '@/renderer/api/query-keys'; import { Server, TaskType } from '@/renderer/api/types'; -import { Button, Switch, Text, toast } from '@/renderer/components'; +import { + Button, + DropdownMenu, + Switch, + Text, + toast, +} from '@/renderer/components'; import { AddServerCredentialForm } from '@/renderer/features/servers/components/add-server-credential-form'; import { AddServerUrlForm } from '@/renderer/features/servers/components/add-server-url-form'; import { EditServerForm } from '@/renderer/features/servers/components/edit-server-form'; @@ -134,14 +140,26 @@ export const ServerListItem = ({ server }: ServerListItemProps) => { const handleToggleFolder = (folderId: string, enabled: boolean) => { if (enabled) { - return disableServerFolder.mutate({ - query: { folderId, serverId: server.id }, - }); + return disableServerFolder.mutate( + { + query: { folderId, serverId: server.id }, + }, + { + onError: (err) => + toast.error({ message: err?.response?.data?.error.message }), + } + ); } - return enableServerFolder.mutate({ - query: { folderId, serverId: server.id }, - }); + return enableServerFolder.mutate( + { + query: { folderId, serverId: server.id }, + }, + { + onError: (err) => + toast.error({ message: err?.response?.data?.error.message }), + } + ); }; return ( @@ -228,9 +246,23 @@ export const ServerListItem = ({ server }: ServerListItemProps) => { } /> {serverPermission >= ServerPermission.ADMIN && ( - + + + + + + + } + > + Delete + + + )} @@ -261,13 +293,25 @@ export const ServerListItem = ({ server }: ServerListItemProps) => { ) } /> - + + + + + + + } + onClick={() => + handleDeleteCredential(credential.id) + } + > + Delete + + + ))} @@ -275,7 +319,7 @@ export const ServerListItem = ({ server }: ServerListItemProps) => { + + + + + + + } + onClick={() => handleDeleteUrl(serverUrl.id)} + > + Delete + + + )} @@ -323,7 +377,7 @@ export const ServerListItem = ({ server }: ServerListItemProps) => { + + {permissions.isAdmin && ( + + )} {servers?.data?.map((s) => ( diff --git a/src/renderer/features/settings/components/playback-tab.tsx b/src/renderer/features/settings/components/playback-tab.tsx index b68cbac39..38d1e0e14 100644 --- a/src/renderer/features/settings/components/playback-tab.tsx +++ b/src/renderer/features/settings/components/playback-tab.tsx @@ -187,6 +187,7 @@ export const PlaybackTab = () => { { control: ( { @@ -241,6 +242,7 @@ export const PlaybackTab = () => { { control: ( update({ diff --git a/src/renderer/features/titlebar/components/activity-menu.tsx b/src/renderer/features/titlebar/components/activity-menu.tsx index 922a59e48..bb34e1898 100644 --- a/src/renderer/features/titlebar/components/activity-menu.tsx +++ b/src/renderer/features/titlebar/components/activity-menu.tsx @@ -73,7 +73,7 @@ export const ActivityMenu = () => { {isTaskRunning ? ( ) : ( - + )} diff --git a/src/renderer/features/titlebar/components/app-menu.tsx b/src/renderer/features/titlebar/components/app-menu.tsx index 8cf626a61..71d018392 100644 --- a/src/renderer/features/titlebar/components/app-menu.tsx +++ b/src/renderer/features/titlebar/components/app-menu.tsx @@ -92,13 +92,8 @@ export const AppMenu = () => { return ( - @@ -138,7 +133,7 @@ export const AppMenu = () => { }> Edit profile - {permissions.manageUsers && ( + {permissions.isAdmin && ( } onClick={handleManageUsersModal} diff --git a/src/renderer/features/titlebar/components/titlebar.tsx b/src/renderer/features/titlebar/components/titlebar.tsx index 3c9b6d038..6b9131e72 100644 --- a/src/renderer/features/titlebar/components/titlebar.tsx +++ b/src/renderer/features/titlebar/components/titlebar.tsx @@ -1,11 +1,9 @@ import { ReactNode } from 'react'; import { Group } from '@mantine/core'; import styled from 'styled-components'; -import { Text } from '@/renderer/components'; import { ActivityMenu } from '@/renderer/features/titlebar/components/activity-menu'; import { AppMenu } from '@/renderer/features/titlebar/components/app-menu'; import { useAuthStore } from '@/renderer/store'; -import { Font } from '@/renderer/styles'; import { WindowControls } from '../../window-controls'; interface TitlebarProps { @@ -20,6 +18,7 @@ const TitlebarContainer = styled.div` justify-content: space-between; width: 100%; height: 100%; + color: var(--titlebar-fg); button { -webkit-app-region: no-drag; @@ -59,9 +58,7 @@ export const Titlebar = ({ children }: TitlebarProps) => { <> - - Feishin - + Feishin
diff --git a/src/renderer/features/users/components/user-list.tsx b/src/renderer/features/users/components/user-list.tsx index d872019bd..cd1675a3e 100644 --- a/src/renderer/features/users/components/user-list.tsx +++ b/src/renderer/features/users/components/user-list.tsx @@ -1,11 +1,17 @@ +import React from 'react'; import { Avatar, Group, Stack } from '@mantine/core'; import { openContextModal } from '@mantine/modals'; -import { RiAdminLine, RiDeleteBin2Line, RiEdit2Line } from 'react-icons/ri'; +import { + RiAdminLine, + RiDeleteBin2Line, + RiEdit2Line, + RiMore2Fill, +} from 'react-icons/ri'; import { User } from '@/renderer/api/types'; import { Button, ContextModalVars, - Popover, + DropdownMenu, Text, toast, Tooltip, @@ -74,75 +80,87 @@ export const UserList = () => { return ( - - {users?.data?.map((u) => ( - - - - - {u.displayName ? u.displayName : u.username}{' '} - {u.isAdmin && ( - - - - - - )} - - - - - - - - - - + + + + + + + {u.username} + {(u.isSuperAdmin || u.isAdmin) && ( + + + + + + )} + + + {u.displayName} + + + + + + + + + + + } onClick={() => handleDeleteUser(u)} > Delete - - - - + + + + - + ))} );