(wip): Upgrades page layout

src/app/modules/upgrades/buy-tokens.component.html

 <div class="m-upgrades__buyTokens">
- <div class="">
+ <div class="m-upgradesBuyTokens__body">
  <h2>Buy Tokens</h2>
 
- <p>
+ <p class="m-upgradesBuyTokens__description">
  Expand your reach with Boost and support your favorite channels with Wire.
  </p>
 
  <p>
  <a>Learn more about tokens</a>
  </p>
+ </div>
 
- <div class="">
- <div class="">
- <label for="m-upgradesBuyTokens__amount">$</label>
- <input type="number" name="amount" id="m-upgradesBuyTokens__amount" />
- </div>
+ <div class="m-upgradesBuyTokens__form">
+ <div class="upgradesBuyTokens__amount">
+ <label for="m-upgradesBuyTokens__amountInput">$</label>
+ <input
+ type="number"
+ name="amount"
+ id="m-upgradesBuyTokens__amountInput"
+ />
+ </div>
 
-  <div>
-  ?? tokens = ?????? page views
-  </div>
+ <div class="upgradesBuyTokens__rate">
+ 32 tokens = 32,000 page views
+ </div>
 
- <div class="">
- <button class="">Buy Tokens</button>
- </div>
+ <div class="upgradesBuyTokens__action">
+ <button class="m-upgrades__button">Buy Tokens</button>
  </div>
  </div>
-
- <div class=""></div>
 </div>

src/app/modules/upgrades/buy-tokens.component.scss

+m-upgrades__buyTokens {
+ display: block;
+}
+
+.m-upgrades__buyTokens {
+ position: relative;
+ padding: 40px 60px 60px;
+ margin-bottom: 105px;
+ background: #726061;
+ color: #ffffff;
+
+ .m-upgradesBuyTokens__body {
+ max-width: 320px;
+ }
+
+ h2 {
+ font-size: 32px;
+ font-weight: 900;
+ line-height: 43px;
+ }
+
+ p {
+ a {
+ color: #4690df !important;
+ text-decoration: underline;
+ font-weight: 400;
+ }
+
+ &.m-upgradesBuyTokens__description {
+ opacity: 0.6;
+ }
+ }
+
+ .m-upgradesBuyTokens__form {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ max-width: 640px;
+ border-radius: 2px;
+ padding: 20px 35px;
+ margin-top: 40px;
+ box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
+
+ @include m-theme() {
+ background: themed($m-white);
+ color: themed($m-black);
+ }
+
+ .upgradesBuyTokens__rate {
+ @include m-theme() {
+ color: themed($m-grey-300);
+ }
+ }
+
+ .upgradesBuyTokens__amount {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-start;
+ font-size: 24px;
+
+ label {
+ display: inline-block;
+ font: inherit;
+ margin-right: 0.1em;
+
+ @include m-theme() {
+ color: themed($m-grey-300);
+ }
+ }
+
+ input {
+ display: inline-block;
+ font: inherit;
+ appearance: none;
+ border: none;
+ margin: 0;
+ padding: 0;
+ line-height: 1;
+ vertical-align: top;
+ border-radius: 0;
+ width: 4em;
+
+ &:focus {
+ outline: none !important;
+ }
+
+ @include m-theme() {
+ color: themed($m-black);
+
+ &:focus {
+ box-shadow: 0 1px 0 rgba(themed($m-black), 0.2);
+ }
+ }
+ }
+ }
+ }
+}

src/app/modules/upgrades/upgrades.component.scss

@@ -7,15 +7,19 @@ m-upgrades {
 }
 
 .m-upgrades {
- max-width: ((12 * 72px) + (11 * 20px));
+ $cols: 12;
+ $width: 72px;
+ $gap: 20px;
+
+ max-width: (($cols * $width) + (($cols - 1) * $gap));
  margin: 0 auto;
 
  section.m-upgrades__grid {
  display: grid;
- grid-gap: 20px;
- grid-template-columns: repeat(12, 1fr);
+ grid-gap: $gap;
+ grid-template-columns: repeat($cols, 1fr);
 
- @for $i from 1 through 12 {
+ @for $i from 1 through $cols {
  .m-upgrades__gridColumn--#{$i} {
  grid-column: auto / span $i;
  }
@@ -75,7 +79,7 @@ m-upgrades {
  }
 
  .m-upgrades__mainFeatures {
- padding-bottom: 75px;
+ padding: 96px 0 75px;
  }
 
  h1 {
@@ -145,4 +149,8 @@ m-upgrades {
  }
  }
  }
+
+ m-upgrades__upgradeOptions {
+ margin-bottom: 110px;
+ }
 }