Update thumbs icon in react

hypha/apply/funds/templates/funds/includes/screening_status_block.html

@@ -3,16 +3,16 @@
     <h5>Screening Status</h5>
     {% if object.supports_default_screening %}
         <div class="sidebar__screening-thumbs screening-status-box">
-            <div class="screening-status-yes">
-                <div class="thumb thumbs-up" data-id="{{ object.id }}" data-yes="true">
+            <div class="sidebar__screening-status-yes">
+                <div class="thumb thumbs-up" data-id="{{ object.id }}" data-yes="true" style="align-self: center;">
                     <svg class="icon icon--like {% if object.has_yes_default_screening_status_set %}icon--like-yes{% endif %} {% if object.can_not_edit_default %}icon--like-disable{% endif %}"><use xlink:href="#like"></use></svg>
                 </div>
                 <div>
                     {{ default_yes }}
                 </div>
             </div>
-            <div class="screening-status-no">
-                <div class="thumb thumbs-down" data-id="{{ object.id }}" data-yes="false">
+            <div class="sidebar__screening-status-no">
+                <div class="thumb thumbs-down" data-id="{{ object.id }}" data-yes="false" style="align-self: center;">
                     <svg class="icon icon--dislike {% if object.has_no_default_screening_status_set %}icon--dislike-no{% endif %} {% if object.can_not_edit_default %}icon--dislike-disable{% endif %}"><use xlink:href="#dislike"></use></svg>
                 </div>
                 <div>
@@ -25,11 +25,13 @@
     <div class="show-screening-options">
         {% if object.has_default_screening_status_set %}
             <p id="screening-options-para">
+                {% if object.screening_statuses.all.count > 1 %}
                 <div class="sidebar__screening-selected-options">
                     {% for status in object.screening_statuses.all%}
                             <span class="sidebar__screening-option">{{ status }}</span>
                     {% endfor%}
                 </div>
+                {% endif %}
                 <a id="screening-options" data-fancybox="" data-src="#screen-application" data-yes="{% if object.has_yes_default_screening_status_set %}true{% else %}false{% endif %}" class="link link--secondary-change" href="#">Screening Options</a>
             </p>
         {% endif %}

hypha/static_src/src/app/src/containers/ScreeningStatus/index.js

@@ -14,8 +14,7 @@ import { SidebarBlock } from '@components/SidebarBlock'
 import LoadingPanel from '@components/LoadingPanel'
 import Chip from '@material-ui/core/Chip';
 import DoneIcon from '@material-ui/icons/Done';
