pull in react icons

app/.meteor/packages

@@ -15,10 +15,12 @@ [email protected]    # JS minifier run for production mode
 [email protected]                # ECMAScript 5 compatibility for older browsers
 [email protected]              # Enable ECMAScript2015+ syntax in app code
 [email protected]            # Server-side component of the `meteor shell` command
+[email protected]  # Update client in development without reloading the page
 
 [email protected]                # Allow all DB writes from clients (for prototyping)
 [email protected]
 [email protected]
+
 [email protected]
 [email protected]
 [email protected]

app/.meteor/versions

@@ -6,7 +6,7 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
-[email protected].2
+[email protected].3
 [email protected]
 [email protected]
 [email protected]
@@ -29,8 +29,9 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
-[email protected]
-[email protected]
+[email protected]
+[email protected]
+[email protected]
 [email protected]
 [email protected]
 [email protected]
@@ -48,6 +49,7 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
+[email protected]
 [email protected]
 [email protected]
 [email protected]
@@ -69,10 +71,10 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
-[email protected].0
+[email protected].1
 [email protected]
 [email protected]
-[email protected].1
+[email protected].2
 [email protected]
 [email protected]
 [email protected]

app/client/fret.less

@@ -32,7 +32,7 @@ svg.chord-diag {
 
         text {
             fill: var(--text-inverted);
-            font-weight: 500;
+            font-weight: 700;
         }
     }
 
@@ -43,7 +43,7 @@ svg.chord-diag {
 
         text {
             fill: var(--text-inverted);
-            font-weight: 500;
+            font-weight: 700;
         }
 
         &.open circle, &.muted line {

app/client/icons.less

@@ -53,3 +53,8 @@ svg {
         fill: var(--gray-light);
     }
 }
+
+svg path[fill="none"] {
+    // protect Angular Material Icon's bounding boxes from switching color
+    stroke: transparent;
+}

app/imports/ui/List.tsx

@@ -8,6 +8,7 @@ import Drawer from './Drawer';
 import {navigateTo, routePath, userMayWrite, View} from '../api/helpers';
 import classNames from 'classnames';
 
+import {MdFace, MdFavorite, MdFavoriteBorder, MdSell, MdStyle} from 'react-icons/md';
 
 interface ListItemProps {
     song: Song;
@@ -49,9 +50,12 @@ class ListItem extends React.Component<ListItemProps> {
 
     const darlings = u?.profile?.darlings ?? [];
 
-    const is_darling = darlings.includes(this.props.song._id) ? 'is_darling' : '';
+    const is_darling = darlings.includes(this.props.song._id);
 
-    const darling_or_not = u ? <span onClick={this.toggleDarling} className={'darling ' + is_darling}>{darling_icon}</span> : undefined;
+    const toggler = is_darling ?
+        <span onClick={this.toggleDarling} className='darling is_darling'><MdFavorite/></span> :
+        <span onClick={this.toggleDarling} className='darling'><MdFavoriteBorder/></span>
+    const darling_or_not = u ? toggler : undefined;
 
     return (
       <li><NavLink onClick={this.props.onClickHandler} to={routePath(View.view, this.props.song)}
@@ -65,12 +69,6 @@ class ListItem extends React.Component<ListItemProps> {
   }
 }
 
-const darling_icon = (
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <circle cx="12" cy="12" r="10"/>
-  </svg>
-);
-
 interface ListGroupProps {
   songs: Array<Song>;
   user: Meteor.User;
@@ -252,13 +250,13 @@ class List extends React.Component<ListProps & RouteComponentProps, ListState> {
   };
 
   onTagClick = (event : React.MouseEvent) => {
-    const tag = '#' + event.currentTarget.childNodes[0].textContent.toLowerCase();
+    const tag = ' #' + event.currentTarget.childNodes[0].textContent.toLowerCase();
 
     let newFilter;
     if (this.state.filter.includes(tag)) {
       newFilter = this.state.filter.replace(tag, '');
     } else {
-      newFilter = this.state.filter + tag + ' ';
+      newFilter = this.state.filter + tag;
     }
     this.setFilter(newFilter.replace('  ', ' ').trim());
 
@@ -348,9 +346,8 @@ class List extends React.Component<ListProps & RouteComponentProps, ListState> {
           <span className={'reset ' + filled} onClick={() => {
             this.setFilter('');
           }}>&times;</span>
-          <span className="open-tags" onClick={this.toggleTagsOpen}>Tags</span>
+          <span className="open-tags" onClick={this.toggleTagsOpen}><MdSell /></span>
         </div>
-
         <MetaContent
           replace={process_filtermenu()}
           className={classNames('filterMenu',
@@ -362,14 +359,16 @@ class List extends React.Component<ListProps & RouteComponentProps, ListState> {
           songs={this.props.songs}
         />
         <ul>
+          <h2>aabb</h2>
           {Array.from(groups, ([group, songs]) => {
-              return <ListGroup user={this.props.user} label={group} songs={songs} key={group}
-                                onClickHandler={this.props.hideOnMobile}/>;
-            }
+                return <ListGroup user={this.props.user} label={group} songs={songs} key={group}
+                                  onClickHandler={this.props.hideOnMobile}/>;
+              }
           )}
           {addSong}
         </ul>
         {userLink}
+        <MdFace />
       </Drawer>
     );
   }

app/imports/ui/MobileMenu.tsx

@@ -3,7 +3,7 @@ import {ReactElementLike} from 'prop-types';
 import * as React from 'react';
 import {FC, MouseEventHandler, useRef} from 'react';
 import {useScrollHideEffectRef} from '../api/helpers';
-import {Menu} from './Icons.jsx';
+import { MdManageSearch } from 'react-icons/md';
 
 
 import './mobileMenuStyle.less';
@@ -29,7 +29,7 @@ export const MobileMenu: FC<MobileMenuProps> = (p) => {
   useScrollHideEffectRef(ref, 64);
 
   return <div className={classes} ref={ref}>
-    <span onClick={toggle} id="menu"><Menu /></span>
+    <span onClick={toggle} id="menu"><MdManageSearch /></span>
   </div>;
 };
 

app/package.json

@@ -2,7 +2,6 @@
   "name": "rechords",
   "private": true,
   "scripts": {
-    "//": "0:xx enables to access the the dev server from another computer",
     "start": "meteor --settings settings.json --exclude-archs web.browser.legacy --port 0:3000",
     "startAdvanced": "meteor --settings settings.advanced.json --exclude-archs web.browser.legacy --port 0:3000",
     "debug": "meteor run --inspect",
@@ -34,6 +33,7 @@
     "react-document-title": "^2.0.3",
     "react-dom": "18.2.0",
     "react-error-boundary": "^3.1.3",
+    "react-icons": "^5.2.1",
     "react-redux": "^8.0.5",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^5.1.1",

app/tsconfig.json

@@ -26,6 +26,6 @@
       "core-js",
       "mocha"
     ],
-    "jsx": "react"
+    "jsx": "react",
   }
 }