From a28146e3c73d8921abc0edcc90731d7883e881f9 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Thu, 18 Mar 2021 15:18:13 +0100
Subject: [PATCH 1/9] reverse-dependencies: Use `<ul>` for dependency list

---
 app/styles/crate/reverse-dependencies.module.css | 3 ++-
 app/templates/crate/reverse-dependencies.hbs     | 8 ++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/styles/crate/reverse-dependencies.module.css b/app/styles/crate/reverse-dependencies.module.css
index 75d9f0f2bfa..1c30bb1deb9 100644
--- a/app/styles/crate/reverse-dependencies.module.css
+++ b/app/styles/crate/reverse-dependencies.module.css
@@ -7,9 +7,10 @@
 }
 
 .list {
+    list-style: none;
     background-color: white;
     padding: 0 20px;
-    margin-bottom: 20px;
+    margin: 0 0 20px;
 }
 
 .row {
diff --git a/app/templates/crate/reverse-dependencies.hbs b/app/templates/crate/reverse-dependencies.hbs
index 5a2b1f4287e..206744f9334 100644
--- a/app/templates/crate/reverse-dependencies.hbs
+++ b/app/templates/crate/reverse-dependencies.hbs
@@ -10,9 +10,9 @@
     />
   </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}}>
+      <li local-class="row" data-test-row={{index}}>
         <div>
           <LinkTo @route="crate" @model={{dependency.version.crateName}} data-test-crate-name>
             {{dependency.version.crateName}}
@@ -23,9 +23,9 @@
           {{svg-jar "download-arrow" local-class="download-icon"}}
           <span local-class="rev-dep-downloads">{{ format-num dependency.downloads }}</span>
         </div>
-      </div>
+      </li>
     {{/each}}
-  </div>
+  </ul>
 
   <Pagination @pagination={{this.pagination}} />
 {{else}}

From 5912eda8c86d22f8bf5220bd718d8a0646f84fa6 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Thu, 18 Mar 2021 15:23:34 +0100
Subject: [PATCH 2/9] Extract `RevDepRow` component

---
 app/components/rev-dep-row.hbs                | 12 +++++++++
 app/components/rev-dep-row.module.css         | 25 +++++++++++++++++++
 .../crate/reverse-dependencies.module.css     | 23 -----------------
 app/templates/crate/reverse-dependencies.hbs  | 13 ++--------
 4 files changed, 39 insertions(+), 34 deletions(-)
 create mode 100644 app/components/rev-dep-row.hbs
 create mode 100644 app/components/rev-dep-row.module.css

diff --git a/app/components/rev-dep-row.hbs b/app/components/rev-dep-row.hbs
new file mode 100644
index 00000000000..40ddf581081
--- /dev/null
+++ b/app/components/rev-dep-row.hbs
@@ -0,0 +1,12 @@
+<div local-class="row" ...attributes>
+  <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>
diff --git a/app/components/rev-dep-row.module.css b/app/components/rev-dep-row.module.css
new file mode 100644
index 00000000000..4fd46e63dc6
--- /dev/null
+++ b/app/components/rev-dep-row.module.css
@@ -0,0 +1,25 @@
+.row {
+    padding: 20px 0;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.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
+}
diff --git a/app/styles/crate/reverse-dependencies.module.css b/app/styles/crate/reverse-dependencies.module.css
index 1c30bb1deb9..be0d4a8cb14 100644
--- a/app/styles/crate/reverse-dependencies.module.css
+++ b/app/styles/crate/reverse-dependencies.module.css
@@ -15,35 +15,12 @@
 
 .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;
     }
 }
 
