Use 128x128 icon in About window for all themes

1j01 · 1j01 · commit 3dd5ee94ba12 · 2024-05-26T21:30:13.000-04:00
- Use 128x128 icon size for themes other than Bubblegum, so the layout
  matches between themes, and it's easier to maintain.
- This also fixes the icon overlapping text content in the Bubblegum
  theme at small window sizes.
- (This also makes it look nicer when app name and version wrap to below
  the icon, due to a narrow viewport, as the text now looks centered
  below the icon, at least for me, on Chrome and Firefox on Windows 11.
  That said, it's dependent on the font metrics, not properly centered.)
diff --git a/cypress/integration/visual-tests.spec.js b/cypress/integration/visual-tests.spec.js
@@ -197,7 +197,7 @@ context('visual tests', () => {
 	it('about window', () => {
 		clickMenuButton('Help');
 		clickMenuItem('About Paint');
-		waitForImage('#paint-32x32');
+		waitForImage('#about-paint-icon');
 		cy.get('.window:visible').matchImageSnapshot(Object.assign({}, withMuchTextCompareOptions, { blackout: ["#maybe-outdated-line", "#jspaint-version"] }));
 	});
 
@@ -278,7 +278,7 @@ context('visual tests', () => {
 	it('bubblegum theme -- about window', () => {
 		clickMenuButton('Help');
 		clickMenuItem('About Paint');
-		// waitForImage('#paint-32x32'); // it's actually replaced with a background image in this theme
+		// waitForImage('#about-paint-icon'); // it's actually replaced with a background image in this theme
 		// waitForRequest("/images/bubblegum/bubblegum-paint-128x128.png", () => { // not working
 		// waitForRequest("**/bubblegum-paint-*.png", () => { // not working
 		cy.wait(1000); // wait and hope it's loaded
diff --git a/index.html b/index.html
@@ -77,7 +77,7 @@
 <body>
 	<div id="about-paint" style="display: none">
 		<h1 id="about-paint-header">
-			<img src="images/icons/32x32.png" width="32" height="32" id="paint-32x32" alt="" />
+			<img src="images/icons/128x128.png" width="128" height="128" id="about-paint-icon" alt="" />
 			<div id="jspaint-project-name-and-version">
 				<div id="jspaint-project-name">JS Paint</div>
 				<div id="jspaint-version" title="About time to increment the version number, don't you think?">
diff --git a/src/functions.js b/src/functions.js
@@ -1560,7 +1560,7 @@ function show_about_paint() {
 	});
 	$about_paint_window.addClass("about-paint squish");
 	if (is_pride_month) {
-		$("#paint-32x32").attr("src", "./images/icons/gay-es-paint-32x32-light-outline.png");
+		$("#about-paint-icon").attr("src", "./images/icons/gay-es-about-paint-icon-light-outline.png");
 	}
 
 	$about_paint_window.$content.append($about_paint_content.show()).css({ padding: "15px" });
diff --git a/styles/layout.css b/styles/layout.css
@@ -969,12 +969,14 @@ input[type="radio"] + label::before {
 	flex-direction: row;
 	flex-wrap: wrap;
 	margin: 0;
-	margin-top: 30px;
+	margin-top: 10px;
 	margin-bottom: 10px;
 }
 #jspaint-project-name-and-version {
 	margin-left: 10px;
 	white-space: nowrap;
+	margin: auto;
+	margin-left: 10px;
 }
 #jspaint-version {
 	/* @TODO: separate some of this into a shared.css? (not all layout!) */
diff --git a/styles/layout.rtl.css b/styles/layout.rtl.css
@@ -969,12 +969,14 @@ input[type="radio"] + label::before {
 	flex-direction: row;
 	flex-wrap: wrap;
 	margin: 0;
-	margin-top: 30px;
+	margin-top: 10px;
 	margin-bottom: 10px;
 }
 #jspaint-project-name-and-version {
 	margin-right: 10px;
 	white-space: nowrap;
+	margin: auto;
+	margin-right: 10px;
 }
 #jspaint-version {
 	/* @TODO: separate some of this into a shared.css? (not all layout!) */
diff --git a/styles/themes/bubblegum.css b/styles/themes/bubblegum.css
@@ -161,26 +161,14 @@ button:active {
 }
 
 /* About window */
-#maybe-outdated-view-project-news {
-	/* Make room for enlarged icon */
-	margin-left: 120px;
-}
-#paint-32x32 {
-	/* Replace and enlarge icon */
+#about-paint-icon {
+	/* Replace icon */
 	display: block;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 	background: url("../../images/bubblegum/bubblegum-paint-128x128.png") no-repeat;
-	/* background-size: 32px 32px;
-	width: 32px;
-	height: 32px;
-	padding-left: 32px; */
-	background-size: 128px 128px;
-	width: 128px;
-	height: 128px;
+	background-size: 100% 100%;
 	padding-left: 128px;
-	transform: translateY(-40px);
-	margin-bottom: calc(32px - 128px);
 }
 
 /* Need multiple specificity levels to override Modern theme. */

Original file line number	Diff line number	Diff line change
`@@ -1560,7 +1560,7 @@ function show_about_paint() {`
`1560`	`1560`	`});`
`1561`	`1561`	`$about_paint_window.addClass("about-paint squish");`
`1562`	`1562`	`if (is_pride_month) {`
`1563`		`- $("#paint-32x32").attr("src", "./images/icons/gay-es-paint-32x32-light-outline.png");`
	`1563`	`+ $("#about-paint-icon").attr("src", "./images/icons/gay-es-about-paint-icon-light-outline.png");`
`1564`	`1564`	`}`
`1565`	`1565`
`1566`	`1566`	`$about_paint_window.$content.append($about_paint_content.show()).css({ padding: "15px" });`