Make DeleteServerButton more accessible

This commit is contained in:
Alejandro Celaya
2023-09-02 10:48:02 +02:00
parent b20698ecb2
commit 1ef96662a3
4 changed files with 24 additions and 15 deletions

View File

@@ -2,7 +2,3 @@
@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/@shlinkio/shlink-frontend-kit/dist/index'; // After bootstrap. Includes CSS overwrites
@import 'node_modules/@shlinkio/shlink-web-component/dist/index';
* {
outline: none !important;
}

View File

@@ -1,6 +1,7 @@
import { faMinusCircle as deleteIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useToggle } from '@shlinkio/shlink-frontend-kit';
import classNames from 'classnames';
import type { FC, PropsWithChildren } from 'react';
import type { ServerWithId } from './data';
import type { DeleteServerModalProps } from './DeleteServerModal';
@@ -18,10 +19,10 @@ export const DeleteServerButton = (DeleteServerModal: FC<DeleteServerModalProps>
return (
<>
<span className={className} onPointerDown={showModal}>
<button type="button" className={classNames(className, 'p-0 bg-transparent border-0')} onClick={showModal}>
{!children && <FontAwesomeIcon fixedWidth icon={deleteIcon} />}
<span className={textClassName}>{children ?? 'Remove this server'}</span>
</span>
</button>
<DeleteServerModal server={server} isOpen={isModalOpen} toggle={hideModal} />
</>

View File

@@ -9,7 +9,7 @@
.server-error__delete-btn {
color: $dangerColor;
cursor: pointer;
font-weight: inherit;
}
.server-error__delete-btn:hover {