improve website resizing

src/App.css

@@ -3,6 +3,10 @@
     src: url('./fonts/LoveloLineBold.otf'); /*URL to font*/
 }
 
+@keyframes blinker {
+  50% { opacity: 0.55; }
+}
+
 .App {
   text-align: center;
   background-size: 100%;
@@ -14,15 +18,16 @@
 
 .noICO {
   position:fixed;
+  font-size: 14px;
   top:3vh;
-  left: 37vw;
+  left: 40vw;
+  right: 28vw;
   color: rgb(216, 169, 236);
   text-shadow: 1px 1px 5px #ff69f0;
 }
 
 .ethLogo {
   position: fixed;
-  z-index: 0;
   right: 22vh;
   position: fixed;
   height: 10vh;
@@ -60,78 +65,73 @@
 .Warning {
   position: fixed;
   z-index: 3;
-  font-size: 16px;
   text-align: center;
   left: 35vw;
-  /*color: rgb(122, 251, 255);
-  text-shadow: 2px 2px 10px #2daae0;*/
   color: rgb(238, 0, 0);
   text-shadow: 2px 2px 10px #2daae0;
+  animation: blinker 1s linear infinite;
 }
 
 .Account-info {
   position: fixed;
   z-index: 2;
   text-align: left;
+  font-size: 14px;
   top: 13vh;
-  left: 37vw;
+  left: 40vw;
   color: rgb(122, 251, 255);
-  text-shadow: 2px 2px 10px #2daae0;
+  text-shadow: 1px 1px 5px #2daae0;
   width: 35vw;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: auto;
+  text-overflow: ellipsis;
+  -webkit-transition-duration: 0.5s;
+  transition-duration: 0.5s;
 }.Account-info:hover{
   color: rgb(209, 151, 245);
-  text-shadow: 2px 2px 10px #ff69f0;
+  text-shadow: 1px 1px 5px #ff69f0;
 }
 
 .pinkText {
   position: fixed;
+  font-size: 16px;
   z-index: 3;
   color: rgb(216, 169, 236);
   text-shadow: 1px 1px 5px #ff69f0;
   text-align: left;
+  -webkit-transition-duration: 0.5s;
+  transition-duration: 0.5s;
+  /*overflow-x: auto;*/
 }.pinkText:hover{
   color: rgb(122, 251, 255);
-  text-shadow: 2px 2px 10px #2daae0;
-}
-
-.greenText {
-  z-index: 2;
-  color: rgb(122, 251, 255);
-  text-shadow: 2px 2px 10px #1c5f7c;
-  text-align: left;
-}.greenText:hover{
-  color: rgb(220, 160, 245);
-  text-shadow: 1px 1px 5px #ff69f0;
+  text-shadow: 1px 1px 5px #2daae0;
 }
 
-.Approval{
+.approveButtonContainer{
   position:fixed;
   z-index: 3;
-  font-size: 15px;
-  color: rgb(122, 251, 255);
   right: 10vw;
   top: 30vh;
-  margin-left: 40vw;
-  text-shadow: 2px 2px 6px #2daae0;
 }
 
 .approveButton {
   position: fixed;
-  background-color: rgba(209, 151, 245, 0.25);
-  font-size: 18px;
-  /*text-shadow: 1px 1px 6px #2daae0;*/
   font-family: Optima, sans-serif;
+  font-size: 18px;
   font-weight: bolder;
   border-radius: 8px;
   padding: 4px 8px;
-  color: rgb(122, 251, 255);
-  border: 2px solid rgb(122, 251, 255);
+  color: rgb(220, 160, 245);
+  background-color: rgba(126, 228, 255, 0.25);
+  border: 2px solid rgba(180, 81, 179, 0.55);
   -webkit-transition-duration: 0.5s;
   transition-duration: 0.5s;
 }.approveButton:hover {
-  background-color: rgba(122, 251, 255, 0.15);
-  color: rgb(209, 151, 245);
-  border: 2px solid rgb(209, 151, 245);
+  color: rgb(122, 251, 255);
+  border: 2px solid rgb(122, 251, 255);
+  text-shadow: 1px 1px 5px #2daae0;
   cursor: pointer;
 }
 
@@ -140,39 +140,26 @@
   font-family: Optima, sans-serif;
   font-size: 18px;
   color: rgb(122, 251, 255);
-  text-shadow: 2px 2px 10px #2daae0;
+  text-shadow: 1px 1px 5px #2daae0;
 }
 
-.exchange-buyTokensButton {
-  position: fixed;
-  float: left;
-  bottom: 74vh;
+.exchange-buyTokens {
   margin-left: 35vw;
 }
 
-.exchange-buyEthButton {
-  position: fixed;
-  float: left;
-  bottom: 74vh;
+.exchange-buyEth {
   margin-left: 60vw;
 }
 
-.exchange-buyTokensInput {
-    width: 110px;
-    height: 30px;
-    text-align: center;
-    color: rgb(209, 151, 245);
-    vertical-align: middle;
-    border: 1px solid rgba(180, 81, 179, 0.55);
-    background-color: rgba(122, 251, 255, 0.15);
-    border-radius: 8px 0 0 8px;
-    font-size: 18px;
-    font-family: Optima, sans-serif;
+.exchange-buyEth, .exchange-buyTokens {
+  position: fixed;
+  float: left;
+  bottom: 72vh;
 }
 
-.exchange-buyEthInput {
-    width: 110px;
-    height: 30px;
+.exchange-buyEthInput, .exchange-buyTokensInput{
+    width: 10vw;
+    height: 4.5vh;
     text-align: center;
     color: rgb(209, 151, 245);
     vertical-align: middle;
@@ -181,43 +168,33 @@
     background-color: rgba(122, 251, 255, 0.15);
     font-size: 18px;
     font-family: Optima, sans-serif;
+    -webkit-transition-duration: 0.8s;
+    transition-duration: 0.8s;
+}.exchange-buyEthInput:hover, .exchange-buyTokensInput:hover{
+    border: 1px solid rgb(122, 251, 255);
 }
 
-.exchange-buyEthInputButton, .exchange-buyTokensInputButton{
+.exchange-buyEthButton, .exchange-buyTokensButton{
   position: fixed;
-  font-size: 20px;
-  width: 90px;
+  font-size: 2.5vh;
+  width: 7vw;
   text-shadow: 3px 3px 10px #1c5f7c;
   margin-top: 10px;
-  height: 30px;
+  height: 4.5vh;
   text-align: center;
   color: rgb(220, 160, 245);
   text-shadow: 1px 1px 5px #ff69f0;
-  background-color: rgba(126, 228, 255, 0.26);
+  background-color: rgba(126, 228, 255, 0.25);
   vertical-align: middle;
-  margin-top: 1px;
+  margin-top: 0px;
   border: 1px solid rgb(180, 81, 179);
   border-radius: 0 8px 8px 0;
   font-family: Optima, sans-serif;
   -webkit-transition-duration: 0.8s;
   transition-duration: 0.8s;
-}.exchange-buyEthInputButton:hover, .exchange-buyTokensInputButton:hover{
+}.exchange-buyEthButton:hover, .exchange-buyTokensButton:hover{
   cursor: pointer;
   color: rgb(122, 251, 255);
   text-shadow: 2px 2px 10px #1c5f7c;
-  background-color: rgba(209, 151, 245, 0.6);
-  /*border-color: rgb(122, 251, 255);*/
-}
-
-a:visited {
-  color: rgb(122, 251, 255);
-}
-
-a:link {
-  color: rgb(122, 251, 255);
-}
-
-a:hover {
-  color: rgb(216, 169, 236);
-  text-shadow: 1px 1px 5px #ff69f0;
+  border: 1px solid rgb(122, 251, 255);
 }

src/components/menus/Instructions.css

@@ -3,18 +3,21 @@
   background-color: rgba(0,0,0,0.4);
   bottom: 1vh;
   border-radius: 15px;
-  border: 1px solid rgb(180, 81, 179);
+  border: 1px solid;
+  border-color: rgb(122, 251, 255);
   color: rgb(122, 251, 255);
   text-shadow: 2px 2px 10px #2daae0;
   margin-left: 35vw;
   margin-right: 1vw;
   height: 55vh;
-  -webkit-transition-duration: 0.4s;
-  transition-duration: 0.4s;
+  -webkit-transition-duration: 0.5s;
+  transition-duration: 0.5s;
   overflow-y: scroll;
 } .instructions:hover{
   color: rgb(216, 169, 236);
   text-shadow: 1px 1px 5px #ff69f0;
+  border-color: rgb(180, 81, 179);
+  background-color: rgba(0,0,0,0.55);
 }
 
 .instructions-title {
@@ -32,7 +35,23 @@
   padding-right: 15px;
 }
 
-.instructions-link {
-  padding-top: 14px;
-  text-align: left;
+.instructions a:link, .instructions a:visited, .instructions-highlight {
+  color: rgb(122, 251, 255);
+  text-shadow: 2px 2px 10px #2daae0;
+}
+
+.instructions a:hover, .instructions-highlight:hover {
+  text-shadow: none;
+}
+
+.instructions-approve {
+  font-size: 12px;
+  color: rgb(122, 251, 255);
+  border: 1px solid;
+  border-color: rgb(122, 251, 255);
+  border-radius: 4px;
+  padding: 1px 2px;
+  text-shadow: none;
+}.instructions-approve:hover {
+  cursor: default;
 }

src/components/menus/Instructions.js

@@ -6,21 +6,22 @@ class Instructions extends Component{
   render() {
     return (
       <div className="instructions">
-        <div className="instructions-title">Instructions and Stuff</div>
+        <div className="instructions-title">Instructions and Info</div>
         <div className="instructions-text">
           1) Add UNI test token address to MetaMask (first time only)<br/>
-          &nbsp;&nbsp;&nbsp;&nbsp;Token Address: <i>0xca9901076d02f89794262869aad1340bd45d8489</i><br/><br/>
+          &nbsp;&nbsp;&nbsp;&nbsp;Token Address: <span className="instructions-highlight">0xca9901076d02f89794262869aad1340bd45d8489</span><br/><br/>
           2) Check that MetaMask is connected to the Rinkeby Testnet<br/><br/>
           3) You can now buy UNI test tokens with ETH! Visit the&nbsp;
-          <span className="instructions-link"><a href= "https://faucet.rinkeby.io/">Rinkeby faucet</a></span> to aquire testnet ETH <br/><br/>
-          4) To buy ETH with UNI you must approve the Uniswap smart contract to transfer UNI tokens on your behalf. Click the "Approve" button now! (first time only)<br/><br/>
+          <a href= "https://faucet.rinkeby.io/">Rinkeby faucet</a> to aquire testnet ETH <br/><br/>
+          4) To buy ETH with UNI you must approve the Uniswap smart contract to transfer UNI tokens on your behalf. Click the&nbsp;
+          <span className="instructions-approve"><b>Approve</b></span> button now! (first time only)<br/><br/>
           5) Rate is variable based on token availiblity, enter number of tokens to see rate and cost.<br/><br/>
-          6) This is a proof-of-concept for a decentralized Market Maker exchange. Stay tuned for token-to-token pairs, the ability to become a Market Creator and collect fees,
+          6) This is a proof-of-concept for a decentralized Market Maker exchange. Stay tuned for ENS support, token-to-token pairs, the ability to become a liquidity provider and collect fees,
           and a Mainet launch! :) <br/> <br/>
           7) This demo was hastily programmed by a single developer <i>(Hi, my name is Hayden!)</i>. Please reach out to me with any questions, comments, complaints, or bug reports.<br/><br/>
-          &nbsp;&nbsp;Email: hayden@uniswap.io &nbsp;&nbsp;
-          <span className="instructions-link"><a href= "https://github.com/haydenadams/uniswap">GitHub: https://github.com/haydenadams/uniswap<br/></a></span>
-          &nbsp;&nbsp;ETH Address: 0x4779721CaC18A46DbCF148f2Dd7A8E6cc1F90078<br/><br/>
+          &nbsp;&nbsp;Email: <span className="instructions-highlight">hayden@uniswap.io</span>&nbsp;&nbsp;
+          GitHub: <a href= "https://github.com/haydenadams/uniswap">https://github.com/haydenadams/uniswap<br/></a>
+          &nbsp;&nbsp;ETH Address: <span className="instructions-highlight">0x4779721CaC18A46DbCF148f2Dd7A8E6cc1F90078</span><br/><br/>
         </div>
       </div>
     );

src/components/misc/Title.css

@@ -16,6 +16,7 @@
   font-weight: bold;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: rgb(180, 81, 179);
+  cursor: default;
 }
 
 /* entire container, keeps perspective */