From e57f4902bdd4d74cceff7c485251d5323208ec06 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Tue, 10 May 2022 02:15:57 +0100
Subject: [PATCH] fixes to panel titles

---
 templates/fakeyou/clone.html  | 12 +++++-------
 templates/fakeyou/index.html  | 16 +++++++---------
 templates/fakeyou/login.html  |  6 +-----
 templates/fakeyou/signup.html |  6 +-----
 templates/fakeyou/style.css   | 27 +++++++++++++++------------
 5 files changed, 29 insertions(+), 38 deletions(-)

diff --git a/templates/fakeyou/clone.html b/templates/fakeyou/clone.html
index 434292f175..d5399d6d96 100644
--- a/templates/fakeyou/clone.html
+++ b/templates/fakeyou/clone.html
@@ -114,7 +114,7 @@
         </div>
       </nav>
 
-      <div class="container mb-5">
+      <div class="container mb-4">
         <div class="row gx-3 flex-lg-row-reverse align-items-center">
           <div class="col-lg-6">
             <div class="d-flex justify-content-center">
@@ -146,12 +146,10 @@
 
       <div class="container-panel pt-4 pb-5">
         <div class="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0">
-          <div
-            class="panel-title d-flex align-items-center gap-3 w-100 justify-content-center justify-content-lg-start"
-          >
-            <i class="fa-solid fa-microphone fs-2 mb-2"></i>
-            <h1>Clone Your Voice</h1>
-          </div>
+          <h1 class="panel-title">
+            <i class="fa-solid fa-microphone fs-2 mb-2 me-3"></i>Clone Your
+            Voice
+          </h1>
           <div class="py-6">
             <div class="d-flex flex-column gap-4">
               <p>
diff --git a/templates/fakeyou/index.html b/templates/fakeyou/index.html
index d142c54505..1c0103b798 100644
--- a/templates/fakeyou/index.html
+++ b/templates/fakeyou/index.html
@@ -142,7 +142,7 @@
             </div>
 
             <div
-              class="ani3 load-hidden d-grid gap-3 d-lg-flex justify-content-lg-start"
+              class="ani3 load-hidden d-grid gap-3 d-lg-flex justify-content-lg-start mb-4"
             >
               <button type="button" class="btn btn-primary btn-lg">
                 Sign Up
@@ -157,13 +157,9 @@
 
       <div class="container-panel pt-4">
         <div class="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0">
-          <div
-            class="panel-title d-flex align-items-center w-100 justify-content-center justify-content-lg-start"
-          >
-            <h1>
-              <i class="fa-solid fa-volume-high fs-2 mb-2 me-3"></i>Create TTS
-            </h1>
-          </div>
+          <h1 class="panel-title">
+            <i class="fa-solid fa-volume-high fs-2 mb-2 me-3"></i>Create TTS
+          </h1>
           <div class="py-6">
             <div class="d-flex flex-column gap-4">
               <div>
@@ -229,7 +225,9 @@
       </div>
 
       <div class="container mt-5 mb-4">
-        <h2><i class="fa-solid fa-list me-3"></i>Session TTS Results</h2>
+        <h2 class="text-center text-lg-start">
+          <i class="fa-solid fa-list me-3"></i>Session TTS Results
+        </h2>
         <div class="alert alert-secondary my-4" role="alert">Pending...</div>
         <div class="alert alert-success my-4" role="alert">
           Running inference...
diff --git a/templates/fakeyou/login.html b/templates/fakeyou/login.html
index 43679b120a..61403c1166 100644
--- a/templates/fakeyou/login.html
+++ b/templates/fakeyou/login.html
@@ -116,11 +116,7 @@
 
       <div class="container-panel pb-5 pt-lg-5 my-lg-5 login-panel">
         <div class="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0">
-          <div
-            class="panel-title d-flex align-items-center w-100 justify-content-center justify-content-md-start"
-          >
-            <h1>Login</h1>
-          </div>
+          <h1 class="panel-title">Login</h1>
           <div class="py-6">
             <div class="d-flex flex-column gap-4">
               <div>
diff --git a/templates/fakeyou/signup.html b/templates/fakeyou/signup.html
index 368837fe26..30b57ab07c 100644
--- a/templates/fakeyou/signup.html
+++ b/templates/fakeyou/signup.html
@@ -116,11 +116,7 @@
 
       <div class="container-panel pb-5 pt-lg-5 my-lg-5 login-panel">
         <div class="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0">
-          <div
-            class="panel-title d-flex align-items-center w-100 justify-content-center justify-content-md-start"
-          >
-            <h1>Sign Up</h1>
-          </div>
+          <h1 class="panel-title">Sign Up</h1>
           <div class="py-6">
             <div class="d-flex flex-column gap-4">
               <div>
diff --git a/templates/fakeyou/style.css b/templates/fakeyou/style.css
index 3440c769ba..8e0746e33f 100644
--- a/templates/fakeyou/style.css
+++ b/templates/fakeyou/style.css
@@ -18,6 +18,10 @@ html.sr .load-hidden {
   visibility: hidden;
 }
 
+select {
+  cursor: pointer;
+}
+
 button:focus,
 button:active,
 button:hover,
@@ -228,9 +232,9 @@ p {
 
 .panel-title {
   position: static;
-  top: 0;
+  text-align: center;
   text-shadow: 0px 3px 26px #00000060;
-  margin-top: -34px;
+  margin-top: -35px;
 }
 
 .sub-title {
@@ -371,6 +375,15 @@ p {
 }
 
 @media (min-width: 992px) {
+  .panel-title {
+    position: absolute;
+    text-align: left;
+    top: 0;
+    margin-top: -25px;
+  }
+  .p-lg-4 {
+    padding: 2rem !important;
+  }
 }
 
 @media (min-width: 768px) {
@@ -384,17 +397,7 @@ p {
     border-radius: 8px;
   }
 
-  .p-lg-4 {
-    padding: 2rem !important;
-  }
-
   .panel {
     border-radius: 8px;
   }
-
-  .panel-title {
-    position: absolute;
-    top: 0;
-    margin-top: -25px;
-  }
 }