Minor UI changes.

web/src/App.css

@@ -14,7 +14,7 @@
 [data-reach-menu] { z-index: 999 ; }
 [data-reach-menu-list] { padding: 5px ; }
 [data-reach-menu-item] { display: flex ; height: 1.25em ; padding: 5px ; }
-[data-reach-menu-item][data-selected] { background: #90caf9 ; color: black ; }
+[data-reach-menu-item][data-selected] { background: #b0e0ff ; color: black ; }
 [data-reach-menu-list] .divider { height: 0 ; margin: 2px 0 ; border-top: 1px solid #aaa ; }
 [data-reach-menu-list] img { height: 100% ; margin-top: -0.1em ; margin-right: 0.5em ; }
 

web/src/App.js

@@ -95,27 +95,27 @@ export class App extends React.Component
                 <MenuButton />
                 <MenuList>
                     <MenuItem id="menu-show-publishers" onSelect={ () => this._showPublishers(true) } >
-                        <img src="/images/icons/publisher.png" alt="Show publishers." /> Show publishers
+                        <img src="/images/menu/publishers.png" alt="Show publishers." /> Show publishers
                     </MenuItem>
                     <MenuItem id="menu-search-technique" onSelect={ () => this._showTechniqueArticles(true) } >
-                        <img src="/images/icons/technique.png" alt="Show technique articles." /> Show technique
+                        <img src="/images/menu/technique.png" alt="Show technique articles." /> Show technique
                     </MenuItem>
                     <MenuItem id="menu-search-tips" onSelect={ () => this._showTipsArticles(true) } >
-                        <img src="/images/icons/tips.png" alt="Show tip articles." /> Show tips
+                        <img src="/images/menu/tips.png" alt="Show tip articles." /> Show tips
                     </MenuItem>
                     <div className="divider" />
                     <MenuItem id="menu-new-publisher" onSelect={PublisherSearchResult.onNewPublisher} >
-                        <img src="/images/icons/publisher.png" alt="New publisher." /> New publisher
+                        <img src="/images/menu/publisher.png" alt="New publisher." /> New publisher
                     </MenuItem>
                     <MenuItem id="menu-new-publication" onSelect={PublicationSearchResult.onNewPublication} >
-                        <img src="/images/icons/publication.png" alt="New publication." /> New publication
+                        <img src="/images/menu/publication.png" alt="New publication." /> New publication
                     </MenuItem>
                     <MenuItem id="menu-new-article" onSelect={ArticleSearchResult.onNewArticle} >
-                        <img src="/images/icons/article.png" alt="New article." /> New article
+                        <img src="/images/menu/article.png" alt="New article." /> New article
                     </MenuItem>
                     <div className="divider" />
                     <MenuItem id="menu-db-report" onSelect={ () => this._showDbReport(true) } >
-                        <img src="/images/icons/db-report.png" alt="Database report." /> DB report
+                        <img src="/images/menu/db-report.png" alt="Database report." /> DB report
                     </MenuItem>
                 </MenuList>
             </Menu> ) ;

web/src/ArticleSearchResult.js

@@ -91,10 +91,10 @@ export class ArticleSearchResult extends React.Component
             <MenuButton className="sr-menu" />
             <MenuList>
                 <MenuItem className="edit" onSelect={ () => this.onEditArticle() } >
-                    <img src="/images/icons/edit.png" alt="Edit." /> Edit
+                    <img src="/images/edit.png" alt="Edit." /> Edit
                 </MenuItem>
                 <MenuItem className="delete" onSelect={ () => this.onDeleteArticle() } >
-                    <img src="/images/icons/delete.png" alt="Delete." /> Delete
+                    <img src="/images/delete.png" alt="Delete." /> Delete
                 </MenuItem>
             </MenuList>
         </Menu> ) ;

web/src/ArticleSearchResult2.js

@@ -327,7 +327,7 @@ export class ArticleSearchResult2
 
         // show the form
         const title = ( <div style={{display:"flex"}}>
-            <img src="/images/icons/article-grey.png" alt="Dialog icon." />
+            <img src="/images/menu/article.png" alt="Dialog icon." />
             {isNew ? "New article" : "Edit article"}
         </div> ) ;
         gAppRef.showModalForm( "article-form",

web/src/DbReport.js

@@ -151,13 +151,13 @@ class DbLinks extends React.Component
 
         // render the component
         const nLinksToCheck = this.state.linksToCheck ? this.state.linksToCheck.length - this.state.currLinkToCheck : null ;
-        const imageUrl = this.state.checkLinksInProgress ? "/images/loading.gif" : "/images/icons/check-db-links.png" ;
+        const imageUrl = this.state.checkLinksInProgress ? "/images/loading.gif" : "/images/check-db-links.png" ;
         return ( <div className="db-links">
             <h2> Links { !dbLinks && <img src="/images/loading.gif" className="loading" alt="Loading..." /> } </h2>
             { this.state.linksToCheck && this.state.linksToCheck.length > 0 && (
                 <div className="check-links-frame">
                     <button className="check-links" style={{display:"flex"}} onClick={() => this.checkDbLinks()} >
-                        <img src={imageUrl} style={{height:"1.25em",marginRight:"0.5em"}} alt="Check database links." />
+                        <img src={imageUrl} style={{height:"1em",marginTop:"0.15em",marginRight:"0.5em"}} alt="Check database links." />
                         { this.state.checkLinksInProgress ? "Stop checking" : "Check links (" + nLinksToCheck + ")" }
                     </button>
                     <div className="status-msg"> {this.state.checkLinksStatusMsg} </div>

web/src/PublicationSearchResult.js

@@ -81,10 +81,10 @@ export class PublicationSearchResult extends React.Component
             <MenuButton className="sr-menu" />
             <MenuList>
                 <MenuItem className="edit" onSelect={ () => this.onEditPublication() } >
-                    <img src="/images/icons/edit.png" alt="Edit." /> Edit
+                    <img src="/images/edit.png" alt="Edit." /> Edit
                 </MenuItem>
                 <MenuItem className="delete" onSelect={ () => this.onDeletePublication() } >
-                    <img src="/images/icons/delete.png" alt="Delete." /> Delete
+                    <img src="/images/delete.png" alt="Delete." /> Delete
                 </MenuItem>
             </MenuList>
         </Menu> ) ;

web/src/PublicationSearchResult2.js

@@ -279,7 +279,7 @@ export class PublicationSearchResult2
         // show the form
         const isNew = Object.keys( vals ).length === 0 ;
         const title = ( <div style={{display:"flex"}}>
-            <img src="/images/icons/publication.png" alt="Dialog icon." />
+            <img src="/images/menu/publication.png" alt="Dialog icon." />
             {isNew ? "New publication" : "Edit publication"}
         </div> ) ;
         gAppRef.showModalForm( "publication-form",

web/src/PublisherSearchResult.js

@@ -62,10 +62,10 @@ export class PublisherSearchResult extends React.Component
             <MenuButton className="sr-menu" />
             <MenuList>
                 <MenuItem className="edit" onSelect={ () => this.onEditPublisher() } >
-                    <img src="/images/icons/edit.png" alt="Edit." /> Edit
+                    <img src="/images/edit.png" alt="Edit." /> Edit
                 </MenuItem>
                 <MenuItem className="delete" onSelect={ () => this.onDeletePublisher() } >
-                    <img src="/images/icons/delete.png" alt="Delete." /> Delete
+                    <img src="/images/delete.png" alt="Delete." /> Delete
                 </MenuItem>
             </MenuList>
         </Menu> ) ;

web/src/PublisherSearchResult2.js

@@ -136,7 +136,7 @@ export class PublisherSearchResult2
         // show the form
         const isNew = Object.keys( vals ).length === 0 ;
         const title = ( <div style={{display:"flex"}}>
-            <img src="/images/icons/publisher.png" alt="Dialog icon." />
+            <img src="/images/menu/publisher.png" alt="Dialog icon." />
             {isNew ? "New publisher" : "Edit publisher"}
         </div> ) ;
         gAppRef.showModalForm( "publisher-form",

web/src/SearchResults.css

@@ -13,7 +13,7 @@
 .search-result .header { padding: 2px 5px ; border-top-right-radius: 5px ; }
 .search-result .header a { text-decoration: none ; }
 .search-result .header a.open-link { margin-left: 0.5em ; }
-.search-result .header a.open-link img { height: 1.2em ; margin-bottom: -0.2em ; }
+.search-result .header a.open-link img { height: 1em ; margin-bottom: -0.15em ; }
 
 .search-result.publisher .header { border: 1px solid #c0c0c0 ; background: #eabe51 ; }
 .search-result.publisher .header a.name { color: inherit ; text-decoration: none ; }
@@ -32,7 +32,8 @@
 .search-result .content p:not(:first-child) { margin-top: 0.25em ; }
 .search-result .content ul p, .search-result .content ol p { margin-top: 0.1em ; }
 .search-result .content i i { color: #666 ; }
-.search-result .content a.aslrb { color: #804040 ; text-decoration: none ; border-bottom: 1px dotted #804040 ; }
+.search-result .content a.aslrb { color: red ; text-decoration: none ; }
+.search-result .content a.aslrb:hover { background: #ffffcc ; }
 .search-result .content .image { float: left ; margin: 0.25em 0.5em 0.5em 0 ; max-height: 8em ; max-width: 6em ; }
 .search-result .content .collapsible { margin-top: 0.5em ; font-size: 90% ; color: #333 ; }
 .search-result .content .collapsible a { color: #333 ; text-decoration: none ; }

web/src/index.css

@@ -2,7 +2,7 @@
 
 body {
     padding: 5px ;
-    font-size: 16px ;
+    font-family: Arial, Helvetica, sans-serif ; font-size: 16px ;
     -webkit-font-smoothing: antialiased ;
     -moz-osx-font-smoothing: grayscale ;
 }