diff --git a/web-app/src/main/kotlin/home/HomeScreen.kt b/web-app/src/main/kotlin/home/HomeScreen.kt index 7200d516..1fc2c616 100644 --- a/web-app/src/main/kotlin/home/HomeScreen.kt +++ b/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 = 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_music.svg" to "https://music.youtube.com/" + //"youtube.svg" to "https://www.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" diff --git a/web-app/src/main/kotlin/home/IconList.kt b/web-app/src/main/kotlin/home/IconList.kt index 368ad338..7f591eaa 100644 --- a/web-app/src/main/kotlin/home/IconList.kt +++ b/web-app/src/main/kotlin/home/IconList.kt @@ -25,18 +25,6 @@ fun RBuilder.IconList(handler:IconListProps.() -> Unit): ReactElement { private val iconList = functionalComponent("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) diff --git a/web-app/src/main/kotlin/list/LoadingSpinner.kt b/web-app/src/main/kotlin/list/LoadingSpinner.kt index 98adb9ba..45b57f52 100644 --- a/web-app/src/main/kotlin/list/LoadingSpinner.kt +++ b/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("Loading-Spinner") { css{ classes = mutableListOf("lds-ring") width = 50.px + marginRight = 8.px } } } \ No newline at end of file diff --git a/web-app/src/main/resources/styles.css b/web-app/src/main/resources/styles.css index 19a2a262..372053bc 100644 --- a/web-app/src/main/resources/styles.css +++ b/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 {