feat: add visual warning for mismatched commit email

app/src/ui/changes/commit-message.tsx

@@ -94,10 +94,34 @@ function formatConfigOriginTooltip(
   fieldName: string,
   origin: IConfigValueOrigin,
   repositoryPath: string,
-  onRevealFile: () => void
+  onRevealFile: () => void,
+  warningMessage?: string,
+  warningAccountLogin?: string,
+  onOpenRepositoryRemoteSettings?: () => void
 ): JSX.Element {
   return (
     <div className="config-origin-tooltip">
+      {warningMessage && warningAccountLogin && (
+        <>
+          <span className="config-origin-tooltip-warning-icon">
+            <Octicon symbol={octicons.alert} />
+          </span>
+          <span className="config-origin-tooltip-warning">
+            {warningMessage}
+          </span>
+          <span className="config-origin-tooltip-spacer" />
+          <span className="config-origin-tooltip-hint">
+            Repository is linked to @{warningAccountLogin}
+          </span>
+          <span className="config-origin-tooltip-spacer" />
+          <span className="config-origin-tooltip-hint">
+            Change account in{' '}
+            <LinkButton onClick={onOpenRepositoryRemoteSettings}>
+              repository settings
+            </LinkButton>
+          </span>
+        </>
+      )}
       <span className="config-origin-tooltip-label">{fieldName}:</span>
       <span>{origin.value}</span>
       <span className="config-origin-tooltip-label">Scope:</span>
@@ -842,6 +866,13 @@ export class CommitMessage extends React.Component<
 
     const { commitAuthorNameOrigin, commitAuthorEmailOrigin } = this.props
     const repoPath = this.props.repository.path
+    const isMisattributed = warningType === 'misattribution'
+    const warningMessage = isMisattributed
+      ? 'Email does not match linked account'
+      : undefined
+    const warningAccountLogin = isMisattributed
+      ? repositoryAccount?.login
+      : undefined
     const nameTooltip = commitAuthorNameOrigin
       ? formatConfigOriginTooltip(
           'Name',
@@ -855,12 +886,22 @@ export class CommitMessage extends React.Component<
           'Email',
           commitAuthorEmailOrigin,
           repoPath,
-          this.onRevealEmailConfigFile
+          this.onRevealEmailConfigFile,
+          warningMessage,
+          warningAccountLogin,
+          this.onOpenRepositoryRemoteSettings
         )
       : undefined
 
+    const identityClasses = classNames('commit-author-identity', {
+      warning: isMisattributed,
+    })
+    const emailClasses = classNames('commit-author-email', {
+      warning: isMisattributed,
+    })
+
     return (
-      <div className="commit-author-identity">
+      <div className={identityClasses}>
         {avatar}
         <div className="commit-author-info">
           <TooltippedContent
@@ -872,7 +913,7 @@ export class CommitMessage extends React.Component<
             {commitAuthor.name}
           </TooltippedContent>
           <TooltippedContent
-            className="commit-author-email"
+            className={emailClasses}
             tooltip={emailTooltip}
             tooltipClassName="config-origin"
             interactive={true}
@@ -915,6 +956,14 @@ export class CommitMessage extends React.Component<
     })
   }
 
+  private onOpenRepositoryRemoteSettings = () => {
+    this.props.onShowPopup({
+      type: PopupType.RepositorySettings,
+      repository: this.props.repository,
+      initialSelectedTab: RepositorySettingsTab.Remote,
+    })
+  }
+
   private onOpenGitSettings = () => {
     this.props.onShowPopup({
       type: PopupType.Preferences,

app/styles/ui/changes/_commit-message.scss

@@ -87,6 +87,11 @@
     gap: var(--spacing-half);
     margin-bottom: var(--spacing-half);
 
+    &.warning {
+      border-left: 2px solid var(--input-icon-warning-color);
+      padding-left: var(--spacing-half);
+    }
+
     .commit-author-info {
       display: flex;
       flex-direction: column;
@@ -105,6 +110,10 @@
         color: var(--text-secondary-color);
         @include ellipsis;
         cursor: default;
+
+        &.warning {
+          color: var(--input-warning-text-color);
+        }
       }
     }
   }

app/styles/ui/window/_tooltips.scss

@@ -222,6 +222,28 @@ body > .tooltip,
         font-weight: bold;
         text-align: right;
       }
+
+      .config-origin-tooltip-warning-icon {
+        color: var(--input-icon-warning-color);
+        grid-row: span 3;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .config-origin-tooltip-warning {
+        color: var(--input-icon-warning-color);
+        font-size: var(--font-size-sm);
+      }
+
+      .config-origin-tooltip-spacer {
+        // Empty first-column cell in the warning grid rows
+      }
+
+      .config-origin-tooltip-hint {
+        font-size: var(--font-size-xs);
+        color: var(--input-icon-warning-color);
+      }
     }
   }