Add a customisable colour for the Identical match block

Author: caduribas

README.md

@@ -116,22 +116,23 @@ zwd               |
 
 Parameters that you can use to customise some elements of this embeddable component
 
-parameter           | description                                                                       |
---------------------|-----------------------------------------------------------------------------------|
-h3Color             | change the color of the `Similar sequences` and `Rfam classification` text        |
-h3Size              | change the size of the `Similar sequences` and `Rfam classification` text         |
-similarSeqText      | change the `Similar sequences` text                                               | 
-facetColor          | change the color of the facet title                                               |
-facetSize           | change the size of the facet title                                                |
-seqTitleColor       | used in results, it changes the color of the title                                |
-seqTitleSize        | used in results, it changes the size of the title                                 |
-seqInfoColor        | used in results, it changes the color of the text `number of nucleotides`         |
-seqInfoSize         | used in results, it changes the size of the text `number of nucleotides`          |
-searchButtonColor   | change the color of the `Search` button                                           |
-clearButtonColor    | change the color of the `Clear` button                                            |
-uploadButtonColor   | change the color of the `Upload file` button                                      |
-hideUploadButton    | hide the `Upload file` button. Use "hideUploadButton": "true" to hide the button  |
-loadMoreButtonColor | change the color of the `Load more` button                                        |
+parameter                   | description                                                                       |
+----------------------------|-----------------------------------------------------------------------------------|
+h3Color                     | change the color of the `Similar sequences` and `Rfam classification` text        |
+h3Size                      | change the size of the `Similar sequences` and `Rfam classification` text         |
+exactMatchBackgroundColor   | change the background color of the "Exact match" area                             | 
+similarSeqText              | change the `Similar sequences` text                                               | 
+facetColor                  | change the color of the facet title                                               |
+facetSize                   | change the size of the facet title                                                |
+seqTitleColor               | used in results, it changes the color of the title                                |
+seqTitleSize                | used in results, it changes the size of the title                                 |
+seqInfoColor                | used in results, it changes the color of the text `number of nucleotides`         |
+seqInfoSize                 | used in results, it changes the size of the text `number of nucleotides`          |
+searchButtonColor           | change the color of the `Search` button                                           |
+clearButtonColor            | change the color of the `Clear` button                                            |
+uploadButtonColor           | change the color of the `Upload file` button                                      |
+hideUploadButton            | hide the `Upload file` button. Use "hideUploadButton": "true" to hide the button  |
+loadMoreButtonColor         | change the color of the `Load more` button                                        |
 
 ## Developer details
 

src/containers/SequenceSearch/components/SearchForm/index.jsx

@@ -20,6 +20,7 @@ class SearchForm extends React.Component {
     const database = this.props.databases;
 
     if (exactMatch && exactMatch.hitCount > 0) {
+      const exactMatchBackgroundColor = this.props.customStyle && this.props.customStyle.exactMatchBackgroundColor ? this.props.customStyle.exactMatchBackgroundColor : "";
       const exactMatchDescription = exactMatch.entries[0].fields.description[0];
       const exactMatchId = exactMatch.entries[0].id;
       const exactMatchUrl = exactMatch.entries[0].fields.url[0];
@@ -29,7 +30,7 @@ class SearchForm extends React.Component {
 
       return <div className="row">
         <div className="small-9 columns">
-          <div className="callout success">
+          <div className="callout success" style={{backgroundColor: exactMatchBackgroundColor}}>
             {
               database.length === 0 ? <div>
                 <i className="icon icon-functional" data-icon="/" style={{fontSize: "80%", color: "#3c763d"}}> </i> Identical match: <a href={`https://rnacentral.org/rna/${exactMatchId}`} target='_blank'>{exactMatchDescription}</a>