settings: Update quota notice text and style.

Changed the text of the quota notice to
"Your organization is using x% of your 5 GB file
storage quota. Upgrade for more space."

Instead of having a link on "Upgrade", the entire
notice is now a clickable banner with a rocket icon,
consistent with other banners used in settings.

Fixes #29077.

web/src/attachments_ui.ts

@@ -70,8 +70,16 @@ function set_upload_space_stats(): void {
     }
     const args = {
         show_upgrade_message: realm.realm_plan_type === 2,
-        percent_used: percentage_used_space(upload_space_used),
+        upload_quota_string: $t(
-        upload_quota: bytes_to_size(mib_to_bytes(realm.realm_upload_quota_mib), true),
+            {
+                defaultMessage:
+                    "Your organization is using {percent_used}% of your {upload_quota} file storage quota.",
+            },
+            {
+                percent_used: percentage_used_space(upload_space_used),
+                upload_quota: bytes_to_size(mib_to_bytes(realm.realm_upload_quota_mib), true),
+            },
+        ),
     };
     const rendered_upload_stats_html = render_settings_upload_space_stats(args);
     $("#attachment-stats-holder").html(rendered_upload_stats_html);

web/styles/settings.css

@@ -1683,7 +1683,16 @@ $option_title_width: 180px;
 #attachment-stats-holder {
     position: relative;
     margin-top: 13px;
-    display: inline-block;
+    display: block;
+
+    .upgrade-tip {
+        width: auto;
+    }
+
+    .tip::before {
+        content: "\f135";
+        margin-right: 8px;
+    }
 }
 
 .admin_exports_table {

web/templates/settings/upload_space_stats.hbs

@@ -1,9 +1,11 @@
 <span>
-    {{t "Organization using {percent_used}% of {upload_quota}." }}
     {{#if show_upgrade_message}}
-        {{#tr}}
+    <a href="/upgrade/" class="upgrade-tip" target="_blank" rel="noopener noreferrer">
-            <z-link>Upgrade</z-link> for more space.
+        {{upload_quota_string}} {{t "Upgrade for more space." }}
-            {{#*inline "z-link"}}<a href="/upgrade/" target="_blank" rel="noopener noreferrer">{{> @partial-block }}</a>{{/inline}}
+    </a>
-        {{/tr}}
+    {{else}}
+    <div class="tip">
+        {{upload_quota_string}}
+    </div>
     {{/if}}
 </span>