From 78e7cdf491aad7e3f82563be9ccad2c2514119a7 Mon Sep 17 00:00:00 2001
From: Emilie Ma <kewbish@gmail.com>
Date: Tue, 11 Apr 2023 08:10:53 -0700
Subject: [PATCH] Update landing page mobile styles

---
 landing/index.css                        | 49 ++++++++++++++++++++++++
 landing/index.html                       |  6 +--
 src/manifest.json                        |  2 +-
 src/pages/Background/lib/createStream.ts |  1 +
 src/pages/Popup/Welcome.tsx              |  4 +-
 5 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/landing/index.css b/landing/index.css
index 1425eac..1bcaa62 100644
--- a/landing/index.css
+++ b/landing/index.css
@@ -213,3 +213,52 @@ code {
 .fp-container .card {
   max-height: max-content;
 }
+
+@media only screen and (max-width: 768px) {
+  nav.card {
+    flex-direction: column;
+    width: 90%;
+    background-color: #4fa2ee;
+  }
+  #nav-links {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 1rem;
+    margin: 0;
+  }
+  .card {
+    backdrop-filter: none;
+  }
+  .hero,
+  .container {
+    max-width: 100%;
+    padding: 5rem 1rem;
+  }
+  .mobile-top {
+    margin-top: 0.5rem;
+  }
+  .mobile-top-2 {
+    margin-top: 1rem;
+  }
+  .row {
+    flex-direction: column;
+  }
+  #getStarted .row.pt-4 {
+    padding: 16px 3rem 16px !important;
+  }
+  .text-end {
+    text-align: center !important;
+  }
+  .float-end {
+    float: none !important;
+    margin: 0 auto;
+    display: block;
+    width: fit-content;
+  }
+  #how .row {
+    row-gap: 1rem;
+  }
+  .col {
+    padding: 0 2rem;
+  }
+}
diff --git a/landing/index.html b/landing/index.html
index adb55a7..df36270 100644
--- a/landing/index.html
+++ b/landing/index.html
@@ -39,7 +39,7 @@ <h1 class="display display-extra-big">Cobweb</h1>
         <p class="p-20">is an <a href="https://ethereum.org/">Ethereum-based</a> tool to make learning and earning on the blockchain easier. Support other teen creators and get paid for your projects and work.</p>
         <div>
             <a href="https://chrome.google.com/webstore/detail/cobweb/agdomcadfhkpkcjceenogkiglbhgpclg" class="btn glassy-cw-btn" role="button">download here</a>
-            <a href="https://github.com/kewbish/cobweb/wiki/Cobweb-Tags-&-Account-Page" target="_blank" rel="noopener noreferrer" class="btn glassy-cw-btn ms-1" role="button">...or learn how to add Cobweb to your work</a>
+            <a href="https://github.com/kewbish/cobweb/wiki/Cobweb-Tags-&-Account-Page" target="_blank" rel="noopener noreferrer" class="btn glassy-cw-btn ms-1 mobile-top" role="button">...or learn how to add Cobweb to your work</a>
         </div>
     </div>
     <div class="container" id="about">
@@ -57,7 +57,7 @@ <h3 class="display mb-0" id="simulator-header">Cobweb</h1>
 </ul>
                 </div>
             </div>
-            <div class="col">
+            <div class="col mobile-top-2">
                 <p>Cobweb lets you stream micropayments from your browser to your favourite teen creators. For creators, this means you can add a single tag on your work to get paid. For fans, this means you can automatically support other teen creators by streaming tips in the background.</p><p>
                 Cobweb is affordable and user-controlled too, unlike pricy direct subscriptions. Users can choose to allow web monetization for one visit to unlock exclusive content just once. Cobweb helps shift from a passive web browsing experience to a creative, community-focused one.
                 </p><p>As a plus, you'll earn your first Ethereum tokens, and learn to interact directly with the blockchain.</p>
@@ -96,7 +96,7 @@ <h2 class="display mx-auto text-center mb-3">why cobweb?</h2>
                 <a href="github.com/kewbish/cobweb/wiki" class="btn glassy-cw-btn mt-1 float-end" role="button">learn more</a>
             </div>
             <div class="col">
-<img src="technologies.png" class="mx-auto" alt="Ethereum, MetaMask, and Web Monetization logos." id="technologies">
+<img src="technologies.png" class="mx-auto mobile-top-2" alt="Ethereum, MetaMask, and Web Monetization logos." id="technologies">
             </div>
             
         </div>
diff --git a/src/manifest.json b/src/manifest.json
index 2511f6f..6c0c958 100755
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Cobweb",
-  "description": "A Web3-based tool enabling creative teens to learn and earn on the blockchain.",
+  "description": "A Web3-based tool empowering teens to learn and earn on the blockchain.",
   "version": "0.0.8",
   "background": { "service_worker": "background.bundle.js" },
   "action": {
diff --git a/src/pages/Background/lib/createStream.ts b/src/pages/Background/lib/createStream.ts
index bfcaca6..43bba71 100644
--- a/src/pages/Background/lib/createStream.ts
+++ b/src/pages/Background/lib/createStream.ts
@@ -87,6 +87,7 @@ const createStream = async ({
       ).flowRate === "0"
       // no other existing stream
     ) {
+      console.log(to);
       const newStreamOperation = sf.cfaV1.createFlow({
         sender: from,
         flowRate: BigNumber.from(rateAmount).toString(),
diff --git a/src/pages/Popup/Welcome.tsx b/src/pages/Popup/Welcome.tsx
index 9a12f46..2bf04fc 100644
--- a/src/pages/Popup/Welcome.tsx
+++ b/src/pages/Popup/Welcome.tsx
@@ -67,8 +67,8 @@ const Welcome = () => {
               Cobweb
             </h1>
             <p>
-              An Ethereum-based tool making learning and earning on the
-              blockchain easier for teens.
+              A Web3-based tool empowering teens to learn and earn on the
+              blockchain.
             </p>
             <p style={{ fontSize: 16 }} className="text-muted mb-1">
               Switch connected accounts in Metamask, or proceed: