Changed some messages and buttons to make it easier to open bookmarks editor

This commit is contained in:
Paweł Malak
2021-12-02 14:12:23 +01:00
parent 2ca90a18e1
commit 068c8ab2e7
10 changed files with 76 additions and 82 deletions

View File

@@ -15,11 +15,8 @@ import { actionCreators } from '../../../store';
// Typescript
import { Bookmark, Category } from '../../../interfaces';
// CSS
import classes from './Table.module.css';
// UI
import { Table } from '../../UI';
import { Message, Table } from '../../UI';
import { TableActions } from '../../Actions/TableActions';
import { bookmarkTemplate } from '../../../utility';
@@ -108,18 +105,14 @@ export const BookmarksTable = ({ openFormForUpdating }: Props): JSX.Element => {
return (
<Fragment>
{!categoryInEdit ? (
<div className={classes.Message}>
<p>
Switch to grid view and click on the name of category you want to
edit
</p>
</div>
<Message isPrimary={false}>
Switch to grid view and click on the name of category you want to edit
</Message>
) : (
<div className={classes.Message}>
<p>
Editing bookmarks from <span>{categoryInEdit.name}</span> category
</p>
</div>
<Message isPrimary={false}>
Editing bookmarks from&nbsp;<span>{categoryInEdit.name}</span>
&nbsp;category
</Message>
)}
{categoryInEdit && (

View File

@@ -16,11 +16,8 @@ import { actionCreators } from '../../../store';
// Typescript
import { Bookmark, Category } from '../../../interfaces';
// CSS
import classes from './Table.module.css';
// UI
import { Table } from '../../UI';
import { Message, Table } from '../../UI';
import { TableActions } from '../../Actions/TableActions';
interface Props {
@@ -99,7 +96,7 @@ export const CategoryTable = ({ openFormForUpdating }: Props): JSX.Element => {
return (
<Fragment>
<div className={classes.Message}>
<Message isPrimary={false}>
{config.useOrdering === 'orderId' ? (
<p>You can drag and drop single rows to reorder categories</p>
) : (
@@ -108,7 +105,7 @@ export const CategoryTable = ({ openFormForUpdating }: Props): JSX.Element => {
<Link to="/settings/interface">settings</Link>
</p>
)}
</div>
</Message>
<DragDropContext onDragEnd={dragEndHanlder}>
<Droppable droppableId="categories">

View File

@@ -1,17 +0,0 @@
.Message {
width: 100%;
display: flex;
justify-content: center;
align-items: baseline;
color: var(--color-primary);
margin-bottom: 20px;
}
.Message a,
.Message span {
color: var(--color-accent);
}
.Message a:hover {
cursor: pointer;
}