Fix all rounded borders, change affected tab menus to pills

routers/web/repo/editor.go

@@ -420,7 +420,7 @@ func DiffPreviewPost(ctx *context.Context) {
 	}
 
 	if diff.NumFiles == 0 {
-		ctx.PlainText(http.StatusOK, ctx.Locale.TrString("repo.editor.no_changes_to_show"))
+		ctx.PlainText(http.StatusOK, `<div class="tw-p-6">` + ctx.Locale.TrString("repo.editor.no_changes_to_show") + `</div>`)
 		return
 	}
 	ctx.Data["File"] = diff.Files[0]

templates/admin/emails/list.tmpl

@@ -23,7 +23,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="ui attached table segment">
+		<div class="ui attached table segment tw-rounded-b">
 			<table class="ui very basic striped table unstackable">
 				<thead>
 					<tr>

templates/org/team/members.tmpl

@@ -8,7 +8,7 @@
 			<div class="ui ten wide column">
 				{{template "org/team/navbar" .}}
 				{{if .IsOrganizationOwner}}
-					<div class="ui attached segment">
+					<div class="ui top attached segment">
 						<form class="ui form ignore-dirty tw-flex tw-flex-wrap tw-gap-2" action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/add" method="post">
 							{{.CsrfTokenHtml}}
 							<input type="hidden" name="uid" value="{{.SignedUser.ID}}">
@@ -21,7 +21,7 @@
 						</form>
 					</div>
 				{{end}}
-				<div class="ui attached segment">
+				<div class="ui{{if not .IsOrganizationOwner}} top{{end}} attached segment">
 					<div class="flex-list">
 						{{range .Team.Members}}
 							<div class="flex-item tw-items-center">

templates/org/team/navbar.tmpl

@@ -1,4 +1,4 @@
-<div class="ui top attached tabular menu org-team-navbar">
+<div class="ui compact small menu small-menu-items org-team-navbar">
 	<a class="item{{if .PageIsOrgTeamMembers}} active{{end}}" href="{{.OrgLink}}/teams/{{.Team.LowerName | PathEscape}}">{{svg "octicon-person"}} <strong>{{.Team.NumMembers}}</strong>&nbsp; {{ctx.Locale.Tr "org.lower_members"}}</a>
 	<a class="item{{if .PageIsOrgTeamRepos}} active{{end}}" href="{{.OrgLink}}/teams/{{.Team.LowerName | PathEscape}}/repositories">{{svg "octicon-repo"}} <strong>{{.Team.NumRepos}}</strong>&nbsp; {{ctx.Locale.Tr "org.lower_repositories"}}</a>
 </div>

templates/org/team/repositories.tmpl

@@ -25,7 +25,7 @@
 						</div>
 					</div>
 				{{end}}
-				<div class="ui attached segment">
+				<div class="ui{{if not $canAddRemove}} top{{end}} attached segment">
 					<div class="flex-list">
 						{{range .Team.Repos}}
 							<div class="flex-item tw-items-center">

templates/repo/editor/edit.tmpl

@@ -26,25 +26,25 @@
 				</div>
 			</div>
 			<div class="field">
-				<div class="ui top attached tabular menu" data-write="write" data-preview="preview" data-diff="diff">
+				<div class="ui compact small menu small-menu-items repo-editor-menu" data-write="write" data-preview="preview" data-diff="diff">
 					<a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}}</a>
 					<a class="item" data-tab="preview" data-url="{{.Repository.Link}}/markup" data-context="{{.RepoLink}}/src/{{.BranchNameSubURL}}" data-markup-mode="file">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
 					{{if not .IsNewFile}}
 					<a class="item" data-tab="diff" hx-params="context,content" hx-vals='{"context":"{{.BranchLink}}"}' hx-include="#edit_area" hx-swap="innerHTML" hx-target=".tab[data-tab='diff']" hx-indicator=".tab[data-tab='diff']" hx-post="{{.RepoLink}}/_preview/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">{{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}}</a>
 					{{end}}
 				</div>
