From 0bf72234be9626bfa016f7f399b0537a62d9f220 Mon Sep 17 00:00:00 2001
From: akuleshov7 <andrewkuleshov7@gmail.com>
Date: Sat, 7 Sep 2024 11:09:56 +0300
Subject: [PATCH] Fixing Telegram Auth wrapper

---
 .../kotlin/ru/posidata/views/main/MainView.kt | 21 -------------------
 .../kotlin/ru/posidata/views/main/Welcome.kt  | 15 +++++++++++++
 .../jsMain/resources/scss/_background.scss    |  7 +++++++
 3 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/frontend/src/jsMain/kotlin/ru/posidata/views/main/MainView.kt b/frontend/src/jsMain/kotlin/ru/posidata/views/main/MainView.kt
index 73682e9..5e28d9a 100644
--- a/frontend/src/jsMain/kotlin/ru/posidata/views/main/MainView.kt
+++ b/frontend/src/jsMain/kotlin/ru/posidata/views/main/MainView.kt
@@ -11,9 +11,6 @@ import ru.posidata.views.utils.internals.Selection.RESULTS
 import ru.posidata.views.utils.externals.particles.Particles
 import ru.posidata.views.utils.externals.telegram.TLoginButton
 import web.cssom.*
-import web.html.HTMLDivElement
-
-val telegramWrapperRef: MutableRefObject<HTMLDivElement> = useRef(null)
 
 val mainView = FC {
     Particles::class.react {
@@ -36,20 +33,6 @@ val mainView = FC {
                 minHeight = "100vh".unsafeCast<MinHeight>()
             }
 
-            TLoginButton {
-                botName = "PosiDataBot"
-                buttonSize = "large"
-                onAuthCallback = { user ->
-                    console.log(user.hash)
-                }
-                redirectUrl = null
-                cornerRadius = 15.0
-                requestAccess = "write"
-                usePic = null
-                lang = null
-                additionalClassNames = ""
-            }
-
             div {
                 id = "back"
                 className = ClassName("card col-xl-4 col-lg-5 col-md-7 col-sm-8 col-12")
@@ -59,10 +42,6 @@ val mainView = FC {
                     boxShadow = "10px 10px 20px rgba(0, 0, 0, 0.5)".unsafeCast<BoxShadow>()
                 }
 
-                div {
-                    ref = telegramWrapperRef
-
-                }
                 headerRow {}
 
                 div {
diff --git a/frontend/src/jsMain/kotlin/ru/posidata/views/main/Welcome.kt b/frontend/src/jsMain/kotlin/ru/posidata/views/main/Welcome.kt
index 8b4aa93..7a4c578 100644
--- a/frontend/src/jsMain/kotlin/ru/posidata/views/main/Welcome.kt
+++ b/frontend/src/jsMain/kotlin/ru/posidata/views/main/Welcome.kt
@@ -7,6 +7,7 @@ import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.h1
 import react.dom.html.ReactHTML.h6
 import react.dom.html.ReactHTML.img
+import ru.posidata.views.utils.externals.telegram.TLoginButton
 import ru.posidata.views.utils.internals.Selection
 import web.cssom.*
 
@@ -74,6 +75,20 @@ val welcomeCard = FC<WelcomeCardProps> { props ->
 
             }
 
+            TLoginButton {
+                botName = "PosiDataBot"
+                buttonSize = "large"
+                onAuthCallback = { user ->
+                    console.log(user.hash)
+                }
+                redirectUrl = null
+                cornerRadius = 15.0
+                requestAccess = "write"
+                usePic = null
+                lang = null
+                additionalClassNames = "d-flex justify-content-center zIndex1000"
+            }
+
             img {
                 className = ClassName("animate__animated animate__shakeX mt-1 border border-info border-5 img-glow3 ")
                 src = "img/pokemonVSBigData.jpeg"
diff --git a/frontend/src/jsMain/resources/scss/_background.scss b/frontend/src/jsMain/resources/scss/_background.scss
index d167cf4..8a6a4e3 100644
--- a/frontend/src/jsMain/resources/scss/_background.scss
+++ b/frontend/src/jsMain/resources/scss/_background.scss
@@ -5,9 +5,12 @@
     background: linear-gradient(0deg, rgb(0, 85, 102), rgb(0, 55, 71)); /* Standard syntax */
 }
 
+
+
 html {
     height: 100%;
 }
+
 body {
     height: 100%;
     margin: 0;
@@ -34,3 +37,7 @@ body {
 .full-width-container .row {
     margin: 0;
 }
+
+.zIndex1000 {
+    z-index: 1000;
+}