LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-09-01 01:35:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix spinner

Browse source
This commit is contained in:
zeppi 2021-07-05 15:04:07 -04:00 • committed by jessopb
parent 8d1d2d2cf0
commit 54b970c69c
2 changed files with 25 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ui/page/settingsStripeCard/view.jsx
View file

@ -276,14 +276,14 @@ class CardVerify extends React.Component<Props, State> {
// $FlowFixMe // $FlowFixMe
document.querySelector('button').disabled = true; document.querySelector('button').disabled = true;
// $FlowFixMe // $FlowFixMe
document.querySelector('#spinner').classList.remove('hidden'); document.querySelector('#stripe-spinner').classList.remove('hidden');
// $FlowFixMe // $FlowFixMe
document.querySelector('#button-text').classList.add('hidden'); document.querySelector('#button-text').classList.add('hidden');
} else { } else {
// $FlowFixMe // $FlowFixMe
document.querySelector('button').disabled = false; document.querySelector('button').disabled = false;
// $FlowFixMe // $FlowFixMe
document.querySelector('#spinner').classList.add('hidden'); document.querySelector('#stripe-spinner').classList.add('hidden');
// $FlowFixMe // $FlowFixMe
document.querySelector('#button-text').classList.remove('hidden'); document.querySelector('#button-text').classList.remove('hidden');
} }
@ -403,7 +403,7 @@ class CardVerify extends React.Component<Props, State> {
</div> </div>
<div className="sr-field-error" id="card-errors" role="alert" /> <div className="sr-field-error" id="card-errors" role="alert" />
<button className="linkButton" id="submit"> <button className="linkButton" id="submit">
<div className="spinner hidden" id="spinner" /> <div className="stripe__spinner hidden" id="stripe-spinner" />
<span id="button-text">Add Card</span> <span id="button-text">Add Card</span>
</button> </button>
</div> </div>

47
ui/scss/component/_stripe-card.scss
View file

@ -3,7 +3,7 @@
} }
.grey-text { .grey-text {
color: rgb(156, 163, 175) color: rgb(156, 163, 175);
} }
/* Layout */ /* Layout */
@ -72,11 +72,10 @@
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width:284px; width: 284px;
} }
.sr-input:focus { .sr-input:focus {
box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07), box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 4px rgba(50, 151, 211, 0.3);
0 0 0 4px rgba(50, 151, 211, 0.3);
outline: none; outline: none;
z-index: 9; z-index: 9;
} }
@ -100,8 +99,8 @@
} }
.sr-combo-inputs-row { .sr-combo-inputs-row {
box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1), box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1), 0px 2px 5px 0px rgba(50, 50, 93, 0.1),
0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07); 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
border-radius: 7px; border-radius: 7px;
} }
@ -130,7 +129,7 @@ button.linkButton {
display: block; display: block;
box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07); box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
width: 100%; width: 100%;
max-width:280px; max-width: 280px;
} }
button.linkButton:hover { button.linkButton:hover {
filter: contrast(115%); filter: contrast(115%);
@ -161,7 +160,7 @@ button.linkButton:disabled {
/* Code block */ /* Code block */
code, code,
pre { pre {
font-family: "SF Mono", "IBM Plex Mono", "Menlo", monospace; font-family: 'SF Mono', 'IBM Plex Mono', 'Menlo', monospace;
font-size: 12px; font-size: 12px;
} }
@ -198,9 +197,8 @@ pre {
.sr-main { .sr-main {
width: 100%; width: 100%;
height: 305px; height: 305px;
box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1), box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1), 0px 2px 5px 0px rgba(50, 50, 93, 0.1),
0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
border-radius: 6px; border-radius: 6px;
padding: 10px 20px !important; padding: 10px 20px !important;
} }
@ -208,12 +206,12 @@ pre {
/* todo: spinner/processing state, errors, animations */ /* todo: spinner/processing state, errors, animations */
.spinner, .stripe__spinner,
.spinner:before, .stripe__spinner:before,
.spinner:after { .stripe__spinner:after {
border-radius: 50%; border-radius: 50%;
} }
.spinner { .stripe__spinner {
color: #ffffff; color: #ffffff;
font-size: 22px; font-size: 22px;
text-indent: -99999px; text-indent: -99999px;
@ -226,12 +224,12 @@ pre {
-ms-transform: translateZ(0); -ms-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
} }
.spinner:before, .stripe__spinner:before,
.spinner:after { .stripe__spinner:after {
position: absolute; position: absolute;
content: ""; content: '';
} }
.spinner:before { .stripe__spinner:before {
width: 10.4px; width: 10.4px;
height: 20.4px; height: 20.4px;
background: var(--accent-color); background: var(--accent-color);
@ -243,7 +241,7 @@ pre {
-webkit-animation: loading 2s infinite ease 1.5s; -webkit-animation: loading 2s infinite ease 1.5s;
animation: loading 2s infinite ease 1.5s; animation: loading 2s infinite ease 1.5s;
} }
.spinner:after { .stripe__spinner:after {
width: 10.4px; width: 10.4px;
height: 10.2px; height: 10.2px;
background: var(--accent-color); background: var(--accent-color);
@ -313,19 +311,18 @@ pre {
.sr-payment-form { .sr-payment-form {
padding: 10px 35px; padding: 10px 35px;
padding-bottom:28px; padding-bottom: 28px;
} }
.payment-details { .payment-details {
font-size:16px; font-size: 16px;
margin-bottom:4px; margin-bottom: 4px;
} }
.sr-field-error { .sr-field-error {
font-size:15px; font-size: 15px;
} }
//.successCard, .toConfirmCard { //.successCard, .toConfirmCard {
// max-width: 94% // max-width: 94%
//} //}