user_group_settings: Use user-group-x icon for deactivate button.

docs/THIRDPARTY

@@ -247,6 +247,11 @@ Copyright: 2013-2023 Cole Bemis (https://feathericons.com)
 License: Expat
 Comment: Custom made out of feather icons by Vlad Koborov
 
+Files: web/shared/icons/user-group-x.svg
+Copyright: 2013-2024 Cole Bemis (https://feathericons.com)
+License: Expat
+Comment: Custom made out of feather icons by Vlad Koborov
+
 Files: web/shared/icons/unmute.svg
 Source: https://fonts.google.com/icons?selected=Material+Symbols+Rounded:volume_up
 Copyright: Google, Inc.

help/manage-user-groups.md

@@ -127,7 +127,7 @@
 
 1. Select a user group.
 
-1. Click the **Deactivate group** (<i class="fa fa-trash-o"></i>) button in the
+1. Click the **Deactivate group** (<i class="zulip-icon zulip-icon-user-group-x"></i>) button in the
    upper right corner of the user group settings panel.
 
 1. Click **Confirm**.

web/shared/icons/user-group-x.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9999 5.33369C13.9999 6.88009 12.7463 8.13369 11.1999 8.13369C9.6535 8.13369 8.3999 6.88009 8.3999 5.33369C8.3999 3.78729 9.6535 2.53369 11.1999 2.53369C12.7463 2.53369 13.9999 3.78729 13.9999 5.33369ZM11.1999 6.80036C12.0099 6.80036 12.6666 6.14371 12.6666 5.33369C12.6666 4.52367 12.0099 3.86702 11.1999 3.86702C10.3899 3.86702 9.73324 4.52367 9.73324 5.33369C9.73324 6.14371 10.3899 6.80036 11.1999 6.80036Z" fill="black"/>
+<path d="M2.96664 10.3148C2.65199 10.396 2.37323 10.5794 2.17413 10.8363C1.97508 11.0931 1.86692 11.4087 1.86664 11.7336V12.7999C1.86664 13.1681 1.56816 13.4666 1.19997 13.4666C0.831779 13.4666 0.533302 13.1681 0.533302 12.7999V11.7328C0.533766 11.1124 0.740254 10.5097 1.12035 10.0194C1.50044 9.52907 2.03261 9.17887 2.6333 9.02377C2.9898 8.93172 3.35342 9.1461 3.44547 9.5026C3.53751 9.8591 3.32313 10.2227 2.96664 10.3148Z" fill="black"/>
+<path d="M4.10124 2.6237C4.45793 2.53237 4.82111 2.74749 4.91244 3.10417C5.00376 3.46085 4.78865 3.82404 4.43196 3.91536C4.11648 3.99614 3.83685 4.17962 3.63716 4.43688C3.43748 4.69413 3.32909 5.01053 3.32909 5.3362C3.32909 5.66186 3.43748 5.97826 3.63716 6.23552C3.83685 6.49277 4.11648 6.67625 4.43196 6.75703C4.78865 6.84835 5.00376 7.21154 4.91244 7.56822C4.82111 7.92491 4.45793 8.14002 4.10124 8.0487C3.49895 7.89449 2.96512 7.5442 2.5839 7.05308C2.20268 6.56195 1.99575 5.95792 1.99575 5.3362C1.99575 4.71448 2.20268 4.11044 2.5839 3.61931C2.96512 3.12819 3.49895 2.77791 4.10124 2.6237Z" fill="black"/>
+<path d="M6.16667 10.3148C5.85202 10.396 5.57326 10.5794 5.37417 10.8363C5.17511 11.0931 5.06695 11.4087 5.06667 11.7336V12.7999C5.06667 13.1681 4.76819 13.4666 4.4 13.4666C4.03181 13.4666 3.73333 13.1681 3.73333 12.7999L3.73333 11.7328C3.7338 11.1124 3.94029 10.5097 4.32038 10.0194C4.70047 9.52907 5.23264 9.17887 5.83333 9.02377C6.18983 8.93172 6.55345 9.1461 6.6455 9.5026C6.73755 9.8591 6.52317 10.2227 6.16667 10.3148Z" fill="black"/>
+<path d="M7.30128 2.6237C7.65796 2.53237 8.02114 2.74749 8.11247 3.10417C8.2038 3.46085 7.98868 3.82404 7.632 3.91536C7.31651 3.99614 7.03688 4.17962 6.83719 4.43688C6.63751 4.69413 6.52912 5.01053 6.52912 5.3362C6.52912 5.66186 6.63751 5.97826 6.83719 6.23552C7.03688 6.49277 7.31651 6.67625 7.632 6.75703C7.98868 6.84835 8.2038 7.21154 8.11247 7.56822C8.02114 7.92491 7.65796 8.14002 7.30128 8.0487C6.69899 7.89449 6.16515 7.5442 5.78393 7.05308C5.40271 6.56195 5.19579 5.95792 5.19579 5.3362C5.19579 4.71448 5.40271 4.11044 5.78393 3.61931C6.16515 3.12819 6.69899 2.77791 7.30128 2.6237Z" fill="black"/>
+<path d="M9.22025 10.3148C8.90561 10.396 8.62685 10.5794 8.42775 10.8363C8.2287 11.0931 8.12054 11.4087 8.12025 11.7336V12.7999C8.12025 13.1681 7.82178 13.4666 7.45359 13.4666C7.0854 13.4666 6.78692 13.1681 6.78692 12.7999L6.78692 11.7328C6.78738 11.1124 6.99387 10.5097 7.37397 10.0194C7.75406 9.52907 8.28623 9.17887 8.88692 9.02377C9.24342 8.93172 9.60704 9.1461 9.69909 9.5026C9.79113 9.8591 9.57675 10.2227 9.22025 10.3148Z" fill="black"/>
+<path d="M11.1536 10.3286C11.4139 10.0682 11.8361 10.0682 12.0964 10.3286L13.2917 11.5238L14.4869 10.3286C14.7473 10.0682 15.1694 10.0682 15.4297 10.3286C15.6901 10.5889 15.6901 11.011 15.4297 11.2714L14.2345 12.4666L15.4297 13.6619C15.6901 13.9222 15.6901 14.3444 15.4297 14.6047C15.1694 14.8651 14.7473 14.8651 14.4869 14.6047L13.2917 13.4094L12.0964 14.6047C11.8361 14.8651 11.4139 14.8651 11.1536 14.6047C10.8932 14.3444 10.8932 13.9222 11.1536 13.6619L12.3489 12.4666L11.1536 11.2714C10.8932 11.011 10.8932 10.5889 11.1536 10.3286Z" fill="black"/>
+</svg>

web/styles/subscriptions.css

@@ -911,6 +911,11 @@ h4.user_group_setting_subsection_title {
                     display: flex;
                 }
             }
+
+            /* We need this rule to center the user-group-x icon better */
+            .deactivate-group-button {
+                padding: 8px 10px 4px;
+            }
         }
     }
 

web/templates/user_group_settings/user_group_settings.hbs

@@ -10,7 +10,7 @@
                 {{/if}}
             </button>
         </div>
-        <button class="button small rounded button-danger deactivate tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Deactivate group'}}" type="button"> <i class="fa fa-trash-o" aria-hidden="true"></i></button>
+        <button class="button small rounded button-danger deactivate deactivate-group-button tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Deactivate group'}}" type="button"> <i class="zulip-icon zulip-icon-user-group-x" aria-hidden="true"></i></button>
     </div>
 </div>
 <div class="user_group_settings_wrapper" data-group-id="{{group.id}}">