improve attachment download card

frontend/src/components/Message.svelte

@@ -32,9 +32,8 @@
     .message {
         display: flex;
         flex-direction: row;
-        padding: 4px 4px 4px var(--space-xs);
+        padding: 6px 6px 6px var(--space-xs);
-        margin-top: 16px;
+        margin-top: 14px;
-        overflow-x: hidden;
         word-wrap: break-word;
         position: relative;
     }
@@ -121,13 +120,15 @@
     .message-actions {
         display: flex;
         position: absolute;
-        top: 3px;
+        top: -6px;
         right: 12px;
         z-index: 1;
+        background-color: var(--background-color-1);
+        border-radius: var(--radius-sm);
     }
 
     .message-actions .icon-button {
-        margin: 0;
+        margin: 7px;
         padding: 0;
     }
 
@@ -190,14 +191,14 @@
         {/if}
 
         <div class="message-actions">
-            <button class="icon-button material-icons-outlined" on:click="{ reply }" aria-label="Reply to Message">
-                reply
-            </button>
             {#if message._editable}
                 <button class="icon-button material-icons-outlined" on:click="{ () => overlayStore.push(OverlayType.EditMessage, { message }) }" aria-label="Edit Message">
                     edit
                 </button>
             {/if}
+            <button class="icon-button material-icons-outlined" on:click="{ reply }" aria-label="Reply to Message">
+                reply
+            </button>
         </div>
     </div>
 </div>

frontend/src/components/MessageAttachment.svelte

@@ -48,7 +48,10 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        flex-wrap: wrap;
         padding: var(--space-norm);
+        padding-top: var(--space-sm);
+        padding-bottom: var(--space-sm);
         border-radius: 9999px;
         background-color: var(--background-color-0);
     }
@@ -68,13 +71,20 @@
     }
 
     .attachment-filename {
-        color: var(--foreground-color-3);
+        color: var(--foreground-color-2);
-        margin-right: 6px;
+        margin-right: var(--space-md);
     }
 
     .attachment-card .icon-button {
         margin-left: auto;
     }
+
+    .attachment-card .download {
+        background: var(--purple-1);
+        border-radius: 9999px;
+        padding: var(--space-xs);
+        color: var(--foreground-color-1);
+    }
 </style>
 
 
@@ -86,7 +96,7 @@
 {:else if renderAs === AttachmentRenderAs.DownloadableFile}
     <div class="attachment attachment-card">
         <div class="attachment-filename">{ attachment.file_name }</div>
-        <a class="icon-button material-icons-outlined" href="{ attachmentUrl(attachment.file) }" target="_blank">download</a>
+        <a class="icon-button material-icons-outlined download" href="{ attachmentUrl(attachment.file) }" target="_blank">download</a>
     </div>
 {:else}
     <div class="attachment attachment-card">Couldn't render attachment</div>

frontend/src/gateway.js

@@ -13,6 +13,16 @@ export const GatewayErrors = {
     TOO_MANY_SESSIONS: 4008,
 }; 
 
+// this should be in request.js, but putting it here avoids a circular dependency
+export const RequestStatus = {
+    OK: 0,
+    NETWORK_EXCEPTION: 1,
+    JSON_EXCEPTION: 2,
+    FAILURE_STATUS: 3,
+    RPC_ERROR: 4,
+    INVARIANT_RPC_RESPONSE_COUNT: 5,
+};
+
 export const GatewayPayloadType = {
     Hello: 0,
     Authenticate: 1, // client
@@ -148,6 +158,9 @@ export default {
                 clearInterval(this.heartbeatInterval);
             }
 
+            this.waitingSerials.forEach((resolve) => resolve({ status: RequestStatus.NETWORK_EXCEPTION }));
+            this.waitingSerials.clear();
+
             if (code === GatewayErrors.BAD_AUTH) {
                 this.dispatch(GatewayEventType.BadAuth, 1);
                 if (this.reconnectTimeout)

frontend/src/request.js

@@ -1,4 +1,4 @@
-import gateway from "./gateway";
+import gateway, { RequestStatus } from "./gateway";
 import { apiRoute, getItem } from "./storage";
 
 const method = (methodId, requiresAuthentication) => ({methodId, requiresAuthentication});
@@ -43,15 +43,6 @@ export const RPCError = {
     INTERNAL_ERROR: { code: 7003, message: "Sorry, we couldn't process this request (internal server error)" },
 };
 
-export const RequestStatus = {
-    OK: 0,
-    NETWORK_EXCEPTION: 1,
-    JSON_EXCEPTION: 2,
-    FAILURE_STATUS: 3,
-    RPC_ERROR: 4,
-    INVARIANT_RPC_RESPONSE_COUNT: 5,
-};
-
 export const RequestStatusToMessage = {
     [RequestStatus.OK]: "",
     [RequestStatus.NETWORK_EXCEPTION]: "We couldn't reach the server right now",