<NME> index.ts
<BEF> ADDFILE
<MSG> initial merchant payment request page styling

<DFF> @@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class extends Component {
+  @tracked hamburgerMenuOpen = false;
+}

{'commit': 'diff --git a/packages/web-client/app/components/card-pay/merchant-payment-request-page/index.css b/packages/web-client/app/components/card-pay/merchant-payment-request-page/index.css\nnew file mode 100644\nindex 000000000..6c4c9ca1a\n--- /dev/null\n+++ b/packages/web-client/app/components/card-pay/merchant-payment-request-page/index.css\n@@ -0,0 +1,48 @@\n+.merchant-payment-request-page {\n+  --card-pay-logo-size: 2.5rem;\n+\n+  position: relative;\n+  min-height: 100%;\n+  display: grid;\n+  grid-template-rows: auto 1fr;\n+  grid-template-columns: minmax(200px, 720px);\n+  align-items: center;\n+  justify-content: center;\n+  background-color: var(--boxel-purple-600);\n+  color: var(--boxel-light);\n+  font: var(--boxel-font);\n+  letter-spacing: var(--boxel-lsp-lg);\n+  z-index: 0;\n+  padding: var(--boxel-sp);\n+}\n+\n+.merchant-payment-request-page__header {\n+  display: flex;\n+  justify-content: space-between;\n+  align-items: center;\n+  margin-bottom: var(--boxel-sp-lg);\n+}\n+\n+.merchant-payment-request-page__links {\n+  display: flex;\n+  flex-wrap: wrap;\n+  align-items: center;\n+  gap: var(--boxel-sp);\n+  margin: 0;\n+  font: 600 var(--boxel-font-sm);\n+  letter-spacing: 0.02em;\n+}\n+\n+.merchant-payment-request-page__hamburger {\n+  display: none;\n+}\n+\n+@media only screen and (max-width: 360px) {\n+  .merchant-payment-request-page__links {\n+    display: none;\n+  }\n+\n+  .merchant-payment-request-page__hamburger {\n+    display: initial;\n+  }\n+}\ndiff --git a/packages/web-client/app/components/card-pay/merchant-payment-request-page/index.hbs b/packages/web-client/app/components/card-pay/merchant-payment-request-page/index.hbs\nnew file mode 100644\nindex 000000000..1de1f53f4\n--- /dev/null\n+++ b/packages/web-client/app/components/card-pay/merchant-payment-request-page/index.hbs\n@@ -0,0 +1,70 @@\n+{{!--\n+  TODO:\n+  - replace hardcoded merchant info with properties of the component class\n+  - update media queries of this and merchant-payment-request-card to use 480px (conventional upper limit for smartphone)\n+  - update icon/logo size for responsive design, +- updating org title for better control of spacing betweem logo and text\n+ --}}\n+\n+<div class="merchant-payment-request-page">\n+  <div class="merchant-payment-request-page__header">\n+    <Boxel::OrgTitle\n+      @title="Card Pay"\n+      @iconURL="/images/icons/card-pay-logo.svg"\n+      style={{css-var\n+        boxel-org-title-logo-size="var(--card-pay-logo-size)"\n+        boxel-org-title-logo-position="left center"\n+      }}\n+    />\n+\n+    <div class="merchant-payment-request-page__links-container">\n+      <ul class="merchant-payment-request-page__links">\n+        <li>\n+          <a href="#">\n+            About\n+          </a>\n+        </li>\n+        <li>\n+          <a href="#">\n+            Help\n+          </a>\n+        </li>\n+      </ul>\n+      <CardPay::HamburgerMenu\n+        class="merchant-payment-request-page__hamburger"\n+        @open={{this.hamburgerMenuOpen}}\n+        @onOpen={{fn (mut this.hamburgerMenuOpen) true}}\n+        @onClose={{fn (mut this.hamburgerMenuOpen) false}}\n+      >\n+        <:header>\n+          <Boxel::OrgTitle\n+            @title="Card Pay"\n+            @iconURL="/images/icons/card-pay-logo.svg"\n+            style={{css-var\n+              boxel-org-title-logo-size="var(--card-pay-logo-size)"\n+              boxel-org-title-logo-position="left center"\n+            }}\n+          />\n+        </:header>\n+        <:body as |MenuItem|>\n+          <MenuItem @url="#">\n+            About\n+          </MenuItem>\n+          <MenuItem @url="#">\n+            Help\n+          </MenuItem>\n+        </:body>\n+      </CardPay::HamburgerMenu>\n+    </div>\n+  </div>\n+  <CardPay::MerchantPaymentRequestCard\n+    @amount="300"\n+    @usdAmount="3"\n+    @merchant={{hash\n+      name="Happii Creations"\n+      logoBackground="cornflowerblue"\n+      logoTextColor="black"\n+    }}\n+    @paymentURL="https://pay.cardstack.com/merchat-asdnsadkasd?id=0x1238urfds&amount=73298587423545"\n+    @canDeepLink={{false}}\n+  />\n+</div>\ndiff --git a/packages/web-client/app/components/card-pay/merchant-payment-request-page/index.ts b/packages/web-client/app/components/card-pay/merchant-payment-request-page/index.ts\nnew file mode 100644\nindex 000000000..154f92c91\n--- /dev/null\n+++ b/packages/web-client/app/components/card-pay/merchant-payment-request-page/index.ts\n@@ -0,0 +1,6 @@\n+import Component from \'@glimmer/component\';\n+import { tracked } from \'@glimmer/tracking\';\n+\n+export default class extends Component {\n+  @tracked hamburgerMenuOpen = false;\n+}\n', 'commit_subject': 'initial merchant payment request page styling', 'repo_name': 'cardstack/cardstack', 'committer': {'name': 'Luke Melia', 'email': '6b3799be4300e44489a08090123f3842e6419da5@lukemelia.com', 'time_sec': '1631567512', 'tz_offset': '-240', 'date': {'seconds': '1631567512'}}, 'commit_tree': '6e457be9bbdace6c006f1676d54bad16a9f38def', 'commit_message': 'initial merchant payment request page styling\n', 'language_name': 'TypeScript', 'license': 'mit', 'hunks': "@@ -0,0 +1,6 @@\n+import Component from '@glimmer/component';\n+import { tracked } from '@glimmer/tracking';\n+\n+export default class extends Component {\n+  @tracked hamburgerMenuOpen = false;\n+}\n", 'addition_count': 6, 'deletion_count': 0, 'src_file': '/dev/null', 'tgt_file': 'b/packages/web-client/app/components/card-pay/merchant-payment-request-page/index.ts', 'file_extension': '.ts', 'before_file': 'ADDFILE', 'message': 'initial merchant payment request page styling\n', 'author_name': 'Luke Melia', 'lang': 'ts'}