Show horizontal line when itemName is <hr>

Author: Robb Satterwhite

src/components/SortableItemUnit.js

@@ -55,6 +55,7 @@ export function SortableItemUnit(props) {
     setItemNote(props.item.itemNote);
   };
 
+  const showHR = props.item.itemName==='<hr>';
   return (
     <Fragment>
       { !editMode &&
@@ -65,12 +66,17 @@ export function SortableItemUnit(props) {
                 <div className='dragHandleIcon'>{ MakeDragIcon() }</div>
               </div>
               <div className='itemPart23'>
+                { !showHR &&
                 <div className='itemPart2'>
                   {props.item.itemName}
                 </div>
-                <div className='itemPart3 xhidden'>
+                }
+                { !showHR &&
+                <div className='itemPart3'>
                   {props.item.itemNote}
                 </div>
+                }
+                { showHR && <div><hr /></div>}
               </div>
               <div className='buttons itemPart4'>
                 <IconButton config={ { title:'edit item',

src/css/oneItem.css

@@ -146,6 +146,12 @@ div.itemPart5 {
   align-self: center;
 }
 
+div.itemPart23 hr {
+  background-color: #444444;
+  border: none;
+  height: 1px;
+}
+
 @media (min-width: 450px) { /* desktop */
   div.itemOneRow {
     grid-template-columns: 28px 1fr 36px 36px;