fix: CSS styles & add close when clicking outside

SmartTokenLabs · Sep 10, 2024 · 62b9335 · 62b9335
1 parent 8905061
commit 62b9335
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/javascript/tokenscript-viewer/src/components/common/tokens-selector/tokens-selector.css b/javascript/tokenscript-viewer/src/components/common/tokens-selector/tokens-selector.css
@@ -7,11 +7,14 @@
 	height: 40px;
 }
 
+.tokens-selector span {
+	color: #fff !important;
+}
+
 .tokens-selector .selected {
 	padding: 6px;
 	background-color: #292929;
 	border: 1px solid #858585;
-	color: #fff;
 	border-radius: 5px;
 	display: flex;
 	align-items: center;
@@ -26,7 +29,6 @@
 	right: 0;
 	background-color: #292929;
 	border: 1px solid #858585;
-	color: #fff;
 	border-top: none;
 	z-index: 100;
 	max-height: 250px;
@@ -48,6 +50,7 @@
 .tokens-selector  .icon-label {
 	display: flex;
 	align-items: center;
+	font-size: 14px;
 }
 
 .tokens-selector .icon-container {

diff --git a/javascript/tokenscript-viewer/src/components/common/tokens-selector/tokens-selector.tsx b/javascript/tokenscript-viewer/src/components/common/tokens-selector/tokens-selector.tsx
@@ -38,6 +38,17 @@ export class TokensSelector {
 		await this.updateOptions()
 	}
 
+	async componentDidLoad(){
+		window.addEventListener("click", (e) => {
+			if (this.isOpen)
+				this.isOpen = false;
+		});
+		window.addEventListener('blur', (e) => {
+			if (this.isOpen && document.activeElement === document.querySelector('iframe'))
+				this.isOpen = false;
+		});
+	}
+
 	toggleDropdown() {
 		this.isOpen = !this.isOpen;
 	}
@@ -81,7 +92,10 @@ export class TokensSelector {
 
 		return (
 			<div class="tokens-selector">
-				<div class="selected" style={this.isOpen ? {borderBottomColor: "transparent", borderRadius: "5px 5px 0 0"} : {}} onClick={() => this.toggleDropdown()}>
+				<div class="selected" style={this.isOpen ? {borderBottomColor: "transparent", borderRadius: "5px 5px 0 0"} : {}} onClick={(e) => {
+					e.stopPropagation();
+					this.toggleDropdown();
+				}}>
 					{selectedOption ? (
 						[
 							<span class="icon-container">
@@ -102,7 +116,8 @@ export class TokensSelector {
 						{this.options.map(option => (
 							<div
 								class="option"
-								onClick={() => {
+								onClick={(e) => {
+									e.stopPropagation();
 									this.currentContext = option.originId + (option.tokenId ? "-" + option.tokenId : "");
 									this.isOpen = false;
 									this.switchToken(option);
@@ -111,7 +126,7 @@ export class TokensSelector {
 								<span class="icon-container">
 									<token-icon src={option.image} imageTitle={option.name}/>
 								</span>
-								<span>{option.name}</span>
+								<span class="icon-label">{option.name}</span>
 							</div>
 						))}
 					</div>

diff --git a/javascript/tokenscript-viewer/src/components/viewers/mooar/mooar-viewer.css b/javascript/tokenscript-viewer/src/components/viewers/mooar/mooar-viewer.css
@@ -26,15 +26,14 @@ body, action-overflow-modal .popover-container {
 }
 
 .mooar-header .text {
-	font-size: 15px;
+	font-size: 16px;
 	font-weight: 500;
 	color: #fff;
 }
 
 .mooar-header .header-icon {
-	height: 25px !important;
+	height: 24px !important;
 	padding-left: 8px;
-	padding-top: 2px;
 }
 
 .mooar-header-right {