Small cosmetic fixes for UserRating and Contests views (#1268)

### What's done:
- added cosmetic enhancements to UserRating
- changed Contests view: added featured contests

Author: orchestr7

save-frontend/build.gradle.kts

@@ -74,6 +74,7 @@ kotlin {
             implementation(npm("@fortawesome/free-solid-svg-icons", "5.15.3"))
             implementation(npm("@fortawesome/free-brands-svg-icons", "5.15.3"))
             implementation(npm("@fortawesome/react-fontawesome", "^0.1.16"))
+            implementation(npm("devicon", "^2.15.1"))
             implementation(npm("animate.css", "^4.1.1"))
             implementation(npm("react-scroll-motion", "^0.3.0"))
             implementation(npm("react-spinners", "0.13.0"))

save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/ContestView.kt

@@ -23,10 +23,10 @@ import csstype.ClassName
 import history.Location
 import react.*
 import react.dom.html.InputType
-import react.dom.html.ReactHTML
 import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.h1
 import react.dom.html.ReactHTML.input
+import react.dom.html.ReactHTML.label
 import react.dom.html.ReactHTML.li
 import react.dom.html.ReactHTML.nav
 import react.dom.html.ReactHTML.p
@@ -159,7 +159,7 @@ class ContestView : AbstractView<ContestViewProps, ContestViewState>(false) {
                     }
                 }
                 div {
-                    ReactHTML.label {
+                    label {
                         className = ClassName("form-check-label")
                         htmlFor = "isFeaturedCheckbox"
                         +"Featured contest"

save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/contests/ContestListView.kt

@@ -66,15 +66,14 @@ class ContestListView : AbstractView<ContestListViewProps, ContestListViewState>
 
                         div {
                             className = ClassName("row mb-2")
-                            featuredContest()
+                            welcomeContest()
                             newContestsCard()
                         }
 
                         div {
                             className = ClassName("row mb-2")
                             yourContests()
                             statistics()
-                            proposeContest()
                         }
 
                         div {

save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/contests/ContestsStatistics.kt

@@ -11,17 +11,78 @@ import csstype.AlignItems
 import csstype.ClassName
 import csstype.JustifyContent
 import csstype.rem
+import react.ChildrenBuilder
 import react.VFC
-import react.dom.html.ReactHTML
 import react.dom.html.ReactHTML.div
-import react.dom.html.ReactHTML.h2
+import react.dom.html.ReactHTML.h1
 import react.dom.html.ReactHTML.strong
 import react.useState
 
 import kotlinx.js.jso
 
 val statistics = statistics()
 
+/**
+ * @param activeContests
+ * @param finishedContests
+ */
+fun ChildrenBuilder.stats(activeContests: Set<ContestDto>, finishedContests: Set<ContestDto>) {
+    div {
+        className = ClassName("row border-bottom mb-3 mx-3")
+
+        div {
+            className = ClassName("col-lg-6 mt-2 mb-2")
+            div {
+                className = ClassName("row")
+                style = jso {
+                    justifyContent = JustifyContent.center
+                    alignItems = AlignItems.center
+                }
+                strong {
+                    className = ClassName("d-inline-block mb-2 card-text")
+                    +"Active contests:"
+                }
+            }
+            div {
+                className = ClassName("row")
+                style = jso {
+                    justifyContent = JustifyContent.center
+                    alignItems = AlignItems.center
+                }
+                h1 {
+                    className = ClassName("text-dark")
+                    +activeContests.size.toString()
+                }
+            }
+        }
+        div {
+            className = ClassName("col-lg-6 mt-2")
+            div {
+                className = ClassName("row")
+                style = jso {
+                    justifyContent = JustifyContent.center
+                    alignItems = AlignItems.center
+                }
+                strong {
+                    className = ClassName("d-inline-block mb-2 card-text ")
+                    +"Finished contests:"
+                }
+            }
+            div {
+                className = ClassName("row")
+                style = jso {
+                    justifyContent = JustifyContent.center
+                    alignItems = AlignItems.center
+                }
+                h1 {
+                    className = ClassName("text-dark")
+                    +finishedContests.size.toString()
+                }
+            }
+        }
+    }
+}
+
 @Suppress("TOO_LONG_FUNCTION", "LongMethod")
 private fun statistics() = VFC {
     val (activeContests, setActiveContests) = useState<Set<ContestDto>>(emptySet())
@@ -48,60 +109,15 @@ private fun statistics() = VFC {
 
     div {
         className = ClassName("col-lg-4")
-        ReactHTML.div {
+        div {
             className = ClassName("card flex-md-row mb-1 box-shadow")
             style = jso {
-                minHeight = 10.rem
+                minHeight = 15.rem
             }
             div {
-                className = ClassName("col-lg-6 mt-2")
-                div {
-                    className = ClassName("row")
-                    style = jso {
-                        justifyContent = JustifyContent.center
-                        alignItems = AlignItems.center
-                    }
-                    strong {
-                        className = ClassName("d-inline-block mb-2 card-text")
-                        +"Active contests:"
-                    }
-                }
-                div {
-                    className = ClassName("row")
-                    style = jso {
-                        justifyContent = JustifyContent.center
-                        alignItems = AlignItems.center
-                    }
-                    h2 {
-                        className = ClassName("text-dark")
-                        +activeContests.size.toString()
-                    }
-                }
-            }
-            div {
-                className = ClassName("col-lg-6 mt-2")
-                div {
-                    className = ClassName("row")
-                    style = jso {
-                        justifyContent = JustifyContent.center
-                        alignItems = AlignItems.center
-                    }
-                    strong {
-                        className = ClassName("d-inline-block mb-2 card-text ")
-                        +"Finished contests:"
-                    }
-                }
-                div {
-                    className = ClassName("row")
-                    style = jso {
-                        justifyContent = JustifyContent.center
-                        alignItems = AlignItems.center
-                    }
-                    h2 {
-                        className = ClassName("text-dark")
-                        +finishedContests.size.toString()
-                    }
-                }
+                className = ClassName("col-lg-12")
+                stats(activeContests, finishedContests)
+                proposeContest()
             }
         }
     }