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

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))

client/src/components/Apps/AppTable/AppTable.module.css

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

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 { Message, Table } from '../../UI';
-import { 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">

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)}
           />
+          {showTable && tableContentType === ContentType.bookmark && (
             <ActionButton
-            name="Edit Bookmarks"
+              name="Finish Editing"
               icon="mdiPencil"
-            handler={() => showTableForEditing(ContentType.bookmark)}
+              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}>
+        <Message isPrimary={false}>
-          <p>
+          Switch to grid view and click on the name of category you want to edit
-            Switch to grid view and click on the name of category you want to
+        </Message>
-            edit
-          </p>
-        </div>
       ) : (
-        <div className={classes.Message}>
+        <Message isPrimary={false}>
-          <p>
+          Editing bookmarks from&nbsp;<span>{categoryInEdit.name}</span>
-            Editing bookmarks from <span>{categoryInEdit.name}</span> category
+          &nbsp;category
-          </p>
+        </Message>
-        </div>
       )}
 
       {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;
-}

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

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 => {
+export const Message = ({ children, isPrimary = true }: Props): JSX.Element => {
-  return <p className={classes.message}>{children}</p>;
+  const style = isPrimary ? classes.message : classes.messageCenter;
+
+  return <p className={style}>{children}</p>;
 };