From bc71ac3fbb07dbb37b6625ae8570189810228f83 Mon Sep 17 00:00:00 2001 From: Hayden Adams Date: Mon, 27 Nov 2017 20:03:17 -0500 Subject: [PATCH] improve website resizing --- src/App.css | 171 +++++++++++--------------- src/components/menus/Instructions.css | 31 ++++- src/components/menus/Instructions.js | 17 +-- src/components/misc/Title.css | 1 + 4 files changed, 109 insertions(+), 111 deletions(-) diff --git a/src/App.css b/src/App.css index 677dd9ce7a..f8438af0d6 100644 --- a/src/App.css +++ b/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; @@ -33,10 +38,10 @@ -webkit-filter: invert(.8); filter: invert(.8); -moz-user-select: -moz-none; - -khtml-user-select: none; - -webkit-user-select: none; - -o-user-select: none; - user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; + user-select: none; }.ethLogo:hover { opacity: 1; } @@ -49,10 +54,10 @@ height:25vh; opacity: 0.9; -moz-user-select: -moz-none; - -khtml-user-select: none; - -webkit-user-select: none; - -o-user-select: none; - user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; + user-select: none; }.unicorn:hover { opacity: 1; } @@ -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; + text-shadow: 1px 1px 5px #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; -} - -.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,84 +140,61 @@ 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-buyEthInput { - width: 110px; - height: 30px; - text-align: center; - color: rgb(209, 151, 245); - vertical-align: middle; - border: 1px solid rgba(180, 81, 179, 0.55); - border-radius: 8px 0 0 8px; - background-color: rgba(122, 251, 255, 0.15); - font-size: 18px; - font-family: Optima, sans-serif; -} - -.exchange-buyEthInputButton, .exchange-buyTokensInputButton{ +.exchange-buyEth, .exchange-buyTokens { position: fixed; - font-size: 20px; - width: 90px; + float: left; + bottom: 72vh; +} + +.exchange-buyEthInput, .exchange-buyTokensInput{ + width: 10vw; + height: 4.5vh; + text-align: center; + color: rgb(209, 151, 245); + vertical-align: middle; + border: 1px solid rgba(180, 81, 179, 0.55); + border-radius: 8px 0 0 8px; + 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-buyEthButton, .exchange-buyTokensButton{ + position: fixed; + 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); } diff --git a/src/components/menus/Instructions.css b/src/components/menus/Instructions.css index 0ae471f4fe..1227326254 100644 --- a/src/components/menus/Instructions.css +++ b/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; } diff --git a/src/components/menus/Instructions.js b/src/components/menus/Instructions.js index b0998694fb..01a8e2f5ac 100644 --- a/src/components/menus/Instructions.js +++ b/src/components/menus/Instructions.js @@ -6,21 +6,22 @@ class Instructions extends Component{ render() { return (
-
Instructions and Stuff
+
Instructions and Info
1) Add UNI test token address to MetaMask (first time only)
-     Token Address: 0xca9901076d02f89794262869aad1340bd45d8489

+     Token Address: 0xca9901076d02f89794262869aad1340bd45d8489

2) Check that MetaMask is connected to the Rinkeby Testnet

3) You can now buy UNI test tokens with ETH! Visit the  - Rinkeby faucet to aquire testnet ETH

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

+ Rinkeby faucet to aquire testnet ETH

+ 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)

5) Rate is variable based on token availiblity, enter number of tokens to see rate and cost.

- 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! :)

7) This demo was hastily programmed by a single developer (Hi, my name is Hayden!). Please reach out to me with any questions, comments, complaints, or bug reports.

-   Email: hayden@uniswap.io    - GitHub: https://github.com/haydenadams/uniswap
 -   ETH Address: 0x4779721CaC18A46DbCF148f2Dd7A8E6cc1F90078

+   Email: hayden@uniswap.io   + GitHub: https://github.com/haydenadams/uniswap
 +   ETH Address: 0x4779721CaC18A46DbCF148f2Dd7A8E6cc1F90078

); diff --git a/src/components/misc/Title.css b/src/components/misc/Title.css index 330a0e7168..4e10cfeabc 100644 --- a/src/components/misc/Title.css +++ b/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 */