Use alert icon to convey urgency

theRealKLH · Dec 3, 2024 · fda8fc0 · fda8fc0
1 parent b29e6d5
commit fda8fc0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/app/src/ui/banners/update-available.tsx b/app/src/ui/banners/update-available.tsx
@@ -41,18 +41,26 @@ export class UpdateAvailable extends React.Component<IUpdateAvailableProps> {
         dismissable={!this.props.prioritizeUpdate}
         onDismissed={this.props.onDismissed}
       >
-        {!this.props.isUpdateShowcaseVisible && (
-          <Octicon
-            className="download-icon"
-            symbol={octicons.desktopDownload}
-          />
-        )}
-
+        {this.renderIcon()}
         {this.renderMessage()}
       </Banner>
     )
   }
 
+  private renderIcon() {
+    if (this.props.isUpdateShowcaseVisible) {
+      return null
+    }
+
+    if (this.props.prioritizeUpdate) {
+      return <Octicon className="warning-icon" symbol={octicons.alert} />
+    }
+
+    return (
+      <Octicon className="download-icon" symbol={octicons.desktopDownload} />
+    )
+  }
+
   private renderMessage = () => {
     if (this.props.isX64ToARM64ImmediateAutoUpdate) {
       return (

diff --git a/app/styles/ui/banners/_update-available.scss b/app/styles/ui/banners/_update-available.scss
@@ -1,5 +1,6 @@
 #update-available {
-  .download-icon {
+  .download-icon,
+  .warning-icon {
     margin-right: var(--spacing);
   }