From c2a6e61ea044ee90be16c932be2dfb62a864120b Mon Sep 17 00:00:00 2001
From: xemeds <xemeds@protonmail.com>
Date: Wed, 26 Aug 2020 11:13:50 +0300
Subject: [PATCH] Changed the UI of creating custom tokens

---
 tiny0/static/style.css      | 47 +++++++------------------------------
 tiny0/templates/index.html  |  9 ++++---
 tiny0/templates/report.html |  2 +-
 3 files changed, 14 insertions(+), 44 deletions(-)

diff --git a/tiny0/static/style.css b/tiny0/static/style.css
index 82b53c7..18fe893 100644
--- a/tiny0/static/style.css
+++ b/tiny0/static/style.css
@@ -140,6 +140,15 @@ body {
   border: 2px solid #c95c03;
 }
 
+.token {
+  display: flex;
+}
+
+.token h3 {
+  color: #ffffff;
+  margin: 15px 10px 0 0;
+}
+
 .button {
   width: 100%;
   background: #fc913a;
@@ -165,44 +174,6 @@ body {
   }
 }
 
-.tooltip {
-  color: #ffffff;
-  position: relative;
-  display: inline-block;
-  border-bottom: 1px dotted black;
-  margin-bottom: 15px;
-}
-
-.tooltip .tooltiptext {
-  visibility: hidden;
-  width: 400px;
-  background-color: black;
-  color: #fff;
-  text-align: center;
-  border-radius: 6px;
-  padding: 10px;
-  position: absolute;
-  z-index: 1;
-  bottom: 150%;
-  left: 50%;
-  margin-left: -200px;
-}
-
-.tooltip .tooltiptext::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: black transparent transparent transparent;
-}
-
-.tooltip:hover .tooltiptext {
-  visibility: visible;
-}
-
 .form-errors {
   color: #ffffff;
   text-align: center;
diff --git a/tiny0/templates/index.html b/tiny0/templates/index.html
index 24d53af..c732d09 100644
--- a/tiny0/templates/index.html
+++ b/tiny0/templates/index.html
@@ -4,11 +4,10 @@
 <form method="POST" action="" class="url-form">
 	<h1>&#60 URL Shortener &#62</h1>
 	{{ form.hidden_tag() }}
-	{{ form.url(placeholder="Enter the URL here", autofocus=true, class="feedback-input") }} 
-	{{ form.token(placeholder="Enter the token (optional)", class="feedback-input") }}
-	<div class="tooltip">
-		What's a token?
-	  <span class="tooltiptext"><p>tiny0.cc/token</p><p>Token must be between 6 and 16 characters long</p><p>It can only contain letters, numbers, underscores(_) and dashes(-)</p></span>
+	{{ form.url(placeholder="Enter the URL here", autofocus=true, class="feedback-input") }}
+	<div class="token">
+		<h3>tiny0.cc/</h3>
+		{{ form.token(placeholder="Use custom alias (optional)", class="feedback-input") }}
 	</div>
 	{{ form.submit(class="button") }}
 	{% if form.errors %}
diff --git a/tiny0/templates/report.html b/tiny0/templates/report.html
index 9067d06..00f6743 100644
--- a/tiny0/templates/report.html
+++ b/tiny0/templates/report.html
@@ -5,7 +5,7 @@
 	<h1>&#60 Report &#62</h1>
 	{{ form.hidden_tag() }}
 	{{ form.url(placeholder="Enter the short URL", autofocus=true, class="feedback-input") }} 
-	{{ form.message(placeholder="Enter a short message explaining the reason for your report", class="feedback-input") }}
+	{{ form.message(placeholder="Enter a short message explaining the reason of your report", class="feedback-input") }}
 	{{ form.submit(class="button") }}
 	{% if form.errors %}
 		<div class="form-errors">