Improve reverse dependency list styling

app/components/rev-dep-row.hbs

@@ -0,0 +1,21 @@
+<div local-class="row {{if this.focused "focused"}}" ...attributes>
+  <div local-class="left">
+    <LinkTo
+      @route="crate"
+      @model={{@dependency.version.crateName}}
+      local-class="link"
+      data-test-crate-name
+      {{on "focusin" (fn this.setFocused true)}}
+      {{on "focusout" (fn this.setFocused false)}}
+    >
+      {{@dependency.version.crateName}}
+    </LinkTo>
+    <span local-class="range">
+      depends on {{@dependency.req}}
+    </span>
+  </div>
+  <div local-class="downloads">
+    {{svg-jar "download-arrow" local-class="download-icon"}}
+    {{format-num @dependency.downloads}}
+  </div>
+</div>

app/components/rev-dep-row.js

@@ -0,0 +1,11 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class VersionRow extends Component {
+  @tracked focused = false;
+
+  @action setFocused(value) {
+    this.focused = value;
+  }
+}

app/components/rev-dep-row.module.css

@@ -0,0 +1,82 @@
+.row {
+    --hover-bg-color: hsl(217, 37%, 98%);
+    --crate-color: var(--grey700);
+    --shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    position: relative;
+    font-size: 18px;
+    padding: 15px 25px;
+    background-color: white;
+    border-radius: 5px;
+    box-shadow: var(--shadow);
+    transition: all 300ms;
+
+    &:hover, &.focused {
+        background-color: var(--hover-bg-color);
+        transition: all 0ms;
+    }
+
+    &.focused {
+        box-shadow: 0 0 0 3px var(--yellow500), var(--shadow);
+    }
+
+    @media only screen and (max-width: 550px) {
+        display: block
+    }
+}
+
+.left {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.link {
+    color: var(--crate-color);
+    font-weight: 500;
+    margin-right: 15px;
+    outline: none;
+
+    &:hover {
+        color: var(--crate-color);
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+    }
+}
+
+.range {
+    color: var(--grey600);
+    text-transform: uppercase;
+    letter-spacing: .7px;
+    font-size: 13px;
+}
+
+.downloads {
+    display: flex;
+    align-items: center;
+    color: var(--grey600);
+    font-size: 16px;
+    font-weight: 500;
+    font-variant: tabular-nums;
+
+    @media only screen and (max-width: 550px) {
+        margin-top: 5px;
+    }
+}
+
+.download-icon {
+    width: auto;
+    height: 16px;
+    flex-shrink: 0;
+    margin-right: 7px;
+}

app/styles/crate/reverse-dependencies.module.css

@@ -7,42 +7,17 @@
 }
 
 .list {
-    background-color: white;
-    padding: 0 20px;
-    margin-bottom: 20px;
-}
-
-.row {
-    border-bottom: 2px solid var(--gray-border);
-    padding: 20px 0;
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-
-    &:last-of-type {
-        border: none;
+    list-style: none;
+    margin: 0 0 20px;
+    padding: 0;
+
+    li {
+        &:not(:first-child) {
+            margin-top: 10px;
+        }
     }
 }
 
-.stats {
-    width: 25%;
-    color: var(--main-color-light);
-}
-
-.downloads {
-    display: flex;
-    align-items: center;
-    padding-bottom: 5px;
-}
-
-.download-icon {
-    color: #b13b89;
-}
-
-.rev-dep-downloads {
-    padding-left: 7px
-}
-
 .no-results {
     text-align: center;
     margin: 20px;

app/templates/crate/reverse-dependencies.hbs

@@ -10,22 +10,13 @@
     />
   </div>
 
-  <div local-class="list" data-test-list>
+  <ul local-class="list" data-test-list>
     {{#each this.model as |dependency index|}}
-      <div local-class="row" data-test-row={{index}}>
-        <div>
-          <LinkTo @route="crate" @model={{dependency.version.crateName}} data-test-crate-name>
-            {{dependency.version.crateName}}
-          </LinkTo>
-          requires {{dependency.req}}
-        </div>
-        <div local-class="stats downloads">
-          {{svg-jar "download-arrow" local-class="download-icon"}}
-          <span local-class="rev-dep-downloads">{{ format-num dependency.downloads }}</span>
-        </div>
-      </div>
+      <li local-class="row">
+        <RevDepRow @dependency={{dependency}} data-test-row={{index}} />
+      </li>
     {{/each}}
-  </div>
+  </ul>
 
   <Pagination @pagination={{this.pagination}} />
 {{else}}