-.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;
diff --git a/app/templates/crate/reverse-dependencies.hbs b/app/templates/crate/reverse-dependencies.hbs
index 206744f9334..81d81bb16be 100644
--- a/app/templates/crate/reverse-dependencies.hbs
+++ b/app/templates/crate/reverse-dependencies.hbs
@@ -12,17 +12,8 @@
 
   <ul local-class="list" data-test-list>
     {{#each this.model as |dependency index|}}
-      <li 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>
+      <li local-class="row">
+        <RevDepRow @dependency={{dependency}} data-test-row={{index}} />
       </li>
     {{/each}}
   </ul>

From 6b5e2e263e301fabfe52cd85a818850e58730d38 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Thu, 18 Mar 2021 15:29:28 +0100
Subject: [PATCH 3/9] RevDepRow: Adjust row styling to match regular dependency
 list

---
 app/components/rev-dep-row.module.css           | 17 +++++++++++++++--
 .../crate/reverse-dependencies.module.css       | 13 +++++--------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/app/components/rev-dep-row.module.css b/app/components/rev-dep-row.module.css
index 4fd46e63dc6..d5a3613419a 100644
--- a/app/components/rev-dep-row.module.css
+++ b/app/components/rev-dep-row.module.css
@@ -1,8 +1,20 @@
 .row {
-    padding: 20px 0;
+    --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;
+
+    @media only screen and (max-width: 550px) {
+        display: block
+    }
 }
 
 .stats {
@@ -17,6 +29,7 @@
 }
 
 .download-icon {
+    flex-shrink: 0;
     color: #b13b89;
 }
 
diff --git a/app/styles/crate/reverse-dependencies.module.css b/app/styles/crate/reverse-dependencies.module.css
index be0d4a8cb14..056d0a83aec 100644
--- a/app/styles/crate/reverse-dependencies.module.css
+++ b/app/styles/crate/reverse-dependencies.module.css
@@ -8,16 +8,13 @@
 
 .list {
     list-style: none;
-    background-color: white;
-    padding: 0 20px;
     margin: 0 0 20px;
-}
-
-.row {
-    border-bottom: 2px solid var(--gray-border);
+    padding: 0;
 
-    &:last-of-type {
-        border: none;
+    li {
+        &:not(:first-child) {
+            margin-top: 10px;
+        }
     }
 }
 

From 75259bbcb0ce14707a8990d5e8346d508c96f1b7 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Thu, 18 Mar 2021 15:31:02 +0100
Subject: [PATCH 4/9] RevDepRow: Merge `stats` CSS class into `downloads`

---
 app/components/rev-dep-row.hbs        | 2 +-
 app/components/rev-dep-row.module.css | 7 ++-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/app/components/rev-dep-row.hbs b/app/components/rev-dep-row.hbs
index 40ddf581081..925202e92c7 100644
--- a/app/components/rev-dep-row.hbs
+++ b/app/components/rev-dep-row.hbs
@@ -5,7 +5,7 @@
     </LinkTo>
     requires {{@dependency.req}}
   </div>
-  <div local-class="stats downloads">
+  <div local-class="downloads">
     {{svg-jar "download-arrow" local-class="download-icon"}}
     <span local-class="rev-dep-downloads">{{ format-num @dependency.downloads }}</span>
   </div>
diff --git a/app/components/rev-dep-row.module.css b/app/components/rev-dep-row.module.css
index d5a3613419a..13d6c9f6517 100644
--- a/app/components/rev-dep-row.module.css
+++ b/app/components/rev-dep-row.module.css
@@ -17,15 +17,12 @@
     }
 }
 
-.stats {
-    width: 25%;
-    color: var(--main-color-light);
-}
-
 .downloads {
     display: flex;
     align-items: center;
+    width: 25%;
     padding-bottom: 5px;
+    color: var(--main-color-light);
 }
 
 .download-icon {

From d60cd7561bb34ded9e241adc4ed7fb340861ae24 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Thu, 18 Mar 2021 15:31:51 +0100
Subject: [PATCH 5/9] RevDepRow: Use `tabular-nums` for download numbers

---
 app/components/rev-dep-row.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/rev-dep-row.module.css b/app/components/rev-dep-row.module.css
index 13d6c9f6517..a6dbbdd7e27 100644
--- a/app/components/rev-dep-row.module.css
+++ b/app/components/rev-dep-row.module.css
@@ -23,6 +23,7 @@
     width: 25%;
     padding-bottom: 5px;
     color: var(--main-color-light);
+    font-variant: tabular-nums;
 }
 
 .download-icon {

From a5da0dc467d291c3d1f5ddbbde39e3a4b50fcc00 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Thu, 18 Mar 2021 15:37:05 +0100
Subject: [PATCH 6/9] RevDepRow: Make the whole row clickable

---
 app/components/rev-dep-row.hbs        | 11 +++++++--
 app/components/rev-dep-row.js         | 11 +++++++++
 app/components/rev-dep-row.module.css | 33 ++++++++++++++++++++++++++-
 3 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 app/components/rev-dep-row.js

diff --git a/app/components/rev-dep-row.hbs b/app/components/rev-dep-row.hbs
index 925202e92c7..cdd8b7c6351 100644
--- a/app/components/rev-dep-row.hbs
+++ b/app/components/rev-dep-row.hbs
@@ -1,6 +1,13 @@
-<div local-class="row" ...attributes>
+<div local-class="row {{if this.focused "focused"}}" ...attributes>
   <div>
-    <LinkTo @route="crate" @model={{@dependency.version.crateName}} data-test-crate-name>
+    <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>
     requires {{@dependency.req}}
diff --git a/app/components/rev-dep-row.js b/app/components/rev-dep-row.js
new file mode 100644
index 00000000000..48f84c5d1f1
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/app/components/rev-dep-row.module.css b/app/components/rev-dep-row.module.css
index a6dbbdd7e27..88ad6700965 100644
--- a/app/components/rev-dep-row.module.css
+++ b/app/components/rev-dep-row.module.css
@@ -1,4 +1,6 @@
 .row {
+    --hover-bg-color: hsl(217, 37%, 98%);
+    --crate-color: var(--grey700);
     --shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
 
     display: flex;
@@ -12,11 +14,40 @@
     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
     }
 }
 
+.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;
+    }
+}
+
 .downloads {
     display: flex;
     align-items: center;
@@ -32,5 +63,5 @@
 }
 
 .rev-dep-downloads {
-    padding-left: 7px
+    padding-left: 7px;
 }

