feat: CSS enhancements for tlink cards

SmartTokenLabs · Oct 21, 2024 · bd58c7c · bd58c7c
1 parent f38e552
commit bd58c7c
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 18 deletions.
diff --git a/javascript/tokenscript-viewer/src/components.d.ts b/javascript/tokenscript-viewer/src/components.d.ts
@@ -121,6 +121,7 @@ export namespace Components {
         "open": (scripts: ScriptInfo[]) => Promise<void>;
     }
     interface SecurityStatus {
+        "margin": string;
         "size": "large" | "small" | "x-small";
         "tokenScript": TokenScript;
     }
@@ -944,6 +945,7 @@ declare namespace LocalJSX {
         "onScriptSelect"?: (scriptInfo: ScriptInfo) => void;
     }
     interface SecurityStatus {
+        "margin"?: string;
         "size"?: "large" | "small" | "x-small";
         "tokenScript"?: TokenScript;
     }

diff --git a/javascript/tokenscript-viewer/src/components/common/security-status.tsx b/javascript/tokenscript-viewer/src/components/common/security-status.tsx
@@ -16,6 +16,8 @@ export class SecurityStatus {
 
 	@Prop() size: "large" | "small" | "x-small" = "large";
 
+	@Prop() margin: string = "0 5px";
+
 	@State() securityInfo: Partial<ISecurityInfo>;
 
 	@State() statusColor: string;
@@ -67,7 +69,7 @@ export class SecurityStatus {
 		return (
 			this.securityInfo ?
 				<Host>
-					<div class={"security-status " + this.size} style={{ background: this.statusColor }}
+					<div class={"security-status " + this.size} style={{ background: this.statusColor, margin: this.margin }}
 						title={this.securityInfo.statusText + "\n\n" + this.getDetailedSecurityInfo()}
 						onClick={() => this.dialog.openDialog()}>
 						{this.statusIcon}

diff --git a/...nents/viewers/tlink/tlink-card-viewer.css → .../viewers/tlink-card/tlink-card-viewer.css b/...nents/viewers/tlink/tlink-card-viewer.css → .../viewers/tlink-card/tlink-card-viewer.css
@@ -3,8 +3,8 @@ header {
 	display: none;
 }
 
-body, action-overflow-modal .popover-container {
-	background-color: #292929 !important;
+body {
+	background-color: transparent !important;
 }
 
 * {
@@ -14,7 +14,7 @@ body, action-overflow-modal .popover-container {
 
 .tlink-header {
 	height: 34px;
-	margin: 0 15px 0;
+	margin: 5px 15px 0;
 	display: flex;
 	align-items: center;
 }
@@ -33,7 +33,7 @@ body, action-overflow-modal .popover-container {
 
 .tlink-header .header-icon {
 	height: 20px !important;
-	padding-left: 8px;
+	padding-left: 0;
 }
 
 .tlink-header-right {
@@ -45,13 +45,15 @@ body, action-overflow-modal .popover-container {
 }
 
 .tlink-viewer {
-	max-width: 800px;
+	border-radius: 16px;
+	border: 1px solid rgb(29, 155, 240);
+	background-color: #262a2d;
 	width: 100%;
 	height: 100vh;
 	margin: 0 auto;
 	display: flex;
 	flex-direction: column;
-	padding-bottom: 10px;
+	padding-bottom: 15px;
 }
 
 .details-container {
@@ -71,7 +73,7 @@ card-view, .card-container {
 card-view .card-container {
 	max-width: unset !important;
 	max-height: unset !important;
-	margin: 10px 15px !important;
+	margin: 5px 15px !important;
 	border-radius: 15px !important;
 }
 
@@ -106,6 +108,36 @@ card-view .card-container {
 	opacity: 0.6 !important;
 }
 
+.tlink-viewer .btn-primary, .tlink-viewer .btn-featured {
+	background: #1d9bf0;
+	border: none;
+}
+
+.tlink-viewer .btn-primary:hover, .tlink-viewer .btn-featured:hover {
+	background: #3087da !important;
+	border: none;
+}
+
+.tlink-viewer .btn-primary:disabled .tlink-viewer .btn-featured:disabled {
+	background: #2f3336 !important;
+}
+
+.tlink-viewer .btn-secondary {
+	border: 1px solid #1d9bf0;
+	border-color: #1d9bf0 !important;
+	background: transparent;
+	color: #1d9bf0
+}
+
+.tlink-viewer .btn-secondary:hover {
+	border: #3087da !important;
+	background: rgba(194, 140, 109, 0.06);
+}
+
+.tlink-viewer .btn-primary:disabled .tlink-viewer .btn-featured:disabled, .tlink-viewer .btn-secondary:disabled {
+	background: #2f3336 !important;
+}
+
 card-view .action-bar {
 	height: auto !important;
 	padding: 10px 0 0 !important;

diff --git a/...nents/viewers/tlink/tlink-card-viewer.tsx → .../viewers/tlink-card/tlink-card-viewer.tsx b/...nents/viewers/tlink/tlink-card-viewer.tsx → .../viewers/tlink-card/tlink-card-viewer.tsx
@@ -149,7 +149,7 @@ export class TlinkCardViewer {
 						</a>
 						<div class="tlink-header-right">
 							{/*<share-to-tg-button/>*/}
-							{this.tokenScript && <security-status tokenScript={this.tokenScript} size="x-small" />}
+							{this.tokenScript && <security-status tokenScript={this.tokenScript} size="x-small" margin="0" />}
 						</div>
 					</div>
 					<card-view ref={(el: HTMLElement) => this.mainCardView = el}></card-view>

diff --git a/...nents/viewers/tlink-card/tlink-viewer.css → ...components/viewers/tlink/tlink-viewer.css b/...nents/viewers/tlink-card/tlink-viewer.css → ...components/viewers/tlink/tlink-viewer.css
@@ -3,15 +3,15 @@ header {
 	display: none;
 }
 
-body, action-overflow-modal .popover-container {
-	background-color: #292929 !important;
-}
-
 * {
 	font-family: 'Space Grotesk', sans-serif;
 	color: #333;
 }
 
+body {
+	background-color: transparent !important;
+}
+
 .tlink-header {
 	height: 45px;
 	margin: 5px 15px 0;
@@ -33,7 +33,7 @@ body, action-overflow-modal .popover-container {
 
 .tlink-header .header-icon {
 	height: 24px !important;
-	padding-left: 8px;
+	padding-left: 0;
 }
 
 .tlink-header-right {
@@ -45,13 +45,15 @@ body, action-overflow-modal .popover-container {
 }
 
 .tlink-viewer {
-	max-width: 800px;
+	border-radius: 16px;
+	border: 1px solid rgb(29, 155, 240);
+	background-color: #262a2d;
 	width: 100%;
 	height: 100vh;
 	margin: 0 auto;
 	display: flex;
 	flex-direction: column;
-	padding-bottom: 10px;
+	padding-bottom: 15px;
 }
 
 .details-container {
@@ -71,7 +73,7 @@ card-view, .card-container {
 card-view .card-container {
 	max-width: unset !important;
 	max-height: unset !important;
-	margin: 10px 15px !important;
+	margin: 5px 15px !important;
 	border-radius: 15px !important;
 }
 
@@ -106,6 +108,36 @@ card-view .card-container {
 	opacity: 0.6 !important;
 }
 
+.tlink-viewer .btn-primary, .tlink-viewer .btn-featured {
+	background: #1d9bf0;
+	border: none;
+}
+
+.tlink-viewer .btn-primary:hover, .tlink-viewer .btn-featured:hover {
+	background: #3087da !important;
+	border: none;
+}
+
+.tlink-viewer .btn-primary:disabled .tlink-viewer .btn-featured:disabled {
+	background: #2f3336 !important;
+}
+
+.tlink-viewer .btn-secondary {
+	border: 1px solid #1d9bf0;
+	border-color: #1d9bf0 !important;
+	background: transparent;
+	color: #1d9bf0
+}
+
+.tlink-viewer .btn-secondary:hover {
+	border: #3087da !important;
+	background: rgba(194, 140, 109, 0.06);
+}
+
+.tlink-viewer .btn-primary:disabled .tlink-viewer .btn-featured:disabled, .tlink-viewer .btn-secondary:disabled {
+	background: #2f3336 !important;
+}
+
 card-view .action-bar {
 	height: auto !important;
 	padding: 10px 0 0 !important;

diff --git a/...nents/viewers/tlink-card/tlink-viewer.tsx → ...components/viewers/tlink/tlink-viewer.tsx b/...nents/viewers/tlink-card/tlink-viewer.tsx → ...components/viewers/tlink/tlink-viewer.tsx
@@ -265,7 +265,7 @@ export class TlinkViewer {
 						</a>
 						<div class="tlink-header-right">
 							{/*<share-to-tg-button/>*/}
-							{this.tokenScript && <security-status tokenScript={this.tokenScript} size="small"/>}
+							{this.tokenScript && <security-status tokenScript={this.tokenScript} size="small" margin="0" />}
 							{this.tokenScript &&
 								<tokens-selector tokenScript={this.tokenScript} switchToken={async (token) => {
 									// TODO: Allow removing token context so this flag isn't needed?