helpmodal: improve content

src/components/HelpModal.jsx

@@ -12,8 +12,8 @@ export function HelpModal(props) {
 
 			<div>
 				<p>
-					Made with <span style="margin-right: 8px;">💖</span> &{' '}
+					Made with <span style="margin-right: 8px;">💖</span>&{' '}
-					<span style="margin-right: 8px;">🙌</span> by{' '}
+					<span style="margin-right: 8px;"> 🙌</span> by{' '}
 					<a
 						href="https://twitter.com/chinchang457"
 						target="_blank"
@@ -37,7 +37,7 @@ export function HelpModal(props) {
 						@webmakerApp
 					</a>.
 				</p>
-				<p>
+				<p class="show-when-extension">
 					Like this extension? Please{' '}
 					<a
 						href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
@@ -95,7 +95,10 @@ export function HelpModal(props) {
 				</p>
 
 				<p>
-					<h3>Awesome libraries used</h3>
+					<details>
+						<summary>
+							<h3 class="d-i">See awesome libraries used</h3>
+						</summary>
 						<ul>
 							<li>
 								<a
@@ -111,6 +114,7 @@ export function HelpModal(props) {
 									rel="noopener noreferrer"
 									href="https://github.com/chinchang/screenlog.js"
 								>
+									{' '}
 									Screenlog.js
 								</a>{' '}
 								- By me :)
@@ -176,6 +180,7 @@ export function HelpModal(props) {
 								- whhat!
 							</li>
 						</ul>
+					</details>
 				</p>
 
 				<p>

src/style.css

@@ -70,6 +70,9 @@ button {
 	display: none !important;
 }
 
+.d-i {
+	display: inline;
+}
 .flex {
 	display: flex;
 }