styles and some fixes

web-app/src/main/kotlin/home/HomeScreen.kt

@@ -5,8 +5,10 @@ import com.shabinder.common.main.SpotiFlyerMain
 import com.shabinder.common.main.SpotiFlyerMain.State
 import com.shabinder.common.models.AllPlatforms
 import extras.RenderableComponent
+import kotlinx.browser.document
 import kotlinx.coroutines.flow.Flow
 import kotlinx.css.*
+import kotlinx.dom.appendElement
 import react.*
 import styled.css
 import styled.styledDiv
@@ -17,6 +19,19 @@ class HomeScreen(
     props,
     initialState = State()
 ) {
+    override fun componentDidMount() {
+        super.componentDidMount()
+        val form = document.getElementById("razorpay-form")!!
+        repeat(form.childNodes.length){
+            form.childNodes.item(0)?.let { it1 -> form.removeChild(it1) }
+            form.childNodes.item(it)?.let { it1 -> form.removeChild(it1) }
+        }
+        form.appendElement("script"){
+            this.setAttribute("src","https://checkout.razorpay.com/v1/payment-button.js")
+            this.setAttribute("async", true.toString())
+            this.setAttribute("data-payment_button_id", "pl_GnKuuDBdBu0ank")
+        }
+    }
 
     override val stateFlow: Flow<SpotiFlyerMain.State> = model.models
 
@@ -56,8 +71,8 @@ class HomeScreen(
 private val platformIconList = mapOf(
     "spotify.svg" to "https://open.spotify.com/",
     "gaana.svg" to "https://www.gaana.com/",
-    "youtube.svg" to "https://www.youtube.com/",
+    //"youtube.svg" to "https://www.youtube.com/",
-    "youtube_music.svg" to "https://music.youtube.com/"
+    //"youtube_music.svg" to "https://music.youtube.com/"
 )
 private val badges = mapOf(
     "https://img.shields.io/github/v/release/Shabinder/SpotiFlyer?color=7885FF&label=SpotiFlyer&logo=android&style=for-the-badge"

web-app/src/main/kotlin/home/IconList.kt

@@ -25,18 +25,6 @@ fun RBuilder.IconList(handler:IconListProps.() -> Unit): ReactElement {
 
 private val iconList = functionalComponent<IconListProps>("IconList") { props ->
 
-    useEffect {
-        val form = document.getElementById("razorpay-form")!!
-        repeat(form.childNodes.length){
-            form.childNodes.item(it)?.let { it1 -> form.removeChild(it1) }
-        }
-        form.appendElement("script"){
-            this.setAttribute("src","https://checkout.razorpay.com/v1/payment-button.js")
-            this.setAttribute("async", true.toString())
-            this.setAttribute("data-payment_button_id", "pl_GnKuuDBdBu0ank")
-        }
-    }
-
     styledDiv {
         css {
             margin(18.px)

web-app/src/main/kotlin/list/LoadingSpinner.kt

@@ -1,5 +1,6 @@
 package list
 
+import kotlinx.css.marginRight
 import kotlinx.css.px
 import kotlinx.css.width
 import react.*
@@ -24,6 +25,7 @@ private val loadingSpinner = functionalComponent<RProps>("Loading-Spinner") {
         css{
             classes = mutableListOf("lds-ring")
             width = 50.px
+            marginRight = 8.px
         }
     }
 }

web-app/src/main/resources/styles.css

@@ -28,14 +28,19 @@ body, html {
     font-weight: 100;
     text-shadow: 0.3px 0.5px #ffffff;
 }
+
 .headingTitle{
     text-align: center;
     margin: 10px;
     font-family: 'RocknRoll One', sans-serif;
 }
-.glow-button:hover {
+.glow-button, .PaymentButton  {
+    transition: all .2s ease-in-out;
+}
+.glow-button:hover, .PaymentButton:hover {
     color: rgba(255, 255, 255, 1);
     box-shadow: 0 5px 15px rgb(105, 44, 143);
+    transform: scale(1.1);
 }
 
 /*Loading Spinner*/
@@ -295,7 +300,7 @@ input.cmn-toggle-round-flat:checked + label:after {
         flex-direction: column;
     }
     .searchInput {
-        width: 35vw;
+        width: 60vw;
         padding: 0 6px;
     }
     .search-icon {