Merge pull request desktop#17178 from vaindil/vaindil/repo-rules-tweaks

Repo rules tweaks

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

@@ -177,9 +177,21 @@ export class CommitMessageAvatar extends React.Component<
   }
 
   private renderWarningBadge() {
+    const { warningType, emailRuleFailures } = this.props
+
+    // the parent component only renders this one if an error/warning is present, so we
+    // only need to check which of the two it is here
+    const isError =
+      warningType === 'disallowedEmail' && emailRuleFailures?.status === 'fail'
+    const classes = classNames('warning-badge', {
+      error: isError,
+      warning: !isError,
+    })
+    const symbol = isError ? OcticonSymbol.stop : OcticonSymbol.alert
+
     return (
-      <div className="warning-badge" ref={this.warningBadgeRef}>
-        <Octicon symbol={OcticonSymbol.alert} />
+      <div className={classes} ref={this.warningBadgeRef}>
+        <Octicon symbol={symbol} />
       </div>
     )
   }

app/src/ui/repository-rules/repo-rules-failure-list.tsx

@@ -27,15 +27,13 @@ export class RepoRulesMetadataFailureList extends React.Component<IRepoRulesMeta
   public render() {
     const { repository, branch, failures, leadingText } = this.props
 
+    const totalFails = failures.failed.length + failures.bypassed.length
     let endText: string
-    let length: number
     if (failures.status === 'bypass') {
-      length = failures.bypassed.length
       endText = `, but you can bypass ${
-        length === 1 ? 'it' : 'them'
+        totalFails === 1 ? 'it' : 'them'
       }. Proceed with caution!`
     } else {
-      length = failures.failed.length
       endText = '.'
     }
 
@@ -44,7 +42,7 @@ export class RepoRulesMetadataFailureList extends React.Component<IRepoRulesMeta
     return (
       <div className="repo-rules-failure-list-component">
         <p>
-          {leadingText} fails {length} rule{length > 1 ? 's' : ''}
+          {leadingText} fails {totalFails} rule{totalFails > 1 ? 's' : ''}
           {endText}{' '}
           <RepoRulesetsForBranchLink repository={repository} branch={branch}>
             View all rulesets for this branch.

app/styles/_variables.scss

@@ -199,11 +199,10 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
   --co-author-tag-border-color: #{$blue-200};
 
   /**
-   * Author input (co-authors)
+   * Commit warning badge icon
    */
   --commit-warning-badge-background-color: #{$gray-000};
-  --commit-warning-badge-border-color: #{$gray-300};
-  --commit-warning-badge-icon-color: var(--warning-badge-icon-color);
+  --commit-warning-badge-border: #{$gray-300};
 
   /**
    * The height of the title bar area on Win32 platforms
@@ -441,14 +440,17 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
   --form-error-border-color: #{$red-200};
   --form-error-text-color: #{$red-800};
 
+  // Inline form errors, displayed after the input field
+  --input-warning-text-color: var(--dialog-warning-color);
+  --input-error-text-color: #{$red-800};
+
   /** Overlay is used as a background for both modals and foldouts */
   --overlay-background-color: #{$overlay-background-color};
 
   /** Dialog */
   --dialog-warning-color: #{$yellow-600};
   --dialog-information-color: #{$blue-400};
   --dialog-error-color: #{$red};
-  --dialog-error-text-color: #{$red-800};
 
   /** File warning */
   --file-warning-background-color: #{$yellow-200};

app/styles/themes/_dark.scss

@@ -163,6 +163,12 @@ body.theme-dark {
   --co-author-tag-background-color: #{$blue-800};
   --co-author-tag-border-color: #{$blue-700};
 
+  /**
+   * Commit warning badge icon
+   */
+  --commit-warning-badge-background-color: #{$gray-900};
+  --commit-warning-badge-border-color: #{$gray-700};
+
   --base-border: 1px solid var(--box-border-color);
   --contrast-border: 1px solid var(--box-border-contrast-color);
 
@@ -337,14 +343,17 @@ body.theme-dark {
   --form-error-border-color: #{$red-900};
   --form-error-text-color: var(--text-color);
 
+  // Inline form errors, displayed after the input field
+  --input-warning-text-color: var(--dialog-warning-color);
+  --input-error-text-color: #{$red-300};
+
   /** Overlay is used as a background for both modals and foldouts */
   --overlay-background-color: rgba(0, 0, 0, 0.5);
 
   /** Dialog */
   --dialog-warning-color: #{$yellow-600};
   --dialog-information-color: #{$blue-400};
   --dialog-error-color: #{$red-600};
-  --dialog-error-text-color: #{$red-300};
 
   /** File warning */
   --file-warning-background-color: #{rgba($yellow-900, 0.4)};

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

@@ -41,11 +41,18 @@
     border-radius: 9px;
 
     > svg {
-      color: var(--commit-warning-badge-icon-color);
       height: 10px;
       // With width=100%, the icon will be centered horizontally
       width: 100%;
-      vertical-align: unset;
+      vertical-align: middle;
+    }
+
+    &.warning > svg {
+      color: var(--input-icon-warning-color);
+    }
+
+    &.error > svg {
+      color: var(--input-icon-error-color);
     }
   }
 

app/styles/ui/_input-description.scss

@@ -13,15 +13,15 @@
 
   &.input-description-warning {
     .octicon {
-      fill: var(--dialog-warning-color);
+      fill: var(--input-warning-text-color);
     }
   }
 
   &.input-description-error {
-    color: var(--dialog-error-text-color);
+    color: var(--input-error-text-color);
 
     .octicon {
-      fill: var(--dialog-error-text-color);
+      fill: var(--input-error-text-color);
     }
   }
 }

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

@@ -3,7 +3,7 @@
 .commit-warning-component {
   flex-direction: column;
   flex-shrink: 0;
-  margin-top: 6px;
+  margin-top: var(--spacing-half);
 
   display: flex;
   background-color: var(--box-alt-background-color);

app/styles/ui/repository-rules/_repo-rules-failure-list.scss

@@ -1,5 +1,5 @@
 .repo-rules-failure-list-component {
   ul {
-    padding-inline-start: 25px;
+    padding-inline-start: var(--spacing-double);
   }
 }