VersionList::Row: Make the whole row clickable

Author: Turbo87

app/components/version-list/row.hbs

@@ -1,6 +1,12 @@
 <div local-class="row" ...attributes>
   <div>
-    <LinkTo @route="crate.version" @model={{@version.num}}>{{@version.num}}</LinkTo>
+    <LinkTo
+      @route="crate.version"
+      @model={{@version.num}}
+      local-class="num-link"
+    >
+      {{@version.num}}
+    </LinkTo>
 
     <span local-class="date">{{date-format @version.created_at 'PPP'}}</span>
     {{#if @version.yanked}}
@@ -9,10 +15,6 @@
   </div>
 
   {{#if this.isOwner}}
-    <YankButton @version={{@version}} />
-  {{else}}
-    <LinkTo @route="crate.version" @model={{@version.num}} local-class="arrow">
-      {{svg-jar "right-arrow"}}
-    </LinkTo>
+    <YankButton @version={{@version}} local-class="yank-button" />
   {{/if}}
 </div>

app/components/version-list/row.module.css

@@ -2,7 +2,25 @@
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
-    padding: 20px 0;
+    position: relative;
+    padding: 20px;
+    transition: background-color 300ms;
+
+    &:hover {
+        background-color: var(--grey200);
+        transition: background-color 0ms;
+    }
+}
+
+.num-link {
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+    }
 }
 
 .date {
@@ -15,11 +33,6 @@
     composes: yanked from '../../styles/shared/typography.module.css';
 }
 
-.arrow {
-    display: inline-block;
-    float: right;
-
-    svg {
-        background: #EEECDD;
-    }
+.yank-button {
+    position: relative;
 }

app/styles/application.module.css

@@ -1,6 +1,7 @@
 :root {
     --violet800: hsl(252, 44%, 24%);
     --grey900: hsl(200, 15%, 19%);
+    --grey200: hsl(200, 17%, 96%);
     --green800: hsl(115, 31%, 31%);
     --yellow500: hsl(44, 100%, 60%);
 

app/styles/crate/versions.module.css

@@ -20,3 +20,7 @@
         }
     }
 }
+
+.row {
+    margin: 0 -20px;
+}