Changed the UI of creating custom tokens

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;

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.url(placeholder="Enter the URL here", autofocus=true, class="feedback-input") }}
-	{{ form.token(placeholder="Enter the token (optional)", class="feedback-input") }}
+	<div class="token">
-	<div class="tooltip">
+		<h3>tiny0.cc/</h3>
-		What's a token?
+		{{ form.token(placeholder="Use custom alias (optional)", class="feedback-input") }}
-	  <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>
 	</div>
 	{{ form.submit(class="button") }}
 	{% if form.errors %}

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