Merge pull request desktop#17794 from desktop/sign-in-buttons

Increase specificity of sign in/out  buttons

Author: tidy-dev

app/src/ui/preferences/accounts.tsx

@@ -29,25 +29,31 @@ export class Accounts extends React.Component<IAccountsProps, {}> {
       <DialogContent className="accounts-tab">
         <h2>GitHub.com</h2>
         {this.props.dotComAccount
-          ? this.renderAccount(this.props.dotComAccount)
+          ? this.renderAccount(this.props.dotComAccount, SignInType.DotCom)
           : this.renderSignIn(SignInType.DotCom)}
 
         <h2>GitHub Enterprise</h2>
         {this.props.enterpriseAccount
-          ? this.renderAccount(this.props.enterpriseAccount)
+          ? this.renderAccount(
+              this.props.enterpriseAccount,
+              SignInType.Enterprise
+            )
           : this.renderSignIn(SignInType.Enterprise)}
       </DialogContent>
     )
   }
 
-  private renderAccount(account: Account) {
+  private renderAccount(account: Account, type: SignInType) {
     const avatarUser: IAvatarUser = {
       name: account.name,
       email: lookupPreferredEmail(account),
       avatarURL: account.avatarURL,
       endpoint: account.endpoint,
     }
 
+    const accountTypeLabel =
+      type === SignInType.DotCom ? 'GitHub.com' : 'GitHub Enterprise'
+
     return (
       <Row className="account-info">
         <Avatar user={avatarUser} />
@@ -56,7 +62,7 @@ export class Accounts extends React.Component<IAccountsProps, {}> {
           <div className="login">@{account.login}</div>
         </div>
         <Button onClick={this.logout(account)}>
-          {__DARWIN__ ? 'Sign Out' : 'Sign out'}
+          {__DARWIN__ ? 'Sign Out of' : 'Sign out of'} {accountTypeLabel}
         </Button>
       </Row>
     )
@@ -71,12 +77,12 @@ export class Accounts extends React.Component<IAccountsProps, {}> {
   }
 
   private renderSignIn(type: SignInType) {
-    const signInTitle = __DARWIN__ ? 'Sign In' : 'Sign in'
+    const signInTitle = __DARWIN__ ? 'Sign Into' : 'Sign into'
     switch (type) {
       case SignInType.DotCom: {
         return (
           <CallToAction
-            actionTitle={signInTitle}
+            actionTitle={signInTitle + ' GitHub.com'}
             onAction={this.onDotComSignIn}
           >
             <div>
@@ -88,7 +94,7 @@ export class Accounts extends React.Component<IAccountsProps, {}> {
       case SignInType.Enterprise:
         return (
           <CallToAction
-            actionTitle={signInTitle}
+            actionTitle={signInTitle + ' GitHub Enterprise'}
             onAction={this.onEnterpriseSignIn}
           >
             <div>

app/styles/ui/_preferences.scss

@@ -54,6 +54,15 @@
         }
       }
     }
+
+    .call-to-action {
+      display: block;
+
+      .button-component {
+        margin-top: var(--spacing);
+        margin-left: 0;
+      }
+    }
   }
 
   .no-options-found {