-				<div class="ui bottom attached active tab segment" data-tab="write">
+				<div class="ui active tab segment tw-rounded" data-tab="write">
 					<textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
 						data-url="{{.Repository.Link}}/markup"
 						data-context="{{.RepoLink}}"
 						data-previewable-extensions="{{.PreviewableExtensions}}"
 						data-line-wrap-extensions="{{.LineWrapExtensions}}">{{.FileContent}}</textarea>
 					<div class="editor-loading is-loading"></div>
 				</div>
-				<div class="ui bottom attached tab segment markup" data-tab="preview">
+				<div class="ui tab segment markup tw-rounded" data-tab="preview">
 					{{ctx.Locale.Tr "loading"}}
 				</div>
-				<div class="ui bottom attached tab segment diff edit-diff" data-tab="diff">
+				<div class="ui tab segment diff edit-diff tw-text-center" data-tab="diff">
 					<div class="tw-p-16"></div>
 				</div>
 			</div>

templates/repo/issue/labels/label_load_template.tmpl

@@ -1,24 +1,21 @@
 <div class="ui centered grid">
 	<div class="twelve wide computer column">
-		<div class="ui attached left aligned segment">
-			<p>{{ctx.Locale.Tr "repo.issues.label_templates.info"}}</p>
-			<br>
-			<form class="ui form center" action="{{.Link}}/initialize" method="post">
-				{{.CsrfTokenHtml}}
-				<div class="field">
-					<div class="ui selection dropdown">
-						<input type="hidden" name="template_name" value="Default">
-						<div class="default text">{{ctx.Locale.Tr "repo.issues.label_templates.helper"}}</div>
-						<div class="menu">
-							{{range .LabelTemplateFiles}}
-								<div class="item" data-value="{{.DisplayName}}">{{.DisplayName}}<br><i>({{.Description}})</i></div>
-							{{end}}
-						</div>
-						{{svg "octicon-triangle-down" 18 "dropdown icon"}}
+		<p>{{ctx.Locale.Tr "repo.issues.label_templates.info"}}</p>
+		<form class="ui form center" action="{{.Link}}/initialize" method="post">
+			{{.CsrfTokenHtml}}
+			<div class="field">
+				<div class="ui selection dropdown">
+					<input type="hidden" name="template_name" value="Default">
+					<div class="default text">{{ctx.Locale.Tr "repo.issues.label_templates.helper"}}</div>
+					<div class="menu">
+						{{range .LabelTemplateFiles}}
+							<div class="item" data-value="{{.DisplayName}}">{{.DisplayName}}<br><i>({{.Description}})</i></div>
+						{{end}}
 					</div>
+					{{svg "octicon-triangle-down" 18 "dropdown icon"}}
 				</div>
-				<button type="submit" class="ui primary button">{{ctx.Locale.Tr "repo.issues.label_templates.use"}}</button>
-			</form>
-		</div>
+			</div>
+			<button type="submit" class="ui primary button">{{ctx.Locale.Tr "repo.issues.label_templates.use"}}</button>
+		</form>
 	</div>
 </div>

templates/repo/migrate/migrate.tmpl

@@ -5,7 +5,7 @@
 			{{template "repo/migrate/helper" .}}
 			<div class="ui cards migrate-entries">
 				{{range .Services}}
-					<a class="ui card migrate-entry tw-flex tw-items-center" href="{{AppSubUrl}}/repo/migrate?service_type={{.}}&org={{$.Org}}&mirror={{$.Mirror}}">
+					<a class="ui card migrate-entry tw-flex tw-items-center tw-rounded" href="{{AppSubUrl}}/repo/migrate?service_type={{.}}&org={{$.Org}}&mirror={{$.Mirror}}">
 						{{if eq .Name "github"}}
 							{{svg "octicon-mark-github" 184 "tw-p-4"}}
 						{{else if eq .Name "gitlab"}}

templates/repo/settings/webhook/base_list.tmpl

@@ -7,7 +7,7 @@
 		</div>
 	</div>
 </h4>
-<div class="ui attached segment">
+<div class="ui attached segment tw-rounded-b">
 	<div class="ui list">
 		<div class="item">
 			{{.Description}}

templates/shared/secrets/add_list.tmpl

@@ -10,7 +10,7 @@
 		</button>
 	</div>
 </h4>
-<div class="ui attached segment">
+<div class="ui attached segment tw-rounded-b">
 	{{if .Secrets}}
 	<div class="flex-list">
 		{{range .Secrets}}

