Refactor add to playlist modal (#1236)

* Refactor add to playlist modal

* redesign base modal component, add ModalButton component

* improve visibility of filled button focus

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>
This commit is contained in:
Kendall Garner
2025-11-02 04:57:12 +00:00
committed by GitHub
parent 829c27a5e9
commit 1a176fd118
18 changed files with 667 additions and 225 deletions
@@ -11,9 +11,9 @@ import JellyfinIcon from '/@/renderer/features/servers/assets/jellyfin.png';
import NavidromeIcon from '/@/renderer/features/servers/assets/navidrome.png';
import SubsonicIcon from '/@/renderer/features/servers/assets/opensubsonic.png';
import { useAuthStoreActions } from '/@/renderer/store';
import { Button } from '/@/shared/components/button/button';
import { Checkbox } from '/@/shared/components/checkbox/checkbox';
import { Group } from '/@/shared/components/group/group';
import { ModalButton } from '/@/shared/components/modal/model-shared';
import { Paper } from '/@/shared/components/paper/paper';
import { PasswordInput } from '/@/shared/components/password-input/password-input';
import { SegmentedControl } from '/@/shared/components/segmented-control/segmented-control';
@@ -298,20 +298,18 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
})}
/>
)}
<Group grow justify="flex-end">
<Group justify="flex-end">
{onCancel && (
<Button onClick={onCancel} variant="subtle">
{t('common.cancel', { postProcess: 'titleCase' })}
</Button>
<ModalButton onClick={onCancel}>{t('common.cancel')}</ModalButton>
)}
<Button
<ModalButton
disabled={isSubmitDisabled}
loading={isLoading}
type="submit"
variant="filled"
>
{t('common.add', { postProcess: 'titleCase' })}
</Button>
{t('common.add')}
</ModalButton>
</Group>
</Stack>
</form>
@@ -9,10 +9,10 @@ import i18n from '/@/i18n/i18n';
import { api } from '/@/renderer/api';
import { queryClient } from '/@/renderer/lib/react-query';
import { useAuthStoreActions } from '/@/renderer/store';
import { Button } from '/@/shared/components/button/button';
import { Checkbox } from '/@/shared/components/checkbox/checkbox';
import { Group } from '/@/shared/components/group/group';
import { Icon } from '/@/shared/components/icon/icon';
import { ModalButton } from '/@/shared/components/modal/model-shared';
import { PasswordInput } from '/@/shared/components/password-input/password-input';
import { Stack } from '/@/shared/components/stack/stack';
import { TextInput } from '/@/shared/components/text-input/text-input';
@@ -216,12 +216,10 @@ export const EditServerForm = ({ isUpdate, onCancel, password, server }: EditSer
/>
)}
<Group justify="flex-end">
<Button onClick={onCancel} variant="subtle">
{t('common.cancel', { postProcess: 'titleCase' })}
</Button>
<Button loading={isLoading} type="submit" variant="filled">
{t('common.save', { postProcess: 'titleCase' })}
</Button>
<ModalButton onClick={onCancel}>{t('common.cancel')}</ModalButton>
<ModalButton loading={isLoading} type="submit" variant="filled">
{t('common.save')}
</ModalButton>
</Group>
</Stack>
</form>