From c2f125b1892f551b80a6141fa481a6b9bbb6c048 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Thu, 18 Mar 2021 15:41:55 +0100
Subject: [PATCH 7/9] RevDepRow: Improve version range styling

---
 app/components/rev-dep-row.hbs        | 4 +++-
 app/components/rev-dep-row.module.css | 7 +++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/components/rev-dep-row.hbs b/app/components/rev-dep-row.hbs
index cdd8b7c6351..ad410c44106 100644
--- a/app/components/rev-dep-row.hbs
+++ b/app/components/rev-dep-row.hbs
@@ -10,7 +10,9 @@
     >
       {{@dependency.version.crateName}}
     </LinkTo>
-    requires {{@dependency.req}}
+    <span local-class="range">
+      depends on {{@dependency.req}}
+    </span>
   </div>
   <div local-class="downloads">
     {{svg-jar "download-arrow" local-class="download-icon"}}
diff --git a/app/components/rev-dep-row.module.css b/app/components/rev-dep-row.module.css
index 88ad6700965..0f60643e22a 100644
--- a/app/components/rev-dep-row.module.css
+++ b/app/components/rev-dep-row.module.css
@@ -48,6 +48,13 @@
     }
 }
 
+.range {
+    color: var(--grey600);
+    text-transform: uppercase;
+    letter-spacing: .7px;
+    font-size: 13px;
+}
+
 .downloads {
     display: flex;
     align-items: center;

From 1a6bf526c08b9bfdc33622144d608e3484cf77d8 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Thu, 18 Mar 2021 15:47:32 +0100
Subject: [PATCH 8/9] RevDepRow: Improve downloads styling

---
 app/components/rev-dep-row.hbs        |  2 +-
 app/components/rev-dep-row.module.css | 18 ++++++++++--------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/app/components/rev-dep-row.hbs b/app/components/rev-dep-row.hbs
index ad410c44106..c1cf555ee6e 100644
--- a/app/components/rev-dep-row.hbs
+++ b/app/components/rev-dep-row.hbs
@@ -16,6 +16,6 @@
   </div>
   <div local-class="downloads">
     {{svg-jar "download-arrow" local-class="download-icon"}}
-    <span local-class="rev-dep-downloads">{{ format-num @dependency.downloads }}</span>
+    {{format-num @dependency.downloads}}
   </div>
 </div>
diff --git a/app/components/rev-dep-row.module.css b/app/components/rev-dep-row.module.css
index 0f60643e22a..1178f61a3e4 100644
--- a/app/components/rev-dep-row.module.css
+++ b/app/components/rev-dep-row.module.css
@@ -58,17 +58,19 @@
 .downloads {
     display: flex;
     align-items: center;
-    width: 25%;
-    padding-bottom: 5px;
-    color: var(--main-color-light);
+    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;
-    color: #b13b89;
-}
-
-.rev-dep-downloads {
-    padding-left: 7px;
+    margin-right: 7px;
 }

From fcef0e5500c2e67911050d864cbbecdc24f605f0 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Thu, 18 Mar 2021 15:54:24 +0100
Subject: [PATCH 9/9] RevDepRow: Improve long crate name styling

---
 app/components/rev-dep-row.hbs        | 2 +-
 app/components/rev-dep-row.module.css | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/components/rev-dep-row.hbs b/app/components/rev-dep-row.hbs
index c1cf555ee6e..27a537ea1ba 100644
--- a/app/components/rev-dep-row.hbs
+++ b/app/components/rev-dep-row.hbs
@@ -1,5 +1,5 @@
 <div local-class="row {{if this.focused "focused"}}" ...attributes>
-  <div>
+  <div local-class="left">
     <LinkTo
       @route="crate"
       @model={{@dependency.version.crateName}}
diff --git a/app/components/rev-dep-row.module.css b/app/components/rev-dep-row.module.css
index 1178f61a3e4..d15ea26b638 100644
--- a/app/components/rev-dep-row.module.css
+++ b/app/components/rev-dep-row.module.css
@@ -6,6 +6,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    flex-wrap: wrap;
     position: relative;
     font-size: 18px;
     padding: 15px 25px;
@@ -28,6 +29,11 @@
     }
 }
 
+.left {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .link {
     color: var(--crate-color);
     font-weight: 500;