[chore] Update + add fonts for additional scripts, use locally installed font if available (#3997)

* [chore] Update + add fonts for additional scripts, use locally installed font if available

* update comments

web/source/settings/style.css

@@ -1494,10 +1494,6 @@ button.tab-button {
 				background: none;
 				padding: 0;
 			}
-
-			> .info-list-entry > .monospace {
-				font-size: large;
-			}
 		}
 	
 		.action-buttons {
@@ -1520,8 +1516,6 @@ button.tab-button {
 		white-space: pre;
 		overflow-x: auto;
 		-webkit-overflow-scrolling: touch;
-		font-family: monospace;
-		font-size: large;
 	}
 
 	.closed {
@@ -1539,10 +1533,6 @@ button.tab-button {
 				background: none;
 				padding: 0;
 			}
-
-			> .info-list-entry > .monospace {
-				font-size: large;
-			}
 		}
 	}
 }
@@ -1551,10 +1541,6 @@ button.tab-button {
 	.info-list {
 		margin-top: 1rem;
 
-		> .info-list-entry .monospace {
-			font-size: large;
-		}
-
 		> .info-list-entry > dd > button {
 			font-size: medium;
 			padding-top: 0;
@@ -1563,10 +1549,6 @@ button.tab-button {
 	}
 }
 
-.application-new > .form-section-docs > p > .monospace {
-	font-size: large;
-}
-
 .instance-rules {
 	list-style-position: inside;
 	margin: 0;
@@ -1640,8 +1622,7 @@ button.tab-button {
 			}
 	
 			dd {
-				font-family: monospace;
-				font-size: large;
+				font-family: "Noto Sans Mono", monospace;
 			}
 		}
 	}
@@ -1650,10 +1631,6 @@ button.tab-button {
 .http-header-permission-details {
 	.info-list {
 		margin-top: 1rem;
-
-		> .info-list-entry > .monospace {
-			font-size: large;
-		}
 	}
 }
 
@@ -1837,5 +1814,5 @@ button.tab-button {
 }
 
 .monospace {
-	font-family: monospace;
+	font-family: "Noto Sans Mono", monospace;
 }

web/source/settings/views/user/applications/callback.tsx

@@ -107,7 +107,7 @@ function AccessForAppForm({ data: app, code }: { data: App, code: string }) {
 			</div>
 			
 			{ result.data
-				? <div className="access-token-frame">{(result.data as OAuthAccessToken).access_token}</div>
+				? <div className="access-token-frame monospace">{(result.data as OAuthAccessToken).access_token}</div>
 				: <div className="access-token-frame closed"><i className="fa fa-eye-slash" aria-hidden={true}></i></div>
 			}
 			

web/source/settings/views/user/applications/detail.tsx

@@ -178,6 +178,7 @@ function AccessTokenForm({ app }: { app: App }) {
 			</div>
 
 			<TextInput
+				className="monospace"
 				field={scope}
 				label="Token scopes (space-separated list)"
 				autoCapitalize="off"

web/source/settings/views/user/applications/new.tsx

@@ -122,6 +122,7 @@ export default function NewApp() {
 			/>
 
 			<TextArea
+				className="monospace"
 				field={form.redirect_uris}
 				label="Redirect URIs (optional, newline-separated entries)"
 				placeholder={`https://example.org/my_cool_application`}
@@ -132,6 +133,7 @@ export default function NewApp() {
 			/>
 
 			<TextInput
+				className="monospace"
 				field={form.scopes}
 				label="Scopes (optional, space-separated entries)"
 				placeholder={`read write push`}