cmd/tailscale/cli: style synology outgoing access info (#6959)

Follow-up to #6957.

Updates #4015

Signed-off-by: Jenny Zhang <jz@tailscale.com>

cmd/tailscale/cli/web.css

@@ -225,6 +225,11 @@ a {
 	background-color: rgba(249, 247, 246, var(--tw-bg-opacity));
 }
 
+.bg-orange-0 {
+	--tw-bg-opacity: 1;
+		background-color: rgba(255, 250, 238, var(--tw-bg-opacity));
+}
+
 .border-gray-200 {
 	--tw-border-opacity: 1;
 	border-color: rgba(238, 235, 234, var(--tw-border-opacity));
@@ -1119,6 +1124,11 @@ a {
 	color: rgba(35, 34, 34, var(--tw-text-opacity));
 }
 
+.text-orange-800 {
+	--tw-text-opacity: 1;
+		color: rgba(66, 14, 17, var(--tw-text-opacity));
+}
+
 .leading-3 {
 	line-height: 0.75rem;
 }

cmd/tailscale/cli/web.html

@@ -99,10 +99,12 @@
 		<a href="#" class="mb-4 link font-medium js-loginButton" target="_blank">Reauthenticate</a>
 	</div>
 	{{ if .IsSynology }}
-		<div class="mb-4">
-			<b>Outgoing access:</b>
-			{{ if .TUNMode }} enabled {{ else }} not configured {{ end }}
-			<nobr>[<a href="https://tailscale.com/kb/1152/synology-outbound/">docs</a>]</nobr>
+		<div class="border border-gray-200 bg-orange-0 rounded-lg p-2 pl-3 pr-3 mb-8 width-full text-orange-800">
+			Outgoing access {{ if true }}enabled{{ else }}not configured{{ end }}.
+			<nobr><a href="https://tailscale.com/kb/1152/synology-outbound/"
+				class="font-medium link"
+				target="_blank"
+				rel="noopener noreferrer">Learn more &rarr;</a></nobr>
 		</div>
 	{{ end }}
 	{{ end }}