ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

border radius buttons

Browse Source
This commit is contained in:
ntr 2019-09-13 13:23:06 +10:00
parent ae5f51f9c8
commit 1fc23f424f
5 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/assets/styles/account.less
View File

@ -36,10 +36,9 @@
} }
} }
.stripe-btn { .yellow-btn {
background: @yellow; background: @yellow;
color: black; color: black;
border-radius: 2px;
border-width: 0; border-width: 0;
&:active, &:focus, &:hover { &:active, &:focus, &:hover {

4
client/assets/styles/styles.less
View File

@ -105,11 +105,11 @@ button, input {
height: auto; height: auto;
border-width: 2px; border-width: 2px;
border-color: @gray-exists; border-color: @gray-exists;
border-radius: 0;
letter-spacing: 0.25em; letter-spacing: 0.25em;
box-sizing: border-box; box-sizing: border-box;
font-size: 100%; font-size: 100%;
flex: 1; flex: 1;
border-radius: 0.5em;
/*the transitions */ /*the transitions */
transition-property: border-color, color, background; transition-property: border-color, color, background;
@ -241,6 +241,8 @@ header {
button { button {
height: 2em; height: 2em;
// border-radius: 0.1em;
border-radius: 0;
} }
} }

2
client/src/components/account.top.jsx
View File

@ -120,7 +120,7 @@ class AccountStatus extends Component {
// resub button // resub button
if (subscription.cancel_at_period_end) { if (subscription.cancel_at_period_end) {
return <button class='stripe-btn' onClick={() => sendSubscriptionEnding(false)}>Resubscribe</button> return <button class='yellow-btn' onClick={() => sendSubscriptionEnding(false)}>Resubscribe</button>
} }
const classes = `unsub ${unsubState ? 'confirming' : ''}`; const classes = `unsub ${unsubState ? 'confirming' : ''}`;

6
client/src/components/play.jsx
View File

@ -76,13 +76,13 @@ function Play(args) {
const subscription = account.subscribed const subscription = account.subscribed
? <button ? <button
class="stripe-btn" class="yellow-btn"
disabled> disabled>
Subscribed Subscribed
</button> </button>
: <button : <button
onClick={() => setNav('shop')} onClick={() => setNav('shop')}
class="stripe-btn" class="yellow-btn"
role="link"> role="link">
Subscribe Subscribe
</button>; </button>;
@ -109,7 +109,7 @@ function Play(args) {
{subscription} {subscription}
<button <button
onClick={() => setNav('shop')} onClick={() => setNav('shop')}
class="stripe-btn" class="yellow-btn"
role="link"> role="link">
Get Credits Get Credits
</button> </button>

12
client/src/components/stripe.buttons.jsx
View File

@ -45,13 +45,13 @@ function BitsBtn(args) {
const subscription = account.subscribed const subscription = account.subscribed
? <button ? <button
class="stripe-btn" class="yellow-btn"
disabled> disabled>
Subscribed Subscribed
</button> </button>
: <button : <button
onClick={subscribeClick} onClick={subscribeClick}
class="stripe-btn" class="yellow-btn"
role="link"> role="link">
Subscribe Subscribe
</button>; </button>;
@ -64,19 +64,19 @@ function BitsBtn(args) {
<div class='list'> <div class='list'>
<figure onClick={() => bitsClick(5)} > <figure onClick={() => bitsClick(5)} >
<figcaption>$5 AUD</figcaption> <figcaption>$5 AUD</figcaption>
<button class="stripe-btn">¤50</button> <button class="yellow-btn">¤50</button>
</figure> </figure>
<figure onClick={() => bitsClick(10)} > <figure onClick={() => bitsClick(10)} >
<figcaption>$10 AUD</figcaption> <figcaption>$10 AUD</figcaption>
<button class="stripe-btn">¤110</button> <button class="yellow-btn">¤110</button>
</figure> </figure>
<figure onClick={() => bitsClick(20)} > <figure onClick={() => bitsClick(20)} >
<figcaption>$20 AUD</figcaption> <figcaption>$20 AUD</figcaption>
<button class="stripe-btn">¤250</button> <button class="yellow-btn">¤250</button>
</figure> </figure>
<figure onClick={() => bitsClick(50)} > <figure onClick={() => bitsClick(50)} >
<figcaption>$50 AUD</figcaption> <figcaption>$50 AUD</figcaption>
<button class="stripe-btn">¤660</button> <button class="yellow-btn">¤660</button>
</figure> </figure>
<div id="error-message"></div> <div id="error-message"></div>
</div> </div>