tune css

README.md

@@ -23,9 +23,9 @@ other features such as delaying responses, or triggering an autogenerated
 which is handy for setting up tests  (see **Commander API** below).
 
 <picture>
-  <source media="(prefers-color-scheme: light)" srcset="./pixaton-tests/pic-for-readme.vp860x800.light.gold.png">
-  <source media="(prefers-color-scheme: dark)" srcset="./pixaton-tests/pic-for-readme.vp860x800.dark.gold.png">
-  <img alt="Mockaton Dashboard" src="./pixaton-tests/pic-for-readme.vp860x800.light.gold.png">
+  <source media="(prefers-color-scheme: light)" srcset="./pixaton-tests/pic-for-readme.vp830x800.light.gold.png">
+  <source media="(prefers-color-scheme: dark)" srcset="./pixaton-tests/pic-for-readme.vp830x800.dark.gold.png">
+  <img alt="Mockaton Dashboard" src="./pixaton-tests/pic-for-readme.vp830x800.light.gold.png">
 </picture>
 
 

pixaton-tests/pic-for-readme.test.js

@@ -3,7 +3,7 @@ import { testPixels, clickLinkByText, click500Checkbox, clickDelayCheckbox, clic
 
 testPixels(import.meta.filename, {
 	async setup() {
-		await click500Checkbox('api/user/typescript-scores.GET')
+		await click500Checkbox('api/user/friends.GET')
 		await sleep()
 		await clickDelayCheckbox('api/user/links.GET')
 		await sleep()
@@ -16,7 +16,7 @@ testPixels(import.meta.filename, {
 	},
 
 	viewports: [{
-		width: 860,
+		width: 830,
 		height: 800,
 		deviceScaleFactor: 1.5
 	}]

src/Dashboard.css

@@ -1,13 +1,14 @@
 :root {
 	--boxShadow1: 0 2px 1px -1px rgba(0, 0, 0, 0.15), 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-	--radius: 6px
+	--radius: 4px;
+	--radiusSmall: 2px;
 }
 
 @media (prefers-color-scheme: light) {
 	:root {
 		--color4xxBackground: #ffedd1;
 		--colorAccent: #0075db;
-		--colorAccentAlt: #068564;
+		--colorAccentAlt: #068185;
 		--colorBackground: #fff;
 		--colorComboBoxHeaderBackground: #fff;
 		--colorComboBoxBackground: #f7f7f7;
@@ -183,13 +184,14 @@ select {
 	}
 
 	.ResetButton {
-		padding: 4px 12px;
+		padding: 6px 12px;
 		border: 1px solid var(--colorRed);
-		margin-bottom: 4px;
+		margin-left: 4px;
 		background: transparent;
 		color: var(--colorRed);
 		border-radius: 50px;
 
+
 		&:hover {
 			background: var(--colorRed);
 			color: white;
@@ -255,7 +257,7 @@ select {
 	position: relative;
 	left: -6px;
 	display: inline-block;
-	width: 300px;
+	width: 278px;
 	padding: 8px 6px;
 	border-radius: var(--radius);
 	color: var(--colorAccent);
@@ -280,6 +282,10 @@ select {
 	text-overflow: ellipsis;
 	font-size: 12px;
 
+	&.nonDefault {
+		font-weight: bold;
+		font-size: 0.92rem;
+	}
 	&.status4xx {
 		background: var(--color4xxBackground);
 	}
@@ -315,32 +321,37 @@ select {
 		}
 
 		&:checked ~ svg {
+			border-color: transparent;
 			background: var(--colorAccent);
 			fill: white;
+			box-shadow: var(--boxShadow1);
 		}
 
 		&:disabled ~ svg {
 			opacity: .5;
 			cursor: not-allowed;
+			box-shadow: none;
 		}
 	}
 
 	> svg {
-		width: 20px;
-		height: 20px;
+		width: 18px;
+		height: 18px;
+		border: 1px solid var(--colorSecondaryAction);
 		vertical-align: bottom;
 		fill: var(--colorSecondaryAction);
 		border-radius: 50%;
 		background: var(--colorSecondaryButtonBackground);
-		box-shadow: var(--boxShadow1);
 	}
 }
 
 .ProxyToggler {
+	margin-left: 4px;
 	> svg {
-		width: 24px;
-		padding: 3px;
-		border-radius: 4px;
+		width: 22px;
+		padding: 1px;
+		border-color: transparent;
+		border-radius: var(--radiusSmall);
 	}
 }
 
@@ -362,18 +373,19 @@ select {
 		&:checked ~ span {
 			color: white;
 			background: var(--colorRed);
+			box-shadow: var(--boxShadow1);
 		}
 	}
 
 	> span {
 		padding: 5px 4px;
-		box-shadow: var(--boxShadow1);
 		font-size: 10px;
 		color: var(--colorSecondaryAction);
-		border-radius: 4px;
+		border-radius: var(--radiusSmall);
 		background: var(--colorSecondaryButtonBackground);
 
 		&:hover {
+			box-shadow: var(--boxShadow1);
 			background: var(--colorLightRed);
 			color: var(--colorRed);
 		}
@@ -406,10 +418,6 @@ select {
 	}
 }
 
-.bold {
-	font-weight: bold;
-}
-
 .StaticFilesList {
 	margin-top: 20px;
 

src/Dashboard.js

@@ -16,7 +16,7 @@ const Strings = {
 	bulk_select_disabled_title: 'No mock files have comments, which are anything within parentheses on the filename.',
 	click_link_to_preview: 'Click a link to preview it',
 	cookie: 'Cookie',
-	cookie_disabled_title: 'No cookies specified in Config.cookies',
+	cookie_disabled_title: 'No cookies specified in config.cookies',
 	delay: 'Delay',
 	empty_response_body: '/* Empty Response Body */',
 	fallback_server: 'Fallback Backend',
@@ -50,10 +50,10 @@ const CSS = {
 	SaveProxiedCheckbox: 'SaveProxiedCheckbox',
 	StaticFilesList: 'StaticFilesList',
 
-	bold: 'bold',
 	empty: 'empty',
 	chosen: 'chosen',
-	status4xx: 'status4xx'
+	status4xx: 'status4xx',
+	nonDefault: 'nonDefault'
 }
 
 const r = createElement
@@ -106,8 +106,7 @@ function Logo() {
 
 function CookieSelector({ cookies }) {
 	function onChange() {
-		mockaton.selectCookie(this.value)
-			.catch(onError)
+		mockaton.selectCookie(this.value).catch(onError)
 	}
 	const disabled = cookies.length <= 1
 	return (
@@ -166,9 +165,7 @@ function ProxyFallbackField({ fallbackAddress, collectProxied }) {
 	return (
 		r('div', { className: cssClass(CSS.Field, CSS.FallbackBackend) },
 			r('label', null,
-				r('span', null,
-					r(CloudIcon),
-					Strings.fallback_server),
+				r('span', null, r(CloudIcon), Strings.fallback_server),
 				r('input', {
 					type: 'url',
 					autocomplete: 'none',
@@ -268,9 +265,6 @@ function PreviewLink({ method, urlMask }) {
 function MockSelector({ broker }) {
 	function onChange() {
 		const { urlMask, method } = parseFilename(this.value)
-		this.style.fontWeight = this.value === this.options[0].value // default is selected
-			? 'normal'
-			: 'bold'
 		mockaton.select(this.value)
 			.then(init)
 			.then(() => linkFor(method, urlMask)?.click())
@@ -289,14 +283,14 @@ function MockSelector({ broker }) {
 
 	return (
 		r('select', {
-			'data-qaid': urlMask,
+			onChange,
 			autocomplete: 'off',
+			'data-qaid': urlMask,
+			disabled: files.length <= 1,
 			className: cssClass(
 				CSS.MockSelector,
-				selected !== files[0] && CSS.bold,
-				status >= 400 && status < 500 && CSS.status4xx),
-			disabled: files.length <= 1,
-			onChange
+				selected !== files[0] && CSS.nonDefault,
+				status >= 400 && status < 500 && CSS.status4xx)
 		}, files.map(file =>
 			r('option', {
 				value: file,
@@ -308,8 +302,7 @@ function MockSelector({ broker }) {
 function DelayRouteToggler({ broker }) {
 	function onChange() {
 		const { method, urlMask } = parseFilename(this.name)
-		mockaton.setRouteIsDelayed(method, urlMask, this.checked)
-			.catch(onError)
+		mockaton.setRouteIsDelayed(method, urlMask, this.checked).catch(onError)
 	}
 	return (
 		r('label', {
@@ -348,9 +341,7 @@ function InternalServerErrorToggler({ broker }) {
 				checked: parseFilename(broker.currentMock.file).status === 500,
 				onChange
 			}),
-			r('span', null, '500')
-		)
-	)
+			r('span', null, '500')))
 }
 
 function ProxyToggler({ broker, disabled }) {
@@ -490,14 +481,14 @@ function StaticFilesList({ staticFiles }) {
 }
 
 
+// Misc ===============
 
 function onError(error) {
 	if (error?.message === 'Failed to fetch')
 		alert('Looks like the Mockaton server is not running')
 	console.error(error)
 }
 
-
 function TimerIcon() {
 	return (
 		r('svg', { viewBox: '0 0 24 24' },