Rework commit page header (#17849)

- Remove blue background and use regular header styling
- Use flexbox on author and signature segments
- Add shield-type icons besides gpg key, replacing icon font icons
- Ensure author and signature line are same height
- Remove erronous green background on arc-green signature line
- Turn signing colors into CSS variables
- Consolidate the two warning states into one

Co-authored-by: zeripath <art27@cantab.net>

templates/repo/commit_page.tmpl

@@ -17,54 +17,49 @@
 				{{$class = (printf "%s%s" $class " isWarning")}}
 			{{end}}
 		{{end}}
-		<div class="ui top attached info clearing segment {{$class}}">
+		<div class="ui top attached header clearing segment pr {{$class}}">
 			{{if not $.PageIsWiki}}
-			<a class="ui floated right blue tiny button" href="{{.SourcePath}}">
+			<a class="ui blue tiny button browse-button" href="{{.SourcePath}}">
 				{{.i18n.Tr "repo.diff.browse_source"}}
 			</a>
 			{{end}}
-			<h3><span class="message-wrapper"><span class="commit-summary" title="{{.Commit.Summary}}">{{RenderCommitMessage .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</span></span>{{template "repo/commit_statuses" dict "Status" .CommitStatus "Statuses" .CommitStatuses  "root" $}}</h3>
+			<h3 class="mt-0"><span class="message-wrapper"><span class="commit-summary" title="{{.Commit.Summary}}">{{RenderCommitMessage .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</span></span>{{template "repo/commit_statuses" dict "Status" .CommitStatus "Statuses" .CommitStatuses  "root" $}}</h3>
 			{{if IsMultilineCommitMessage .Commit.Message}}
 				<pre class="commit-body">{{RenderCommitBody .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</pre>
 			{{end}}
 			{{if .BranchName}}
-				<span class="text grey">{{svg "octicon-git-branch"}}{{.BranchName}}</span>
+				<span class="text grey mr-3">{{svg "octicon-git-branch" 16 "mr-2"}}{{.BranchName}}</span>
 			{{end}}
 			{{if .TagName}}
-				<span class="text grey">{{svg "octicon-tag"}}{{.TagName}}</span>
+				<span class="text grey mr-3">{{svg "octicon-tag" 16 "mr-2"}}{{.TagName}}</span>
 			{{end}}
 		</div>
-		<div class="ui attached info segment {{$class}}">
+		<div class="ui attached segment df ac sb py-2 commit-header-row {{$class}}">
-			<div class="ui stackable grid">
+				<div class="df ac">
-				<div class="nine wide column">
 					{{if .Author}}
-						{{avatar .Author}}
+						{{avatar .Author 28 "mr-3"}}
 						{{if .Author.FullName}}
 							<a href="{{.Author.HomeLink}}"><strong>{{.Author.FullName}}</strong></a>
 						{{else}}
 							<a href="{{.Author.HomeLink}}"><strong>{{.Commit.Author.Name}}</strong></a>
 						{{end}}
 					{{else}}
-						{{avatarByEmail .Commit.Author.Email .Commit.Author.Email 12}}
+						{{avatarByEmail .Commit.Author.Email .Commit.Author.Email 28 "mr-3"}}
 						<strong>{{.Commit.Author.Name}}</strong>
 					{{end}}
-					<span class="text grey" id="authored-time">{{TimeSince .Commit.Author.When $.Lang}}</span>
+					<span class="text grey ml-3" id="authored-time">{{TimeSince .Commit.Author.When $.Lang}}</span>
 					{{if or (ne .Commit.Committer.Name .Commit.Author.Name) (ne .Commit.Committer.Email .Commit.Author.Email)}}
-						<div class="committed-by">
+						<span class="text grey mx-3">{{.i18n.Tr "repo.diff.committed_by"}}</span>
-							<span class="text grey">{{svg "octicon-git-commit"}}{{.i18n.Tr "repo.diff.committed_by"}}</span>
 						{{if ne .Verification.CommittingUser.ID 0}}
-								{{avatar .Verification.CommittingUser}}
+							{{avatar .Verification.CommittingUser 28 "mx-3"}}
 							<a href="{{.Verification.CommittingUser.HomeLink}}"><strong>{{.Commit.Committer.Name}}</strong></a>
 						{{else}}
-								{{avatarByEmail .Commit.Committer.Email .Commit.Committer.Name}}
+							{{avatarByEmail .Commit.Committer.Email .Commit.Committer.Name 28 "mr-3"}}
 							<strong>{{.Commit.Committer.Name}}</strong>
 						{{end}}
-						</div>
 					{{end}}
-
 				</div>
-				<div class="seven wide right aligned column">
+				<div class="ui horizontal list df ac">
-					<div class="ui horizontal list">
 					{{if .Parents}}
 						<div class="item">
 							{{.i18n.Tr "repo.diff.parent"}}
@@ -83,49 +78,63 @@
 					<div class="item">{{.i18n.Tr "repo.diff.commit"}}</div>
 					<div class="item"><span class="ui blue sha label">{{ShortSha .CommitID}}</span></div>
 				</div>
-				</div><!-- end column -->
-			</div><!-- end grid -->
 		</div>
 		{{if .Commit.Signature}}
-			<div class="ui bottom attached message {{$class}}">
+			<div class="ui bottom attached message tl df ac sb commit-header-row {{$class}}">
+				<div class="df ac">
 					{{if .Verification.Verified}}
 						{{if ne .Verification.SigningUser.ID 0}}
-						{{svg "gitea-lock"}}
+							{{svg "gitea-lock" 16 "mr-3"}}
 							{{if eq .Verification.TrustStatus "trusted"}}
-							<span class="ui text">{{.i18n.Tr "repo.commits.signed_by"}}:</span>
+								<span class="ui text mr-3">{{.i18n.Tr "repo.commits.signed_by"}}:</span>
 							{{else if eq .Verification.TrustStatus "untrusted"}}
-							<span class="ui text">{{.i18n.Tr "repo.commits.signed_by_untrusted_user"}}:</span>
+								<span class="ui text mr-3">{{.i18n.Tr "repo.commits.signed_by_untrusted_user"}}:</span>
 							{{else}}
-							<span class="ui text">{{.i18n.Tr "repo.commits.signed_by_untrusted_user_unmatched"}}:</span>
+								<span class="ui text mr-3">{{.i18n.Tr "repo.commits.signed_by_untrusted_user_unmatched"}}:</span>
 							{{end}}
-						{{avatar .Verification.SigningUser}}
+							{{avatar .Verification.SigningUser 28}}
 							<a href="{{.Verification.SigningUser.HomeLink}}"><strong>{{.Verification.SigningUser.Name}}</strong></a>
-						<span class="pull-right"><span class="ui text">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span> {{.Verification.SigningKey.KeyID}}</span>
 						{{else}}
 							<span title="{{.i18n.Tr "gpg.default_key"}}">{{svg "gitea-lock-cog"}}</span>
 							<span class="ui text">{{.i18n.Tr "repo.commits.signed_by"}}:</span>
-						{{avatarByEmail .Verification.SigningEmail ""}}
+							{{avatarByEmail .Verification.SigningEmail "" 28}}
 							<strong>{{.Verification.SigningUser.Name}}</strong>
-						<span class="pull-right"><span class="ui text">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span> <i class="cogs icon" title="{{.i18n.Tr "gpg.default_key"}}"></i>{{.Verification.SigningKey.KeyID}}</span>
+						{{end}}
+					{{else}}
+						{{svg "gitea-unlock" 16 "mr-3"}}
+						<span class="ui text">{{.i18n.Tr .Verification.Reason}}</span>
+					{{end}}
+				</div>
+				<div class="df ac">
+					{{if .Verification.Verified}}
+						{{if ne .Verification.SigningUser.ID 0}}
+							{{svg "octicon-shield-check" 16 "mr-3"}}
+							<span class="ui text mr-3">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span>
+							{{.Verification.SigningKey.KeyID}}
+						{{else}}
+							{{svg "octicon-shield-lock" 16 "mr-3"}}
+							<span class="ui text mr-3 tooltip" data-content="{{.i18n.Tr "gpg.default_key"}}">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span>
+							{{.Verification.SigningKey.KeyID}}
 						{{end}}
 					{{else if .Verification.Warning}}
-					{{svg "gitea-unlock"}}
+						{{svg "octicon-shield" 16 "mr-3"}}
-					<span class="ui text">{{.i18n.Tr .Verification.Reason}}</span>
+						<span class="ui text mr-3">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span>
-					<span class="pull-right"><span class="ui text">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span> <i class="warning icon"></i>{{.Verification.SigningKey.KeyID}}</span>
+						{{.Verification.SigningKey.KeyID}}
 					{{else}}
-					<i class="unlock icon"></i>
-					{{.i18n.Tr .Verification.Reason}}
 						{{if .Verification.SigningKey}}
 							{{if ne .Verification.SigningKey.KeyID ""}}
-							<span class="pull-right"><span class="ui text">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span> <i class="warning icon"></i>{{.Verification.SigningKey.KeyID}}</span>
+								{{svg "octicon-shield" 16 "mr-3"}}
+								<span class="ui text mr-3">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span>
+								{{.Verification.SigningKey.KeyID}}
 							{{end}}
 						{{end}}
 					{{end}}
 				</div>
+			</div>
 		{{end}}
 		{{if .Note}}
-			<div class="ui top attached info segment message git-notes">
+			<div class="ui top attached header segment git-notes">
-				<i class="sticky note icon"></i>
+				{{svg "octicon-note" 16 "mr-3"}}
 				{{.i18n.Tr "repo.diff.git-notes"}}:
 				{{if .NoteAuthor}}
 					<a href="{{.NoteAuthor.HomeLink}}">

web_src/less/_base.less

@@ -82,6 +82,15 @@
   --color-diff-moved-row-border: #d0e27f;
   --color-diff-added-row-border: #e6ffed;
   --color-diff-inactive: #f2f2f2;
+  --color-error-border: #c29393;
+  --color-error-bg: #fff5f5;
+  --color-error-text: #d64444;
+  --color-success-border: #a3c293;
+  --color-success-bg: #fcfff5;
+  --color-success-text: #6cc644;
+  --color-warning-border: #c2c193;
+  --color-warning-bg: #fffff5;
+  --color-warning-text: #fbbd08;
   /* target-based colors */
   --color-body: #ffffff;
   --color-text-dark: #080808;
@@ -411,6 +420,16 @@ a.muted:hover,
   background: var(--color-active) !important;
 }
 
+.ui.message {
+  background: var(--color-box-body);
+  color: var(--color-text);
+}
+
+.ui.bottom.attached.message {
+  box-shadow: none !important;
+  border: 1px solid var(--color-secondary);
+}
+
 .ui.selection.active.dropdown,
 .ui.selection.active.dropdown:hover,
 .ui.selection.active.dropdown .menu,
@@ -896,20 +915,6 @@ a.ui.card:hover,
     text-align: left;
   }
 
-  &.bottom.attached.message {
-    text-align: left;
-    color: black;
-
-    .pull-right {
-      color: black;
-    }
-
-    & > span,
-    .pull-right > span {
-      color: var(--color-green);
-    }
-  }
-
   .header > i + .content {
     padding-left: .75rem;
     vertical-align: middle;

web_src/less/_repository.less

@@ -2183,110 +2183,82 @@
   }
 
   .ui.attached.isSigned.isWarning {
-    border-left: 1px solid #c29393;
+    border-left: 1px solid var(--color-error-border);
-    border-right: 1px solid #c29393;
+    border-right: 1px solid var(--color-error-border);
 
     &.top,
     &.message {
-      border-top: 1px solid #c29393;
+      border-top: 1px solid var(--color-error-border);
     }
 
     &.message {
       box-shadow: none;
-      background-color: #fff5f5;
+      background-color: var(--color-error-bg);
-      color: #d95c5c;
+      color: var(--color-error-text);
 
       .ui.text {
-        color: #d64444;
+        color: var(--color-error-text);
       }
     }
 
     &:last-child,
     &.bottom {
-      border-bottom: 1px solid #c29393;
+      border-bottom: 1px solid var(--color-error-border);
     }
   }
 
-  .ui.attached.isSigned:not(.isWarning) .pull-right {
-    padding-top: 5px;
-  }
-
   .ui.attached.isSigned.isVerified {
-    border-left: 1px solid #a3c293;
+    border-left: 1px solid var(--color-success-border);
-    border-right: 1px solid #a3c293;
+    border-right: 1px solid var(--color-success-border);
 
     &.top,
     &.message {
-      border-top: 1px solid #a3c293;
+      border-top: 1px solid var(--color-success-border);
     }
 
     &.message {
       box-shadow: none;
-      background-color: #fcfff5;
+      background-color: var(--color-success-bg);
-      color: #6cc644;
+      color: var(--color-success-text);
 
       .pull-right {
         color: var(--color-text);
       }
 
       .ui.text {
-        color: #21ba45;
+        color: var(--color-success-text);
       }
     }
 
     &:last-child,
     &.bottom {
-      border-bottom: 1px solid #a3c293;
+      border-bottom: 1px solid var(--color-success-border);
-    }
-  }
-
-  .ui.attached.isSigned.isVerifiedUntrusted {
-    border-left: 1px solid #c2c193;
-    border-right: 1px solid #c2c193;
-
-    &.top,
-    &.message {
-      border-top: 1px solid #c2c193;
-    }
-
-    &.message {
-      box-shadow: none;
-      background-color: #fffff5;
-      color: #fbbd08;
-
-      .ui.text {
-        color: #d2ab00;
-      }
-    }
-
-    &:last-child,
-    &.bottom {
-      border-bottom: 1px solid #c2c193;
     }
   }
 
+  .ui.attached.isSigned.isVerifiedUntrusted,
   .ui.attached.isSigned.isVerifiedUnmatched {
-    border-left: 1px solid #c2a893;
+    border-left: 1px solid var(--color-warning-border);
-    border-right: 1px solid #c2a893;
+    border-right: 1px solid var(--color-warning-border);
 
     &.top,
     &.message {
-      border-top: 1px solid #c2a893;
+      border-top: 1px solid var(--color-warning-border);
     }
 
     &.message {
       box-shadow: none;
-      background-color: #fffaf5;
+      background-color: var(--color-warning-bg);
-      color: #f2711c;
+      color: var(--color-warning-text);
 
       .ui.text {
-        color: #ee5f00;
+        color: var(--color-warning-text);
       }
     }
 
     &:last-child,
     &.bottom {
-      border-bottom: 1px solid #c2a893;
+      border-bottom: 1px solid var(--color-warning-border);
     }
   }
 
@@ -2469,24 +2441,6 @@
     padding-top: 9px !important;
     padding-bottom: 9px !important;
   }
-
-  &.diff .committed-by {
-    padding-top: .5rem;
-
-    .ui.avatar {
-      width: 20px;
-      height: 20px;
-    }
-
-    span {
-      margin-right: .25rem;
-
-      svg {
-        vertical-align: text-bottom;
-        margin-right: 2px;
-      }
-    }
-  }
 }
 
 // End of .repository
@@ -2573,6 +2527,18 @@
   padding-top: 15px;
 }
 
+.browse-button {
+  position: absolute;
+  right: 1rem;
+  top: .75rem;
+}
+
+.commit-header-row {
+  min-height: 50px !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
 .settings {
   .content {
     > .header,

web_src/less/helpers.less

@@ -2,8 +2,10 @@
 .di { display: inline !important; }
 .dif { display: inline-flex !important; }
 .dib { display: inline-block !important; }
+.pr { position: relative !important; }
 .ac { align-items: center !important; }
 .tc { text-align: center !important; }
+.tl { text-align: left !important; }
 .jc { justify-content: center !important; }
 .js { justify-content: flex-start !important; }
 .je { justify-content: flex-end !important; }

web_src/less/themes/theme-arc-green.less

@@ -78,6 +78,15 @@
   --color-diff-moved-row-border: #bcca6f;
   --color-diff-added-row-border: #314a37;
   --color-diff-inactive: #353846;
+  --color-error-border: #a53a37;
+  --color-error-bg: #403440;
+  --color-error-text: #d64444;
+  --color-success-border: #458a57;
+  --color-success-bg: #304440;
+  --color-success-text: #6cc664;
+  --color-warning-border: #aaa050;
+  --color-warning-bg: #404440;
+  --color-warning-text: #fbbd08;
   /* target-based colors */
   --color-body: #383c4a;
   --color-box-header: #404652;
@@ -310,10 +319,6 @@ a.ui.basic.green.label:hover {
   border-color: transparent !important;
 }
 
-.ui .info.segment.top {
-  background-color: var(--color-secondary) !important;
-}
-
 .repository .diff-stats li {
   border-color: var(--color-secondary);
 }
@@ -332,25 +337,6 @@ td.blob-hunk {
   color: #dbdbdb !important;
 }
 
-.ui.attached.info.message,
-.ui.info.message {
-  box-shadow: 0 0 0 1px #4b5e71 inset, 0 0 0 0 transparent;
-}
-
-.ui.bottom.attached.message {
-  background-color: #2c662d;
-  color: #87ab63;
-}
-
-.ui.bottom.attached.message .pull-right {
-  color: #87ab63;
-}
-
-.ui.info.message {
-  background-color: #2c3b4a;
-  color: #9ebcc5;
-}
-
 .ui .warning.header,
 .ui.warning.message {
   background-color: #542 !important;
@@ -449,59 +435,6 @@ td.blob-excerpt {
   color: #dbdbdb;
 }
 
-.repository .ui.attached.message.isSigned.isVerified {
-  background-color: #394829;
-  color: var(--color-secondary-dark-6);
-
-  &.message {
-    color: #87ab63;
-    .ui.text {
-      color: var(--color-secondary-dark-6);
-    }
-    .pull-right {
-      color: #87ab63;
-    }
-  }
-}
-
-.repository .ui.attached.message.isSigned.isVerifiedUntrusted {
-  background-color: #4a3903;
-  color: var(--color-secondary-dark-6);
-  &.message {
-    color: #c2c193;
-    .ui.text {
-      color: var(--color-secondary-dark-6);
-    }
-    a {
-      color: #c2c193;
-    }
-  }
-}
-
-.repository .ui.attached.message.isSigned.isVerifiedUnmatched {
-  background-color: #4e3321;
-  color: var(--color-secondary-dark-6);
-  &.message {
-    color: #c2a893;
-    .ui.text {
-      color: var(--color-secondary-dark-6);
-    }
-    a {
-      color: #c2a893;
-    }
-  }
-}
-
-.repository .ui.attached.message.isSigned.isWarning {
-  background-color: rgba(80, 23, 17, .6);
-  &.message {
-    color: #d07d7d;
-    .ui.text {
-      color: #d07d7d;
-    }
-  }
-}
-
 .ui.header .sub.header {
   color: var(--color-secondary-dark-6);
 }