dashboard: Migrate to CSS modules

app/components/crate-downloads-list.hbs

@@ -1,9 +1,9 @@
-<ul>
+<ul local-class="list">
   {{#each @crates as |crate|}}
-    <li>
-      <LinkTo @route="crate" @model={{crate.id}} class="name">
+    <li local-class="row">
+      <LinkTo @route="crate" @model={{crate.id}} local-class="link">
         {{ crate.name }} ({{ crate.max_version }})
-        <div class='right'>
+        <div>
           {{svg-jar "download-clear-back"}}
           {{ format-num crate.downloads }}
         </div>

app/components/crate-downloads-list.module.scss

@@ -0,0 +1,18 @@
+.list {
+    list-style: none;
+    padding: 0;
+}
+
+.row {
+    margin: 8px 0;
+}
+
+.link {
+    color: #525252;
+    background-color: #edebdd;
+    font-size: 90%;
+    padding: 20px 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}

app/styles/app.scss

@@ -10,9 +10,7 @@ $link-color: rgb(0, 172, 91);
 
 @import "buttons";
 
-@import "home";
 @import "crate";
-@import "dashboard";
 @import "me";
 
 @import "modules";

app/styles/dashboard.module.scss

@@ -0,0 +1,126 @@
+.stats {
+    margin-left: auto;
+    padding: 10px;
+
+    span { margin-left: 10px; }
+    .num {
+        font-size: 30px;
+        font-weight: bold;
+    }
+    .downloads {
+        display: flex;
+        align-items: center;
+    }
+
+    .label {
+        color: $main-color-light;
+        font-size: 80%;
+    }
+}
+
+.my-info {
+    display: flex;
+
+    @media only screen and (max-width: 750px) {
+        flex-direction: column;
+    }
+}
+
+.my-crate-lists {
+    flex-direction: column;
+    flex-grow: 2;
+    margin-right: 20px;
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        h2 {
+            font-size: 105%;
+            line-height: 20px;
+        }
+    }
+
+    @media only screen and (max-width: 750px) {
+        order: 1;
+        margin-right: 0;
+    }
+}
+
+.my-crates-link,
+.followed-crates-link {
+    color: $main-color-light;
+    text-decoration: underline;
+    font-size: 90%;
+    font-weight: normal;
+
+    &:hover {
+        color: darken($main-color-light, 10%);
+    }
+}
+
+.my-feed {
+    flex-grow: 5;
+    h2 { font-size: 105%; }
+
+    @media only screen and (max-width: 750px) {
+        order: 0;
+    }
+}
+
+.feed {
+    background: white;
+    padding: 0 20px;
+}
+
+.feed-list {
+    margin: 0;
+    padding: 0;
+}
+
+.feed-row {
+    display: flex;
+    align-items: baseline;
+    padding: 20px 0;
+    border-bottom: 2px solid $gray-border;
+
+    &:last-of-type {
+        border: none;
+    }
+
+    .version {
+        color: $main-color-light;
+        font-size: 80%;
+    }
+
+    .date {
+        flex-grow: 1;
+        text-align: right;
+        color: $main-color-light;
+        font-size: 80%;
+    }
+}
+
+.info {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+
+    span { padding-left: 10px; }
+
+    .date { flex-grow: 2; text-align: right; }
+}
+
+.load-more {
+    $bg: rgb(219, 217, 207);
+    text-align: center;
+    width: 100%;
+    padding: 10px;
+    outline: 0;
+    border: 0;
+    margin-bottom: 20px;
+    background-color: $bg;
+    color: white;
+    &:hover, &:focus { background-color: darken($bg, 10%); }
+}

app/styles/index.module.scss

@@ -58,6 +58,7 @@
 }
 
 .lists {
+    display: flex;
     flex-wrap: wrap;
     justify-content: left;
 
@@ -72,4 +73,42 @@
             width: 100%;
         }
     }
+
+    h2 {
+        font-size: 105%;
+        line-height: 20px;
+    }
+
+    > section[aria-busy="true"] > h2::after {
+        content: '';
+        background-image: url('/assets/ajax-loader.gif');
+        display: inline-block;
+        height: 16px;
+        width: 16px;
+    }
+
+    ul, ol { list-style: none; padding: 0; }
+    li { margin: 8px 0; }
+
+    li a {
+        width: 100%;
+        color: lighten($main-color, 10%);
+        text-decoration: none;
+        background-color: $main-bg-dark;
+        font-size: 90%;
+        padding: 20px 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        &:hover { background-color: darken($main-bg-dark, 5%); }
+
+        span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        img { vertical-align: middle; }
+    }
 }

app/styles/me.scss

@@ -260,18 +260,3 @@
         }
     }
 }
-
-#stats {
-    margin-left: auto;
-    padding: 10px;
-
-    span { margin-left: 10px; }
-    .num {
-        font-size: 30px;
-        font-weight: bold;
-    }
-    .downloads {
-        display: flex;
-        align-items: center;
-    }
-}