templates/shared/user/blocked_users.tmpl

@@ -30,7 +30,7 @@
 <h4 class="ui top attached header">
 	{{ctx.Locale.Tr "user.block.list"}}
 </h4>
-<div class="ui attached segment">
+<div class="ui attached segment tw-rounded">
 	<div class="flex-list">
 		{{range .UserBlocks}}
 			<div class="flex-item">

templates/shared/user/profile_big_avatar.tmpl

@@ -1,4 +1,4 @@
-<div id="profile-avatar-card" class="ui card">
+<div id="profile-avatar-card" class="ui card tw-rounded">
 	<div id="profile-avatar" class="content tw-flex">
 	{{if eq .SignedUserID .ContextUser.ID}}
 		<a class="image" href="{{AppSubUrl}}/user/settings" data-tooltip-content="{{ctx.Locale.Tr "user.change_avatar"}}">

templates/shared/variables/variable_list.tmpl

@@ -12,7 +12,7 @@
 		</button>
 	</div>
 </h4>
-<div class="ui attached segment">
+<div class="ui attached segment tw-rounded-b">
 	{{if .Variables}}
 	<div class="flex-list">
 		{{range .Variables}}

templates/user/notification/notification_subscriptions.tmpl

@@ -1,15 +1,15 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content user notification">
 	<div class="ui container">
-		<div class="ui top attached tabular menu">
+		<div class="ui compact small menu small-menu-items">
 			<a href="{{AppSubUrl}}/notifications/subscriptions" class="{{if eq .Status 1}}active {{end}}item">
 				{{ctx.Locale.Tr "notification.subscriptions"}}
 			</a>
 			<a href="{{AppSubUrl}}/notifications/watching" class="{{if eq .Status 2}}active {{end}}item">
 				{{ctx.Locale.Tr "notification.watching"}}
 			</a>
 		</div>
-		<div class="ui bottom attached active tab segment">
+		<div class="ui top attached active tab segment">
 			{{if eq .Status 1}}
 				<div class="tw-flex tw-justify-between">
 					<div class="tw-flex">

web_src/css/features/codeeditor.css

@@ -21,6 +21,11 @@
   background-color: transparent !important;
 }
 
+.monaco-editor,
+.monaco-editor .overflow-guard {
+  border-radius: var(--border-radius);
+}
+
 /* these seem unthemeable */
 .monaco-scrollable-element > .scrollbar > .slider {
   background: var(--color-primary) !important;

web_src/css/modules/segment.css

@@ -152,7 +152,8 @@
 }
 
 .ui.attached.segment:has(+ .ui[class*="top attached"].header),
-.ui.attached.segment:last-child {
+.ui.attached.segment:last-child,
+.ui.segment:has(+ .ui.segment:not(.attached)) {
   border-radius: 0 0 0.28571429rem 0.28571429rem;
 }
 
@@ -166,6 +167,10 @@
 .ui.segment[class*="top attached"]:first-child {
   margin-top: 0;
 }
+.ui[class*="top attached"].segment:last-child {
+  border-top-left-radius: 0.28571429rem;
+  border-top-right-radius: 0.28571429rem;
+}
 
 .ui.segment[class*="bottom attached"] {
   bottom: 0;

web_src/js/features/codeeditor.js

@@ -98,6 +98,7 @@ export async function createMonaco(textarea, filename, editorOpts) {
       'input.foreground': getColor('--color-input-text'),
       'scrollbar.shadow': getColor('--color-shadow'),
       'progressBar.background': getColor('--color-primary'),
+      'focusBorder': '#0000', // prevent blue border
     },
   });
 

web_src/js/features/repo-editor.js

@@ -7,7 +7,7 @@ import {attachRefIssueContextPopup} from './contextpopup.js';
 import {POST} from '../modules/fetch.js';
 
 function initEditPreviewTab($form) {
-  const $tabMenu = $form.find('.tabular.menu');
+  const $tabMenu = $form.find('.repo-editor-menu');
   $tabMenu.find('.item').tab();
   const $previewTab = $tabMenu.find(`.item[data-tab="${$tabMenu.data('preview')}"]`);
   if ($previewTab.length) {