Update landing page mobile styles

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;
+  }
+}

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>

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": {

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(),

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: