Delete all button styles.

public/styles.css

@@ -17,6 +17,8 @@
   --separator: #3D3B3F;
   --tooltip: #1E1E20;
   --tooltip-background: #fff;
+  --alarm: #FF375C;
+  --alert: #FFA24C;
   --toggle-background-off: #3D3B3F;
   --toggle-background-on: #00C9DB;
 }
@@ -537,6 +539,18 @@ main {
 /**
  * Downloads Page
  */
+.container.downloads {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+ @media (min-width: 960px) {
+  .container.downloads {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+}
 .quota {
   display: grid;
   grid-template-columns: max-content min-content;
@@ -594,6 +608,32 @@ main {
 .download-tip svg path:not([fill="none"]) {
   fill: var(--background);
 }
+button.delete-all {
+  display: inline-flex;
+  justify-items: center;
+  font-family: 'DM Sans', sans-serif;
+  line-height: 28px;
+  height: 28px;
+  font-size: 16px;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  padding: 0;
+  color: var(--icon);
+  margin-top: var(--gutter);
+}
+button.delete-all svg {
+  margin-right: calc(var(--gutter) / 2);
+}
+button.delete-all svg path {
+  stroke: var(--icon);
+}
+button.delete-all:hover {
+  color: var(--alarm)
+}
+button.delete-all:hover svg path {
+  stroke: var(--alarm);
+}
 
 /*
 !* http://meyerweb.com/eric/tools/css/reset/

src/js/pages/Downloads.js

@@ -33,7 +33,13 @@ export default async (routerContext) => {
         </span>
       </div>
       <div>
-        <button class="primary delete-all" disabled>Delete all</button>
+        <button class="primary delete-all" disabled>
+          <svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M26.309 18.726c0 4.771-2.812 7.582-7.582 7.582H8.345c-4.783 0-7.595-2.81-7.595-7.582V8.332C.75 3.562 2.503.75 7.274.75h2.665c.958 0 1.86.451 2.434 1.217l1.217 1.618a3.052 3.052 0 002.435 1.217h3.772c4.784 0 6.548 2.435 6.548 7.303l-.036 6.621z" fill="none" stroke="#858287" stroke-width="1.5"/>
+            <path d="M16.91 11.842l-6.39 6.39M16.912 18.235l-6.395-6.396" fill="none" stroke="#858287" stroke-width="2"/>
+          </svg>
+          <span>Delete all</span>
+        </button>
       </div>
     </div>
     <div class="container container--no-padding">