Merge pull request #299 from Web3-API/prealpha-dev

Prep 0.0.1-prealpha.20

Author: dOrgJelli

CHANGELOG.md

@@ -1,3 +1,7 @@
+# Web3API 0.0.1-prealpha.20
+## Bugs
+* Fix the `w3 create app react ...` template project's styling to be responsive.
+
 # Web3API 0.0.1-prealpha.19
 ## Features
 * `@web3api/ipfs-plugin-js`: Added options for request timeouts, provider overrides, and fallback providers. Additionally a new method has been added, `resolve`, which allows the caller to try and resolve a given IFPS CID to ensure the document exists.

VERSION

@@ -1 +1 @@
-0.0.1-prealpha.19
+0.0.1-prealpha.20

packages/templates/app/react/src/App.css

@@ -1,9 +1,11 @@
 .main {
   display: flex;
+  width: 100%;
   flex-direction: column;
   justify-content: center;
-  height: 100vh;
   align-items: center;
+  position: relative;
+  min-height: 100vh;
 }
 
 .main__logo {
@@ -12,10 +14,11 @@
 }
 
 .main__heading {
-  font-size: 45px;
+  font-size: 2.25rem;
   margin-top: 2rem;
   font-weight: 700;
   margin-bottom: 20px;
+  text-align: center;
   color: white;
 }
 
@@ -39,7 +42,8 @@
 .main__input {
   font: inherit;
   color: #60c093;
-  width: 40rem;
+  width: 400px;
+  max-width: 75%;
   border: 3px solid #529dad;
   height: 1.1876em;
   margin: 2.5rem 0;
@@ -85,10 +89,9 @@
 }
 
 .footer__link {
-  text-decoration: none;
   font-size: 12px;
   font-weight: 600;
-  margin-top: 2rem;
+  margin-top: 200px;
   margin-right: 20px;
   color: white;
 }

packages/templates/app/react/src/App.tsx

@@ -22,6 +22,11 @@ export const App: React.FC = () => {
           isClickToPauseDisabled={true}
           height={"300px"}
           width={"300px"}
+          style={{
+            width: "50%",
+            height: "auto",
+            maxWidth: "300px"
+          }}
         />
         <HelloWorld />
       </Web3ApiProvider>

packages/templates/app/react/src/HelloWorld.tsx

@@ -27,9 +27,9 @@ export const HelloWorld: React.FC = () => {
 
   return (
     <>
-      <div className="main__heading">"Hello World" from Web3API!</div>
+      <div className="main__heading">"Hello World"<br/>from Web3API!</div>
       <div className="main__text">
-        Try out the "Hello World" Web3API by:<br/>
+        Test the "Hello World" Web3API by:<br/>
           1. type into the input below<br/>
           2. click the submit button<br/>
           3. view the output in <a
@@ -58,6 +58,7 @@ export const HelloWorld: React.FC = () => {
           Checkout Our Documentation
         </a>
       </div>
+      <div style={{ width: "100%", height: "100px" }}/>
       <div className="footer__container">
         <a
           className="footer__link"
@@ -71,14 +72,14 @@ export const HelloWorld: React.FC = () => {
           href="https://app.ens.domains/name/helloworld.web3api.eth"
           target="_blank"
         >
-          ENS Domain (mainnet)
+          ENS Domain
         </a>
         <a
           className="footer__link"
           href="https://bafybeig7r7vm6vg7fkv4u57p6pj3t3a7li56zeiiu6nn7sx5lrlacy7lpi.ipfs.dweb.link/"
           target="_blank"
         >
-          IPFS Payload
+          IPFS Package
         </a>
       </div>
     </>