style become a minter plugin

qortal-ui-plugins/plugins/core/become-minter/become-minter-css.src.js

@@ -84,6 +84,7 @@ export const pageStyles = css`
 		display: flex;
 		width: 100%;
 	}
+
 	.column {
 		display: flex;
 		flex-direction: column;
@@ -136,9 +137,8 @@ export const pageStyles = css`
 		padding: 10px 25px;
 		text-align: center;
 		display: inline-block;
-
-		margin-bottom: 5px;
-		flex-basis: 250px;
+		margin-bottom: 15px;
+		flex-basis: 600px;
 	}
 
 	.gap {
@@ -182,7 +182,6 @@ export const pageStyles = css`
 		height: 100%;
 		margin: 0;
 		cursor: pointer;
-		outline: 1px var(--black) solid;
 		min-width: 80px;
 	}
 

qortal-ui-plugins/plugins/core/become-minter/become-minter.src.js

@@ -34,9 +34,7 @@ class BecomeMinter extends LitElement {
 
 	constructor() {
 		super();
-		this.theme = localStorage.getItem('qortalTheme')
-			? localStorage.getItem('qortalTheme')
-			: 'light';
+		this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light';
 		this.sponsorshipKeyValue = '';
 		this.isPageLoading = true;
 		this.nodeInfo = {};

qortal-ui-plugins/plugins/core/become-minter/components/not-sponsored.src.js

@@ -104,10 +104,8 @@ class NotSponsored extends LitElement {
 						<div class="form-item form-item--input">
 							<mwc-textfield
 								?disabled="${this
-									.isLoadingSponsorshipKeySubmit}"
-								label="${translate(
-									'becomeMinterPage.bchange8'
-								)}"
+								.isLoadingSponsorshipKeySubmit}"
+								label="${translate('becomeMinterPage.bchange8')}"
 								id="addSponsorshipKey"
 								@input="${this.inputHandler}"
 								.value="${this.sponsorshipKeyValue || ''}"
@@ -118,17 +116,15 @@ class NotSponsored extends LitElement {
 
 						<div class="form-item form-item--button">
 							<vaadin-button
-								?disabled="${this
-									.isLoadingSponsorshipKeySubmit}"
+                                                theme="primary"
+								?disabled="${this.isLoadingSponsorshipKeySubmit}"
 								@click="${this.addMintingAccount}"
 							>
-								${this.isLoadingSponsorshipKeySubmit === false
-									? html`${translate(
-											'puzzlepage.pchange15'
-									  )}`
-									: html`<paper-spinner-lite
-											active
-									  ></paper-spinner-lite>`}
+							${this.isLoadingSponsorshipKeySubmit === false
+								? html`${translate('puzzlepage.pchange15')}`
+								: html`
+									<paper-spinner-lite active></paper-spinner-lite>
+								`}
 							</vaadin-button>
 						</div>
 					</div>

qortal-ui-plugins/plugins/core/become-minter/components/yes-sponsored.src.js

@@ -47,54 +47,43 @@ class YesSponsored extends LitElement {
 			<div class="inner-container">
 				<div class="column column-center">
 					<div class="column column-center">
-						<span class="level-black"
-							>${translate('becomeMinterPage.bchange10')}</span
-						>
-						<hr
-							style="width: 50%; color: #eee; border-radius: 80%; margin-bottom: 2rem;"
-						/>
+						<span class="level-black">
+							${translate('becomeMinterPage.bchange10')}
+						</span>
+						<hr style="width: 75%; color: #eee; border-radius: 80%; margin-bottom: 2rem;">
 					</div>
 					<br />
 					<div class="row row-center gap">
 						<div class="content-box">
-							<span class="title"
-								>${translate(
-									'walletpage.wchange41'
-								)}</span
-							>
-							<hr
-								style="color: #eee; border-radius: 90%; margin-bottom: 1rem;"
-							/>
+							<span class="title">
+								${translate('walletpage.wchange41')}
+							</span>
+							<hr style="color: #eee; border-radius: 90%; margin-bottom: 1rem;">
 							${this.isMinting ? html`
-							<h4>${translate('becomeMinterPage.bchange12')}</h4>
+								<h4>${translate('becomeMinterPage.bchange12')}</h4>
 							` : html`
-							<h4>${translate('mintingpage.mchange9')}</h4>
+								<h4>${translate('mintingpage.mchange9')}</h4>
 							`}
-							
 						</div>
+					</div>
+					<div class="row row-center gap">
 						<div class="content-box">
-							<span class="title"
-								>${translate(
-									'becomeMinterPage.bchange13'
-								)}</span
-							>
-							<hr
-								style="color: #eee; border-radius: 90%; margin-bottom: 1rem;"
-							/>
+							<span class="title">
+								${translate('becomeMinterPage.bchange13')}
+							</span>
+							<hr style="color: #eee; border-radius: 90%; margin-bottom: 1rem;">
 							<h4>
 								${this._levelUpBlocks()}
 								${translate('mintingpage.mchange26')}
 							</h4>
 						</div>
+					</div>
+					<div class="row row-center gap">
 						<div class="content-box">
-							<span class="title"
-								>${translate(
-									'becomeMinterPage.bchange15'
-								)}</span
-							>
-							<hr
-								style="color: #eee; border-radius: 90%; margin-bottom: 1rem;"
-							/>
+							<span class="title">
+								${translate('becomeMinterPage.bchange15')}
+							</span>
+							<hr style="color: #eee; border-radius: 90%; margin-bottom: 1rem;">
 							<h4 class="no-margin">
 								${translate('becomeMinterPage.bchange16')}
 							</h4>
@@ -104,12 +93,8 @@ class YesSponsored extends LitElement {
 								</p>
 								<button-icon-copy
 									title="${translate('walletpage.wchange3')}"
-									onSuccessMessage="${translate(
-										'walletpage.wchange4'
-									)}"
-									onErrorMessage="${translate(
-										'walletpage.wchange39'
-									)}"
+									onSuccessMessage="${translate('walletpage.wchange4')}"
+									onErrorMessage="${translate('walletpage.wchange39')}"
 									textToCopy=${this.rewardSharePublicKey}
 									buttonSize="28px"
 									iconSize="16px"
@@ -120,7 +105,6 @@ class YesSponsored extends LitElement {
 							</div>
 						</div>
 					</div>
-					<br />
 				</div>
 			</div>
 		`;