add theme color, link to avatar settings section from user profile

Author: silverwind

templates/shared/user/profile_big_avatar.tmpl

@@ -1,7 +1,7 @@
 <div id="profile-avatar-card" class="ui card">
 	<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"}}">
+		<a class="image" href="{{AppSubUrl}}/user/settings#avatar" data-tooltip-content="{{ctx.Locale.Tr "user.change_avatar"}}">
 			{{/* the size doesn't take affect (and no need to take affect), image size(width) should be controlled by the parent container since this is not a flex layout*/}}
 			{{ctx.AvatarUtils.Avatar .ContextUser 256}}
 		</a>

templates/user/settings/profile.tmpl

@@ -100,7 +100,7 @@
 		<h4 class="ui top attached header">
 			{{ctx.Locale.Tr "settings.avatar"}}
 		</h4>
-		<div class="ui attached segment">
+		<div class="ui attached segment" id="avatar">
 			<form class="ui form" action="{{.Link}}/avatar" method="post" enctype="multipart/form-data">
 				{{.CsrfTokenHtml}}
 				{{if not .DisableGravatar}}

web_src/js/features/comp/Cropper.ts

@@ -13,11 +13,11 @@ async function initCompCropper({container, fileInput, imageSource}: CropperOpts)
   let currentFileLastModified = 0;
 
   const canvasEl = createElementFromHTML<CropperCanvas>(`
-    <cropper-canvas background>
+    <cropper-canvas background theme-color="var(--color-primary)">
       <cropper-image src="${imageSource.src}" scalable skewable translatable></cropper-image>
       <cropper-shade hidden></cropper-shade>
       <cropper-handle action="select" plain></cropper-handle>
-      <cropper-selection initial-coverage="0.5" initial-aspect-ratio="1" movable resizable>
+      <cropper-selection initial-coverage="0.5" initial-aspect-ratio="1" movable resizable outlined>
         <cropper-grid role="grid" covered></cropper-grid>
         <cropper-crosshair centered></cropper-crosshair>
         <cropper-handle action="move" theme-color="#ffffff23"></cropper-handle>