Frontend small fixes (#2244)

### What's done: * Fix alignment on fossGraphCollectionView * Fixed text alignment in createVulnerabilityView's language selector * Fixed text in "Create new contest template" button * Fixed select form on CreationView
saveourtool · Jun 27, 2023 · 7df5094 · 7df5094
1 parent 86c9c4f
commit 7df5094
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 16 deletions.
diff --git a/...n/kotlin/com/saveourtool/save/frontend/components/basic/FossGraphIntroductionComponent.kt b/...n/kotlin/com/saveourtool/save/frontend/components/basic/FossGraphIntroductionComponent.kt
@@ -39,7 +39,7 @@ private const val SAVE_FOSS_GRAPH_TOP_RATING_MD = """
 )
 fun ChildrenBuilder.fossGraphIntroductionComponent() {
     div {
-        className = ClassName("card flex-md-column mb-1 box-shadow")
+        className = ClassName("card flex-md-column box-shadow")
         div {
             className = ClassName("card-body d-flex align-items-start")
             div {

diff --git a/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/basic/SelectForm.kt b/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/basic/SelectForm.kt
@@ -157,10 +157,10 @@ fun <D : Any> selectFormRequired() = FC<SelectFormRequiredProps<D>> { props ->
                     }
                 }
                 className = when {
-                    value == "" || value == null -> ClassName("${props.selectClasses} form-control")
-                    props.validInput == true -> ClassName(" ${props.selectClasses} form-control is-valid")
-                    props.validInput == false -> ClassName(" ${props.selectClasses} form-control is-invalid")
-                    else -> ClassName(" ${props.selectClasses} form-control")
+                    value == "" || value == null -> ClassName("form-control ${props.selectClasses}")
+                    props.validInput == true -> ClassName("form-control ${props.selectClasses} is-valid")
+                    props.validInput == false -> ClassName("form-control ${props.selectClasses} is-invalid")
+                    else -> ClassName("form-control ${props.selectClasses}")
                 }
                 onChange = { event ->
                     elements.find {

diff --git a/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/CreationView.kt b/save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/CreationView.kt
@@ -185,6 +185,7 @@ class CreationView : AbstractView<ProjectSaveViewProps, ProjectSaveViewState>(tr
                                     div {
                                         className = ClassName("row-3")
                                         organizationSelectForm {
+                                            selectClasses = "custom-select"
                                             formType = InputTypes.ORGANIZATION_NAME
                                             validInput = state.projectCreationRequest.organizationName.isEmpty() || state.projectCreationRequest.organizationName.isValidName()
                                             classes = "col-md-12 pl-2 pr-2"

diff --git a/...otlin/com/saveourtool/save/frontend/components/views/contests/CreateNewContestTemplate.kt b/...otlin/com/saveourtool/save/frontend/components/views/contests/CreateNewContestTemplate.kt
@@ -7,7 +7,7 @@ import js.core.jso
 import react.VFC
 import react.dom.html.ReactHTML.a
 import react.dom.html.ReactHTML.div
-import react.dom.html.ReactHTML.h4
+import react.dom.html.ReactHTML.h3
 import react.dom.html.ReactHTML.img
 import web.cssom.*
 
@@ -31,7 +31,7 @@ internal val createNewContestTemplate = VFC {
                     }
                 }
             }
-            h4 {
+            h3 {
                 className = ClassName("mb-auto")
                 +"Create new contest template"
             }

diff --git a/...otlin/com/saveourtool/save/frontend/components/views/fossgraph/CreateVulnerabilityView.kt b/...otlin/com/saveourtool/save/frontend/components/views/fossgraph/CreateVulnerabilityView.kt
@@ -229,7 +229,7 @@ val createVulnerabilityView: VFC = VFC {
                                     selectorBuilder(
                                         vulnerability.language.value,
                                         VulnerabilityLanguage.values().map { it.toString() },
-                                        classes = "input-group form-control",
+                                        classes = "input-group form-control custom-select",
                                     ) { event ->
                                         val entries = event.target.value
                                         setVulnerability(

diff --git a/...otlin/com/saveourtool/save/frontend/components/views/fossgraph/FossGraphCollectionView.kt b/...otlin/com/saveourtool/save/frontend/components/views/fossgraph/FossGraphCollectionView.kt
@@ -113,12 +113,7 @@ val fossGraphCollectionView: FC<FossGraphCollectionViewProps> = FC { props ->
                 className = ClassName("d-flex justify-content-center")
                 div {
                     className = ClassName("col-md-4 d-flex align-items-stretch")
-                    div {
-                        div {
-                            className = ClassName("mb-2")
-                            fossGraphIntroductionComponent()
-                        }
-                    }
+                    fossGraphIntroductionComponent()
                 }
                 div {
                     className = ClassName("card flex-md-row col-lg-7 d-flex align-items-stretch")

diff --git a/...src/main/kotlin/com/saveourtool/save/frontend/components/views/projectcollection/Cards.kt b/...src/main/kotlin/com/saveourtool/save/frontend/components/views/projectcollection/Cards.kt
@@ -19,15 +19,15 @@ import web.cssom.*
 /**
  * Buttons for creation and deletion of new projects and organizations
  */
-fun ChildrenBuilder.topRightCard() {
+internal fun ChildrenBuilder.topRightCard() {
     creationCard("img/undraw_for_review_eqxk.svg", "organization", "#/${FrontendRoutes.CREATE_ORGANIZATION.path}/")
     creationCard("img/undraw_selecting_team_re_ndkb.svg", "project", "#/${FrontendRoutes.CREATE_PROJECT.path}/")
 }
 
 /**
  * General info card
  */
-fun ChildrenBuilder.topLeftCard() {
+internal fun ChildrenBuilder.topLeftCard() {
     div {
         className = ClassName("col-lg-6")
         div {