From 068c8ab2e75398025bc0c266302bb2659d2cd29c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Malak?= <pawel999@icloud.com>
Date: Thu, 2 Dec 2021 14:12:23 +0100
Subject: [PATCH] Changed some messages and buttons to make it easier to open
 bookmarks editor

---
 CHANGELOG.md                                  |  3 ++
 .../Apps/AppTable/AppTable.module.css         | 29 ----------------
 .../src/components/Apps/AppTable/AppTable.tsx |  7 ++--
 .../Bookmarks/BookmarkCard/BookmarkCard.tsx   | 11 ++++--
 client/src/components/Bookmarks/Bookmarks.tsx | 34 +++++++++++++++----
 .../Bookmarks/Table/BookmarksTable.tsx        | 23 +++++--------
 .../Bookmarks/Table/CategoryTable.tsx         |  9 ++---
 .../Bookmarks/Table/Table.module.css          | 17 ----------
 .../UI/Text/Message/Message.module.css        | 18 ++++++++++
 .../components/UI/Text/Message/Message.tsx    |  7 ++--
 10 files changed, 76 insertions(+), 82 deletions(-)
 delete mode 100644 client/src/components/Apps/AppTable/AppTable.module.css
 delete mode 100644 client/src/components/Bookmarks/Table/Table.module.css

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 329b2dc..9d63c11 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,6 @@
+### v2.1.1 (TBA)
+- Changed some messages and buttons to make it easier to open bookmarks editor ([#239](https://github.com/pawelmalak/flame/issues/239))
+
 ### v2.1.0 (2021-11-26)
 - Added option to set custom order for bookmarks ([#43](https://github.com/pawelmalak/flame/issues/43)) and ([#187](https://github.com/pawelmalak/flame/issues/187))
 - Added support for .ico files for custom icons ([#209](https://github.com/pawelmalak/flame/issues/209))
diff --git a/client/src/components/Apps/AppTable/AppTable.module.css b/client/src/components/Apps/AppTable/AppTable.module.css
deleted file mode 100644
index 8b1e0ed..0000000
--- a/client/src/components/Apps/AppTable/AppTable.module.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.TableActions {
-  display: flex;
-  align-items: center;
-}
-
-.TableAction {
-  width: 22px;
-}
-
-.TableAction:hover {
-  cursor: pointer;
-}
-
-.Message {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: baseline;
-  color: var(--color-primary);
-  margin-bottom: 20px;
-}
-
-.Message a {
-  color: var(--color-accent);
-}
-
-.Message a:hover {
-  cursor: pointer;
-}
\ No newline at end of file
diff --git a/client/src/components/Apps/AppTable/AppTable.tsx b/client/src/components/Apps/AppTable/AppTable.tsx
index aa23797..003e1a7 100644
--- a/client/src/components/Apps/AppTable/AppTable.tsx
+++ b/client/src/components/Apps/AppTable/AppTable.tsx
@@ -17,8 +17,7 @@ import { actionCreators } from '../../../store';
 import { App } from '../../../interfaces';
 
 // Other
-import classes from './AppTable.module.css';
-import { Table } from '../../UI';
+import { Message, Table } from '../../UI';
 import { TableActions } from '../../Actions/TableActions';
 
 interface Props {
@@ -89,7 +88,7 @@ export const AppTable = (props: 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 application</p>
         ) : (
@@ -98,7 +97,7 @@ export const AppTable = (props: Props): JSX.Element => {
             <Link to="/settings/interface">settings</Link>
           </p>
         )}
-      </div>
+      </Message>
 
       <DragDropContext onDragEnd={dragEndHanlder}>
         <Droppable droppableId="apps">
diff --git a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx b/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx
index 8891460..d306655 100644
--- a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx
+++ b/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);
           }
         }}
diff --git a/client/src/components/Bookmarks/Bookmarks.tsx b/client/src/components/Bookmarks/Bookmarks.tsx
index a708995..0905711 100644
--- a/client/src/components/Bookmarks/Bookmarks.tsx
+++ b/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 ? (
diff --git a/client/src/components/Bookmarks/Table/BookmarksTable.tsx b/client/src/components/Bookmarks/Table/BookmarksTable.tsx
index dd0f447..86f0db0 100644
--- a/client/src/components/Bookmarks/Table/BookmarksTable.tsx
+++ b/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 && (
diff --git a/client/src/components/Bookmarks/Table/CategoryTable.tsx b/client/src/components/Bookmarks/Table/CategoryTable.tsx
index 124bd35..d909cab 100644
--- a/client/src/components/Bookmarks/Table/CategoryTable.tsx
+++ b/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">
diff --git a/client/src/components/Bookmarks/Table/Table.module.css b/client/src/components/Bookmarks/Table/Table.module.css
deleted file mode 100644
index 89ff6ca..0000000
--- a/client/src/components/Bookmarks/Table/Table.module.css
+++ /dev/null
@@ -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;
-}
diff --git a/client/src/components/UI/Text/Message/Message.module.css b/client/src/components/UI/Text/Message/Message.module.css
index e459212..2125916 100644
--- a/client/src/components/UI/Text/Message/Message.module.css
+++ b/client/src/components/UI/Text/Message/Message.module.css
@@ -6,3 +6,21 @@
   color: var(--color-accent);
   font-weight: 600;
 }
+
+.messageCenter {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  color: var(--color-primary);
+  margin-bottom: 20px;
+}
+
+.messageCenter a,
+.messageCenter span {
+  color: var(--color-accent);
+}
+
+.messageCenter a:hover {
+  cursor: pointer;
+}
diff --git a/client/src/components/UI/Text/Message/Message.tsx b/client/src/components/UI/Text/Message/Message.tsx
index 2409f1c..5e0ef56 100644
--- a/client/src/components/UI/Text/Message/Message.tsx
+++ b/client/src/components/UI/Text/Message/Message.tsx
@@ -4,8 +4,11 @@ import classes from './Message.module.css';
 
 interface Props {
   children: ReactNode;
+  isPrimary?: boolean;
 }
 
-export const Message = ({ children }: Props): JSX.Element => {
-  return <p className={classes.message}>{children}</p>;
+export const Message = ({ children, isPrimary = true }: Props): JSX.Element => {
+  const style = isPrimary ? classes.message : classes.messageCenter;
+
+  return <p className={style}>{children}</p>;
 };