-import ThumbUpIcon from '@material-ui/icons/ThumbUp';
-import ThumbDownIcon from '@material-ui/icons/ThumbDown';
+import SvgIcon from '@material-ui/core/SvgIcon';
 
 class ScreeningStatusContainer extends React.PureComponent {
 
@@ -46,19 +45,22 @@ class ScreeningStatusContainer extends React.PureComponent {
       screeningInfo, 
       visibleOptions, 
       selectVisibleOption } = this.props
-
-    return !screeningInfo.loading ? screeningStatuses && <SidebarBlock title="Screening Status">
-        <div className="screening-status-box" >
-          <div className="screening-default-options">
+    
+    return !screeningInfo.loading ? screeningStatuses && <SidebarBlock title="Screening Status" >
+        <div className="screening-status-box" style={{ borderBottom: '1px solid #e8e8e8'}}>
+          <div className="screening-default-options" >
             <div 
               className={screeningInfo.selectedValues.length ||
                 screeningInfo.defaultSelectedValue.id == defaultOptions.yes.id ? 
                 "screening-status-yes-disabled": "screening-status-yes-enabled"} 
               onClick={this.updateDefaultValue(submissionID, defaultOptions.yes)} 
             >
-                <ThumbUpIcon 
-                className = { screeningInfo.defaultSelectedValue.id == defaultOptions.yes.id ? "thumbs-up-color" : ""}
-                />
+                <SvgIcon
+                  className = { screeningInfo.defaultSelectedValue.id == defaultOptions.yes.id ? "thumbs-up-color" : ""}
+                  style={{ alignSelf: 'center'}}
+                >
+                <path d="m1.75 23h2.5c.965 0 1.75-.785 1.75-1.75v-11.5c0-.965-.785-1.75-1.75-1.75h-2.5c-.965 0-1.75.785-1.75 1.75v11.5c0 .965.785 1.75 1.75 1.75z"></path><path d="m12.781.75c-1 0-1.5.5-1.5 3 0 2.376-2.301 4.288-3.781 5.273v12.388c1.601.741 4.806 1.839 9.781 1.839h1.6c1.95 0 3.61-1.4 3.94-3.32l1.12-6.5c.42-2.45-1.46-4.68-3.94-4.68h-4.72s.75-1.5.75-4c0-3-2.25-4-3.25-4z"></path>
+                </SvgIcon>
                 <div>{defaultOptions.yes.title}</div>
             </div>
             <div 
@@ -67,13 +69,16 @@ class ScreeningStatusContainer extends React.PureComponent {
                 "screening-status-no-disabled" :"screening-status-no-enabled"}  
               onClick={this.updateDefaultValue(submissionID, defaultOptions.no)} 
             >
-                <ThumbDownIcon 
+                <SvgIcon 
                 className = { screeningInfo.defaultSelectedValue.id == defaultOptions.no.id ? "thumbs-down-color" : ""}
-                />
+                style={{ alignSelf: 'center'}}
+                >
+                  <path d="m22.25 1h-2.5c-.965 0-1.75.785-1.75 1.75v11.5c0 .965.785 1.75 1.75 1.75h2.5c.965 0 1.75-.785 1.75-1.75v-11.5c0-.965-.785-1.75-1.75-1.75z"></path><path d="m5.119.75c-1.95 0-3.61 1.4-3.94 3.32l-1.12 6.5c-.42 2.45 1.46 4.68 3.94 4.68h4.72s-.75 1.5-.75 4c0 3 2.25 4 3.25 4s1.5-.5 1.5-3c0-2.376 2.301-4.288 3.781-5.273v-12.388c-1.601-.741-4.806-1.839-9.781-1.839z"></path>
+                </SvgIcon>
                 <div>{defaultOptions.no.title}</div>
             </div>
           </div>
-          {visibleOptions && 
+          {visibleOptions.length > 0 && 
             <div className="screening-visible-options" >
               <h6 style={{ fontWeight: '550', width : '100%'}}>Screening reasons</h6>
               {visibleOptions.map(option => 
@@ -88,6 +93,7 @@ class ScreeningStatusContainer extends React.PureComponent {
               }
             </div>
           }
+          
         </div>
     </SidebarBlock> : <LoadingPanel />
   }

hypha/static_src/src/app/src/containers/ScreeningStatus/styles.scss

@@ -8,27 +8,36 @@
 
 .screening-default-options{
     display: flex;
-    margin-bottom: 1em ;
     justify-content: space-evenly;
 }
 
 .screening-visible-options{
     display : flex;
     flex-wrap: wrap;
+    margin-top: 1em ;
+    margin-bottom: 1em ;
 }
 
 .screening-status-yes-enabled{
-    cursor : pointer
+    cursor : pointer;
+    display: flex;
+    flex-direction: column;
 }
 
 .screening-status-yes-disabled{
-    cursor : not-allowed
+    cursor : not-allowed;
+    display: flex;
+    flex-direction: column;
 }
 
 .screening-status-no-enabled{
     cursor: pointer;
+    display: flex;
+    flex-direction: column;
 }
 
 .screening-status-no-disabled{
     cursor: not-allowed;
+    display: flex;
+    flex-direction: column;
 }

hypha/static_src/src/javascript/apply/screening-status.js

@@ -15,7 +15,7 @@
             data: {yes: yes},
             success: function (json) {
                 if (json) {
-                    var screeningOptions = $('<p id="screening-options-para">' + json.title + '<a id="screening-options-ajax" data-fancybox="" data-src="#screen-application" data-yes=' + yes + ' class="link link--secondary-change" href="#"> Screening Options</a></p>');
+                    var screeningOptions = $('<p id="screening-options-para">' + '<a id="screening-options-ajax" data-fancybox="" data-src="#screen-application" data-yes=' + yes + ' class="link link--secondary-change" href="#"> Screening Options</a></p>');
                     $('.show-screening-options').find('#screening-options-para').remove();
                     $('.show-screening-options').append(screeningOptions);
                     if (yes === true) {
@@ -32,7 +32,6 @@
     });
 
     $('.show-screening-options').on('click', '#screening-options-ajax', function () {
-
         var $screeningOptions = $(this);
         var currentStatus = $screeningOptions.data('yes');
         var $screenApplication = $('#screen-application');

hypha/static_src/src/sass/apply/components/_sidebar.scss

@@ -41,6 +41,16 @@
         justify-content: space-evenly;
     }
 
+    &__screening-status-yes {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__screening-status-no {
+        display: flex;
+        flex-direction: column;
+    }
+
     &__screening-option {
         margin: .3em;
         border: 1px solid $color--black-20;