linting and space issues

client/homebrew/pages/archivePage/archivePage.jsx

@@ -7,7 +7,6 @@ const Moment = require('moment');
 
 const Nav           = require('naturalcrit/nav/nav.jsx');
 const Navbar        = require('../../navbar/navbar.jsx');
-
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const Account       = require('../../navbar/account.navitem.jsx');
 const NewBrew       = require('../../navbar/newbrew.navitem.jsx');
@@ -25,7 +24,7 @@ const ArchivePage = createClass({
       query      : '',
       foundBrews : null,
       searching  : false,
-			error     : null
+      error      : null,
     };
   },
   handleChange(e) {
@@ -34,7 +33,8 @@ const ArchivePage = createClass({
   lookup() {
     this.setState({ searching: true, error: null });
 
-		request.get(`/admin/archive/${this.state.query}`)
+    request
+      .get(`/admin/archive/${this.state.query}`)
       .then((res) => this.setState({ foundBrews: res.body }))
       .catch((err) => this.setState({ error: err }))
       .finally(() => this.setState({ searching: false }));
@@ -58,7 +58,11 @@ const ArchivePage = createClass({
               <dd>
                 {brew.authors.map((author, index) => (
                   <span key={index}>
-                        <a href={`/user/${author}`} target='_blank' rel='noopener noreferrer'>
+                    <a
+                      href={`/user/${author}`}
+                      target='_blank'
+                      rel='noopener noreferrer'
+                    >
                       {author}
                     </a>
                     {index < brew.authors.length - 1 && ', '}
@@ -66,12 +70,38 @@ const ArchivePage = createClass({
                 ))}
               </dd>
 
-                  <a href={`/share/${brew.shareId}`}>Check the brew</a>
+              <a href={`/share/${brew.shareId}`}>
+                Check the brew <i className='fas fa-external-link-alt'></i>
+              </a>
 
-                  <dt>Last Updated</dt>
+              <dt>Systems:</dt>
+              <dd>{brew.systems.join(', ')}</dd>
+
+              {brew.tags?.length ? (
+                <>
+                  <div
+                    className='brewTags'
+                    title={`Tags:\n${brew.tags.join('\n')}`}
+                  >
+                    <i className='fas fa-tags' />
+                    {brew.tags.map((tag, idx) => {
+                      const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
+                      return (
+                        <span key={idx} className={matches[1]}>
+                          {matches[2]}
+                        </span>
+                      );
+                    })}
+                  </div>
+                </>
+              ) : (
+                <></>
+              )}
+
+              <dt>Last Updated:</dt>
               <dd>{Moment(brew.updatedAt).fromNow()}</dd>
 
-                  <dt>Num of Views</dt>
+              <dt>Num of Views:</dt>
               <dd>{brew.views}</dd>
             </dl>
           </div>
@@ -81,38 +111,49 @@ const ArchivePage = createClass({
   },
 
   renderForm: function () {
-        return <div className='brewLookup'>
+    return (
+      <div className='brewLookup'>
         <h2>Brew Lookup</h2>
-            <label>Title of the brew</label><input type='text' value={this.state.query} onChange={this.handleChange} placeholder='v3 Reference Document'/>
+        <label>Title of the brew</label>
+        <input
+          type='text'
+          value={this.state.query}
+          onChange={this.handleChange}
+          placeholder='v3 Reference Document'
+        />
         {/* In the future, we should be able to filter the results by adding tags.
-            <label>Tags</label><input type="text" value={this.state.query} placeholder='add a tag to filter'/>
+            <label>Tags</label><input type='text' value={this.state.query} placeholder='add a tag to filter'/>
             */}
         <button onClick={this.lookup}>
-                <i className={cx('fas', {
+          <i
+            className={cx('fas', {
               'fa-search': !this.state.searching,
               'fa-spin fa-spinner': this.state.searching,
-                })} />
+            })}
+          />
         </button>
-        </div>;
+      </div>
+    );
   },
 
-    renderResults : function() {
+  renderResults: function () {},
-
-    },
 
   renderNavItems: function () {
-		return <Navbar>
+    return (
+      <Navbar>
         <Nav.section>
           <NewBrew />
           <HelpNavItem />
           <RecentNavItem />
           <Account />
         </Nav.section>
-		</Navbar>;
+      </Navbar>
+    );
   },
 
   render: function () {
-		return 	<div className='archivePage'>
+    return (
+      <div className='archivePage'>
         {this.renderNavItems()}
 
         <div className='content'>
@@ -120,20 +161,18 @@ const ArchivePage = createClass({
             <h1>Welcome to the Archive</h1>
           </div>
           <div className='flexGroup'>
-                    <div className='form dataGroup'>
+            <div className='form dataGroup'>{this.renderForm()}</div>
-                        {this.renderForm()}
-                    </div>
             <div className='resultsContainer dataGroup'>
               <div className='title'>
                 <h2>Your results, my lordship</h2>
-                            
               </div>
               {this.renderFoundBrews()}
             </div>
           </div>
         </div>
       </div>
-	}
+    );
+  },
 });
 
 module.exports = ArchivePage;

client/homebrew/pages/archivePage/archivePage.less

@@ -83,7 +83,7 @@
                         
                         .brewItem {
                             background-image: url('/assets/parchmentBackground.jpg');
-                            width:500px;
+                            width:450px;
                             height:auto;
                             min-height:unset;
                             overflow:visible;