explorer: Put the download archive button first

Co-authored-by: Brandon Oxendine <brandon.oxendine@gmail.com>

explorer/src/components/Command.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
   import Clipboard from "@app/components/Clipboard.svelte";
-  import Icon from "@app/components/Icon.svelte";
 
   export let command: string;
   export let fullWidth: boolean = false;
   export let showPrompt: boolean = true;
-  export let downloadHref: string | undefined = undefined;
 
   let clipboard: Clipboard;
 </script>
@@ -33,24 +31,15 @@
     border: 1px solid var(--color-border-mid);
     color: var(--color-text-primary);
   }
-  .with-download {
-    padding-right: 3.5rem;
-  }
-  .actions {
+  .clipboard {
     display: flex;
     align-items: center;
-    position: absolute;
-    right: 0.25rem;
-    top: 0;
-    height: 100%;
-  }
-  .download {
-    width: 1.5rem;
-    height: 1.5rem;
-    display: inline-flex;
     justify-content: center;
-    align-items: center;
-    color: inherit;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 2rem;
+    height: 100%;
   }
 
   .full-width.wrapper,
@@ -66,7 +55,6 @@
     tabindex="0"
     class="cmd"
     class:full-width={fullWidth}
-    class:with-download={downloadHref}
     on:click={() => {
       clipboard.copy();
     }}>
@@ -74,18 +62,7 @@
       {#if showPrompt}${/if}
       {command}
     </div>
-    <div class="actions">
-      {#if downloadHref}
-        <a
-          class="download"
-          href={downloadHref}
-          download
-          aria-label="Download"
-          title="Download"
-          on:click|stopPropagation>
-          <Icon name="download" />
-        </a>
-      {/if}
+    <div class="clipboard">
       <Clipboard bind:this={clipboard} text={command} />
     </div>
   </div>

explorer/src/views/repos/Header/CloneButton.svelte

@@ -54,6 +54,23 @@
     display: block;
     margin-bottom: 0.75rem;
   }
+  .download {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    height: var(--button-regular-height);
+    margin-bottom: 1rem;
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--border-radius-sm);
+    font: var(--txt-body-m-semibold);
+    color: var(--color-text-primary);
+    text-decoration: none;
+  }
+  .download:hover {
+    background-color: var(--color-surface-subtle);
+    border-color: var(--color-border-mid);
+  }
 </style>
 
 <Popover popoverPositionTop="2.5rem" popoverPositionRight="0">
@@ -123,18 +140,16 @@
       {:then supported}
         {#if supported}
           <div>
-            <label for="git-clone-url">
-              If you don’t have Radicle installed, you can still download an
-              archive of the repository.
+            <label for="archive-download">
+              Download the source code as a compressed archive (does not include
+              issues, patches or Git history).
             </label>
-            <Command
-              command={`curl -OJ ${archiveUrl}`}
-              downloadHref={archiveUrl} />
-            <div style:margin-top="1.5rem">
-              Note that a compressed archive of the source code does not include
-              any of the social artifacts such as issues or patches nor the git
-              history.
-            </div>
+            <a class="download" href={archiveUrl} download>
+              <Icon name="download" />
+              Download archive
+            </a>
+            <label for="archive-curl">Or from a terminal:</label>
+            <Command fullWidth command={`curl -OJ ${archiveUrl}`} />
           </div>
         {:else}
           {archiveUnsupportedMessage}