Feature: Update recommender page design

app/assets/javascripts/application.js

@@ -17,7 +17,6 @@
 //= require bp_form_complete
 //= require bp_mappings
 //= require bp_admin
-//= require bp_recommender
 //= require concepts
 //= require_tree ./helpers
 //= require_tree ./components

app/assets/stylesheets/components/index.scss

@@ -27,4 +27,6 @@
 @import "alert";
 @import "progress_pages";
 @import "select";
+@import "radio";
+@import "progress_bar";
 @import "search_result";

app/assets/stylesheets/components/progress_bar.scss

@@ -0,0 +1,22 @@
+.progress-bar-component{
+    width: 100%;
+    height: 30px;
+    background-color: #E7E7E7;
+    border-radius: 3px;
+    margin-right: 5px;
+    position: relative;
+}
+.progress-bar-component-text{
+    position: absolute;
+    top: 4px;
+    left: 14px;
+    color: white;
+    z-index: 1;
+}
+.progress-bar-component-progress{
+    position: absolute;
+    height: 30px;
+    background-color: var(--primary-color);
+    border-radius: 3px;
+    z-index: 0;
+}

app/assets/stylesheets/components/radio.scss

@@ -0,0 +1,58 @@
+.radio{
+    position: relative;
+    border: 1px solid #BDBDBD;
+    padding: 4px 15px;
+    border-radius: 5px;
+    margin-right: 10px;
+}
+.radio.selected{
+    border-color: var(--primary-color);
+}
+.radio:hover{
+    cursor: pointer;
+}
+.radio input[type="radio"]{
+    display: none;
+}
+.radio span{
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    border: 1px solid #BDBDBD;
+    display: block;
+    position: absolute;
+    left: 15px;
+    top: 8px;
+}
+.radio span:after{
+    content: "";
+    height: 7px;
+    width: 7px;
+    background: var(--primary-color);
+    display: block;
+    position: absolute;
+    left: 50%;
+    right: 50%;
+    transform: translate(-46%, 21%) scale(0);
+    border-radius: 50%;
+    transition: transform 0.1s ease-in-out;
+}
+
+.radio input[type="radio"]:checked ~ span:after{
+    transform: translate(-46%, 21%) scale(1);
+}
+
+.radio input[type="radio"]:checked ~ span{
+    border: 1px solid var(--primary-color);
+}
+
+.radio .text{
+    padding-left: 20px;
+    font-size: 13px;
+    font-weight: 400;
+    color: #BDBDBD;
+}
+.radio input[type="radio"]:checked ~ .text{
+    color: var(--primary-color);
+    font-weight: 500;
+}

app/assets/stylesheets/components/table.scss

@@ -34,4 +34,19 @@
   font-weight: 400;
 }
 
+table.dataTable thead td, table.dataTable thead th{
+  padding: 20px 10px;
+}
+
+
+.table-mini{
+  font-size: 14px;
+}
+
+.table-outline{
+  border: 1px solid #C7C7C7 !important;
+  border-radius: 8px;
+  padding: 10px;
+}
+
 

app/assets/stylesheets/recommender.scss

