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

client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx

@@ -22,7 +22,10 @@ interface Props {
 export const BookmarkCard = (props: Props): JSX.Element => {
   const { category, fromHomepage = false } = props;
 
-  const { config } = useSelector((state: State) => state.config);
+  const {
+    config: { config },
+    auth: { isAuthenticated },
+  } = useSelector((state: State) => state);
 
   const dispatch = useDispatch();
   const { setEditCategory } = bindActionCreators(actionCreators, dispatch);
@@ -30,9 +33,11 @@ export const BookmarkCard = (props: Props): JSX.Element => {
   return (
     <div className={classes.BookmarkCard}>
       <h3
-        className={fromHomepage ? '' : classes.BookmarkHeader}
+        className={
+          fromHomepage || !isAuthenticated ? '' : classes.BookmarkHeader
+        }
         onClick={() => {
-          if (!fromHomepage) {
+          if (!fromHomepage && isAuthenticated) {
             setEditCategory(category);
           }
         }}

client/src/components/Bookmarks/Bookmarks.tsx

@@ -14,7 +14,14 @@ import { Category, Bookmark } from '../../interfaces';
 import classes from './Bookmarks.module.css';
 
 // UI
-import { Container, Headline, ActionButton, Spinner, Modal } from '../UI';
+import {
+  Container,
+  Headline,
+  ActionButton,
+  Spinner,
+  Modal,
+  Message,
+} from '../UI';
 
 // Components
 import { BookmarkGrid } from './BookmarkGrid/BookmarkGrid';
@@ -121,6 +128,11 @@ export const Bookmarks = (props: Props): JSX.Element => {
     }
   };
 
+  const finishEditing = () => {
+    setShowTable(false);
+    setEditCategory(null);
+  };
+
   return (
     <Container>
       <Modal isOpen={modalIsOpen} setIsOpen={toggleModal}>
@@ -150,14 +162,24 @@ export const Bookmarks = (props: Props): JSX.Element => {
             icon="mdiPencil"
             handler={() => showTableForEditing(ContentType.category)}
           />
-          <ActionButton
-            name="Edit Bookmarks"
-            icon="mdiPencil"
-            handler={() => showTableForEditing(ContentType.bookmark)}
-          />
+          {showTable && tableContentType === ContentType.bookmark && (
+            <ActionButton
+              name="Finish Editing"
+              icon="mdiPencil"
+              handler={finishEditing}
+            />
+          )}
         </div>
       )}
 
+      {categories.length && isAuthenticated && !showTable ? (
+        <Message isPrimary={false}>
+          Click on category name to edit its bookmarks
+        </Message>
+      ) : (
+        <></>
+      )}
+
       {loading ? (
         <Spinner />
       ) : !showTable ? (

client/src/components/Bookmarks/Table/BookmarksTable.tsx

@@ -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 && (

client/src/components/Bookmarks/Table/CategoryTable.tsx

@@ -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">

client/src/components/Bookmarks/Table/Table.module.css

@@ -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;
-}