personal-settings: Redesign buttons in personal settings.

- Changed Alert Words "Delete" button to a danger icon button.
- Updated Uploaded Files "Download" button to an info icon.
- Updated Uploaded Files "Delete" button to a danger icon.
- Changed Muted Users button to use `action-button-quiet-danger`.

Fixes: #34200.

help/manage-your-uploaded-files.md

@@ -41,8 +41,8 @@ You can sort your uploaded files by name, upload date, message ID, and size.
 
 {settings_tab|uploaded-files}
 
-1. In the **Actions** column, click the **download file**
+1. In the **Actions** column, click the **download**
-   (<i class="fa fa-download"></i>) icon for the file you want to download.
+   (<i class="zulip-icon zulip-icon-download"></i>) icon for the file you want to download.
 
 {end_tabs}
 
@@ -52,8 +52,8 @@ You can sort your uploaded files by name, upload date, message ID, and size.
 
 {settings_tab|uploaded-files}
 
-1. In the **Actions** column, click the **delete file**
+1. In the **Actions** column, click the **delete**
-   (<i class="fa fa-trash-o"></i>) icon for the file you want to remove.
+   (<i class="zulip-icon zulip-icon-trash"></i>) icon for the file you want to remove.
 
 1. Approve by clicking **Delete**. If you delete a file, your message will still
    contain a file link, but the link will no longer work.

web/e2e-tests/settings.test.ts

@@ -329,7 +329,7 @@ async function test_duplicate_alert_words_cannot_be_added(
 }
 
 async function delete_alert_word(page: Page, word: string): Promise<void> {
-    const delete_button_selector = `.remove-alert-word[data-word="${CSS.escape(word)}"]`;
+    const delete_button_selector = `tr[data-word="${CSS.escape(word)}"] .remove-alert-word`;
     await page.click(delete_button_selector);
     await page.waitForSelector(delete_button_selector, {hidden: true});
 }

web/shared/icons/download.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
+  <path fill="#000" d="M8 1.335c.367 0 .665.298.665.665v6.395l2.198-2.199a.665.665 0 0 1 .94.94L8.47 10.47c-.26.26-.68.26-.94 0L4.196 7.137a.665.665 0 1 1 .94-.94l2.199 2.198V2c0-.367.298-.665.665-.665Zm-6 8c.367 0 .665.298.665.665v2.667a.668.668 0 0 0 .668.668h9.334a.668.668 0 0 0 .668-.668V10a.665.665 0 1 1 1.33 0v2.667a1.998 1.998 0 0 1-1.998 1.998H3.333a1.998 1.998 0 0 1-1.998-1.998V10c0-.367.298-.665.665-.665Z"/>
+</svg>

web/src/attachments_ui.ts

@@ -196,6 +196,10 @@ export function set_up_attachments(): void {
         text: $t({defaultMessage: "Loading…"}),
     });
 
+    $("#uploaded_files_table").on("click", ".download-attachment", function () {
+        $(this).siblings(".hidden-attachment-download")[0]?.click();
+    });
+
     $("#uploaded_files_table").on("click", ".remove-attachment", (e) => {
         const file_name = $(e.target).closest(".uploaded_file_row").attr("data-attachment-name");
         delete_attachments(

web/styles/settings.css

@@ -555,21 +555,6 @@ input[type="checkbox"] {
 .edit-attachment-buttons {
     display: inline-block;
     vertical-align: middle;
-    height: 32px;
-}
-
-.edit-attachment-buttons .remove-attachment {
-    margin-left: 5px;
-}
-
-.edit-attachment-buttons .download-attachment {
-    display: block;
-    padding: 6px 9px;
-    text-decoration: none;
-
-    &:hover {
-        color: hsl(156deg 41% 40%);
-    }
 }
 
 .remove-alert-word {

web/templates/muted_user_ui_row.hbs

@@ -4,7 +4,12 @@
     <td>{{date_muted_str}}</td>
     <td class="actions">
         {{#if can_unmute}}
-        <span><a class="settings-unmute-user">{{t "Unmute" }}</a></span>
+        {{> ./components/action_button
+          label=(t "Unmute")
+          attention="quiet"
+          intent="danger"
+          custom_classes="settings-unmute-user"
+          }}
         {{/if}}
     </td>
 </tr>

web/templates/settings/alert_word_settings_item.hbs

@@ -7,9 +7,12 @@
         </div>
     </td>
     <td>
-        <button type="submit" class="button rounded small delete button-danger remove-alert-word tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Delete' }}" data-word="{{word}}">
+        {{> ../components/icon_button
-            <i class="fa fa-trash-o" aria-hidden="true"></i>
+          icon="trash"
-        </button>
+          intent="danger"
+          custom_classes="delete remove-alert-word tippy-zulip-delayed-tooltip"
+          data-tippy-content=(t "Delete")
+          }}
     </td>
 </tr>
 {{/with}}

web/templates/settings/uploaded_files_list.hbs

@@ -20,16 +20,21 @@
     <td class="upload-size" >{{ size_str }}</td>
     <td class="actions">
         <span class="edit-attachment-buttons">
-            <a type="submit" href="/user_uploads/{{path_id}}" class="button rounded small sea-green tippy-zulip-delayed-tooltip download-attachment" data-tippy-content="{{t 'Download' }}" download>
+            <a type="submit" href="/user_uploads/{{path_id}}" class="hidden-attachment-download" download></a>
-                <i class="fa fa-download sea-green" aria-hidden="true"></i>
+            {{> ../components/icon_button
-            </a>
+              icon="download"
+              intent="info"
+              custom_classes="tippy-zulip-delayed-tooltip download-attachment"
+              data-tippy-content=(t "Download")
+              }}
         </span>
         <span class="edit-attachment-buttons">
-            <button type="submit"
+            {{> ../components/icon_button
-              class="button rounded small delete button-danger remove-attachment tippy-zulip-delayed-tooltip"
+              icon="trash"
-              data-tippy-content="{{t 'Delete' }}" data-attachment="{{id}}">
+              custom_classes="tippy-zulip-delayed-tooltip delete remove-attachment"
-                <i class="fa fa-trash-o" aria-hidden="true"></i>
+              intent="danger"
-            </button>
+              data-tippy-content=(t "Delete")
+              }}
         </span>
     </td>
 </tr>