@@ -1,37 +1,185 @@
-.optionsBox {
-  margin-top: 15px;
-}
-
-#inputTextHighlighted {
-  display:none;
-  background-color: #e2ebf0;
-}
-
-.generalError, .invalidMaxOntError, .invalidWeightsError, .notTextError, .sumWeightsError, .rangeWeightsError, .maxOntologiesError, .inputSizeError {
-  display: none;
-  color: red;
-}
-
-#resultsDisplay {
-  background-color: white !important;
-  margin-bottom: 35px;
-}
-
-.result-scores {
-  background-color: #8cabd6;
-  border: 1px solid #3e76b6;
-}
-
-.final-score {
-  color: #ccc;
-  background-color: #234979;
-  border: 1px solid #234979;
-}
-
-.score-number {
-  margin-left: 3px;
-}
-
-#recommender-help i {
-  margin-left: .25em;
-}
+.recommender-page-container{
+    display:flex;
+    justify-content:center;
+}
+.recommender-page-subcontainer{
+    width: 1248px;
+    padding: 20px 50px;
+}
+
+.recommender-page-title .text{
+    font-size: 25px;
+    font-weight: 700;
+}
+
+.recommender-page-title .line{
+    height: 2px;
+    width: 57px;
+    background-color: var(--primary-color);
+    border-radius: 10px;
+}
+.recommender-page-decription{
+    color: #888888;
+    margin-top: 20px;
+}
+.recommender-page-inputs{
+    margin-top: 20px;
+}
+.recommender-page-inputs .inputs{
+    display: flex;
+}
+.recommender-page-text-area, .recommender-page-text-area-results {
+    box-shadow: 2px 30px 60px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    width: 630px;
+    margin-right: 30px;
+}
+.recommender-page-text-area-results{
+    padding: 20px;
+    min-height:205px;
+}
+
+.recommender-page-text-area textarea{
+    font-size: 16px;
+    outline: none;
+    padding: 20px;
+    width: 630px;
+    resize: none;
+    border: none;
+    margin-right: 30px;
+}
+.recommender-page-options{
+    width: 100%;
+}
+.recommender-page-text-area .insert-sample-text-button{
+    display: flex;
+    justify-content: end;
+    padding: 20px;
+}
+.recommender-page-text-area .insert-sample-text-button .button{
+    display: flex;
+    align-items: center;
+}
+.recommender-page-text-area .insert-sample-text-button .button:hover{
+    cursor: pointer;
+}
+.recommender-page-text-area .insert-sample-text-button .button .text{
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--primary-color);
+    margin-right: 10px;
+}
+.recommender-page-text-area .insert-sample-text-button .button svg{
+    width: 16px;
+    height: 16px;
+}
+.recommender-page-text-area .insert-sample-text-button .button svg path{
+    fill: var(--primary-color);
+}
+.recommender-page-options .section-text{
+    font-weight: 600;
+
+}
+.recommender-page-options .title{
+    margin-top: 10px;
+    color: #888888;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 5px; 
+}
+
+.recommender-page-options .chips{
+    display: flex;
+}
+.recommender-page-options input{
+    accent-color: var(--primary-color) revert;
+}
+.recommender-page-options .radios{
+    display: flex;
+}
+
+.recommender-page-options .advanced-options-button{
+    display: flex;
+    align-items: center;
+    margin-top: 15px;
+}
+.recommender-page-options .advanced-options-button:hover{
+    cursor: pointer;
+}
+.recommender-page-options .advanced-options-button .text{
+    margin-left: 10px;
+    color: var(--primary-color);
+    font-size: 14px;
+}
+
+.recommender-page-options .advanced-options-button svg path{
+    fill: var(--primary-color);
+}
+.recommender-page-button{
+    margin-top: 27px;
+    width: 630px;
+}
+
+.recommender-advanced-options .title {
+    font-weight: 600;
+    margin-top: 30px;
+}
+.recommender-advanced-options .inputs-container{
+    display: flex;
+    margin-top: 11px;
+    margin-bottom: 17px;
+}
+.recommender-advanced-options .input, .recommender-advanced-options .ninput{
+    width: 100%;
+}
+
+.recommender-advanced-options .ninput + .ninput{
+    margin-left: 20px;
+}
+
+.recommender-advanced-options .maxsets{
+    margin-right: 20px;
+}
+.recommender-advanced-options .hidebutton{
+    color: var(--primary-color);
+    display: flex;
+    align-items: center;
+}
+
+.recommender-advanced-options .hidebutton:hover{
+    cursor: pointer;
+}
+
+.recommender-advanced-options .hidebutton .text{
+    font-size: 14px;
+    font-weight: 500;
+    margin-left: 10px;
+
+}
+.recommender-advanced-options .hidebutton svg path{
+    fill: var(--primary-color);
+}
+.recommender-table-container{
+    margin-top: 20px;
+}
+.recommender-page-results .title{
+    margin-top: 63px;
+    font-size: 18px;
+    font-weight: 600;
+}
+.recommender-result-ontology{
+    font-size: 16px;
+    display: block;
+}
+.recommender-result-highlighted{
+    display: flex;
+    justify-content: end;
+}
+.recommender-page-text-area-results a{
+    font-weight: 600;
+    text-decoration: underline !important;
+}
+.cite-us-button{
+    display: inline-block;
+    margin-top: 20px;
+}

app/components/buttons/regular_button_component.rb

@@ -2,7 +2,7 @@ class Buttons::RegularButtonComponent < ViewComponent::Base
   renders_one :icon_left
   renders_one :icon_right
 
-  def initialize(id: , value:, variant: "primary", color: "normal", href: "", size: "normal", state: "animate", type: 'button')
+  def initialize(id: , value:, variant: "primary", color: "normal", href: "", size: "normal", state: "animate", type: 'button', target: nil)
     @id = id
     @value = value
     @variant = variant
@@ -11,6 +11,7 @@ def initialize(id: , value:, variant: "primary", color: "normal", href: "", size
     @size = size
     @state = state
     @type = type
+    @target = target
   end
 
   def button_label
@@ -28,7 +29,7 @@ def button_elem
     on_click_event =  load_animation? ?  "displayAnimation(this, '#{@id}-loading-animation')" : ''
 
     if link?
-      link_to(@href, class: class_style, onclick: on_click_event, id: @id) do
+      link_to(@href, class: class_style, onclick: on_click_event, id: @id, target: @target) do
         button_label
       end
     else

app/components/display/progress_bar_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class Display::ProgressBarComponent < ViewComponent::Base
+
+    def initialize(progress: '0')
+        @progress = progress
+    end
+    def call
+        content_tag(:div, class: 'progress-bar-component') {
+            content_tag(:div, @progress+'%', class: 'progress-bar-component-text') +
+            content_tag(:div, '', class: 'progress-bar-component-progress', style: 'width: '+@progress+'%;')
+        }
+    end
+  end