From 8bcd7c252110912b1a0ea4541142d429451287de Mon Sep 17 00:00:00 2001
From: Allard Oelen <oelen@l3s.de>
Date: Thu, 8 Apr 2021 16:37:34 +0200
Subject: [PATCH 01/10] refactor: update theme variables

---
 src/assets/scss/ThemeVariables.scss | 47 +++++++++++------------------
 1 file changed, 18 insertions(+), 29 deletions(-)

diff --git a/src/assets/scss/ThemeVariables.scss b/src/assets/scss/ThemeVariables.scss
index ff2614c87..4e1d2490b 100644
--- a/src/assets/scss/ThemeVariables.scss
+++ b/src/assets/scss/ThemeVariables.scss
@@ -1,37 +1,29 @@
-// ORKG theme variables
-$ORKG-border-radius: 6px; // General border radius on inputs, buttons, boxes etc.
-$ORKG-primary-color: #e86161; // Primary color for buttons, icons, links etc.
-$ORKG-border-width: 1px; // Width of border for buttons, inputs
-
 // Theme variables
-$primary: $ORKG-primary-color;
-$darkblue: #80869b;
-$darkblueDarker: darken($darkblue, 20%);
-//$secondary: #3C4C58;
-$light: #e9ecef;
-$ultra-light-blue: #f8f9fb;
-$ultra-light-blue-darker: #dbdde5;
+$primary: #e86161;
+$primary-darker: darken($primary, 20%);
+$secondary: #80869b;
+$secondary-darker: darken($darkblue, 20%);
+$light: #e9ebf2;
+$light-lighter: #f8f9fb;
+$light-darker: #dbdde5;
+$dark: #5b6176;
 $body-bg: #e9ebf2;
-$body-color: #4f4f4f; //#646464;
-$border-width: $ORKG-border-width;
-$border-radius: $ORKG-border-radius;
-
-// Add a new theme color
+$body-color: #4f4f4f;
+$border-width: 1px;
+$border-radius: 6px;
 $theme-colors: (
-    lightblue: $body-bg,
-    darkblue: $darkblue,
-    darkblueDarker: $darkblueDarker,
-    primaryDarker: darken($ORKG-primary-color, 20%)
+    primary-darker: $primary-darker,
+    secondary-darker: $secondary-darker
 );
 
 // Forms
 $form-feedback-font-size: 90%;
 
 // Inputs
-$input-border-radius: $ORKG-border-radius;
-$input-border-radius-sm: $ORKG-border-radius;
-$btn-border-radius: $ORKG-border-radius;
-$btn-border-radius: $ORKG-border-radius;
+$input-border-radius: $border-radius;
+$input-border-radius-sm: $border-radius;
+$btn-border-radius: $border-radius;
+$btn-border-radius: $border-radius;
 $btn-border-radius-sm: $btn-border-radius;
 $btn-border-radius-lg: $btn-border-radius;
 $input-bg: #f7f7f7;
@@ -55,8 +47,5 @@ $badge-font-weight: 500;
 $badge-padding-y: 0.3rem;
 $badge-padding-x: 0.8rem;
 
-// Bootstrap Vars
+// List group
 $list-group-border-color: rgba(0, 0, 0, 0.125);
-
-$button-dark: #5b6176;
-$avatar-border-color: #676d81;

From a38fa818fc9d1e8b499362b4f9f9800f1c939fb0 Mon Sep 17 00:00:00 2001
From: Allard Oelen <oelen@l3s.de>
Date: Thu, 8 Apr 2021 17:16:09 +0200
Subject: [PATCH 02/10] Replace darkblueDarker

---
 src/components/Comparison/PropertyValue.js           |  4 ++--
 src/components/Comparison/styled.js                  |  2 +-
 .../ContributionEditor/TableHeaderColumn.js          |  2 +-
 src/components/Home/TrendingProblems.js              |  2 +-
 src/components/LastUpdatesBox/styled.js              |  2 +-
 src/components/Layout/Footer.js                      |  6 +++---
 src/components/Layout/Header/Header.js               |  2 +-
 src/components/PdfAnnotation/TableSelect.js          |  2 +-
 src/components/PdfAnnotation/Toolbar.js              | 12 ++++++------
 src/components/ResearchProblem/styled.js             |  2 +-
 src/components/Templates/TemplateEditorHeaderBar.js  |  2 +-
 src/components/Utils/AuthorsInput.js                 |  2 +-
 .../ViewPaper/PaperHeaderBar/PaperHeaderBar.js       |  2 +-
 .../ViewPaper/PaperHeaderBar/PaperMenuBar.js         |  2 +-
 src/components/ViewPaper/SimilarContributions.js     |  4 ++--
 src/pages/Classes/ClassDetails.js                    |  2 +-
 src/pages/Properties/Property.js                     |  2 +-
 src/pages/Resources/Resource.js                      |  2 +-
 src/pages/Templates/Template.js                      |  2 +-
 src/testUtils.js                                     |  4 ++--
 20 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/components/Comparison/PropertyValue.js b/src/components/Comparison/PropertyValue.js
index 28cbfb3a8..283f1a1b6 100644
--- a/src/components/Comparison/PropertyValue.js
+++ b/src/components/Comparison/PropertyValue.js
@@ -19,7 +19,7 @@ const FilterButton = styled(Button)`
         color: ${props => props.theme.ultraLightBlueDarker};
         &:hover,
         &.active {
-            color: ${props => props.theme.darkblueDarker};
+            color: ${props => props.theme.secondaryDarker};
         }
 
         & .cross {
@@ -39,7 +39,7 @@ const FilterButton = styled(Button)`
             content: ' ';
             height: 12px;
             width: 2px;
-            background-color: ${props => props.theme.darkblueDarker};
+            background-color: ${props => props.theme.secondaryDarker};
         }
         & .cross:before {
             transform: rotate(45deg);
diff --git a/src/components/Comparison/styled.js b/src/components/Comparison/styled.js
index 2c0e4d236..ee9a0cf33 100644
--- a/src/components/Comparison/styled.js
+++ b/src/components/Comparison/styled.js
@@ -236,7 +236,7 @@ export const Delete = styled.button`
         right: -5px;
         background: ${props => props.theme.themeColors.darkblue};
         &:hover {
-            background: ${props => props.theme.themeColors.darkblueDarker};
+            background: ${props => props.theme.secondaryDarker};
         }
     }
 `;
diff --git a/src/components/ContributionEditor/TableHeaderColumn.js b/src/components/ContributionEditor/TableHeaderColumn.js
index fcd2a386d..1d20d4c4e 100644
--- a/src/components/ContributionEditor/TableHeaderColumn.js
+++ b/src/components/ContributionEditor/TableHeaderColumn.js
@@ -44,7 +44,7 @@ const TableHeaderColumn = ({ contribution, paper }) => {
             <ItemHeaderInner className="position-relative contribution-editor">
                 <Tippy content="Edit paper's metadata">
                     <span>
-                        <Button color="link" className="text-darkblueDarker p-0 text-left" onClick={handleEditPaper}>
+                        <Button color="link" className="text-secondary-darker p-0 text-left" onClick={handleEditPaper}>
                             {paper.label || <em>No title</em>}
                         </Button>
                     </span>
diff --git a/src/components/Home/TrendingProblems.js b/src/components/Home/TrendingProblems.js
index 1dfdb6aed..47aef89e4 100644
--- a/src/components/Home/TrendingProblems.js
+++ b/src/components/Home/TrendingProblems.js
@@ -28,7 +28,7 @@ const List = styled.div`
         font-size: 145%;
         min-height: 40px;
         a {
-            color: ${props => props.theme.darkblueDarker}!important;
+            color: ${props => props.theme.secondaryDarker}!important;
         }
     }
     .item-1,
diff --git a/src/components/LastUpdatesBox/styled.js b/src/components/LastUpdatesBox/styled.js
index 703848745..f682c95df 100644
--- a/src/components/LastUpdatesBox/styled.js
+++ b/src/components/LastUpdatesBox/styled.js
@@ -6,7 +6,7 @@ export const StyledActivity = styled.div`
     position: relative;
     font-size: 15px;
     .time {
-        color: ${props => props.theme.darkblueDarker};
+        color: ${props => props.theme.secondaryDarker};
         margin-top: -0.2rem;
         margin-bottom: 0.2rem;
         font-size: 16px;
diff --git a/src/components/Layout/Footer.js b/src/components/Layout/Footer.js
index 623d08f88..f9943ae99 100644
--- a/src/components/Layout/Footer.js
+++ b/src/components/Layout/Footer.js
@@ -19,21 +19,21 @@ const FooterWrapper = styled.div`
 `;
 
 const FooterCol = styled(Col)`
-    color: ${props => props.theme.darkblueDarker};
+    color: ${props => props.theme.secondaryDarker};
     margin: 10px 0;
     font-size: 0.95rem;
 
     h5 {
         font-weight: 500;
         text-transform: uppercase;
-        color: ${props => props.theme.darkblueDarker};
+        color: ${props => props.theme.secondaryDarker};
         font-size: 1.1rem;
     }
     .description {
         font-size: 0.85rem;
     }
     a {
-        color: ${props => props.theme.darkblueDarker};
+        color: ${props => props.theme.secondaryDarker};
     }
 `;
 
diff --git a/src/components/Layout/Header/Header.js b/src/components/Layout/Header/Header.js
index 2df3c5879..029cf4488 100644
--- a/src/components/Layout/Header/Header.js
+++ b/src/components/Layout/Header/Header.js
@@ -115,7 +115,7 @@ const StyledAuthTooltip = styled(Tooltip)`
             background-color: ${props => props.theme.buttonDark};
 
             &:hover {
-                background-color: ${props => props.theme.darkblueDarker};
+                background-color: ${props => props.theme.secondaryDarker};
             }
         }
     }
diff --git a/src/components/PdfAnnotation/TableSelect.js b/src/components/PdfAnnotation/TableSelect.js
index 2ef814a36..0b6fbf5fd 100644
--- a/src/components/PdfAnnotation/TableSelect.js
+++ b/src/components/PdfAnnotation/TableSelect.js
@@ -67,7 +67,7 @@ const TableSelect = props => {
                             const { region } = tableRegions[key];
                             return (
                                 <SelectHelper style={{ top: region.y, left: region.x, width: region.w, height: region.h }} key={key}>
-                                    <RemoveTableButton color="darkblueDarker" size="sm" className="p-0" onMouseDown={e => deleteRegion(e, key)}>
+                                    <RemoveTableButton color="secondary-darker" size="sm" className="p-0" onMouseDown={e => deleteRegion(e, key)}>
                                         <Icon icon={faTimes} />
                                     </RemoveTableButton>
                                     <Button
diff --git a/src/components/PdfAnnotation/Toolbar.js b/src/components/PdfAnnotation/Toolbar.js
index c873fe0a2..bcfcfa8a5 100644
--- a/src/components/PdfAnnotation/Toolbar.js
+++ b/src/components/PdfAnnotation/Toolbar.js
@@ -65,13 +65,13 @@ const Toolbar = props => {
                 </span>
             </Tippy>
             {/*
-            <Button color="darkblueDarker" size="sm">
+            <Button color="secondary-darker" size="sm">
                 <Icon icon={faICursor} className="mr-2" />
                 Text select
             </Button>
             <Button
                 active={this.props.selectedTool === 'tableSelect'}
-                color="darkblueDarker"
+                color="secondary-darker"
                 size="sm"
                 className="ml-2"
                 onClick={() => this.selectTool('tableSelect')}
@@ -83,7 +83,7 @@ const Toolbar = props => {
             <div className="ml-auto">
                 <ButtonGroup className="mr-2">
                     <Button
-                        color="darkblueDarker"
+                        color="secondary-darker"
                         disabled={!pdf}
                         size="sm"
                         style={{ marginRight: 2 }}
@@ -92,7 +92,7 @@ const Toolbar = props => {
                         <Icon icon={faSearchMinus} />
                     </Button>
                     <Button
-                        color="darkblueDarker"
+                        color="secondary-darker"
                         disabled={!pdf}
                         size="sm"
                         style={{ marginRight: 2 }}
@@ -100,12 +100,12 @@ const Toolbar = props => {
                     >
                         <Icon icon={faSearchPlus} />
                     </Button>
-                    <Button color="darkblueDarker" disabled={!pdf} size="sm" onClick={() => props.changeZoom()}>
+                    <Button color="secondary-darker" disabled={!pdf} size="sm" onClick={() => props.changeZoom()}>
                         <Icon icon={faExpandArrowsAlt} />
                     </Button>
                 </ButtonGroup>
                 {pdf && (
-                    <Button className="mr-2" color="darkblueDarker" disabled={!pdf} size="sm" onClick={discardPdfFile}>
+                    <Button className="mr-2" color="secondary-darker" disabled={!pdf} size="sm" onClick={discardPdfFile}>
                         <Icon icon={faTimesCircle} className="mr-1" /> Discard PDF
                     </Button>
                 )}
diff --git a/src/components/ResearchProblem/styled.js b/src/components/ResearchProblem/styled.js
index f948af7d4..bc5bf2aeb 100644
--- a/src/components/ResearchProblem/styled.js
+++ b/src/components/ResearchProblem/styled.js
@@ -11,7 +11,7 @@ export const PageHeaderBarContainer = styled.div`
     border-bottom: 1px #d1d3d9 solid;
     box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.13);
     & .title {
-        color: ${props => props.theme.darkblueDarker};
+        color: ${props => props.theme.secondaryDarker};
         font-size: 1.1rem;
         flex-grow: 1;
     }
diff --git a/src/components/Templates/TemplateEditorHeaderBar.js b/src/components/Templates/TemplateEditorHeaderBar.js
index 0e7ec0c81..ec36cf5b2 100644
--- a/src/components/Templates/TemplateEditorHeaderBar.js
+++ b/src/components/Templates/TemplateEditorHeaderBar.js
@@ -18,7 +18,7 @@ const PaperHeaderBarContainer = styled.div`
     border-bottom: 1px #d1d3d9 solid;
     box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.13);
     & .title {
-        color: ${props => props.theme.darkblueDarker};
+        color: ${props => props.theme.secondaryDarker};
     }
 `;
 
diff --git a/src/components/Utils/AuthorsInput.js b/src/components/Utils/AuthorsInput.js
index ef7648422..436ac5077 100644
--- a/src/components/Utils/AuthorsInput.js
+++ b/src/components/Utils/AuthorsInput.js
@@ -25,7 +25,7 @@ const AddAuthor = styled(Button)`
     margin: 0 0 2px 0;
     &:hover {
         background-color: #e9ecef;
-        color: ${props => props.theme.darkblueDarker};
+        color: ${props => props.theme.secondaryDarker};
     }
 `;
 
diff --git a/src/components/ViewPaper/PaperHeaderBar/PaperHeaderBar.js b/src/components/ViewPaper/PaperHeaderBar/PaperHeaderBar.js
index 672b8de73..6ef4053c4 100644
--- a/src/components/ViewPaper/PaperHeaderBar/PaperHeaderBar.js
+++ b/src/components/ViewPaper/PaperHeaderBar/PaperHeaderBar.js
@@ -14,7 +14,7 @@ const PaperHeaderBarContainer = styled.div`
     border-bottom: 1px #d1d3d9 solid;
     box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.13);
     & .title {
-        color: ${props => props.theme.darkblueDarker};
+        color: ${props => props.theme.secondaryDarker};
     }
 `;
 
diff --git a/src/components/ViewPaper/PaperHeaderBar/PaperMenuBar.js b/src/components/ViewPaper/PaperHeaderBar/PaperMenuBar.js
index c12d5760f..891da9272 100644
--- a/src/components/ViewPaper/PaperHeaderBar/PaperMenuBar.js
+++ b/src/components/ViewPaper/PaperHeaderBar/PaperMenuBar.js
@@ -38,7 +38,7 @@ function PaperMenuBar(props) {
                     <Button
                         className="flex-shrink-0"
                         style={{ marginLeft: 1 }}
-                        color="darkblueDarker"
+                        color="secondary-darker"
                         size="sm"
                         onClick={() => props.toggle('editMode')}
                     >
diff --git a/src/components/ViewPaper/SimilarContributions.js b/src/components/ViewPaper/SimilarContributions.js
index 63e3d89e3..cae70b906 100644
--- a/src/components/ViewPaper/SimilarContributions.js
+++ b/src/components/ViewPaper/SimilarContributions.js
@@ -46,7 +46,7 @@ const Card = styled(Link)`
     }
 
     & .simContributionLabel {
-        color: ${props => props.theme.darkblueDarker};
+        color: ${props => props.theme.secondaryDarker};
         font-size: 84%;
     }
 `;
@@ -58,7 +58,7 @@ const Similarity = styled.span`
     display: block;
     float: left;
     text-align: center;
-    color: ${props => props.theme.darkblueDarker};
+    color: ${props => props.theme.secondaryDarker};
     font-weight: 700;
 
     margin-right: 10px;
diff --git a/src/pages/Classes/ClassDetails.js b/src/pages/Classes/ClassDetails.js
index 00bc81287..4c6aa74e2 100644
--- a/src/pages/Classes/ClassDetails.js
+++ b/src/pages/Classes/ClassDetails.js
@@ -155,7 +155,7 @@ function ClassDetails(props) {
                                     <Icon icon={faPen} /> Edit
                                 </RequireAuthentication>
                             ) : (
-                                <Button className="flex-shrink-0" color="darkblueDarker" size="sm" onClick={() => setEditMode(v => !v)}>
+                                <Button className="flex-shrink-0" color="secondary-darker" size="sm" onClick={() => setEditMode(v => !v)}>
                                     <Icon icon={faTimes} /> Stop editing
                                 </Button>
                             )}
diff --git a/src/pages/Properties/Property.js b/src/pages/Properties/Property.js
index 66be99b59..835c55e70 100644
--- a/src/pages/Properties/Property.js
+++ b/src/pages/Properties/Property.js
@@ -59,7 +59,7 @@ function Property(props) {
                                 <Icon icon={faPen} /> Edit
                             </RequireAuthentication>
                         ) : (
-                            <Button className="float-right flex-shrink-0" color="darkblueDarker" size="sm" onClick={() => setEditMode(v => !v)}>
+                            <Button className="float-right flex-shrink-0" color="secondary-darker" size="sm" onClick={() => setEditMode(v => !v)}>
                                 <Icon icon={faTimes} /> Stop editing
                             </Button>
                         )}
diff --git a/src/pages/Resources/Resource.js b/src/pages/Resources/Resource.js
index 525c0d188..805b35dae 100644
--- a/src/pages/Resources/Resource.js
+++ b/src/pages/Resources/Resource.js
@@ -238,7 +238,7 @@ function Resource(props) {
                                         <Icon icon={faPen} /> Edit
                                     </RequireAuthentication>
                                 ) : (
-                                    <Button className="flex-shrink-0" color="darkblueDarker" size="sm" onClick={() => setEditMode(v => !v)}>
+                                    <Button className="flex-shrink-0" color="secondary-darker" size="sm" onClick={() => setEditMode(v => !v)}>
                                         <Icon icon={faTimes} /> Stop editing
                                     </Button>
                                 )
diff --git a/src/pages/Templates/Template.js b/src/pages/Templates/Template.js
index 331446903..724379b08 100644
--- a/src/pages/Templates/Template.js
+++ b/src/pages/Templates/Template.js
@@ -145,7 +145,7 @@ class Template extends Component {
                             <Button
                                 disabled={this.props.isSaving}
                                 style={{ marginLeft: 1 }}
-                                color="darkblueDarker"
+                                color="secondary-darker"
                                 size="sm"
                                 onClick={() => this.props.saveTemplate(this.props.template)}
                             >
diff --git a/src/testUtils.js b/src/testUtils.js
index 05a5ce8d5..de98222b4 100644
--- a/src/testUtils.js
+++ b/src/testUtils.js
@@ -12,7 +12,7 @@ export const theme = {
     orkgBorderWidth: '1px',
     primary: 'rgb(232, 97, 97)',
     darkblue: 'rgb(128, 134, 155)',
-    darkblueDarker: 'rgb(80, 85, 101)',
+    secondaryDarker: 'rgb(80, 85, 101)',
     light: 'rgb(233, 236, 239)',
     ultraLightBlue: 'rgb(248, 249, 251)',
     ultraLightBlueDarker: 'rgb(219, 221, 229)',
@@ -23,7 +23,7 @@ export const theme = {
     themeColors: {
         lightblue: 'rgb(233, 235, 242)',
         darkblue: 'rgb(128, 134, 155)',
-        darkblueDarker: 'rgb(80, 85, 101)',
+        secondaryDarker: 'rgb(80, 85, 101)',
         primaryDarker: 'rgb(198, 29, 29)'
     },
     formFeedbackFontSize: '90%',

From 2c67a74e56daae5c27165708fd66f73f8582660d Mon Sep 17 00:00:00 2001
From: Allard Oelen <oelen@l3s.de>
Date: Thu, 8 Apr 2021 17:19:32 +0200
Subject: [PATCH 03/10] Replace darkblue

---
 src/assets/scss/DefaultLayout.scss            |  6 ++---
 src/assets/scss/ThemeVariables.scss           |  2 +-
 .../AddPaper/Contributions/Contributions.js   |  2 +-
 .../AddPaper/Contributions/styled.js          |  4 ++--
 .../ClassInstances/ClassInstances.js          |  2 +-
 .../Comparison/ComparisonMetaData.js          |  2 +-
 .../Comparison/Filters/AppliedRule.js         |  2 +-
 .../Comparison/Filters/FilterModalFooter.js   |  2 +-
 .../ProvenanceBox/ObservatoryBox.js           |  2 +-
 .../RelatedResources/RelatedResources.js      |  2 +-
 src/components/Comparison/styled.js           |  8 +++----
 src/components/ConfirmBulkImport/PaperList.js |  4 ++--
 .../ContributionEditor/CreateProperty.js      |  2 +-
 src/components/CreatePaperModal/DoiItem.js    |  2 +-
 src/components/EditableHeader.js              |  2 +-
 .../HeaderSearchButton/HeaderSearchButton.js  |  4 ++--
 src/components/Home/Benefits.js               |  2 +-
 src/components/Home/ObservatoriesCarousel.js  |  2 +-
 src/components/Home/TrendingProblems.js       |  4 ++--
 src/components/Layout/Header/Header.js        |  8 +++----
 .../ObjectStatements/ObjectStatements.js      |  2 +-
 .../ObservatoriesCarousel.js                  |  2 +-
 .../Observatory/RelatedResourcesCard.js       |  4 ++--
 .../PdfAnnotation/ExtractionModal.js          |  8 +++----
 src/components/PdfAnnotation/Toolbar.js       |  2 +-
 .../PdfTextAnnotation/AnnotationTooltipNew.js |  2 +-
 src/components/PdfTextAnnotation/ZoomBar.js   |  4 ++--
 .../PropertyStatements/PropertyStatements.js  |  2 +-
 src/components/RDFDataCube/RDFDataCube.js     |  2 +-
 .../RelativeBreadcrumbs.js                    |  2 +-
 src/components/ResearchField/Comparisons.js   |  2 +-
 src/components/ResearchField/Papers.js        |  2 +-
 .../ResearchField/ResearchFieldHeader.js      |  4 ++--
 .../ResearchFieldSelector.js                  |  6 ++---
 .../ResearchProblem/ResearchProblemHeader.js  |  4 ++--
 .../AddProperty/AddPropertyTemplate.js        |  2 +-
 .../AddTemplateButton/AddTemplateButton.js    |  2 +-
 src/components/StatementBrowser/styled.js     | 22 +++++++++----------
 src/components/StepContainer.js               |  6 ++---
 .../Templates/TemplateEditorHeaderBar.js      |  4 ++--
 src/components/UserAvatar/UserAvatar.js       |  2 +-
 .../ViewPaper/EditDialog/EditItem.js          |  2 +-
 src/components/ViewPaper/EditDialog/styled.js |  4 ++--
 .../GraphView/GizmoGraphViewModal.js          |  8 +++----
 .../ViewPaper/GraphView/SearchAutoComplete.js |  2 +-
 src/components/ViewPaper/PaperHeader.js       |  4 ++--
 .../ViewPaper/PaperHeaderBar/PaperMenuBar.js  | 14 ++++++++----
 .../ViewPaper/SimilarContributions.js         |  2 +-
 .../VisualizationCard/VisualizationCard.js    |  2 +-
 src/components/styled.js                      |  4 ++--
 .../AddVisualizationModal.js                  |  2 +-
 .../RenderingComponents/CellSelector.js       |  2 +-
 .../DropdownMapperSelector.js                 |  4 ++--
 .../RenderingComponents/styledComponents.js   |  4 ++--
 .../ChartRenderers/HelperFunctions.js         |  6 ++---
 .../VisRenderer/VisualizationSelector.js      |  4 ++--
 src/pages/AddPaper.js                         |  6 ++---
 src/pages/AuthorPage.js                       |  2 +-
 src/pages/Classes/ClassDetails.js             |  6 ++---
 src/pages/Classes/Classes.js                  |  4 ++--
 src/pages/Comparisons/Comparison.js           | 10 ++++-----
 src/pages/ContributionEditor.js               |  4 ++--
 src/pages/CsvImport.js                        |  4 ++--
 src/pages/FeaturedComparisons.js              |  2 +-
 src/pages/Observatories/Observatory.js        |  2 +-
 .../Organizations/OrganizationDetails.js      |  4 ++--
 src/pages/Organizations/Organizations.js      |  4 ++--
 src/pages/Papers.js                           |  2 +-
 src/pages/Properties/Properties.js            |  2 +-
 src/pages/Properties/Property.js              |  2 +-
 src/pages/ResearchFields/ResearchFields.js    |  2 +-
 src/pages/Resources/Resource.js               |  8 +++----
 src/pages/Resources/Resources.js              |  4 ++--
 src/pages/Templates/Template.js               |  6 ++---
 src/pages/Templates/Templates.js              |  4 ++--
 src/pages/VenuePage.js                        |  2 +-
 src/testUtils.js                              |  4 ++--
 77 files changed, 152 insertions(+), 146 deletions(-)

diff --git a/src/assets/scss/DefaultLayout.scss b/src/assets/scss/DefaultLayout.scss
index 21271e150..2ffab0b1b 100644
--- a/src/assets/scss/DefaultLayout.scss
+++ b/src/assets/scss/DefaultLayout.scss
@@ -15,7 +15,7 @@ body {
     border: 0;
 
     .nav-link {
-        color: $darkblue;
+        color: $secondary;
 
         &:hover {
             color: $primary;
@@ -56,7 +56,7 @@ body {
             }
         }
         .search-box .search-icon {
-            color: $darkblue;
+            color: $secondary;
         }
     }
 }
@@ -184,5 +184,5 @@ body {
 
 // Datepicker
 .react-datepicker__close-icon::after {
-    background-color: $darkblue !important;
+    background-color: $secondary !important;
 }
diff --git a/src/assets/scss/ThemeVariables.scss b/src/assets/scss/ThemeVariables.scss
index 4e1d2490b..e9ddc2214 100644
--- a/src/assets/scss/ThemeVariables.scss
+++ b/src/assets/scss/ThemeVariables.scss
@@ -2,7 +2,7 @@
 $primary: #e86161;
 $primary-darker: darken($primary, 20%);
 $secondary: #80869b;
-$secondary-darker: darken($darkblue, 20%);
+$secondary-darker: darken($secondary, 20%);
 $light: #e9ebf2;
 $light-lighter: #f8f9fb;
 $light-darker: #dbdde5;
diff --git a/src/components/AddPaper/Contributions/Contributions.js b/src/components/AddPaper/Contributions/Contributions.js
index 4312dd836..451c5f2fc 100644
--- a/src/components/AddPaper/Contributions/Contributions.js
+++ b/src/components/AddPaper/Contributions/Contributions.js
@@ -161,7 +161,7 @@ class Contributions extends Component {
                             Specify research contributions
                         </Tooltip>
                     </h2>
-                    <Button onClick={this.props.toggleAbstractDialog} outline size="sm" className="flex-shrink-0 ml-auto" color="darkblue">
+                    <Button onClick={this.props.toggleAbstractDialog} outline size="sm" className="flex-shrink-0 ml-auto" color="secondary">
                         <Icon icon={faMagic} /> Abstract annotator
                     </Button>
                 </div>
diff --git a/src/components/AddPaper/Contributions/styled.js b/src/components/AddPaper/Contributions/styled.js
index f4f868672..f6dcfc465 100644
--- a/src/components/AddPaper/Contributions/styled.js
+++ b/src/components/AddPaper/Contributions/styled.js
@@ -161,8 +161,8 @@ export const StyledStatementItem = styled(ListGroupItem)`
     }
 
     &.statementActive {
-        background-color: ${props => props.theme.darkblue} !important;
-        border-color: ${props => props.theme.darkblue} !important;
+        background-color: ${props => props.theme.secondary} !important;
+        border-color: ${props => props.theme.secondary} !important;
         color: #fff;
 
         & .deletePredicate {
diff --git a/src/components/ClassInstances/ClassInstances.js b/src/components/ClassInstances/ClassInstances.js
index 957d8758f..b282d7f40 100644
--- a/src/components/ClassInstances/ClassInstances.js
+++ b/src/components/ClassInstances/ClassInstances.js
@@ -80,7 +80,7 @@ const ClassInstances = props => {
 
     return (
         <div>
-            <Button color="darkblue" size="sm" className="mt-5" onClick={() => setShowClassInstances(!showClassInstances)}>
+            <Button color="secondary" size="sm" className="mt-5" onClick={() => setShowClassInstances(!showClassInstances)}>
                 {!showClassInstances ? 'Show' : 'Hide'} class instances
             </Button>
 
diff --git a/src/components/Comparison/ComparisonMetaData.js b/src/components/Comparison/ComparisonMetaData.js
index 7f34c1c37..a060a326a 100644
--- a/src/components/Comparison/ComparisonMetaData.js
+++ b/src/components/Comparison/ComparisonMetaData.js
@@ -54,7 +54,7 @@ function ComparisonMetaData(props) {
                                         </NavLink>
                                     ) : (
                                         <Badge color="lightblue" className="mr-2 mb-2" key={index}>
-                                            <Icon icon={faUser} className="text-darkblue" /> {author.label}
+                                            <Icon icon={faUser} className="text-secondary" /> {author.label}
                                         </Badge>
                                     )
                                 )}
diff --git a/src/components/Comparison/Filters/AppliedRule.js b/src/components/Comparison/Filters/AppliedRule.js
index bed472a3a..2c6e7d4a4 100644
--- a/src/components/Comparison/Filters/AppliedRule.js
+++ b/src/components/Comparison/Filters/AppliedRule.js
@@ -7,7 +7,7 @@ import styled from 'styled-components';
 
 const DeleteButton = styled(Button)`
     &&& {
-        color: ${props => props.theme.darkblue};
+        color: ${props => props.theme.secondary};
         padding: 0;
         line-height: 1;
         border: 0;
diff --git a/src/components/Comparison/Filters/FilterModalFooter.js b/src/components/Comparison/Filters/FilterModalFooter.js
index 7a84eb775..e0437a7c8 100644
--- a/src/components/Comparison/Filters/FilterModalFooter.js
+++ b/src/components/Comparison/Filters/FilterModalFooter.js
@@ -7,7 +7,7 @@ function FilterModalFooter({ handleApply, handleCancel, handleReset }) {
     return (
         <ModalFooter className="d-flex justify-content-between">
             <Button className="mx-1" color="light" onClick={handleReset}>
-                <Icon icon={faRedoAlt} className="text-darkblue" /> Reset
+                <Icon icon={faRedoAlt} className="text-secondary" /> Reset
             </Button>
             <div>
                 <Button className="mx-1" color="light" onClick={handleCancel}>
diff --git a/src/components/Comparison/ProvenanceBox/ObservatoryBox.js b/src/components/Comparison/ProvenanceBox/ObservatoryBox.js
index ca7b7fe3d..81100faf8 100644
--- a/src/components/Comparison/ProvenanceBox/ObservatoryBox.js
+++ b/src/components/Comparison/ProvenanceBox/ObservatoryBox.js
@@ -20,7 +20,7 @@ const ObservatoryBoxStyled = styled.div`
     transition: background-color 0.2s;
 
     &:hover {
-        border: 2px solid ${props => props.theme.darkblue};
+        border: 2px solid ${props => props.theme.secondary};
     }
 `;
 
diff --git a/src/components/Comparison/RelatedResources/RelatedResources.js b/src/components/Comparison/RelatedResources/RelatedResources.js
index bbe2925ed..56b81621c 100644
--- a/src/components/Comparison/RelatedResources/RelatedResources.js
+++ b/src/components/Comparison/RelatedResources/RelatedResources.js
@@ -63,7 +63,7 @@ class RelatedResources extends Component {
                                         {resource.description && <CardText>{resource.description}</CardText>}
                                         {isLink ? (
                                             <a href={resource.url} target="_blank" rel="noopener noreferrer">
-                                                <Button size="sm" color="darkblue">
+                                                <Button size="sm" color="secondary">
                                                     Visit resource
                                                 </Button>
                                             </a>
diff --git a/src/components/Comparison/styled.js b/src/components/Comparison/styled.js
index ee9a0cf33..096c5e557 100644
--- a/src/components/Comparison/styled.js
+++ b/src/components/Comparison/styled.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { Container, Button } from 'reactstrap';
 
 export const SubtitleSeparator = styled.div`
-    background: ${props => props.theme.darkblue};
+    background: ${props => props.theme.secondary};
     width: 2px;
     height: 30px;
     margin: 0 15px;
@@ -40,7 +40,7 @@ export const ComparisonTypeButton = styled(Button)`
 export const ScrollButton = styled(Button)`
     &&& {
         border-radius: 30px;
-        color: ${props => props.theme.darkblue};
+        color: ${props => props.theme.secondary};
         width: 30px;
         height: 30px;
         cursor: pointer;
@@ -209,7 +209,7 @@ export const Contribution = styled.div`
     color: #ffa5a5;
     font-size: 85%;
     &.contribution-editor {
-        color: ${props => props.theme.themeColors.darkblue};
+        color: ${props => props.theme.secondary};
     }
 `;
 
@@ -234,7 +234,7 @@ export const Delete = styled.button`
     &.contribution-editor {
         color: ${props => props.theme.themeColors.lightblue};
         right: -5px;
-        background: ${props => props.theme.themeColors.darkblue};
+        background: ${props => props.theme.secondary};
         &:hover {
             background: ${props => props.theme.secondaryDarker};
         }
diff --git a/src/components/ConfirmBulkImport/PaperList.js b/src/components/ConfirmBulkImport/PaperList.js
index 8d0de74cd..eb1b88550 100644
--- a/src/components/ConfirmBulkImport/PaperList.js
+++ b/src/components/ConfirmBulkImport/PaperList.js
@@ -49,11 +49,11 @@ const PaperList = props => {
         <>
             <div className="w-100 text-right">
                 {showContributions.length === 0 ? (
-                    <Button size="sm" color="darkblue" className="mb-2" onClick={handleExpandAll}>
+                    <Button size="sm" color="secondary" className="mb-2" onClick={handleExpandAll}>
                         <Icon icon={faArrowsAltV} /> Expand all data
                     </Button>
                 ) : (
-                    <Button size="sm" color="darkblue" className="mb-2" onClick={handleCollapseAll}>
+                    <Button size="sm" color="secondary" className="mb-2" onClick={handleCollapseAll}>
                         <Icon icon={faArrowsAltV} /> Collapse all data
                     </Button>
                 )}
diff --git a/src/components/ContributionEditor/CreateProperty.js b/src/components/ContributionEditor/CreateProperty.js
index fa87e3e07..0f406b516 100644
--- a/src/components/ContributionEditor/CreateProperty.js
+++ b/src/components/ContributionEditor/CreateProperty.js
@@ -33,7 +33,7 @@ export const CreateProperty = () => {
     };
 
     return !isCreating ? (
-        <Button color="darkblue" size="sm" onClick={() => setIsCreating(true)}>
+        <Button color="secondary" size="sm" onClick={() => setIsCreating(true)}>
             <Icon icon={faPlusCircle} /> Add property
         </Button>
     ) : (
diff --git a/src/components/CreatePaperModal/DoiItem.js b/src/components/CreatePaperModal/DoiItem.js
index c1eb32f0d..e51b87bde 100644
--- a/src/components/CreatePaperModal/DoiItem.js
+++ b/src/components/CreatePaperModal/DoiItem.js
@@ -90,7 +90,7 @@ const DoiItem = ({ toggleItem, isExpanded, value, onChange, onPopulateMetadata,
             <InputGroup>
                 <Input value={value} onChange={e => onChange(e.target.value)} disabled={isLoading} valid={isValid} invalid={isValid === false} />
                 <InputGroupAddon addonType="append">
-                    <Button color="darkblue" onClick={handleLookup} disabled={isLoading}>
+                    <Button color="secondary" onClick={handleLookup} disabled={isLoading}>
                         {!isLoading ? 'Lookup' : <Icon icon={faSpinner} spin />}
                     </Button>
                 </InputGroupAddon>
diff --git a/src/components/EditableHeader.js b/src/components/EditableHeader.js
index f2843054e..9b718b23d 100644
--- a/src/components/EditableHeader.js
+++ b/src/components/EditableHeader.js
@@ -56,7 +56,7 @@ class EditableHeader extends Component {
                                     <small>No label</small>
                                 </i>
                             )}
-                            <Button className="float-right" size="sm" color="darkblue" onClick={this.handleEditClick}>
+                            <Button className="float-right" size="sm" color="secondary" onClick={this.handleEditClick}>
                                 <Icon icon={faPen} /> Edit
                             </Button>
                         </h3>
diff --git a/src/components/HeaderSearchButton/HeaderSearchButton.js b/src/components/HeaderSearchButton/HeaderSearchButton.js
index 0868e75d0..d044df030 100644
--- a/src/components/HeaderSearchButton/HeaderSearchButton.js
+++ b/src/components/HeaderSearchButton/HeaderSearchButton.js
@@ -87,7 +87,7 @@ const HeaderSearchButton = ({ placeholder, type }) => {
     };
 
     return isSearchOpen ? (
-        <SearchStyled className="btn btn-darkblue btn-sm active" ref={refContainer}>
+        <SearchStyled className="btn btn-secondary btn-sm active" ref={refContainer}>
             <InputStyled
                 type="text"
                 placeholder={placeholder}
@@ -101,7 +101,7 @@ const HeaderSearchButton = ({ placeholder, type }) => {
             </SearchButtonStyled>
         </SearchStyled>
     ) : (
-        <Button size="sm" color="darkblue" style={{ marginLeft: 1 }} className="px-3" onClick={() => setIsSearchOpen(true)}>
+        <Button size="sm" color="secondary" style={{ marginLeft: 1 }} className="px-3" onClick={() => setIsSearchOpen(true)}>
             <Icon icon={faSearch} />
         </Button>
     );
diff --git a/src/components/Home/Benefits.js b/src/components/Home/Benefits.js
index 3a4711c56..2920b99b7 100644
--- a/src/components/Home/Benefits.js
+++ b/src/components/Home/Benefits.js
@@ -148,7 +148,7 @@ export default function Benefits() {
                 <div className="flex-shrink-0">
                     {!!!user && (
                         <Button
-                            color="darkblue"
+                            color="secondary"
                             size="sm"
                             onClick={() => {
                                 dispatch(openAuthDialog({ action: 'signup' }));
diff --git a/src/components/Home/ObservatoriesCarousel.js b/src/components/Home/ObservatoriesCarousel.js
index f11d683a3..77b4a69b4 100644
--- a/src/components/Home/ObservatoriesCarousel.js
+++ b/src/components/Home/ObservatoriesCarousel.js
@@ -49,7 +49,7 @@ const CarouselIndicatorsStyled = styled(CarouselIndicators)`
 `;
 
 const StyledGravatar = styled(Gravatar)`
-    border: 2px solid ${props => props.theme.darkblue};
+    border: 2px solid ${props => props.theme.secondary};
     cursor: pointer;
     &:hover {
         border: 2px solid ${props => props.theme.primaryColor};
diff --git a/src/components/Home/TrendingProblems.js b/src/components/Home/TrendingProblems.js
index 47aef89e4..fe0de9b0d 100644
--- a/src/components/Home/TrendingProblems.js
+++ b/src/components/Home/TrendingProblems.js
@@ -37,7 +37,7 @@ const List = styled.div`
         min-height: 40px;
 
         a {
-            color: ${props => props.theme.darkblue}!important;
+            color: ${props => props.theme.secondary}!important;
         }
     }
     .item-3,
@@ -46,7 +46,7 @@ const List = styled.div`
         min-height: 30px;
 
         a {
-            color: ${props => props.theme.darkblue}!important;
+            color: ${props => props.theme.secondary}!important;
             opacity: 0.8;
         }
     }
diff --git a/src/components/Layout/Header/Header.js b/src/components/Layout/Header/Header.js
index 029cf4488..007cdffd1 100644
--- a/src/components/Layout/Header/Header.js
+++ b/src/components/Layout/Header/Header.js
@@ -106,12 +106,12 @@ const StyledAuthTooltip = styled(Tooltip)`
     }
     & .tooltip-inner {
         font-size: 16px;
-        background-color: ${props => props.theme.darkblue};
+        background-color: ${props => props.theme.secondary};
         max-width: 410px;
         box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.13);
 
         .btn {
-            border-color: ${props => props.theme.darkblue};
+            border-color: ${props => props.theme.secondary};
             background-color: ${props => props.theme.buttonDark};
 
             &:hover {
@@ -121,7 +121,7 @@ const StyledAuthTooltip = styled(Tooltip)`
     }
 
     & .arrow:before {
-        border-bottom-color: ${props => props.theme.darkblue} !important;
+        border-bottom-color: ${props => props.theme.secondary} !important;
     }
 `;
 
@@ -478,7 +478,7 @@ class Header extends Component {
 
                             {!this.props.user && (
                                 <Button
-                                    color={!this.state.isHomePageStyle ? 'secondary' : 'darkblue'}
+                                    color="secondary"
                                     className="pl-4 pr-4 flex-shrink-0 sign-in"
                                     outline
                                     onClick={() => this.props.openAuthDialog({ action: 'signin' })}
diff --git a/src/components/ObjectStatements/ObjectStatements.js b/src/components/ObjectStatements/ObjectStatements.js
index dd130bde1..25e36c890 100644
--- a/src/components/ObjectStatements/ObjectStatements.js
+++ b/src/components/ObjectStatements/ObjectStatements.js
@@ -67,7 +67,7 @@ const ObjectStatements = props => {
 
     return (
         <div>
-            <Button color="darkblue" size="sm" className="mt-5" onClick={() => setShowObjectStatements(!showObjectStatements)}>
+            <Button color="secondary" size="sm" className="mt-5" onClick={() => setShowObjectStatements(!showObjectStatements)}>
                 {!showObjectStatements ? 'Show' : 'Hide'} object statements
             </Button>
 
diff --git a/src/components/ObservatoriesCarousel/ObservatoriesCarousel.js b/src/components/ObservatoriesCarousel/ObservatoriesCarousel.js
index b574919dc..0c7ab97d4 100644
--- a/src/components/ObservatoriesCarousel/ObservatoriesCarousel.js
+++ b/src/components/ObservatoriesCarousel/ObservatoriesCarousel.js
@@ -49,7 +49,7 @@ const CarouselIndicatorsStyled = styled(CarouselIndicators)`
 `;
 
 const StyledGravatar = styled(Gravatar)`
-    border: 2px solid ${props => props.theme.darkblue};
+    border: 2px solid ${props => props.theme.secondary};
     cursor: pointer;
     &:hover {
         border: 2px solid ${props => props.theme.primaryColor};
diff --git a/src/components/Observatory/RelatedResourcesCard.js b/src/components/Observatory/RelatedResourcesCard.js
index 3d8337b66..e2b4ae13d 100644
--- a/src/components/Observatory/RelatedResourcesCard.js
+++ b/src/components/Observatory/RelatedResourcesCard.js
@@ -102,12 +102,12 @@ class RelatedResourcesCard extends Component {
                         requestToChangeActive={this.onChange}
                         rightChevron={
                             <Button color="link" className="p-0">
-                                <Icon icon={faArrowCircleRight} className="text-darkblue h3 m-0" />
+                                <Icon icon={faArrowCircleRight} className="text-secondary h3 m-0" />
                             </Button>
                         }
                         leftChevron={
                             <Button color="link" className="p-0">
-                                <Icon icon={faArrowCircleLeft} className="text-darkblue h3 m-0" />
+                                <Icon icon={faArrowCircleLeft} className="text-secondary h3 m-0" />
                             </Button>
                         }
                         chevronWidth={CHEVRON_WIDTH}
diff --git a/src/components/PdfAnnotation/ExtractionModal.js b/src/components/PdfAnnotation/ExtractionModal.js
index 0a8dbf90d..5f73b223c 100644
--- a/src/components/PdfAnnotation/ExtractionModal.js
+++ b/src/components/PdfAnnotation/ExtractionModal.js
@@ -69,16 +69,16 @@ const ExtractionModal = props => {
                                 <>
                                     <TableEditor setRef={editorRef} id={props.id} />
                                     <div className="mt-3">
-                                        <Button size="sm" color="darkblue" onClick={toggleExtractReferencesModal}>
+                                        <Button size="sm" color="secondary" onClick={toggleExtractReferencesModal}>
                                             Extract references
                                         </Button>{' '}
-                                        <Button size="sm" color="darkblue" onClick={handleCsvDownload}>
+                                        <Button size="sm" color="secondary" onClick={handleCsvDownload}>
                                             Download CSV
                                         </Button>{' '}
-                                        <Button size="sm" color="darkblue" onClick={transposeTable}>
+                                        <Button size="sm" color="secondary" onClick={transposeTable}>
                                             Transpose
                                         </Button>{' '}
-                                        <Button size="sm" color="darkblue" onClick={removeEmptyRows}>
+                                        <Button size="sm" color="secondary" onClick={removeEmptyRows}>
                                             Remove empty rows
                                         </Button>
                                     </div>
diff --git a/src/components/PdfAnnotation/Toolbar.js b/src/components/PdfAnnotation/Toolbar.js
index bcfcfa8a5..266cca500 100644
--- a/src/components/PdfAnnotation/Toolbar.js
+++ b/src/components/PdfAnnotation/Toolbar.js
@@ -11,7 +11,7 @@ import Tippy from '@tippyjs/react';
 import HelpModal from 'components/PdfAnnotation/HelpModal';
 
 const ToolbarStyled = styled.div`
-    background: ${props => props.theme.darkblue};
+    background: ${props => props.theme.secondary};
     position: fixed;
     width: 100%;
     top: 72px;
diff --git a/src/components/PdfTextAnnotation/AnnotationTooltipNew.js b/src/components/PdfTextAnnotation/AnnotationTooltipNew.js
index 09b82b31f..81a9b2b01 100644
--- a/src/components/PdfTextAnnotation/AnnotationTooltipNew.js
+++ b/src/components/PdfTextAnnotation/AnnotationTooltipNew.js
@@ -131,7 +131,7 @@ const AnnotationTooltipNew = props => {
                                 className="rounded-pill mr-2 mb-1"
                                 style={{ paddingTop: 2, paddingBottom: 2 }}
                                 size="sm"
-                                color="darkblue"
+                                color="secondary"
                                 key={suggestion.iri}
                                 onClick={() => handleSuggestionClick(suggestion.iri, suggestion.label)}
                             >
diff --git a/src/components/PdfTextAnnotation/ZoomBar.js b/src/components/PdfTextAnnotation/ZoomBar.js
index 76bdc71b5..77894cf0f 100644
--- a/src/components/PdfTextAnnotation/ZoomBar.js
+++ b/src/components/PdfTextAnnotation/ZoomBar.js
@@ -26,10 +26,10 @@ const ZoomBar = () => {
     return (
         <Container>
             <ButtonGroup className="rounded-pill">
-                <Button color="darkblue" onClick={handleZoomIn} size="lg">
+                <Button color="secondary" onClick={handleZoomIn} size="lg">
                     <Icon icon={faSearchPlus} />
                 </Button>
-                <Button color="darkblue" onClick={handleZoomOut} size="lg">
+                <Button color="secondary" onClick={handleZoomOut} size="lg">
                     <Icon icon={faSearchMinus} />
                 </Button>
             </ButtonGroup>
diff --git a/src/components/PropertyStatements/PropertyStatements.js b/src/components/PropertyStatements/PropertyStatements.js
index e63acb469..245402337 100644
--- a/src/components/PropertyStatements/PropertyStatements.js
+++ b/src/components/PropertyStatements/PropertyStatements.js
@@ -24,7 +24,7 @@ const PropertyStatements = ({ propertyId }) => {
 
     return (
         <div>
-            <Button color="darkblue" size="sm" className="mt-5" onClick={() => setShowPropertyStatements(!showPropertyStatements)}>
+            <Button color="secondary" size="sm" className="mt-5" onClick={() => setShowPropertyStatements(!showPropertyStatements)}>
                 {!showPropertyStatements ? 'Show' : 'Hide'} property usage
             </Button>
 
diff --git a/src/components/RDFDataCube/RDFDataCube.js b/src/components/RDFDataCube/RDFDataCube.js
index 37e3da292..aca24baa8 100644
--- a/src/components/RDFDataCube/RDFDataCube.js
+++ b/src/components/RDFDataCube/RDFDataCube.js
@@ -345,7 +345,7 @@ const RDFDataCube = props => {
                         {!isDataCubeLoading && !isDataCubeFailedLoading && (
                             <>
                                 <Dropdown className="float-right mb-2" isOpen={dropdownOpen} toggle={toggleDropdown}>
-                                    <DropdownToggle color="darkblue" size="sm">
+                                    <DropdownToggle color="secondary" size="sm">
                                         <span className="mr-2">Options</span> <Icon icon={faEllipsisV} />
                                     </DropdownToggle>
                                     <DropdownMenu>
diff --git a/src/components/RelativeBreadcrumbs/RelativeBreadcrumbs.js b/src/components/RelativeBreadcrumbs/RelativeBreadcrumbs.js
index 9ca7bef9e..265bdb64b 100644
--- a/src/components/RelativeBreadcrumbs/RelativeBreadcrumbs.js
+++ b/src/components/RelativeBreadcrumbs/RelativeBreadcrumbs.js
@@ -29,7 +29,7 @@ const BreadcrumbStyled = styled.ul`
             }
         }
         & > a {
-            color: ${props => props.theme.darkblue};
+            color: ${props => props.theme.secondary};
             display: block;
             background: ${props => props.theme.ultraLightBlueDarker};
             text-decoration: none;
diff --git a/src/components/ResearchField/Comparisons.js b/src/components/ResearchField/Comparisons.js
index 063212bef..1fc121f87 100644
--- a/src/components/ResearchField/Comparisons.js
+++ b/src/components/ResearchField/Comparisons.js
@@ -87,7 +87,7 @@ const Comparisons = ({ id, boxShadow }) => {
                     }
                 >
                     <span>
-                        <Button color="darkblue" className="flex-shrink-0 pl-3 pr-3 ml-auto" size="sm">
+                        <Button color="secondary" className="flex-shrink-0 pl-3 pr-3 ml-auto" size="sm">
                             {stringifySort(sort)} <Icon icon={faChevronDown} />
                         </Button>
                     </span>
diff --git a/src/components/ResearchField/Papers.js b/src/components/ResearchField/Papers.js
index 48bf61b9b..cfe51ebbf 100644
--- a/src/components/ResearchField/Papers.js
+++ b/src/components/ResearchField/Papers.js
@@ -87,7 +87,7 @@ const Papers = ({ id, boxShadow, showBreadcrumbs }) => {
                     }
                 >
                     <span>
-                        <Button color="darkblue" className="flex-shrink-0 pl-3 pr-3 ml-auto" size="sm">
+                        <Button color="secondary" className="flex-shrink-0 pl-3 pr-3 ml-auto" size="sm">
                             {stringifySort(sort)} <Icon icon={faChevronDown} />
                         </Button>
                     </span>
diff --git a/src/components/ResearchField/ResearchFieldHeader.js b/src/components/ResearchField/ResearchFieldHeader.js
index 451143556..d41b5639e 100644
--- a/src/components/ResearchField/ResearchFieldHeader.js
+++ b/src/components/ResearchField/ResearchFieldHeader.js
@@ -106,14 +106,14 @@ const ResearchFieldHeader = ({ id }) => {
                             <RequireAuthentication
                                 component={Button}
                                 size="sm"
-                                color="darkblue"
+                                color="secondary"
                                 className="float-right"
                                 onClick={() => setEditMode(v => !v)}
                             >
                                 <Icon icon={faPen} /> Edit
                             </RequireAuthentication>
                             <ButtonDropdown isOpen={menuOpen} toggle={() => setMenuOpen(v => !v)} nav inNavbar>
-                                <DropdownToggle size="sm" color="darkblue" className="px-3 rounded-right" style={{ marginLeft: 2 }}>
+                                <DropdownToggle size="sm" color="secondary" className="px-3 rounded-right" style={{ marginLeft: 2 }}>
                                     <Icon icon={faEllipsisV} />
                                 </DropdownToggle>
                                 <DropdownMenu right>
diff --git a/src/components/ResearchFieldSelector/ResearchFieldSelector.js b/src/components/ResearchFieldSelector/ResearchFieldSelector.js
index fbdec5c72..c361bed4a 100644
--- a/src/components/ResearchFieldSelector/ResearchFieldSelector.js
+++ b/src/components/ResearchFieldSelector/ResearchFieldSelector.js
@@ -24,7 +24,7 @@ const FieldItem = styled(Button)`
         transition: none;
 
         &.active {
-            background: ${props => props.theme.darkblue};
+            background: ${props => props.theme.secondary};
             color: #fff;
         }
     }
@@ -48,7 +48,7 @@ const IndicatorContainer = styled.div`
 
 const CollapseButton = styled(Button)`
     && {
-        color: ${props => props.theme.darkblue};
+        color: ${props => props.theme.secondary};
     }
 `;
 
@@ -180,7 +180,7 @@ const ResearchFieldSelector = ({ selectedResearchField, researchFields, updateRe
                         <div className="flex-grow-1">
                             <IndicatorContainer onClick={e => handleFieldClick(e, field.id, false)}>
                                 {field.hasChildren && (
-                                    <Icon icon={icon} spin={isLoading} className={selectedResearchField !== field.id ? 'text-darkblue' : ''} />
+                                    <Icon icon={icon} spin={isLoading} className={selectedResearchField !== field.id ? 'text-secondary' : ''} />
                                 )}
                             </IndicatorContainer>
                             {find(parents, p => p.id === field.id) ? <b>{field.label}</b> : field.label}
diff --git a/src/components/ResearchProblem/ResearchProblemHeader.js b/src/components/ResearchProblem/ResearchProblemHeader.js
index b4cd449f7..70c21e02f 100644
--- a/src/components/ResearchProblem/ResearchProblemHeader.js
+++ b/src/components/ResearchProblem/ResearchProblemHeader.js
@@ -116,14 +116,14 @@ const ResearchProblemHeader = ({ id }) => {
                             <RequireAuthentication
                                 component={Button}
                                 size="sm"
-                                color="darkblue"
+                                color="secondary"
                                 className="float-right"
                                 onClick={() => setEditMode(v => !v)}
                             >
                                 <Icon icon={faPen} /> Edit
                             </RequireAuthentication>
                             <ButtonDropdown isOpen={menuOpen} toggle={() => setMenuOpen(v => !v)} nav inNavbar>
-                                <DropdownToggle size="sm" color="darkblue" className="px-3 rounded-right" style={{ marginLeft: 2 }}>
+                                <DropdownToggle size="sm" color="secondary" className="px-3 rounded-right" style={{ marginLeft: 2 }}>
                                     <Icon icon={faEllipsisV} />
                                 </DropdownToggle>
                                 <DropdownMenu right>
diff --git a/src/components/StatementBrowser/AddProperty/AddPropertyTemplate.js b/src/components/StatementBrowser/AddProperty/AddPropertyTemplate.js
index 9bb5d2b19..3d9a18a72 100644
--- a/src/components/StatementBrowser/AddProperty/AddPropertyTemplate.js
+++ b/src/components/StatementBrowser/AddProperty/AddPropertyTemplate.js
@@ -27,7 +27,7 @@ export default function AddPropertyTemplate(props) {
                     >
                         <Button
                             //className={this.props.inTemplate ? 'p-0' : ''}
-                            color={props.inTemplate ? 'light' : 'darkblue'}
+                            color={props.inTemplate ? 'light' : 'secondary'}
                             disabled={props.isDisabled}
                             onClick={() => (!props.inTemplate ? props.handleShowAddProperty() : undefined)}
                             style={props.inTemplate && props.isDisabled ? { opacity: '1', color: '#21252975' } : undefined}
diff --git a/src/components/StatementBrowser/AddTemplateButton/AddTemplateButton.js b/src/components/StatementBrowser/AddTemplateButton/AddTemplateButton.js
index 1da03334c..ab943fa5e 100644
--- a/src/components/StatementBrowser/AddTemplateButton/AddTemplateButton.js
+++ b/src/components/StatementBrowser/AddTemplateButton/AddTemplateButton.js
@@ -22,7 +22,7 @@ const IconWrapper = styled.span`
     display: flex;
     align-items: center;
     justify-content: center;
-    color: ${props => props.theme.darkblue};
+    color: ${props => props.theme.secondary};
     padding-left: 3px;
 `;
 
diff --git a/src/components/StatementBrowser/styled.js b/src/components/StatementBrowser/styled.js
index 18c1eb17c..cb671ed28 100644
--- a/src/components/StatementBrowser/styled.js
+++ b/src/components/StatementBrowser/styled.js
@@ -35,8 +35,8 @@ export const StyledStatementItem = styled(ListGroupItem)`
     }
 
     &.statementActive {
-        background-color: ${props => props.theme.darkblue} !important;
-        border-color: ${props => props.theme.darkblue} !important;
+        background-color: ${props => props.theme.secondary} !important;
+        border-color: ${props => props.theme.secondary} !important;
         color: #fff;
 
         & .deletePredicate {
@@ -87,8 +87,8 @@ export const StyledButton = styled(Button)`
     background: ${props => props.theme.ultraLightBlueDarker} !important;
     &:hover {
         color: #fff !important;
-        background-color: ${props => props.theme.darkblue} !important;
-        border-color: ${props => props.theme.darkblue} !important;
+        background-color: ${props => props.theme.secondary} !important;
+        border-color: ${props => props.theme.secondary} !important;
     }
 `;
 
@@ -104,8 +104,8 @@ export const StyledDropdownToggle = styled(DropdownToggle).withConfig({
     border-color: #ced4da !important;
     &:hover {
         color: #fff !important;
-        background-color: ${props => props.theme.darkblue} !important;
-        border-color: ${props => props.theme.darkblue} !important;
+        background-color: ${props => props.theme.secondary} !important;
+        border-color: ${props => props.theme.secondary} !important;
     }
 `;
 
@@ -183,7 +183,7 @@ export const AddPropertyContentStyle = styled.span`
     border-radius: 4px;
     max-width: 33.33%;
     font-size: 0.875rem;
-    color: ${props => props.theme.darkblue};
+    color: ${props => props.theme.secondary};
     transition: 0.3s max-width;
     cursor: pointer;
 
@@ -211,7 +211,7 @@ export const AddPropertyContentStyle = styled.span`
             padding: 0;
             border: 0 !important;
             .icon {
-                color: ${props => props.theme.darkblue};
+                color: ${props => props.theme.secondary};
             }
         }
     }
@@ -326,8 +326,8 @@ export const ValuesStyle = styled.div`
 
 export const TemplateHeaderStyle = styled.div`
     cursor: default;
-    background-color: ${props => props.theme.darkblue};
-    border-color: ${props => props.theme.darkblue};
+    background-color: ${props => props.theme.secondary};
+    border-color: ${props => props.theme.secondary};
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
     color: #fff;
@@ -373,7 +373,7 @@ export const TemplateHeaderStyle = styled.div`
         opacity: 0.9;
         .span {
             background-color: ${props => props.theme.buttonDark};
-            color: ${props => props.theme.darkblue};
+            color: ${props => props.theme.secondary};
         }
     }
 `;
diff --git a/src/components/StepContainer.js b/src/components/StepContainer.js
index ac7f4050e..90bf449f7 100644
--- a/src/components/StepContainer.js
+++ b/src/components/StepContainer.js
@@ -7,7 +7,7 @@ const StepStyled = styled.div`
     height: 29px;
     width: 29px;
     border-radius: 25px;
-    background: ${props => props.theme.darkblue};
+    background: ${props => props.theme.secondary};
     color: rgb(255, 255, 255);
     font-size: 20px;
     text-align: center;
@@ -25,7 +25,7 @@ const LineStyled = styled.div`
     height: 35px;
     width: 4px;
     display: inline-block;
-    background: ${props => props.theme.darkblue};
+    background: ${props => props.theme.secondary};
     position: absolute;
     left: 13px;
     top: 25px;
@@ -45,7 +45,7 @@ const TitleStyled = styled.h1`
     margin-left: 35px;
 
     &:not(.active) {
-        color: ${props => props.theme.darkblue};
+        color: ${props => props.theme.secondary};
     }
 `;
 
diff --git a/src/components/Templates/TemplateEditorHeaderBar.js b/src/components/Templates/TemplateEditorHeaderBar.js
index ec36cf5b2..7ae44449a 100644
--- a/src/components/Templates/TemplateEditorHeaderBar.js
+++ b/src/components/Templates/TemplateEditorHeaderBar.js
@@ -49,7 +49,7 @@ function TemplateEditorHeaderBar(props) {
                                 className="float-left"
                                 disabled={props.isSaving}
                                 style={{ marginLeft: 1 }}
-                                color="darkblue"
+                                color="secondary"
                                 onClick={() => props.saveTemplate(props.template)}
                             >
                                 {props.isSaving && <Icon icon={faSpinner} spin />}
@@ -58,7 +58,7 @@ function TemplateEditorHeaderBar(props) {
                             </Button>
                         </ButtonGroup>
                     ) : (
-                        <Button className="float-right" color="darkblue" size="sm" onClick={() => props.setEditMode(true)}>
+                        <Button className="float-right" color="secondary" size="sm" onClick={() => props.setEditMode(true)}>
                             <Icon icon={faPen} /> Edit
                         </Button>
                     )}
diff --git a/src/components/UserAvatar/UserAvatar.js b/src/components/UserAvatar/UserAvatar.js
index 97ca4956c..6fbfee768 100644
--- a/src/components/UserAvatar/UserAvatar.js
+++ b/src/components/UserAvatar/UserAvatar.js
@@ -24,7 +24,7 @@ const StyledSpinnerGravatar = styled.div`
     display: inline-block;
     text-align: center;
     line-height: 28px;
-    color: ${props => props.theme.darkblue};
+    color: ${props => props.theme.secondary};
     border: 2px solid ${props => props.theme.ultraLightBlueDarker};
     cursor: pointer;
     vertical-align: sub;
diff --git a/src/components/ViewPaper/EditDialog/EditItem.js b/src/components/ViewPaper/EditDialog/EditItem.js
index d337fbcf2..eb4521bf8 100644
--- a/src/components/ViewPaper/EditDialog/EditItem.js
+++ b/src/components/ViewPaper/EditDialog/EditItem.js
@@ -107,7 +107,7 @@ const EditItem = props => {
                     inputValue={inputValue}
                 />
                 <InputGroupAddon addonType="append">
-                    <Button color="darkblue" onClick={() => setIsOpenResearchFieldModal(true)}>
+                    <Button color="secondary" onClick={() => setIsOpenResearchFieldModal(true)}>
                         Choose
                     </Button>
                 </InputGroupAddon>
diff --git a/src/components/ViewPaper/EditDialog/styled.js b/src/components/ViewPaper/EditDialog/styled.js
index da04a8cad..9702863d6 100644
--- a/src/components/ViewPaper/EditDialog/styled.js
+++ b/src/components/ViewPaper/EditDialog/styled.js
@@ -51,8 +51,8 @@ export const StyledStatementItem = styled(ListGroupItem)`
     }
 
     &.statementActive {
-        background-color: ${props => props.theme.darkblue} !important;
-        border-color: ${props => props.theme.darkblue} !important;
+        background-color: ${props => props.theme.secondary} !important;
+        border-color: ${props => props.theme.secondary} !important;
         color: #fff;
 
         & .deletePredicate {
diff --git a/src/components/ViewPaper/GraphView/GizmoGraphViewModal.js b/src/components/ViewPaper/GraphView/GizmoGraphViewModal.js
index 34fe001e3..b46b25c1b 100644
--- a/src/components/ViewPaper/GraphView/GizmoGraphViewModal.js
+++ b/src/components/ViewPaper/GraphView/GizmoGraphViewModal.js
@@ -488,7 +488,7 @@ class GraphView extends Component {
                             )}
                             <div style={{ flexDirection: 'row', display: 'flex', flexGrow: '1' }}>
                                 <Button
-                                    color="darkblue"
+                                    color="secondary"
                                     size="sm"
                                     //    className='mb-4 mt-4'
                                     style={{ margin: '0 10px', flexGrow: '1', display: 'flex', alignSelf: 'center', width: '155px' }}
@@ -507,7 +507,7 @@ class GraphView extends Component {
                                     )}
                                 </Button>
                                 <Button
-                                    color="darkblue"
+                                    color="secondary"
                                     size="sm"
                                     //    className='mb-4 mt-4'
                                     style={{ margin: '0 10px', flexGrow: '1', display: 'flex', alignSelf: 'center', width: '130px' }}
@@ -516,7 +516,7 @@ class GraphView extends Component {
                                     <Icon icon={faHome} className="mr-1 align-self-center" /> Center graph
                                 </Button>
                                 <Dropdown
-                                    color="darkblue"
+                                    color="secondary"
                                     size="sm"
                                     //    className='mb-4 mt-4'
                                     style={{ marginLeft: '10px', flexGrow: '1', display: 'flex', height: 'min-content', paddingTop: '5px' }}
@@ -525,7 +525,7 @@ class GraphView extends Component {
                                         this.setState({ layoutSelectionOpen: !this.state.layoutSelectionOpen });
                                     }}
                                 >
-                                    <DropdownToggle caret color="darkblue">
+                                    <DropdownToggle caret color="secondary">
                                         Layout:
                                         <Icon
                                             icon={this.state.layout === 'force' ? faProjectDiagram : faSitemap}
diff --git a/src/components/ViewPaper/GraphView/SearchAutoComplete.js b/src/components/ViewPaper/GraphView/SearchAutoComplete.js
index cfc399bdd..8902b3a2e 100644
--- a/src/components/ViewPaper/GraphView/SearchAutoComplete.js
+++ b/src/components/ViewPaper/GraphView/SearchAutoComplete.js
@@ -424,7 +424,7 @@ class SearchAutoComplete extends Component {
                     onKeyDown={this.handleKeyDown}
                 />
                 <Dropdown
-                    color="darkblue"
+                    color="secondary"
                     size="sm"
                     style={{ marginLeft: '-40px', flexGrow: '1', display: 'flex', height: 'min-content', paddingTop: '5px' }}
                     isOpen={this.state.dropdownMenuOpen}
diff --git a/src/components/ViewPaper/PaperHeader.js b/src/components/ViewPaper/PaperHeader.js
index 253ed99c6..787de8769 100644
--- a/src/components/ViewPaper/PaperHeader.js
+++ b/src/components/ViewPaper/PaperHeader.js
@@ -81,7 +81,7 @@ const PaperHeader = props => {
                     </Link>
                 ) : (
                     <Badge color="lightblue" className="mr-2 mb-2" key={index}>
-                        <Icon icon={faUser} className="text-darkblue" /> {author.label}
+                        <Icon icon={faUser} className="text-secondary" /> {author.label}
                     </Badge>
                 )
             )}
@@ -114,7 +114,7 @@ const PaperHeader = props => {
             <div className="d-flex">
                 <div className="flex-grow-1">
                     {props.editMode && (
-                        <Button color="darkblue" size="sm" className="mt-2" style={{ marginLeft: 'auto' }} onClick={() => setIsOpenEditModal(true)}>
+                        <Button color="secondary" size="sm" className="mt-2" style={{ marginLeft: 'auto' }} onClick={() => setIsOpenEditModal(true)}>
                             <Icon icon={faPen} /> Edit data
                         </Button>
                     )}{' '}
diff --git a/src/components/ViewPaper/PaperHeaderBar/PaperMenuBar.js b/src/components/ViewPaper/PaperHeaderBar/PaperMenuBar.js
index 891da9272..a369a5747 100644
--- a/src/components/ViewPaper/PaperHeaderBar/PaperMenuBar.js
+++ b/src/components/ViewPaper/PaperHeaderBar/PaperMenuBar.js
@@ -15,11 +15,17 @@ function PaperMenuBar(props) {
         <>
             <ButtonGroup className="flex-shrink-0">
                 {props.paperLink && (
-                    <a href={props.paperLink} className="btn btn-darkblue flex-shrink-0 btn-sm" target="_blank" rel="noopener noreferrer">
+                    <a href={props.paperLink} className="btn btn-secondary flex-shrink-0 btn-sm" target="_blank" rel="noopener noreferrer">
                         <Icon icon={faFile} style={{ margin: '2px 4px 0 0' }} /> View paper
                     </a>
                 )}
-                <Button className="flex-shrink-0" color="darkblue" size="sm" style={{ marginLeft: 1 }} onClick={() => props.toggle('showGraphModal')}>
+                <Button
+                    className="flex-shrink-0"
+                    color="secondary"
+                    size="sm"
+                    style={{ marginLeft: 1 }}
+                    onClick={() => props.toggle('showGraphModal')}
+                >
                     <Icon icon={faProjectDiagram} style={{ margin: '2px 4px 0 0' }} /> Graph view
                 </Button>
 
@@ -28,7 +34,7 @@ function PaperMenuBar(props) {
                         component={Button}
                         className="flex-shrink-0"
                         style={{ marginLeft: 1 }}
-                        color="darkblue"
+                        color="secondary"
                         size="sm"
                         onClick={() => props.toggle('editMode')}
                     >
@@ -46,7 +52,7 @@ function PaperMenuBar(props) {
                     </Button>
                 )}
                 <ButtonDropdown isOpen={menuOpen} toggle={() => setMenuOpen(v => !v)} nav inNavbar>
-                    <DropdownToggle size="sm" color="darkblue" className="px-3 rounded-right" style={{ marginLeft: 2 }}>
+                    <DropdownToggle size="sm" color="secondary" className="px-3 rounded-right" style={{ marginLeft: 2 }}>
                         <Icon icon={faEllipsisV} />
                     </DropdownToggle>
                     <DropdownMenu right>
diff --git a/src/components/ViewPaper/SimilarContributions.js b/src/components/ViewPaper/SimilarContributions.js
index cae70b906..dc32435cb 100644
--- a/src/components/ViewPaper/SimilarContributions.js
+++ b/src/components/ViewPaper/SimilarContributions.js
@@ -19,7 +19,7 @@ const Card = styled(Link)`
     margin: 0 0;
     flex: 1;
     border-radius: 11px;
-    background: ${props => props.theme.darkblue};
+    background: ${props => props.theme.secondary};
     cursor: pointer;
     font-size: 95%;
     padding: 10px 5px;
diff --git a/src/components/VisualizationCard/VisualizationCard.js b/src/components/VisualizationCard/VisualizationCard.js
index 897e80579..fc64265c9 100644
--- a/src/components/VisualizationCard/VisualizationCard.js
+++ b/src/components/VisualizationCard/VisualizationCard.js
@@ -25,7 +25,7 @@ const PreviewContainer = styled.div`
     height: 100px;
     display: flex;
     align-items: center;
-    border: 1px ${props => props.theme.darkblue} solid;
+    border: 1px ${props => props.theme.secondary} solid;
     border-radius: 5px;
     overflow: hidden;
     transition: box-shadow 0.5s;
diff --git a/src/components/styled.js b/src/components/styled.js
index 27f1e152b..06fe07529 100644
--- a/src/components/styled.js
+++ b/src/components/styled.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import Gravatar from 'react-gravatar';
 
 export const SubtitleSeparator = styled.div`
-    background: ${props => props.theme.darkblue};
+    background: ${props => props.theme.secondary};
     width: 2px;
     height: 24px;
     margin: 0 15px;
@@ -32,7 +32,7 @@ export const StyledDotGravatar = styled.div`
     display: inline-block;
     text-align: center;
     line-height: 48px;
-    color: ${props => props.theme.darkblue};
+    color: ${props => props.theme.secondary};
     border: 2px solid ${props => props.theme.ultraLightBlueDarker};
     cursor: pointer;
     vertical-align: sub;
diff --git a/src/libs/selfVisModel/ComparisonComponents/AddVisualizationModal.js b/src/libs/selfVisModel/ComparisonComponents/AddVisualizationModal.js
index cee509812..88b9b32e7 100644
--- a/src/libs/selfVisModel/ComparisonComponents/AddVisualizationModal.js
+++ b/src/libs/selfVisModel/ComparisonComponents/AddVisualizationModal.js
@@ -132,7 +132,7 @@ function AddVisualizationModal(props) {
                     Create comparison visualization
                     <Button
                         outline
-                        color="darkblue"
+                        color="secondary"
                         size="sm"
                         className="ml-3"
                         onClick={() => {
diff --git a/src/libs/selfVisModel/RenderingComponents/CellSelector.js b/src/libs/selfVisModel/RenderingComponents/CellSelector.js
index 6d3a1a0ae..694b7d4d1 100644
--- a/src/libs/selfVisModel/RenderingComponents/CellSelector.js
+++ b/src/libs/selfVisModel/RenderingComponents/CellSelector.js
@@ -50,7 +50,7 @@ const CellSelector = props => {
                                     <Button
                                         className="p-0 m-0"
                                         size="sm"
-                                        color="darkblue"
+                                        color="secondary"
                                         style={{
                                             borderBottomLeftRadius: '0',
                                             borderBottomRightRadius: '0'
diff --git a/src/libs/selfVisModel/RenderingComponents/DropdownMapperSelector.js b/src/libs/selfVisModel/RenderingComponents/DropdownMapperSelector.js
index 718acbbaa..b78b25efc 100644
--- a/src/libs/selfVisModel/RenderingComponents/DropdownMapperSelector.js
+++ b/src/libs/selfVisModel/RenderingComponents/DropdownMapperSelector.js
@@ -57,7 +57,7 @@ export default class DropDownMapperSelector extends Component {
 
         return (
             <ButtonDropdown
-                color="darkblue"
+                color="secondary"
                 size="sm"
                 className="pl-0 m-0 flex-grow-1"
                 isOpen={this.state.isOpen}
@@ -67,7 +67,7 @@ export default class DropDownMapperSelector extends Component {
                     });
                 }}
             >
-                <StyledDropdownToggle caret color="darkblue" className="pl-1" style={{ borderBottomRightRadius: '0', borderBottomLeftRadius: '0' }}>
+                <StyledDropdownToggle caret color="secondary" className="pl-1" style={{ borderBottomRightRadius: '0', borderBottomLeftRadius: '0' }}>
                     {this.state.selectedMapper}
                 </StyledDropdownToggle>
                 <DropdownMenu>{items}</DropdownMenu>
diff --git a/src/libs/selfVisModel/RenderingComponents/styledComponents.js b/src/libs/selfVisModel/RenderingComponents/styledComponents.js
index 8c4453a98..407fc8dc1 100644
--- a/src/libs/selfVisModel/RenderingComponents/styledComponents.js
+++ b/src/libs/selfVisModel/RenderingComponents/styledComponents.js
@@ -32,7 +32,7 @@ export const PropertyCell = styled.div`
     text-overflow: ellipsis;
     display: ruby;
     color: white;
-    background: ${props => props.theme.darkblue};
+    background: ${props => props.theme.secondary};
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     width: 150px;
@@ -47,7 +47,7 @@ export const PropertyCellEditor = styled(TableCell)`
     text-overflow: ellipsis;
     display: ruby;
     color: white;
-    background: ${props => props.theme.darkblue};
+    background: ${props => props.theme.secondary};
     width: 150px;
     min-width: 150px;
     padding: 0 2px;
diff --git a/src/libs/selfVisModel/VisRenderer/ChartRenderers/HelperFunctions.js b/src/libs/selfVisModel/VisRenderer/ChartRenderers/HelperFunctions.js
index 444985a2c..7b674d384 100644
--- a/src/libs/selfVisModel/VisRenderer/ChartRenderers/HelperFunctions.js
+++ b/src/libs/selfVisModel/VisRenderer/ChartRenderers/HelperFunctions.js
@@ -125,7 +125,7 @@ const createIntervalDropDownSelectors = (ref, id, interval_id, possibleValueCand
                 });
             }}
         >
-            <TippyDropdownToggle caret color="darkblue" className="text-truncate mw-100">
+            <TippyDropdownToggle caret color="secondary" className="text-truncate mw-100">
                 <Tippy
                     content={ref.state.yAxisInterValSelectors[id][interval_id].label}
                     placement="right"
@@ -252,7 +252,7 @@ export const createValueSelectors = ref => {
                                 });
                             }}
                         >
-                            <TippyDropdownToggle caret color="darkblue" className="text-truncate mw-100 ">
+                            <TippyDropdownToggle caret color="secondary" className="text-truncate mw-100 ">
                                 <Tippy
                                     content={ref.state.yAxisSelector[id] ? ref.state.yAxisSelector[id] : possibleValueCandidates[0].label}
                                     placement="right"
@@ -430,7 +430,7 @@ export const createLabelSelectors = ref => {
                     });
                 }}
             >
-                <TippyDropdownToggle caret color="darkblue" className="text-truncate mw-100">
+                <TippyDropdownToggle caret color="secondary" className="text-truncate mw-100">
                     <Tippy
                         content={ref.state.xAxisSelector ? ref.state.xAxisSelector : possibleLabelCandidates[0].label}
                         placement="right"
diff --git a/src/libs/selfVisModel/VisRenderer/VisualizationSelector.js b/src/libs/selfVisModel/VisRenderer/VisualizationSelector.js
index 848aa1f64..489f91baa 100644
--- a/src/libs/selfVisModel/VisRenderer/VisualizationSelector.js
+++ b/src/libs/selfVisModel/VisRenderer/VisualizationSelector.js
@@ -52,7 +52,7 @@ export default class VisualizationSelector extends Component {
 
         return (
             <Dropdown
-                color="darkblue"
+                color="secondary"
                 size="sm"
                 isOpen={this.state.visSelectionOpen}
                 className="mt-1"
@@ -62,7 +62,7 @@ export default class VisualizationSelector extends Component {
                     });
                 }}
             >
-                <DropdownToggle caret color="darkblue">
+                <DropdownToggle caret color="secondary">
                     {this.state.visualizationMethod}
                 </DropdownToggle>
                 <DropdownMenu>{items}</DropdownMenu>
diff --git a/src/pages/AddPaper.js b/src/pages/AddPaper.js
index bb44724ff..e81ded1df 100644
--- a/src/pages/AddPaper.js
+++ b/src/pages/AddPaper.js
@@ -82,7 +82,7 @@ const AnimationContainer = styled(CSSTransition)`
 `;
 
 const SubtitleSeparator = styled.div`
-    background: ${props => props.theme.darkblue};
+    background: ${props => props.theme.secondary};
     width: 2px;
     height: 30px;
     margin: 0 15px;
@@ -206,7 +206,7 @@ class AddPaper extends Component {
                     )}
 
                     {/*<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggleDropdown} className="mb-4 mt-4 float-right" style={{ marginLeft: 'auto' }}>
-                        <DropdownToggle color="darkblue" size="sm">
+                        <DropdownToggle color="secondary" size="sm">
                             <Icon icon={faBars} className="mr-2" /> Options
                         </DropdownToggle>
                         <DropdownMenu>
@@ -215,7 +215,7 @@ class AddPaper extends Component {
                     </Dropdown>*/}
 
                     <Button
-                        color="darkblue"
+                        color="secondary"
                         size="sm"
                         className="flex-shrink-0"
                         style={{ marginLeft: 'auto' }}
diff --git a/src/pages/AuthorPage.js b/src/pages/AuthorPage.js
index b27ef3e3d..c91e203a0 100644
--- a/src/pages/AuthorPage.js
+++ b/src/pages/AuthorPage.js
@@ -149,7 +149,7 @@ class AuthorPage extends Component {
                                 nav
                                 inNavbar
                             >
-                                <DropdownToggle size="sm" color="darkblue" className="px-3 rounded-right" style={{ marginLeft: 2 }}>
+                                <DropdownToggle size="sm" color="secondary" className="px-3 rounded-right" style={{ marginLeft: 2 }}>
                                     <Icon icon={faEllipsisV} />
                                 </DropdownToggle>
                                 <DropdownMenu right>
diff --git a/src/pages/Classes/ClassDetails.js b/src/pages/Classes/ClassDetails.js
index 4c6aa74e2..8412c6ec9 100644
--- a/src/pages/Classes/ClassDetails.js
+++ b/src/pages/Classes/ClassDetails.js
@@ -85,14 +85,14 @@ function ClassDetails(props) {
                                         <RequireAuthentication
                                             component={Link}
                                             to={`${ROUTES.ADD_RESOURCE}?classes=${props.match.params.id}`}
-                                            className="float-right btn btn-darkblue flex-shrink-0 btn-sm"
+                                            className="float-right btn btn-secondary flex-shrink-0 btn-sm"
                                         >
                                             <Icon icon={faPlus} /> Add resource
                                         </RequireAuthentication>
                                         <RequireAuthentication
                                             component={Button}
                                             size="sm"
-                                            color="darkblue"
+                                            color="secondary"
                                             onClick={() => setModalImportIsOpen(true)}
                                         >
                                             <Icon icon={faFileCsv} /> Import Instances
@@ -148,7 +148,7 @@ function ClassDetails(props) {
                                 <RequireAuthentication
                                     component={Button}
                                     className="flex-shrink-0"
-                                    color="darkblue"
+                                    color="secondary"
                                     size="sm"
                                     onClick={() => setEditMode(v => !v)}
                                 >
diff --git a/src/pages/Classes/Classes.js b/src/pages/Classes/Classes.js
index 758879538..cb5b05d03 100644
--- a/src/pages/Classes/Classes.js
+++ b/src/pages/Classes/Classes.js
@@ -60,9 +60,9 @@ const Classes = () => {
                 <ButtonGroup>
                     <RequireAuthentication
                         component={Link}
-                        color="darkblue"
+                        color="secondary"
                         size="sm"
-                        className="btn btn-darkblue btn-sm flex-shrink-0"
+                        className="btn btn-secondary btn-sm flex-shrink-0"
                         to={ROUTES.ADD_CLASS}
                     >
                         <Icon icon={faPlus} /> Create class
diff --git a/src/pages/Comparisons/Comparison.js b/src/pages/Comparisons/Comparison.js
index 0c74256e9..d0923572d 100644
--- a/src/pages/Comparisons/Comparison.js
+++ b/src/pages/Comparisons/Comparison.js
@@ -199,7 +199,7 @@ function Comparison(props) {
                     {!isFailedLoadingMetaData && contributionsList.length > 1 && (
                         <Tippy content="The amount of compared contributions">
                             <span>
-                                <Badge color="darkblue" pill style={{ fontSize: '65%' }}>
+                                <Badge color="secondary" pill style={{ fontSize: '65%' }}>
                                     {contributionsList.length}
                                 </Badge>
                             </span>
@@ -211,7 +211,7 @@ function Comparison(props) {
                     <div style={{ marginLeft: 'auto' }} className="flex-shrink-0 mt-4">
                         <ButtonGroup className="float-right mb-4 ml-1">
                             <Dropdown group isOpen={dropdownDensityOpen} toggle={() => setDropdownDensityOpen(v => !v)} style={{ marginRight: 3 }}>
-                                <DropdownToggle color="darkblue" size="sm">
+                                <DropdownToggle color="secondary" size="sm">
                                     <Icon icon={faWindowMaximize} className="mr-1" /> View
                                 </DropdownToggle>
                                 <DropdownMenu>
@@ -234,7 +234,7 @@ function Comparison(props) {
                             </Dropdown>
                             {!!metaData.id ? (
                                 <Button
-                                    color="darkblue"
+                                    color="secondary"
                                     size="sm"
                                     onClick={() => {
                                         setUseReconstructedData(false);
@@ -249,13 +249,13 @@ function Comparison(props) {
                                     hideOnClick={false}
                                     content="Cannot use self-visualization-service for unpublished comparison. You must publish the comparison first to use this functionality."
                                 >
-                                    <span style={{ marginRight: 3 }} className="btn btn-darkblue btn-sm disabled">
+                                    <span style={{ marginRight: 3 }} className="btn btn-secondary btn-sm disabled">
                                         <Icon icon={faChartBar} className="mr-1" /> Visualize
                                     </span>
                                 </Tippy>
                             )}
                             <Dropdown group isOpen={dropdownOpen} toggle={() => setDropdownOpen(v => !v)}>
-                                <DropdownToggle color="darkblue" size="sm" className="rounded-right">
+                                <DropdownToggle color="secondary" size="sm" className="rounded-right">
                                     <span className="mr-2">More</span> <Icon icon={faEllipsisV} />
                                 </DropdownToggle>
                                 <DropdownMenu right>
diff --git a/src/pages/ContributionEditor.js b/src/pages/ContributionEditor.js
index d39623c8e..530be01d3 100644
--- a/src/pages/ContributionEditor.js
+++ b/src/pages/ContributionEditor.js
@@ -89,7 +89,7 @@ const ContributionEditor = () => {
                     <Button
                         tag={Link}
                         to={`${reverse(routes.COMPARISON)}?contributions=${contributionIds.join(',')}`}
-                        color="darkblue"
+                        color="secondary"
                         size="sm"
                         style={{ marginRight: 2 }}
                         disabled={contributionAmount < 2}
@@ -97,7 +97,7 @@ const ContributionEditor = () => {
                         View comparison
                     </Button>
 
-                    <Button color="darkblue" size="sm" onClick={() => setIsOpenAddContribution(true)}>
+                    <Button color="secondary" size="sm" onClick={() => setIsOpenAddContribution(true)}>
                         <Icon icon={faPlusCircle} /> Add contribution
                     </Button>
                 </ButtonGroup>
diff --git a/src/pages/CsvImport.js b/src/pages/CsvImport.js
index 2e3343617..80656425d 100644
--- a/src/pages/CsvImport.js
+++ b/src/pages/CsvImport.js
@@ -15,7 +15,7 @@ const TableContainerStyled = styled.div`
     background: ${props => props.theme.ultraLightBlue};
     font-size: 90%;
     max-height: 500px;
-    border: 2px solid ${props => props.theme.darkblue};
+    border: 2px solid ${props => props.theme.secondary};
     border-radius: ${props => props.theme.borderRadius};
 `;
 
@@ -67,7 +67,7 @@ const CsvImport = () => {
                         className="p-0"
                         onClick={() => setIsHelpModalOpen(true)}
                     >
-                        <Icon icon={faQuestionCircle} className="text-darkblue" />
+                        <Icon icon={faQuestionCircle} className="text-secondary" />
                     </Button>
                 </span>
             </Tippy>
diff --git a/src/pages/FeaturedComparisons.js b/src/pages/FeaturedComparisons.js
index 1134bd3ec..edd8bebfa 100644
--- a/src/pages/FeaturedComparisons.js
+++ b/src/pages/FeaturedComparisons.js
@@ -126,7 +126,7 @@ const FeaturedComparisons = () => {
             <Container className="p-0 d-flex align-items-center">
                 <h1 className="h4 mt-4 mb-4 flex-grow-1">Featured paper comparisons</h1>
                 <ButtonGroup className="flex-shrink-0">
-                    <Link to={ROUTES.COMPARISONS} className="btn btn-darkblue flex-shrink-0 btn-sm">
+                    <Link to={ROUTES.COMPARISONS} className="btn btn-secondary flex-shrink-0 btn-sm">
                         View all comparisons
                     </Link>
                 </ButtonGroup>
diff --git a/src/pages/Observatories/Observatory.js b/src/pages/Observatories/Observatory.js
index 83c7414e9..c19f1109d 100644
--- a/src/pages/Observatories/Observatory.js
+++ b/src/pages/Observatories/Observatory.js
@@ -82,7 +82,7 @@ const Observatory = () => {
                         </>
                         {!!user && user.isCurationAllowed && (
                             <ButtonGroup className="flex-shrink-0" style={{ marginLeft: 'auto' }}>
-                                <Button color="darkblue" size="sm" onClick={() => setShowEditDialog(v => !v)}>
+                                <Button color="secondary" size="sm" onClick={() => setShowEditDialog(v => !v)}>
                                     <Icon icon={faPen} /> Edit
                                 </Button>
                             </ButtonGroup>
diff --git a/src/pages/Organizations/OrganizationDetails.js b/src/pages/Organizations/OrganizationDetails.js
index 970fadb73..079b9fbfd 100644
--- a/src/pages/Organizations/OrganizationDetails.js
+++ b/src/pages/Organizations/OrganizationDetails.js
@@ -95,10 +95,10 @@ const OrganizationDetails = () => {
                         </>
                         {!!user && (user.id === createdBy || user.isCurationAllowed) && (
                             <ButtonGroup className="flex-shrink-0" style={{ marginLeft: 'auto' }}>
-                                <Button size="sm" color="darkblue" tag={Link} to={reverse(ROUTES.ADD_OBSERVATORY, { id: id })}>
+                                <Button size="sm" color="secondary" tag={Link} to={reverse(ROUTES.ADD_OBSERVATORY, { id: id })}>
                                     <Icon icon={faPlus} /> Create new observatory
                                 </Button>
-                                <Button color="darkblue" size="sm" onClick={() => setShowEditDialog(v => !v)}>
+                                <Button color="secondary" size="sm" onClick={() => setShowEditDialog(v => !v)}>
                                     <Icon icon={faPen} /> Edit
                                 </Button>
                             </ButtonGroup>
diff --git a/src/pages/Organizations/Organizations.js b/src/pages/Organizations/Organizations.js
index 092a616fd..d8ed384ac 100644
--- a/src/pages/Organizations/Organizations.js
+++ b/src/pages/Organizations/Organizations.js
@@ -56,9 +56,9 @@ class Organizations extends Component {
                     {!!this.props.user && this.props.user.isCurationAllowed && (
                         <RequireAuthentication
                             component={Link}
-                            color="darkblue"
+                            color="secondary"
                             size="sm"
-                            className="btn btn-darkblue btn-sm flex-shrink-0"
+                            className="btn btn-secondary btn-sm flex-shrink-0"
                             to={ROUTES.ADD_ORGANIZATION}
                         >
                             <Icon icon={faPlus} /> Create new organization
diff --git a/src/pages/Papers.js b/src/pages/Papers.js
index c0b89ef92..27527b8af 100644
--- a/src/pages/Papers.js
+++ b/src/pages/Papers.js
@@ -108,7 +108,7 @@ const Papers = () => {
                 <ButtonGroup>
                     {!!user && user.isCurationAllowed && (
                         <ButtonDropdown size="sm" isOpen={dropdownOpen} toggle={toggle}>
-                            <DropdownToggle caret color="darkblue">
+                            <DropdownToggle caret color="secondary">
                                 {verified === true && 'Verified'}
                                 {verified === false && 'Unverified'}
                                 {verified === null && 'All'}
diff --git a/src/pages/Properties/Properties.js b/src/pages/Properties/Properties.js
index 5dff4ed72..300fe72c3 100644
--- a/src/pages/Properties/Properties.js
+++ b/src/pages/Properties/Properties.js
@@ -60,7 +60,7 @@ const Properties = () => {
                     </div>
                 </div>
                 <ButtonGroup>
-                    <RequireAuthentication component={Link} color="darkblue" size="sm" className="btn btn-darkblue btn-sm" to={ROUTES.ADD_PROPERTY}>
+                    <RequireAuthentication component={Link} color="secondary" size="sm" className="btn btn-secondary btn-sm" to={ROUTES.ADD_PROPERTY}>
                         <Icon icon={faPlus} /> Create property
                     </RequireAuthentication>
                     <HeaderSearchButton placeholder="Search properties..." type={PREDICATE_TYPE_ID} />
diff --git a/src/pages/Properties/Property.js b/src/pages/Properties/Property.js
index 835c55e70..33970102c 100644
--- a/src/pages/Properties/Property.js
+++ b/src/pages/Properties/Property.js
@@ -52,7 +52,7 @@ function Property(props) {
                             <RequireAuthentication
                                 component={Button}
                                 className="float-right flex-shrink-0"
-                                color="darkblue"
+                                color="secondary"
                                 size="sm"
                                 onClick={() => setEditMode(v => !v)}
                             >
diff --git a/src/pages/ResearchFields/ResearchFields.js b/src/pages/ResearchFields/ResearchFields.js
index 8e1472c0f..cf9f0269e 100644
--- a/src/pages/ResearchFields/ResearchFields.js
+++ b/src/pages/ResearchFields/ResearchFields.js
@@ -49,7 +49,7 @@ const ResearchFields = () => {
                 <h1 className="h4 mt-4 mb-4 flex-grow-1">Research fields taxonomy</h1>
 
                 <ButtonDropdown isOpen={menuOpen} toggle={() => setMenuOpen(v => !v)} nav inNavbar>
-                    <DropdownToggle size="sm" color="darkblue" className="px-3 rounded-right" style={{ marginLeft: 2 }}>
+                    <DropdownToggle size="sm" color="secondary" className="px-3 rounded-right" style={{ marginLeft: 2 }}>
                         <Icon icon={faEllipsisV} />
                     </DropdownToggle>
                     <DropdownMenu right>
diff --git a/src/pages/Resources/Resource.js b/src/pages/Resources/Resource.js
index 805b35dae..a6339aa6b 100644
--- a/src/pages/Resources/Resource.js
+++ b/src/pages/Resources/Resource.js
@@ -205,7 +205,7 @@ function Resource(props) {
                             <RequireAuthentication
                                 size="sm"
                                 component={Button}
-                                color="darkblue"
+                                color="secondary"
                                 style={{ marginRight: 2 }}
                                 tag={Link}
                                 to={ROUTES.ADD_RESOURCE}
@@ -214,7 +214,7 @@ function Resource(props) {
                             </RequireAuthentication>
                             {dedicatedLink && (
                                 <Button
-                                    color="darkblue"
+                                    color="secondary"
                                     size="sm"
                                     tag={Link}
                                     to={reverseWithSlug(dedicatedLink.route, {
@@ -231,7 +231,7 @@ function Resource(props) {
                                     <RequireAuthentication
                                         component={Button}
                                         className="float-right"
-                                        color="darkblue"
+                                        color="secondary"
                                         size="sm"
                                         onClick={() => setEditMode(v => !v)}
                                     >
@@ -244,7 +244,7 @@ function Resource(props) {
                                 )
                             ) : (
                                 <Tippy hideOnClick={false} content="This resource can not be edited because it has a published DOI.">
-                                    <span className="btn btn-darkblue btn-sm disabled">
+                                    <span className="btn btn-secondary btn-sm disabled">
                                         <Icon icon={faPen} /> <span>Edit</span>
                                     </span>
                                 </Tippy>
diff --git a/src/pages/Resources/Resources.js b/src/pages/Resources/Resources.js
index 8f88245d2..0b17642d5 100644
--- a/src/pages/Resources/Resources.js
+++ b/src/pages/Resources/Resources.js
@@ -62,9 +62,9 @@ const Resources = () => {
                 <ButtonGroup>
                     <RequireAuthentication
                         component={Link}
-                        color="darkblue"
+                        color="secondary"
                         size="sm"
-                        className="btn btn-darkblue btn-sm flex-shrink-0"
+                        className="btn btn-secondary btn-sm flex-shrink-0"
                         to={ROUTES.ADD_RESOURCE}
                     >
                         <Icon icon={faPlus} /> Create resource
diff --git a/src/pages/Templates/Template.js b/src/pages/Templates/Template.js
index 724379b08..36aa0579f 100644
--- a/src/pages/Templates/Template.js
+++ b/src/pages/Templates/Template.js
@@ -131,14 +131,14 @@ class Template extends Component {
                                     className="p-0"
                                     onClick={() => this.toggle('helpModalOpen')}
                                 >
-                                    <Icon icon={faQuestionCircle} className="text-darkblue" />
+                                    <Icon icon={faQuestionCircle} className="text-secondary" />
                                 </Button>
                             </span>
                         </Tippy>
                     </div>
                     <ButtonGroup className="flex-shrink-0">
                         {!this.props.editMode && !this.props.isSaving ? (
-                            <RequireAuthentication component={Button} color="darkblue" size="sm" onClick={() => this.props.setEditMode(true)}>
+                            <RequireAuthentication component={Button} color="secondary" size="sm" onClick={() => this.props.setEditMode(true)}>
                                 <Icon icon={faPen} /> Edit
                             </RequireAuthentication>
                         ) : (
@@ -166,7 +166,7 @@ class Template extends Component {
                                 nav
                                 inNavbar
                             >
-                                <DropdownToggle size="sm" color="darkblue" className="px-3 rounded-right" style={{ marginLeft: 2 }}>
+                                <DropdownToggle size="sm" color="secondary" className="px-3 rounded-right" style={{ marginLeft: 2 }}>
                                     <Icon icon={faEllipsisV} />
                                 </DropdownToggle>
                                 <DropdownMenu right>
diff --git a/src/pages/Templates/Templates.js b/src/pages/Templates/Templates.js
index 4efe048f5..eaabf8b0c 100644
--- a/src/pages/Templates/Templates.js
+++ b/src/pages/Templates/Templates.js
@@ -164,9 +164,9 @@ const Templates = () => {
                 </div>
                 <RequireAuthentication
                     component={Link}
-                    color="darkblue"
+                    color="secondary"
                     size="sm"
-                    className="btn btn-darkblue btn-sm flex-shrink-0"
+                    className="btn btn-secondary btn-sm flex-shrink-0"
                     to={reverse(ROUTES.TEMPLATE)}
                 >
                     <Icon icon={faPlus} /> Create template
diff --git a/src/pages/VenuePage.js b/src/pages/VenuePage.js
index 466e09446..23577e397 100644
--- a/src/pages/VenuePage.js
+++ b/src/pages/VenuePage.js
@@ -131,7 +131,7 @@ class VenuePage extends Component {
                                 nav
                                 inNavbar
                             >
-                                <DropdownToggle size="sm" color="darkblue" className="px-3 rounded-right" style={{ marginLeft: 2 }}>
+                                <DropdownToggle size="sm" color="secondary" className="px-3 rounded-right" style={{ marginLeft: 2 }}>
                                     <Icon icon={faEllipsisV} />
                                 </DropdownToggle>
                                 <DropdownMenu right>
diff --git a/src/testUtils.js b/src/testUtils.js
index de98222b4..9c7799441 100644
--- a/src/testUtils.js
+++ b/src/testUtils.js
@@ -11,7 +11,7 @@ export const theme = {
     orkgPrimaryColor: 'rgb(232, 97, 97)',
     orkgBorderWidth: '1px',
     primary: 'rgb(232, 97, 97)',
-    darkblue: 'rgb(128, 134, 155)',
+    secondary: 'rgb(128, 134, 155)',
     secondaryDarker: 'rgb(80, 85, 101)',
     light: 'rgb(233, 236, 239)',
     ultraLightBlue: 'rgb(248, 249, 251)',
@@ -22,7 +22,7 @@ export const theme = {
     borderRadius: '6px',
     themeColors: {
         lightblue: 'rgb(233, 235, 242)',
-        darkblue: 'rgb(128, 134, 155)',
+        secondary: 'rgb(128, 134, 155)',
         secondaryDarker: 'rgb(80, 85, 101)',
         primaryDarker: 'rgb(198, 29, 29)'
     },

From 93e619330f4a71275551a5e17d6d4c0d89d05357 Mon Sep 17 00:00:00 2001
From: Allard Oelen <oelen@l3s.de>
Date: Thu, 8 Apr 2021 17:21:19 +0200
Subject: [PATCH 04/10] Replace ultra-light-blue-darker

---
 .../AddPaper/Abstract/AbstractAnnotatorView.js         |  2 +-
 src/components/AddPaper/Contributions/styled.js        |  8 ++++----
 src/components/Comparison/PropertyValue.js             |  2 +-
 src/components/Home/FeaturedItemsBox.js                |  2 +-
 src/components/LastUpdatesBox/styled.js                |  4 ++--
 src/components/Layout/Header/AddNew.js                 |  2 +-
 .../RelativeBreadcrumbs/RelativeBreadcrumbs.js         |  6 +++---
 .../StatementOptionButton/StatementOptionButton.js     |  2 +-
 src/components/StatementBrowser/styled.js              | 10 +++++-----
 src/components/UserAvatar/UserAvatar.js                |  6 +++---
 src/components/ViewPaper/EditDialog/styled.js          |  2 +-
 src/components/styled.js                               |  6 +++---
 .../ComparisonComponents/AddVisualizationModal.js      |  4 ++--
 .../selfVisModel/VisRenderer/VisualizationWidget.js    |  2 +-
 src/pages/Observatories/Observatories.js               |  2 +-
 src/pages/Tools.js                                     |  4 ++--
 src/pages/ViewPaper.js                                 |  2 +-
 src/testUtils.js                                       |  2 +-
 18 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/components/AddPaper/Abstract/AbstractAnnotatorView.js b/src/components/AddPaper/Abstract/AbstractAnnotatorView.js
index 53817fa38..9858347f4 100644
--- a/src/components/AddPaper/Abstract/AbstractAnnotatorView.js
+++ b/src/components/AddPaper/Abstract/AbstractAnnotatorView.js
@@ -121,7 +121,7 @@ class AbstractAnnotatorView extends Component {
                                                 width: '100%',
                                                 background: getTrackBackground({
                                                     values: this.props.certaintyThreshold,
-                                                    colors: [this.props.theme.orkgPrimaryColor, this.props.theme.ultraLightBlueDarker],
+                                                    colors: [this.props.theme.orkgPrimaryColor, this.props.theme.lightDarker],
                                                     min: 0,
                                                     max: 1
                                                 })
diff --git a/src/components/AddPaper/Contributions/styled.js b/src/components/AddPaper/Contributions/styled.js
index f6dcfc465..6eb0f025d 100644
--- a/src/components/AddPaper/Contributions/styled.js
+++ b/src/components/AddPaper/Contributions/styled.js
@@ -5,7 +5,7 @@ import { Button, ListGroupItem } from 'reactstrap';
 export const StyledHorizontalContribution = styled.div`
     border-radius: ${props => props.theme.borderRadius};
     border-width: ${props => props.theme.borderWidth};
-    border-color: ${props => props.theme.ultraLightBlueDarker};
+    border-color: ${props => props.theme.lightDarker};
     border-style: solid;
     border-top-left-radius: 0;
     padding: 25px 30px;
@@ -35,7 +35,7 @@ export const StyledHorizontalContributionsList = styled.ul`
         margin-right: 2px;
 
         .contribution-item {
-            border: 1px solid ${props => props.theme.ultraLightBlueDarker};
+            border: 1px solid ${props => props.theme.lightDarker};
             border-bottom: 0;
             background-color: ${props => props.theme.ultraLightBlue};
             position: relative;
@@ -69,7 +69,7 @@ export const StyledHorizontalContributionsList = styled.ul`
 export const AddContribution = styled(Button)`
     &&& {
         padding: 0;
-        border: 1px solid ${props => props.theme.ultraLightBlueDarker};
+        border: 1px solid ${props => props.theme.lightDarker};
         background-color: ${props => props.theme.ultraLightBlue};
         border-radius: 60px;
         margin: 0 5px;
@@ -132,7 +132,7 @@ export const StyledStatementItem = styled(ListGroupItem)`
     padding: 0.5rem 0.75rem !important;
     cursor: default;
     background-color: ${props => props.theme.ultraLightBlue} !important;
-    border-color: ${props => props.theme.ultraLightBlueDarker} !important;
+    border-color: ${props => props.theme.lightDarker} !important;
     overflow-wrap: break-word;
     word-break: break-all;
     flex: 1;
diff --git a/src/components/Comparison/PropertyValue.js b/src/components/Comparison/PropertyValue.js
index 283f1a1b6..2459f36c0 100644
--- a/src/components/Comparison/PropertyValue.js
+++ b/src/components/Comparison/PropertyValue.js
@@ -16,7 +16,7 @@ import classNames from 'classnames';
 const FilterButton = styled(Button)`
     &&& {
         padding: 0 5px;
-        color: ${props => props.theme.ultraLightBlueDarker};
+        color: ${props => props.theme.lightDarker};
         &:hover,
         &.active {
             color: ${props => props.theme.secondaryDarker};
diff --git a/src/components/Home/FeaturedItemsBox.js b/src/components/Home/FeaturedItemsBox.js
index 48d969865..83e4b1b17 100644
--- a/src/components/Home/FeaturedItemsBox.js
+++ b/src/components/Home/FeaturedItemsBox.js
@@ -23,7 +23,7 @@ const FeaturedTabs = styled.div`
         padding: 15px;
         color: #bebbac;
         cursor: pointer;
-        border-bottom: 2px solid ${props => props.theme.ultraLightBlueDarker};
+        border-bottom: 2px solid ${props => props.theme.lightDarker};
         -webkit-transition: border 500ms ease-out;
         -moz-transition: border 500ms ease-out;
         -o-transition: border 500ms ease-out;
diff --git a/src/components/LastUpdatesBox/styled.js b/src/components/LastUpdatesBox/styled.js
index f682c95df..f2b35c2b7 100644
--- a/src/components/LastUpdatesBox/styled.js
+++ b/src/components/LastUpdatesBox/styled.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 export const StyledActivity = styled.div`
-    border-left: 3px solid ${props => props.theme.ultraLightBlueDarker};
+    border-left: 3px solid ${props => props.theme.lightDarker};
     color: ${props => props.theme.bodyColor};
     position: relative;
     font-size: 15px;
@@ -18,7 +18,7 @@ export const StyledActivity = styled.div`
         margin-right: 0.5rem;
         border-radius: 14px;
         content: '';
-        background-color: ${props => props.theme.ultraLightBlueDarker};
+        background-color: ${props => props.theme.lightDarker};
         display: inline-block;
         position: absolute;
         margin-top: 3px;
diff --git a/src/components/Layout/Header/AddNew.js b/src/components/Layout/Header/AddNew.js
index 729e113e8..99789f9f4 100644
--- a/src/components/Layout/Header/AddNew.js
+++ b/src/components/Layout/Header/AddNew.js
@@ -32,7 +32,7 @@ const ToolContainer = styled(Link)`
     text-align: center;
     color: inherit;
     border-radius: 0;
-    border-bottom: 2px solid ${props => props.theme.ultraLightBlueDarker};
+    border-bottom: 2px solid ${props => props.theme.lightDarker};
     position: relative;
     &:last-of-type {
         border-bottom: 0;
diff --git a/src/components/RelativeBreadcrumbs/RelativeBreadcrumbs.js b/src/components/RelativeBreadcrumbs/RelativeBreadcrumbs.js
index 265bdb64b..9c66ff023 100644
--- a/src/components/RelativeBreadcrumbs/RelativeBreadcrumbs.js
+++ b/src/components/RelativeBreadcrumbs/RelativeBreadcrumbs.js
@@ -31,7 +31,7 @@ const BreadcrumbStyled = styled.ul`
         & > a {
             color: ${props => props.theme.secondary};
             display: block;
-            background: ${props => props.theme.ultraLightBlueDarker};
+            background: ${props => props.theme.lightDarker};
             text-decoration: none;
             position: relative;
             line-height: 20px;
@@ -65,7 +65,7 @@ const BreadcrumbStyled = styled.ul`
                 content: '';
                 position: absolute;
                 top: 0;
-                border: 0 solid ${props => props.theme.ultraLightBlueDarker};
+                border: 0 solid ${props => props.theme.lightDarker};
                 border-width: 10px 6px;
                 width: 0;
                 height: 0;
@@ -77,7 +77,7 @@ const BreadcrumbStyled = styled.ul`
             &:after {
                 left: 100%;
                 border-color: transparent;
-                border-left-color: ${props => props.theme.ultraLightBlueDarker};
+                border-left-color: ${props => props.theme.lightDarker};
             }
             &:hover,
             &:active {
diff --git a/src/components/StatementBrowser/StatementOptionButton/StatementOptionButton.js b/src/components/StatementBrowser/StatementOptionButton/StatementOptionButton.js
index 63608b077..f394c78f2 100644
--- a/src/components/StatementBrowser/StatementOptionButton/StatementOptionButton.js
+++ b/src/components/StatementBrowser/StatementOptionButton/StatementOptionButton.js
@@ -10,7 +10,7 @@ export const OptionButton = styled(Button)`
     margin: 0 2px !important;
     display: inline-block !important;
     border-radius: 100% !important;
-    background-color: ${props => props.theme.ultraLightBlueDarker}!important;
+    background-color: ${props => props.theme.lightDarker}!important;
     color: ${props => props.theme.buttonDark}!important;
 
     & .icon-wrapper {
diff --git a/src/components/StatementBrowser/styled.js b/src/components/StatementBrowser/styled.js
index cb671ed28..26ee5ca92 100644
--- a/src/components/StatementBrowser/styled.js
+++ b/src/components/StatementBrowser/styled.js
@@ -6,7 +6,7 @@ export const StyledStatementItem = styled(ListGroupItem)`
     padding: 0.5rem 0.75rem !important;
     cursor: default;
     background-color: ${props => props.theme.ultraLightBlue} !important;
-    border-color: ${props => props.theme.ultraLightBlueDarker} !important;
+    border-color: ${props => props.theme.lightDarker} !important;
     overflow-wrap: break-word;
     word-break: break-all;
     flex: 1;
@@ -84,7 +84,7 @@ export const StyledDropdownItem = styled(DropdownItem)`
 export const StyledButton = styled(Button)`
     border-color: #ced4da !important;
     color: ${props => props.theme.buttonDark} !important;
-    background: ${props => props.theme.ultraLightBlueDarker} !important;
+    background: ${props => props.theme.lightDarker} !important;
     &:hover {
         color: #fff !important;
         background-color: ${props => props.theme.secondary} !important;
@@ -99,7 +99,7 @@ export const StyledDropdownToggle = styled(DropdownToggle).withConfig({
     border-bottom-left-radius: ${props => (props.disableBorderRadiusLeft ? '0' : '4px !important')};
     border-top-right-radius: ${props => (props.disableBorderRadiusRight ? '0' : '4px !important')};
     border-bottom-right-radius: ${props => (props.disableBorderRadiusRight ? '0' : '4px !important')};
-    background: ${props => props.theme.ultraLightBlueDarker} !important;
+    background: ${props => props.theme.lightDarker} !important;
     color: ${props => props.theme.buttonDark} !important;
     border-color: #ced4da !important;
     &:hover {
@@ -363,13 +363,13 @@ export const TemplateHeaderStyle = styled.div`
 
         &:focus {
             outline: 0;
-            border: 1px dashed ${props => props.theme.ultraLightBlueDarker};
+            border: 1px dashed ${props => props.theme.lightDarker};
             box-shadow: none;
         }
     }
     & .type {
         font-size: 0.9rem;
-        color: ${props => props.theme.ultraLightBlueDarker};
+        color: ${props => props.theme.lightDarker};
         opacity: 0.9;
         .span {
             background-color: ${props => props.theme.buttonDark};
diff --git a/src/components/UserAvatar/UserAvatar.js b/src/components/UserAvatar/UserAvatar.js
index 6fbfee768..1b30cdf28 100644
--- a/src/components/UserAvatar/UserAvatar.js
+++ b/src/components/UserAvatar/UserAvatar.js
@@ -11,7 +11,7 @@ import Tippy from '@tippyjs/react';
 import PropTypes from 'prop-types';
 
 const StyledGravatar = styled(Gravatar)`
-    border: 2px solid ${props => props.theme.ultraLightBlueDarker};
+    border: 2px solid ${props => props.theme.lightDarker};
     cursor: pointer;
     &:hover {
         border: 2px solid ${props => props.theme.primary};
@@ -25,14 +25,14 @@ const StyledSpinnerGravatar = styled.div`
     text-align: center;
     line-height: 28px;
     color: ${props => props.theme.secondary};
-    border: 2px solid ${props => props.theme.ultraLightBlueDarker};
+    border: 2px solid ${props => props.theme.lightDarker};
     cursor: pointer;
     vertical-align: sub;
     &:hover {
         border: 2px solid ${props => props.theme.primary};
     }
 
-    background-color: ${props => props.theme.ultraLightBlueDarker};
+    background-color: ${props => props.theme.lightDarker};
 `;
 
 const UserAvatar = ({ userId }) => {
diff --git a/src/components/ViewPaper/EditDialog/styled.js b/src/components/ViewPaper/EditDialog/styled.js
index 9702863d6..0b17b94b4 100644
--- a/src/components/ViewPaper/EditDialog/styled.js
+++ b/src/components/ViewPaper/EditDialog/styled.js
@@ -22,7 +22,7 @@ export const StyledStatementItem = styled(ListGroupItem)`
     padding: 0.5rem 0.75rem !important;
     cursor: default;
     background-color: ${props => props.theme.ultraLightBlue} !important;
-    border-color: ${props => props.theme.ultraLightBlueDarker} !important;
+    border-color: ${props => props.theme.lightDarker} !important;
     overflow-wrap: break-word;
     word-break: break-all;
     flex: 1;
diff --git a/src/components/styled.js b/src/components/styled.js
index 06fe07529..1c93b9135 100644
--- a/src/components/styled.js
+++ b/src/components/styled.js
@@ -19,7 +19,7 @@ export const SubTitle = styled.div`
 `;
 
 export const StyledGravatar = styled(Gravatar)`
-    border: 2px solid ${props => props.theme.ultraLightBlueDarker};
+    border: 2px solid ${props => props.theme.lightDarker};
     cursor: pointer;
     &:hover {
         border: 2px solid ${props => props.theme.primary};
@@ -33,14 +33,14 @@ export const StyledDotGravatar = styled.div`
     text-align: center;
     line-height: 48px;
     color: ${props => props.theme.secondary};
-    border: 2px solid ${props => props.theme.ultraLightBlueDarker};
+    border: 2px solid ${props => props.theme.lightDarker};
     cursor: pointer;
     vertical-align: sub;
     &:hover {
         border: 2px solid ${props => props.theme.primary};
     }
 
-    background-color: ${props => props.theme.ultraLightBlueDarker};
+    background-color: ${props => props.theme.lightDarker};
 `;
 
 export const ContributorsAvatars = styled.div`
diff --git a/src/libs/selfVisModel/ComparisonComponents/AddVisualizationModal.js b/src/libs/selfVisModel/ComparisonComponents/AddVisualizationModal.js
index 88b9b32e7..c673c590c 100644
--- a/src/libs/selfVisModel/ComparisonComponents/AddVisualizationModal.js
+++ b/src/libs/selfVisModel/ComparisonComponents/AddVisualizationModal.js
@@ -15,14 +15,14 @@ import { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome';
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
 
 const TabButtons = styled(Row)`
-    border-bottom: 2px solid ${props => props.theme.ultraLightBlueDarker};
+    border-bottom: 2px solid ${props => props.theme.lightDarker};
 `;
 
 const TabButton = styled.div`
     cursor: pointer;
     padding: 4px 20px;
     background-color: ${props => (props.active ? props.theme.primary : props.theme.themeColors.lightblue)};
-    border: ${props => (props.active ? 'none' : '1px solid ' + props.theme.ultraLightBlueDarker)};
+    border: ${props => (props.active ? 'none' : '1px solid ' + props.theme.lightDarker)};
     border-bottom: 0;
     color: ${props => (props.active ? '#ffffff' : '')};
     font-size: 18px;
diff --git a/src/libs/selfVisModel/VisRenderer/VisualizationWidget.js b/src/libs/selfVisModel/VisRenderer/VisualizationWidget.js
index a3f95a5ff..08a9609d2 100644
--- a/src/libs/selfVisModel/VisRenderer/VisualizationWidget.js
+++ b/src/libs/selfVisModel/VisRenderer/VisualizationWidget.js
@@ -222,6 +222,6 @@ const SideBar = styled.div`
     min-width: 320px;
     overflow: auto;
     background-color: ${props => props.theme.ultraLightBlue} !important;
-    border: 1px solid ${props => props.theme.ultraLightBlueDarker} !important;
+    border: 1px solid ${props => props.theme.lightDarker} !important;
     border-radius: ${props => props.theme.borderRadius};
 `;
diff --git a/src/pages/Observatories/Observatories.js b/src/pages/Observatories/Observatories.js
index 6fe2ff17b..049c95838 100644
--- a/src/pages/Observatories/Observatories.js
+++ b/src/pages/Observatories/Observatories.js
@@ -34,7 +34,7 @@ const StyledResearchFieldItem = styled(NavLink)`
     transition: 0.3s background;
     border-top-left-radius: ${props => props.theme.borderRadius};
     border-bottom-left-radius: ${props => props.theme.borderRadius};
-    border: 1px solid ${props => props.theme.ultraLightBlueDarker};
+    border: 1px solid ${props => props.theme.lightDarker};
     background-color: ${props => props.theme.ultraLightBlue};
     color: inherit;
 
diff --git a/src/pages/Tools.js b/src/pages/Tools.js
index 833e4330b..ebfcc9cee 100644
--- a/src/pages/Tools.js
+++ b/src/pages/Tools.js
@@ -43,8 +43,8 @@ const ToolContainer = styled(Link)`
 `;
 
 const ImgContainer = styled.div`
-    border-top: 2px solid ${props => props.theme.ultraLightBlueDarker};
-    border-bottom: 2px solid ${props => props.theme.ultraLightBlueDarker};
+    border-top: 2px solid ${props => props.theme.lightDarker};
+    border-bottom: 2px solid ${props => props.theme.lightDarker};
     height: 160px;
     display: flex;
     align-items: center;
diff --git a/src/pages/ViewPaper.js b/src/pages/ViewPaper.js
index 488299908..0d6acffdc 100644
--- a/src/pages/ViewPaper.js
+++ b/src/pages/ViewPaper.js
@@ -40,7 +40,7 @@ export const Title = styled.div`
     flex-grow: 1;
     & span {
         font-size: small;
-        color: ${props => props.theme.ultraLightBlueDarker};
+        color: ${props => props.theme.lightDarker};
     }
 `;
 
diff --git a/src/testUtils.js b/src/testUtils.js
index 9c7799441..658e6de04 100644
--- a/src/testUtils.js
+++ b/src/testUtils.js
@@ -15,7 +15,7 @@ export const theme = {
     secondaryDarker: 'rgb(80, 85, 101)',
     light: 'rgb(233, 236, 239)',
     ultraLightBlue: 'rgb(248, 249, 251)',
-    ultraLightBlueDarker: 'rgb(219, 221, 229)',
+    lightDarker: 'rgb(219, 221, 229)',
     bodyBg: 'rgb(233, 235, 242)',
     bodyColor: 'rgb(79, 79, 79)',
     borderWidth: '1px',

From 07197508881d0bd4eb7bf732060bbfd5eeb89c3e Mon Sep 17 00:00:00 2001
From: Allard Oelen <oelen@l3s.de>
Date: Thu, 8 Apr 2021 17:22:54 +0200
Subject: [PATCH 05/10] Replace ultra-light-blue

---
 src/components/AddPaper/Contributions/styled.js             | 6 +++---
 src/components/Home/Benefits.js                             | 2 +-
 src/components/Home/ObservatoriesCarousel.js                | 4 ++--
 src/components/Layout/Header/AddNew.js                      | 2 +-
 .../ObservatoriesCarousel/ObservatoriesCarousel.js          | 4 ++--
 src/components/StatementBrowser/Template/styled.js          | 2 +-
 src/components/StatementBrowser/styled.js                   | 6 +++---
 src/components/ViewPaper/EditDialog/styled.js               | 2 +-
 src/libs/selfVisModel/VisRenderer/VisualizationWidget.js    | 2 +-
 src/pages/CsvImport.js                                      | 2 +-
 src/pages/Observatories/Observatories.js                    | 2 +-
 src/testUtils.js                                            | 2 +-
 12 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/AddPaper/Contributions/styled.js b/src/components/AddPaper/Contributions/styled.js
index 6eb0f025d..a3d1f8f51 100644
--- a/src/components/AddPaper/Contributions/styled.js
+++ b/src/components/AddPaper/Contributions/styled.js
@@ -37,7 +37,7 @@ export const StyledHorizontalContributionsList = styled.ul`
         .contribution-item {
             border: 1px solid ${props => props.theme.lightDarker};
             border-bottom: 0;
-            background-color: ${props => props.theme.ultraLightBlue};
+            background-color: ${props => props.theme.lightLighter};
             position: relative;
             box-sizing: border-box;
             padding: 7px 15px 7px 15px;
@@ -70,7 +70,7 @@ export const AddContribution = styled(Button)`
     &&& {
         padding: 0;
         border: 1px solid ${props => props.theme.lightDarker};
-        background-color: ${props => props.theme.ultraLightBlue};
+        background-color: ${props => props.theme.lightLighter};
         border-radius: 60px;
         margin: 0 5px;
         cursor: pointer;
@@ -131,7 +131,7 @@ export const StyledResearchFieldBrowser = styled.div`
 export const StyledStatementItem = styled(ListGroupItem)`
     padding: 0.5rem 0.75rem !important;
     cursor: default;
-    background-color: ${props => props.theme.ultraLightBlue} !important;
+    background-color: ${props => props.theme.lightLighter} !important;
     border-color: ${props => props.theme.lightDarker} !important;
     overflow-wrap: break-word;
     word-break: break-all;
diff --git a/src/components/Home/Benefits.js b/src/components/Home/Benefits.js
index 2920b99b7..64d74a043 100644
--- a/src/components/Home/Benefits.js
+++ b/src/components/Home/Benefits.js
@@ -44,7 +44,7 @@ const CarouselIndicatorsStyled = styled(CarouselIndicators)`
         margin: 0;
     }
 
-    background: ${props => props.theme.ultraLightBlue};
+    background: ${props => props.theme.lightLighter};
 `;
 
 const ITEMS = [
diff --git a/src/components/Home/ObservatoriesCarousel.js b/src/components/Home/ObservatoriesCarousel.js
index 77b4a69b4..295de4b0e 100644
--- a/src/components/Home/ObservatoriesCarousel.js
+++ b/src/components/Home/ObservatoriesCarousel.js
@@ -45,7 +45,7 @@ const CarouselIndicatorsStyled = styled(CarouselIndicators)`
         margin: 0;
     }
 
-    background: ${props => props.theme.ultraLightBlue};
+    background: ${props => props.theme.lightLighter};
 `;
 
 const StyledGravatar = styled(Gravatar)`
@@ -58,7 +58,7 @@ const StyledGravatar = styled(Gravatar)`
 
 const CardFooterStyled = styled(CardFooter)`
     && {
-        background: ${props => props.theme.ultraLightBlue};
+        background: ${props => props.theme.lightLighter};
     }
 `;
 
diff --git a/src/components/Layout/Header/AddNew.js b/src/components/Layout/Header/AddNew.js
index 99789f9f4..3b7e2b586 100644
--- a/src/components/Layout/Header/AddNew.js
+++ b/src/components/Layout/Header/AddNew.js
@@ -45,7 +45,7 @@ const ToolContainer = styled(Link)`
     }
 
     &:hover {
-        background-color: ${props => props.theme.ultraLightBlue};
+        background-color: ${props => props.theme.lightLighter};
         color: inherit;
         text-decoration: none;
     }
diff --git a/src/components/ObservatoriesCarousel/ObservatoriesCarousel.js b/src/components/ObservatoriesCarousel/ObservatoriesCarousel.js
index 0c7ab97d4..bc59aeaaa 100644
--- a/src/components/ObservatoriesCarousel/ObservatoriesCarousel.js
+++ b/src/components/ObservatoriesCarousel/ObservatoriesCarousel.js
@@ -45,7 +45,7 @@ const CarouselIndicatorsStyled = styled(CarouselIndicators)`
         margin: 0;
     }
 
-    background: ${props => props.theme.ultraLightBlue};
+    background: ${props => props.theme.lightLighter};
 `;
 
 const StyledGravatar = styled(Gravatar)`
@@ -58,7 +58,7 @@ const StyledGravatar = styled(Gravatar)`
 
 const CardFooterStyled = styled(CardFooter)`
     && {
-        background: ${props => props.theme.ultraLightBlue};
+        background: ${props => props.theme.lightLighter};
     }
 `;
 
diff --git a/src/components/StatementBrowser/Template/styled.js b/src/components/StatementBrowser/Template/styled.js
index 4ac0c0c47..3f7b55dfe 100644
--- a/src/components/StatementBrowser/Template/styled.js
+++ b/src/components/StatementBrowser/Template/styled.js
@@ -9,7 +9,7 @@ export const AddPropertyWrapper = styled(ListGroupItem)`
     border-bottom-right-radius: 4px !important;
     & .propertyHolder {
         height: 20px;
-        background-color: ${props => props.theme.ultraLightBlue};
+        background-color: ${props => props.theme.lightLighter};
     }
 `;
 
diff --git a/src/components/StatementBrowser/styled.js b/src/components/StatementBrowser/styled.js
index 26ee5ca92..432306d1a 100644
--- a/src/components/StatementBrowser/styled.js
+++ b/src/components/StatementBrowser/styled.js
@@ -5,7 +5,7 @@ import { ListGroupItem, DropdownItem, Button, DropdownToggle } from 'reactstrap'
 export const StyledStatementItem = styled(ListGroupItem)`
     padding: 0.5rem 0.75rem !important;
     cursor: default;
-    background-color: ${props => props.theme.ultraLightBlue} !important;
+    background-color: ${props => props.theme.lightLighter} !important;
     border-color: ${props => props.theme.lightDarker} !important;
     overflow-wrap: break-word;
     word-break: break-all;
@@ -228,7 +228,7 @@ export const AddPropertyFormStyle = styled.div`
     }
 
     .input-group-prepend {
-        background-color: ${props => props.theme.ultraLightBlue};
+        background-color: ${props => props.theme.lightLighter};
         cursor: default;
         display: flex;
         border: 1px solid rgba(0, 0, 0, 0.125);
@@ -263,7 +263,7 @@ export const StatementsGroupStyle = styled(ListGroupItem)`
 `;
 
 export const PropertyStyle = styled.div`
-    background-color: ${props => props.theme.ultraLightBlue};
+    background-color: ${props => props.theme.lightLighter};
     overflow-wrap: break-word;
     border-radius: 3px 0 0 3px;
 
diff --git a/src/components/ViewPaper/EditDialog/styled.js b/src/components/ViewPaper/EditDialog/styled.js
index 0b17b94b4..6fe2ac936 100644
--- a/src/components/ViewPaper/EditDialog/styled.js
+++ b/src/components/ViewPaper/EditDialog/styled.js
@@ -21,7 +21,7 @@ export const StyledListGroupOpen = styled(Collapse)`
 export const StyledStatementItem = styled(ListGroupItem)`
     padding: 0.5rem 0.75rem !important;
     cursor: default;
-    background-color: ${props => props.theme.ultraLightBlue} !important;
+    background-color: ${props => props.theme.lightLighter} !important;
     border-color: ${props => props.theme.lightDarker} !important;
     overflow-wrap: break-word;
     word-break: break-all;
diff --git a/src/libs/selfVisModel/VisRenderer/VisualizationWidget.js b/src/libs/selfVisModel/VisRenderer/VisualizationWidget.js
index 08a9609d2..3f9726384 100644
--- a/src/libs/selfVisModel/VisRenderer/VisualizationWidget.js
+++ b/src/libs/selfVisModel/VisRenderer/VisualizationWidget.js
@@ -221,7 +221,7 @@ const SideBar = styled.div`
     width: 320px;
     min-width: 320px;
     overflow: auto;
-    background-color: ${props => props.theme.ultraLightBlue} !important;
+    background-color: ${props => props.theme.lightLighter} !important;
     border: 1px solid ${props => props.theme.lightDarker} !important;
     border-radius: ${props => props.theme.borderRadius};
 `;
diff --git a/src/pages/CsvImport.js b/src/pages/CsvImport.js
index 80656425d..bab0dbe29 100644
--- a/src/pages/CsvImport.js
+++ b/src/pages/CsvImport.js
@@ -12,7 +12,7 @@ import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
 
 const TableContainerStyled = styled.div`
     overflow: auto;
-    background: ${props => props.theme.ultraLightBlue};
+    background: ${props => props.theme.lightLighter};
     font-size: 90%;
     max-height: 500px;
     border: 2px solid ${props => props.theme.secondary};
diff --git a/src/pages/Observatories/Observatories.js b/src/pages/Observatories/Observatories.js
index 049c95838..8408a4777 100644
--- a/src/pages/Observatories/Observatories.js
+++ b/src/pages/Observatories/Observatories.js
@@ -35,7 +35,7 @@ const StyledResearchFieldItem = styled(NavLink)`
     border-top-left-radius: ${props => props.theme.borderRadius};
     border-bottom-left-radius: ${props => props.theme.borderRadius};
     border: 1px solid ${props => props.theme.lightDarker};
-    background-color: ${props => props.theme.ultraLightBlue};
+    background-color: ${props => props.theme.lightLighter};
     color: inherit;
 
     cursor: pointer !important;
diff --git a/src/testUtils.js b/src/testUtils.js
index 658e6de04..4f9577a2e 100644
--- a/src/testUtils.js
+++ b/src/testUtils.js
@@ -14,7 +14,7 @@ export const theme = {
     secondary: 'rgb(128, 134, 155)',
     secondaryDarker: 'rgb(80, 85, 101)',
     light: 'rgb(233, 236, 239)',
-    ultraLightBlue: 'rgb(248, 249, 251)',
+    lightLighter: 'rgb(248, 249, 251)',
     lightDarker: 'rgb(219, 221, 229)',
     bodyBg: 'rgb(233, 235, 242)',
     bodyColor: 'rgb(79, 79, 79)',

From 5e52e30e3c9c70cde2e070708622bb83dcebe05d Mon Sep 17 00:00:00 2001
From: Allard Oelen <oelen@l3s.de>
Date: Thu, 8 Apr 2021 17:24:19 +0200
Subject: [PATCH 06/10] Replace lightblue

---
 src/assets/scss/CustomBootstrap.scss                      | 2 +-
 .../Comparison/AddContribution/AddContribution.js         | 2 +-
 src/components/Comparison/ComparisonMetaData.js           | 8 ++++----
 src/components/Comparison/Filters/AppliedRule.js          | 2 +-
 src/components/Comparison/ProvenanceBox/ObservatoryBox.js | 2 +-
 src/components/Comparison/SelectProperties.js             | 2 +-
 src/components/Comparison/styled.js                       | 4 ++--
 .../FeaturedComparisons/FeaturedComparisonsItem.js        | 2 +-
 src/components/Home/FeaturedComparisons.js                | 4 ++--
 src/components/Home/FeaturedPapers.js                     | 4 ++--
 src/components/Home/ResearchProblemsBox.js                | 2 +-
 src/components/LastUpdatesBox/LastUpdatesBox.js           | 2 +-
 src/components/ObjectStatements/ObjectStatements.js       | 2 +-
 src/components/Observatory/MembersBox.js                  | 2 +-
 src/components/Observatory/ResearchProblemsBox.js         | 2 +-
 src/components/PropertyStatements/PropertyStatements.js   | 2 +-
 src/components/ResearchField/ResearchFieldHeader.js       | 4 ++--
 src/components/ResearchProblem/ResearchProblemHeader.js   | 4 ++--
 .../ResearchProblemsBox/ProblemsDropdownFilter.js         | 4 ++--
 src/components/ResearchProblemsBox/ResearchProblemsBox.js | 2 +-
 src/components/TopAuthors/AuthorsBox.js                   | 2 +-
 src/components/TopContributors/ContributorsBox.js         | 2 +-
 .../TopContributors/ContributorsDropdownFilter.js         | 4 ++--
 src/components/ViewPaper/PaperHeader.js                   | 8 ++++----
 .../ComparisonComponents/AddVisualizationModal.js         | 2 +-
 .../ComparisonComponents/SingleVisualizationComponent.js  | 6 +++---
 src/testUtils.js                                          | 2 +-
 27 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/src/assets/scss/CustomBootstrap.scss b/src/assets/scss/CustomBootstrap.scss
index 898859cac..93b9db2fb 100644
--- a/src/assets/scss/CustomBootstrap.scss
+++ b/src/assets/scss/CustomBootstrap.scss
@@ -6,7 +6,7 @@
 .dropdown-item {
     outline: 0 !important; // bootstrap menus are accessible by keyboard, the background changes (so no outline needed)
 }
-.badge-lightblue {
+.badge-light {
     color: #5c6873; // it is not possible using theme variables to set the text color
 }
 
diff --git a/src/components/Comparison/AddContribution/AddContribution.js b/src/components/Comparison/AddContribution/AddContribution.js
index 488213fb6..572cb7b6c 100644
--- a/src/components/Comparison/AddContribution/AddContribution.js
+++ b/src/components/Comparison/AddContribution/AddContribution.js
@@ -322,7 +322,7 @@ export default function AddContribution(props) {
             <ModalFooter className="d-flex">
                 {props.allowCreate && (
                     <div className="flex-grow-1">
-                        <Button color="lightblue" onClick={() => props.onCreatePaper(searchPaper)}>
+                        <Button color="light" onClick={() => props.onCreatePaper(searchPaper)}>
                             Add new paper
                         </Button>
                     </div>
diff --git a/src/components/Comparison/ComparisonMetaData.js b/src/components/Comparison/ComparisonMetaData.js
index a060a326a..6ea3fea94 100644
--- a/src/components/Comparison/ComparisonMetaData.js
+++ b/src/components/Comparison/ComparisonMetaData.js
@@ -21,7 +21,7 @@ function ComparisonMetaData(props) {
                     )}
                     <div>
                         {props.metaData.createdAt ? (
-                            <span className="badge badge-lightblue mr-2">
+                            <span className="badge badge-light mr-2">
                                 <Icon icon={faCalendar} className="text-primary" />{' '}
                                 {props.metaData.createdAt ? moment(props.metaData.createdAt).format('MMMM') : ''}{' '}
                                 {props.metaData.createdAt ? moment(props.metaData.createdAt).format('YYYY') : ''}
@@ -35,7 +35,7 @@ function ComparisonMetaData(props) {
                                 {props.authors.map((author, index) =>
                                     author.id && author.id !== '' && author.orcid && author.orcid !== '' ? (
                                         <Link className="p-0" to={reverse(ROUTES.AUTHOR_PAGE, { authorId: author.id })} key={index}>
-                                            <Badge color="lightblue" className="mr-2 mb-2">
+                                            <Badge color="light" className="mr-2 mb-2">
                                                 <Icon icon={faUser} className="text-primary" /> {author.label}
                                             </Badge>
                                         </Link>
@@ -48,12 +48,12 @@ function ComparisonMetaData(props) {
                                             rel="noopener noreferrer"
                                             key={index}
                                         >
-                                            <Badge color="lightblue" className="mr-2 mb-2">
+                                            <Badge color="light" className="mr-2 mb-2">
                                                 <Icon icon={faUser} className="text-primary" /> {author.label}
                                             </Badge>
                                         </NavLink>
                                     ) : (
-                                        <Badge color="lightblue" className="mr-2 mb-2" key={index}>
+                                        <Badge color="light" className="mr-2 mb-2" key={index}>
                                             <Icon icon={faUser} className="text-secondary" /> {author.label}
                                         </Badge>
                                     )
diff --git a/src/components/Comparison/Filters/AppliedRule.js b/src/components/Comparison/Filters/AppliedRule.js
index 2c6e7d4a4..b68b9aa00 100644
--- a/src/components/Comparison/Filters/AppliedRule.js
+++ b/src/components/Comparison/Filters/AppliedRule.js
@@ -23,7 +23,7 @@ const AppliedRule = props => {
     const { propertyName, type, value, removeRule } = data;
 
     return (
-        <Badge color="lightblue" className="mr-2 mt-2 text-left" style={{ whiteSpace: 'normal' }}>
+        <Badge color="light" className="mr-2 mt-2 text-left" style={{ whiteSpace: 'normal' }}>
             <span className="font-weight-bolder">{propertyName}</span>&nbsp;
             <span className="font-italic">{stringifyType(type)}</span>
             &nbsp;
diff --git a/src/components/Comparison/ProvenanceBox/ObservatoryBox.js b/src/components/Comparison/ProvenanceBox/ObservatoryBox.js
index 81100faf8..dd0d8e5cd 100644
--- a/src/components/Comparison/ProvenanceBox/ObservatoryBox.js
+++ b/src/components/Comparison/ProvenanceBox/ObservatoryBox.js
@@ -6,7 +6,7 @@ import styled from 'styled-components';
 
 const ObservatoryBoxStyled = styled.div`
     float: right;
-    border: 2px solid ${props => props.theme.themeColors.lightblue};
+    border: 2px solid ${props => props.theme.light};
     border-radius: 5px;
     display: flex;
     padding: 5px 20px;
diff --git a/src/components/Comparison/SelectProperties.js b/src/components/Comparison/SelectProperties.js
index e2532b560..a44e3e266 100644
--- a/src/components/Comparison/SelectProperties.js
+++ b/src/components/Comparison/SelectProperties.js
@@ -42,7 +42,7 @@ function SelectProperties(props) {
                 checked={property.active}
             />
             <Tooltip message="Amount of contributions" hideDefaultIcon>
-                <Badge color="lightblue">{property.contributionAmount}</Badge>
+                <Badge color="light">{property.contributionAmount}</Badge>
             </Tooltip>
         </ListGroupItemStyled>
     ));
diff --git a/src/components/Comparison/styled.js b/src/components/Comparison/styled.js
index 096c5e557..bb0c0a5b2 100644
--- a/src/components/Comparison/styled.js
+++ b/src/components/Comparison/styled.js
@@ -201,7 +201,7 @@ export const ItemHeaderInner = styled.div`
         color: #fff !important;
     }
     &.contribution-editor {
-        background: ${props => props.theme.themeColors.lightblue};
+        background: ${props => props.theme.light};
     }
 `;
 
@@ -232,7 +232,7 @@ export const Delete = styled.button`
         background: #fff;
     }
     &.contribution-editor {
-        color: ${props => props.theme.themeColors.lightblue};
+        color: ${props => props.theme.light};
         right: -5px;
         background: ${props => props.theme.secondary};
         &:hover {
diff --git a/src/components/FeaturedComparisons/FeaturedComparisonsItem.js b/src/components/FeaturedComparisons/FeaturedComparisonsItem.js
index 6d1c16ecf..8558a0e02 100644
--- a/src/components/FeaturedComparisons/FeaturedComparisonsItem.js
+++ b/src/components/FeaturedComparisons/FeaturedComparisonsItem.js
@@ -63,7 +63,7 @@ class FeaturedComparisonsItem extends Component {
                                 <Col sm="9">
                                     <ComparisonTitle tag="h5">{this.props.title}</ComparisonTitle>
                                     <ComparisonText>{this.props.description}</ComparisonText>
-                                    <Badge color="lightblue">{contributionsLength} contributions</Badge>
+                                    <Badge color="light">{contributionsLength} contributions</Badge>
                                 </Col>
                             </Row>
                         </ComparisonBody>
diff --git a/src/components/Home/FeaturedComparisons.js b/src/components/Home/FeaturedComparisons.js
index d6ee95890..68b2c999a 100644
--- a/src/components/Home/FeaturedComparisons.js
+++ b/src/components/Home/FeaturedComparisons.js
@@ -36,7 +36,7 @@ const FeaturedComparisons = ({ researchFieldId }) => {
             <div className="mr-2 d-flex justify-content-end mb-2">
                 {researchFieldId === MISC.RESEARCH_FIELD_MAIN && (
                     <UncontrolledButtonDropdown>
-                        <DropdownToggle caret className="pl-3 pr-3" size="sm" color="lightblue">
+                        <DropdownToggle caret className="pl-3 pr-3" size="sm" color="light">
                             {stringifySort(sort)}
                         </DropdownToggle>
                         <DropdownMenu>
@@ -99,7 +99,7 @@ const FeaturedComparisons = ({ researchFieldId }) => {
                         }
                     >
                         <span>
-                            <Button color="lightblue" className="flex-shrink-0 pl-3 pr-3" style={{ marginLeft: 'auto' }} size="sm">
+                            <Button color="light" className="flex-shrink-0 pl-3 pr-3" style={{ marginLeft: 'auto' }} size="sm">
                                 {stringifySort(sort === 'featured' ? 'newest' : sort)} <Icon icon={faChevronDown} />
                             </Button>
                         </span>
diff --git a/src/components/Home/FeaturedPapers.js b/src/components/Home/FeaturedPapers.js
index 1328d41c3..651400f9c 100644
--- a/src/components/Home/FeaturedPapers.js
+++ b/src/components/Home/FeaturedPapers.js
@@ -36,7 +36,7 @@ const FeaturedPapers = ({ researchFieldId }) => {
             <div className="d-flex justify-content-end mb-2 mr-2">
                 {researchFieldId === MISC.RESEARCH_FIELD_MAIN && (
                     <UncontrolledButtonDropdown>
-                        <DropdownToggle caret className="pl-3 pr-3" size="sm" color="lightblue">
+                        <DropdownToggle caret className="pl-3 pr-3" size="sm" color="light">
                             {stringifySort(sort)}
                         </DropdownToggle>
                         <DropdownMenu>
@@ -99,7 +99,7 @@ const FeaturedPapers = ({ researchFieldId }) => {
                         }
                     >
                         <span>
-                            <Button color="lightblue" className="flex-shrink-0 pl-3 pr-3" style={{ marginLeft: 'auto' }} size="sm">
+                            <Button color="light" className="flex-shrink-0 pl-3 pr-3" style={{ marginLeft: 'auto' }} size="sm">
                                 {stringifySort(sort === 'featured' ? 'newest' : sort)} <Icon icon={faChevronDown} />
                             </Button>
                         </span>
diff --git a/src/components/Home/ResearchProblemsBox.js b/src/components/Home/ResearchProblemsBox.js
index 489485525..7bdaadcfe 100644
--- a/src/components/Home/ResearchProblemsBox.js
+++ b/src/components/Home/ResearchProblemsBox.js
@@ -32,7 +32,7 @@ const ResearchProblemsBox = ({ id }) => {
             </div>
             {researchProblems.length > 5 && (
                 <div className="text-center">
-                    <Button size="sm" onClick={() => null} color="lightblue">
+                    <Button size="sm" onClick={() => null} color="light">
                         View more
                     </Button>
                 </div>
diff --git a/src/components/LastUpdatesBox/LastUpdatesBox.js b/src/components/LastUpdatesBox/LastUpdatesBox.js
index 95029d933..2c0e6f573 100644
--- a/src/components/LastUpdatesBox/LastUpdatesBox.js
+++ b/src/components/LastUpdatesBox/LastUpdatesBox.js
@@ -36,7 +36,7 @@ const LastUpdatesBox = ({ researchFieldId }) => {
 
                     {!isLoading && activities.length > 3 && (
                         <div className="text-center">
-                            <Button size="sm" onClick={() => setOpenModal(v => !v)} color="lightblue">
+                            <Button size="sm" onClick={() => setOpenModal(v => !v)} color="light">
                                 View more
                             </Button>
                         </div>
diff --git a/src/components/ObjectStatements/ObjectStatements.js b/src/components/ObjectStatements/ObjectStatements.js
index 25e36c890..3a794ebf6 100644
--- a/src/components/ObjectStatements/ObjectStatements.js
+++ b/src/components/ObjectStatements/ObjectStatements.js
@@ -98,7 +98,7 @@ const ObjectStatements = props => {
                                 {!isLoading && hasNextPage && (
                                     <tr className="text-center">
                                         <td colspan="3">
-                                            <Button color="lightblue" size="sm" onClick={handleLoadMore}>
+                                            <Button color="light" size="sm" onClick={handleLoadMore}>
                                                 Load more statements
                                             </Button>
                                         </td>
diff --git a/src/components/Observatory/MembersBox.js b/src/components/Observatory/MembersBox.js
index 76de40bbc..dd599b7c0 100644
--- a/src/components/Observatory/MembersBox.js
+++ b/src/components/Observatory/MembersBox.js
@@ -48,7 +48,7 @@ const MembersBox = ({ observatoryId, organizationsList }) => {
                                 })}
                                 {!isLoadingMembers && members?.length > 4 && (
                                     <div className="text-center mt-3">
-                                        <Button size="sm" onClick={() => setOpenModal(v => !v)} color="lightblue">
+                                        <Button size="sm" onClick={() => setOpenModal(v => !v)} color="light">
                                             View more
                                         </Button>
                                         {openModal && (
diff --git a/src/components/Observatory/ResearchProblemsBox.js b/src/components/Observatory/ResearchProblemsBox.js
index 5eb06f72d..317e191f0 100644
--- a/src/components/Observatory/ResearchProblemsBox.js
+++ b/src/components/Observatory/ResearchProblemsBox.js
@@ -72,7 +72,7 @@ const ResearchProblemsBox = ({ observatoryId, organizationsList }) => {
                     )}
                     {problemsList?.length > 5 && (
                         <div className="text-center mt-3">
-                            <Button size="sm" onClick={() => setOpenModal(v => !v)} color="lightblue">
+                            <Button size="sm" onClick={() => setOpenModal(v => !v)} color="light">
                                 View more
                             </Button>
                             {openModal && (
diff --git a/src/components/PropertyStatements/PropertyStatements.js b/src/components/PropertyStatements/PropertyStatements.js
index 245402337..0f78680db 100644
--- a/src/components/PropertyStatements/PropertyStatements.js
+++ b/src/components/PropertyStatements/PropertyStatements.js
@@ -58,7 +58,7 @@ const PropertyStatements = ({ propertyId }) => {
                                 {!isLoading && hasNextPage && (
                                     <tr className="text-center">
                                         <td colspan="3">
-                                            <Button color="lightblue" size="sm" onClick={!isLoading ? handleLoadMore : undefined}>
+                                            <Button color="light" size="sm" onClick={!isLoading ? handleLoadMore : undefined}>
                                                 Load more statements
                                             </Button>
                                         </td>
diff --git a/src/components/ResearchField/ResearchFieldHeader.js b/src/components/ResearchField/ResearchFieldHeader.js
index d41b5639e..99ea43b57 100644
--- a/src/components/ResearchField/ResearchFieldHeader.js
+++ b/src/components/ResearchField/ResearchFieldHeader.js
@@ -151,7 +151,7 @@ const ResearchFieldHeader = ({ id }) => {
                                                         slug: subfield.label
                                                     })}
                                                 >
-                                                    <Badge color="lightblue" className="mr-2 mb-2">
+                                                    <Badge color="light" className="mr-2 mb-2">
                                                         {subfield.label}
                                                     </Badge>
                                                 </Link>
@@ -166,7 +166,7 @@ const ResearchFieldHeader = ({ id }) => {
                                                             slug: subfield.label
                                                         })}
                                                     >
-                                                        <Badge color="lightblue" className="mr-2 mb-2">
+                                                        <Badge color="light" className="mr-2 mb-2">
                                                             {subfield.label}
                                                         </Badge>
                                                     </Link>
diff --git a/src/components/ResearchProblem/ResearchProblemHeader.js b/src/components/ResearchProblem/ResearchProblemHeader.js
index 70c21e02f..1df7b5ec1 100644
--- a/src/components/ResearchProblem/ResearchProblemHeader.js
+++ b/src/components/ResearchProblem/ResearchProblemHeader.js
@@ -161,7 +161,7 @@ const ResearchProblemHeader = ({ id }) => {
                                                         slug: subfield.label
                                                     })}
                                                 >
-                                                    <Badge color="lightblue" className="mr-2 mb-2">
+                                                    <Badge color="light" className="mr-2 mb-2">
                                                         {subfield.label}
                                                     </Badge>
                                                 </Link>
@@ -176,7 +176,7 @@ const ResearchProblemHeader = ({ id }) => {
                                                             slug: subfield.label
                                                         })}
                                                     >
-                                                        <Badge color="lightblue" className="mr-2 mb-2">
+                                                        <Badge color="light" className="mr-2 mb-2">
                                                             {subfield.label}
                                                         </Badge>
                                                     </Link>
diff --git a/src/components/ResearchProblemsBox/ProblemsDropdownFilter.js b/src/components/ResearchProblemsBox/ProblemsDropdownFilter.js
index ed777cc96..e2149a677 100644
--- a/src/components/ResearchProblemsBox/ProblemsDropdownFilter.js
+++ b/src/components/ResearchProblemsBox/ProblemsDropdownFilter.js
@@ -12,7 +12,7 @@ const ProblemsDropdownFilter = ({ sort, isLoading, includeSubFields, setSort, se
         <>
             {sort === 'top' && (
                 <UncontrolledButtonDropdown>
-                    <DropdownToggle caret className="pl-3 pr-3" size="sm" color="lightblue">
+                    <DropdownToggle caret className="pl-3 pr-3" size="sm" color="light">
                         {stringifySort(sort)}
                     </DropdownToggle>
                     <DropdownMenu>
@@ -70,7 +70,7 @@ const ProblemsDropdownFilter = ({ sort, isLoading, includeSubFields, setSort, se
                     }
                 >
                     <span>
-                        <Button color="lightblue" className="flex-shrink-0 pl-3 pr-3" style={{ marginLeft: 'auto' }} size="sm">
+                        <Button color="light" className="flex-shrink-0 pl-3 pr-3" style={{ marginLeft: 'auto' }} size="sm">
                             {stringifySort(sort)} <Icon icon={faChevronDown} />
                         </Button>
                     </span>
diff --git a/src/components/ResearchProblemsBox/ResearchProblemsBox.js b/src/components/ResearchProblemsBox/ResearchProblemsBox.js
index 63d99bb93..e11dfc8de 100644
--- a/src/components/ResearchProblemsBox/ResearchProblemsBox.js
+++ b/src/components/ResearchProblemsBox/ResearchProblemsBox.js
@@ -52,7 +52,7 @@ const ResearchProblemsBox = ({ researchFieldId }) => {
             )}
             {totalElements > 5 && (
                 <div className="text-center mt-2">
-                    <Button size="sm" onClick={() => setOpenModal(v => !v)} color="lightblue">
+                    <Button size="sm" onClick={() => setOpenModal(v => !v)} color="light">
                         View more
                     </Button>
                     {openModal && <ResearchProblemsModal openModal={openModal} setOpenModal={setOpenModal} researchFieldId={researchFieldId} />}
diff --git a/src/components/TopAuthors/AuthorsBox.js b/src/components/TopAuthors/AuthorsBox.js
index 3cec20d7f..cd3259cf7 100644
--- a/src/components/TopAuthors/AuthorsBox.js
+++ b/src/components/TopAuthors/AuthorsBox.js
@@ -31,7 +31,7 @@ const AuthorsBox = ({ researchProblemId }) => {
                 {!isLoading && authors?.length === 0 && <div className="mt-4 mb-4">No authors in this research problem yet.</div>}
                 {!isLoading && authors?.length > 3 && (
                     <div className="text-center mt-3">
-                        <Button size="sm" onClick={() => setOpenModal(v => !v)} color="lightblue">
+                        <Button size="sm" onClick={() => setOpenModal(v => !v)} color="light">
                             View more
                         </Button>
                         {openModal && <AuthorsModal openModal={openModal} setOpenModal={setOpenModal} researchProblemId={researchProblemId} />}
diff --git a/src/components/TopContributors/ContributorsBox.js b/src/components/TopContributors/ContributorsBox.js
index a8844e714..a6f31dc53 100644
--- a/src/components/TopContributors/ContributorsBox.js
+++ b/src/components/TopContributors/ContributorsBox.js
@@ -42,7 +42,7 @@ const ContributorsBox = ({ researchFieldId }) => {
                 )}
                 {!isLoading && contributors?.length > 4 && (
                     <div className="text-center mt-3">
-                        <Button size="sm" onClick={() => setOpenModal(v => !v)} color="lightblue">
+                        <Button size="sm" onClick={() => setOpenModal(v => !v)} color="light">
                             View more
                         </Button>
                         {openModal && <ContributorsModal openModal={openModal} setOpenModal={setOpenModal} researchFieldId={researchFieldId} />}
diff --git a/src/components/TopContributors/ContributorsDropdownFilter.js b/src/components/TopContributors/ContributorsDropdownFilter.js
index d1f030f0b..e6329c15a 100644
--- a/src/components/TopContributors/ContributorsDropdownFilter.js
+++ b/src/components/TopContributors/ContributorsDropdownFilter.js
@@ -12,7 +12,7 @@ const ContributorsDropdownFilter = ({ sort, isLoading, includeSubFields, setSort
         <>
             {sort === 'top' && (
                 <UncontrolledButtonDropdown>
-                    <DropdownToggle caret className="pl-3 pr-3" size="sm" color="lightblue">
+                    <DropdownToggle caret className="pl-3 pr-3" size="sm" color="light">
                         {stringifySort(sort)}
                     </DropdownToggle>
                     <DropdownMenu>
@@ -70,7 +70,7 @@ const ContributorsDropdownFilter = ({ sort, isLoading, includeSubFields, setSort
                     }
                 >
                     <span>
-                        <Button color="lightblue" className="flex-shrink-0 pl-3 pr-3" style={{ marginLeft: 'auto' }} size="sm">
+                        <Button color="light" className="flex-shrink-0 pl-3 pr-3" style={{ marginLeft: 'auto' }} size="sm">
                             {stringifySort(sort)} <Icon icon={faChevronDown} />
                         </Button>
                     </span>
diff --git a/src/components/ViewPaper/PaperHeader.js b/src/components/ViewPaper/PaperHeader.js
index 787de8769..62dfe3f39 100644
--- a/src/components/ViewPaper/PaperHeader.js
+++ b/src/components/ViewPaper/PaperHeader.js
@@ -55,7 +55,7 @@ const PaperHeader = props => {
             <div className="clearfix" />
 
             {viewPaper.publicationMonth || viewPaper.publicationYear ? (
-                <span className="badge badge-lightblue mr-2">
+                <span className="badge badge-light mr-2">
                     <Icon icon={faCalendar} className="text-primary" />{' '}
                     {viewPaper.publicationMonth ? moment(viewPaper.publicationMonth, 'M').format('MMMM') : ''}{' '}
                     {viewPaper.publicationYear ? viewPaper.publicationYear : ''}
@@ -67,7 +67,7 @@ const PaperHeader = props => {
                 <Link
                     to={reverseWithSlug(ROUTES.RESEARCH_FIELD, { researchFieldId: viewPaper.researchField.id, slug: viewPaper.researchField.label })}
                 >
-                    <span className="badge badge-lightblue mr-2 mb-2">
+                    <span className="badge badge-light mr-2 mb-2">
                         <Icon icon={faBars} className="text-primary" /> {viewPaper.researchField.label}
                     </span>
                 </Link>
@@ -75,12 +75,12 @@ const PaperHeader = props => {
             {viewPaper.authors.map((author, index) =>
                 author.classes && author.classes.includes(CLASSES.AUTHOR) ? (
                     <Link key={index} to={reverse(ROUTES.AUTHOR_PAGE, { authorId: author.id })}>
-                        <Badge color="lightblue" className="mr-2 mb-2" key={index}>
+                        <Badge color="light" className="mr-2 mb-2" key={index}>
                             <Icon icon={faUser} className="text-primary" /> {author.label}
                         </Badge>
                     </Link>
                 ) : (
-                    <Badge color="lightblue" className="mr-2 mb-2" key={index}>
+                    <Badge color="light" className="mr-2 mb-2" key={index}>
                         <Icon icon={faUser} className="text-secondary" /> {author.label}
                     </Badge>
                 )
diff --git a/src/libs/selfVisModel/ComparisonComponents/AddVisualizationModal.js b/src/libs/selfVisModel/ComparisonComponents/AddVisualizationModal.js
index c673c590c..bbe706e79 100644
--- a/src/libs/selfVisModel/ComparisonComponents/AddVisualizationModal.js
+++ b/src/libs/selfVisModel/ComparisonComponents/AddVisualizationModal.js
@@ -21,7 +21,7 @@ const TabButtons = styled(Row)`
 const TabButton = styled.div`
     cursor: pointer;
     padding: 4px 20px;
-    background-color: ${props => (props.active ? props.theme.primary : props.theme.themeColors.lightblue)};
+    background-color: ${props => (props.active ? props.theme.primary : props.theme.light)};
     border: ${props => (props.active ? 'none' : '1px solid ' + props.theme.lightDarker)};
     border-bottom: 0;
     color: ${props => (props.active ? '#ffffff' : '')};
diff --git a/src/libs/selfVisModel/ComparisonComponents/SingleVisualizationComponent.js b/src/libs/selfVisModel/ComparisonComponents/SingleVisualizationComponent.js
index 307d2b1b0..1247fc41b 100644
--- a/src/libs/selfVisModel/ComparisonComponents/SingleVisualizationComponent.js
+++ b/src/libs/selfVisModel/ComparisonComponents/SingleVisualizationComponent.js
@@ -113,7 +113,7 @@ const SingleVisualizationComponent = props => {
                             <b>Meta Information:</b> <br />
                             <div className="mb-2">
                                 <i>Created on: </i>
-                                <span className="badge badge-lightblue mr-2">
+                                <span className="badge badge-light mr-2">
                                     <Icon icon={faCalendar} className="text-primary" />{' '}
                                     {props.input.created_at ? moment(props.input.created_at).format('dddd, MMMM Do YYYY') : ''}
                                 </span>
@@ -129,14 +129,14 @@ const SingleVisualizationComponent = props => {
                                                     to={reverse(ROUTES.AUTHOR_PAGE, { authorId: author.id })}
                                                     key={`author${author.id}`}
                                                 >
-                                                    <Badge color="lightblue">
+                                                    <Badge color="light">
                                                         <Icon icon={faUser} className="text-primary" /> {author.label}
                                                     </Badge>
                                                 </Link>
                                             );
                                         } else {
                                             return (
-                                                <Badge key={`author${author.id}`} color="lightblue" className="mr-2 mb-2">
+                                                <Badge key={`author${author.id}`} color="light" className="mr-2 mb-2">
                                                     <Icon icon={faUser} /> {author.label}
                                                 </Badge>
                                             );
diff --git a/src/testUtils.js b/src/testUtils.js
index 4f9577a2e..588e97fc1 100644
--- a/src/testUtils.js
+++ b/src/testUtils.js
@@ -21,7 +21,7 @@ export const theme = {
     borderWidth: '1px',
     borderRadius: '6px',
     themeColors: {
-        lightblue: 'rgb(233, 235, 242)',
+        light: 'rgb(233, 235, 242)',
         secondary: 'rgb(128, 134, 155)',
         secondaryDarker: 'rgb(80, 85, 101)',
         primaryDarker: 'rgb(198, 29, 29)'

From bdce0e515cc9c90f404ea7cbeb28d9017ebea8f6 Mon Sep 17 00:00:00 2001
From: Allard Oelen <oelen@l3s.de>
Date: Thu, 8 Apr 2021 17:27:05 +0200
Subject: [PATCH 07/10] Replace button dark and avatar border

---
 src/components/ComparisonPopup/ComparisonPopup.js      |  6 +++---
 src/components/ContributorCard/ContributorCard.js      |  2 +-
 src/components/Layout/Header/Header.js                 |  4 ++--
 .../StatementOptionButton/StatementOptionButton.js     |  2 +-
 src/components/StatementBrowser/styled.js              | 10 +++++-----
 src/components/UserSettings/GeneralSettings.js         |  2 +-
 src/pages/UserProfile.js                               |  2 +-
 src/testUtils.js                                       |  4 ++--
 8 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/ComparisonPopup/ComparisonPopup.js b/src/components/ComparisonPopup/ComparisonPopup.js
index 29dde6651..c4ef1259a 100644
--- a/src/components/ComparisonPopup/ComparisonPopup.js
+++ b/src/components/ComparisonPopup/ComparisonPopup.js
@@ -93,7 +93,7 @@ class ComparisonPopup extends Component {
                     <Container>
                         {!this.state.showComparisonBox ? (
                             <ComparisonBoxButton color="primary" className="ml-auto" onClick={this.toggleComparisonBox}>
-                                <Badge color="primaryDarker" className="pl-2 pr-2">
+                                <Badge color="primary-darker" className="pl-2 pr-2">
                                     {contributionAmount}
                                 </Badge>{' '}
                                 Compare contributions <Icon icon={faChevronUp} />
@@ -101,7 +101,7 @@ class ComparisonPopup extends Component {
                         ) : (
                             <ComparisonBox className="ml-auto">
                                 <Header onClick={this.toggleComparisonBox}>
-                                    <Badge color="primaryDarker" className="pl-2 pr-2 mr-1">
+                                    <Badge color="primary-darker" className="pl-2 pr-2 mr-1">
                                         {contributionAmount}
                                     </Badge>{' '}
                                     Compare contributions
@@ -146,7 +146,7 @@ class ComparisonPopup extends Component {
                                 </List>
                                 <div className="w-100 text-center">
                                     <Link to={comparisonUrl}>
-                                        <StartComparison color="primaryDarker" className="mb-2">
+                                        <StartComparison color="primary-darker" className="mb-2">
                                             Start comparison
                                         </StartComparison>
                                     </Link>
diff --git a/src/components/ContributorCard/ContributorCard.js b/src/components/ContributorCard/ContributorCard.js
index 2486c41da..5a9cdb9f3 100644
--- a/src/components/ContributorCard/ContributorCard.js
+++ b/src/components/ContributorCard/ContributorCard.js
@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
 const StyledGravatar = styled(Gravatar)`
-    border: 3px solid ${props => props.theme.avatarBorderColor};
+    border: 3px solid ${props => props.theme.dark};
     cursor: pointer;
 `;
 
diff --git a/src/components/Layout/Header/Header.js b/src/components/Layout/Header/Header.js
index 007cdffd1..c8181a2ee 100644
--- a/src/components/Layout/Header/Header.js
+++ b/src/components/Layout/Header/Header.js
@@ -80,7 +80,7 @@ const StyledLink = styled(Link)`
 `;
 
 const StyledGravatar = styled(Gravatar)`
-    border: 3px solid ${props => props.theme.avatarBorderColor};
+    border: 3px solid ${props => props.theme.dark};
     cursor: pointer;
 `;
 
@@ -112,7 +112,7 @@ const StyledAuthTooltip = styled(Tooltip)`
 
         .btn {
             border-color: ${props => props.theme.secondary};
-            background-color: ${props => props.theme.buttonDark};
+            background-color: ${props => props.theme.dark};
 
             &:hover {
                 background-color: ${props => props.theme.secondaryDarker};
diff --git a/src/components/StatementBrowser/StatementOptionButton/StatementOptionButton.js b/src/components/StatementBrowser/StatementOptionButton/StatementOptionButton.js
index f394c78f2..6584e0d4f 100644
--- a/src/components/StatementBrowser/StatementOptionButton/StatementOptionButton.js
+++ b/src/components/StatementBrowser/StatementOptionButton/StatementOptionButton.js
@@ -11,7 +11,7 @@ export const OptionButton = styled(Button)`
     display: inline-block !important;
     border-radius: 100% !important;
     background-color: ${props => props.theme.lightDarker}!important;
-    color: ${props => props.theme.buttonDark}!important;
+    color: ${props => props.theme.dark}!important;
 
     & .icon-wrapper {
         display: flex !important;
diff --git a/src/components/StatementBrowser/styled.js b/src/components/StatementBrowser/styled.js
index 432306d1a..19c671448 100644
--- a/src/components/StatementBrowser/styled.js
+++ b/src/components/StatementBrowser/styled.js
@@ -83,7 +83,7 @@ export const StyledDropdownItem = styled(DropdownItem)`
 /* Template Wizard */
 export const StyledButton = styled(Button)`
     border-color: #ced4da !important;
-    color: ${props => props.theme.buttonDark} !important;
+    color: ${props => props.theme.dark} !important;
     background: ${props => props.theme.lightDarker} !important;
     &:hover {
         color: #fff !important;
@@ -100,7 +100,7 @@ export const StyledDropdownToggle = styled(DropdownToggle).withConfig({
     border-top-right-radius: ${props => (props.disableBorderRadiusRight ? '0' : '4px !important')};
     border-bottom-right-radius: ${props => (props.disableBorderRadiusRight ? '0' : '4px !important')};
     background: ${props => props.theme.lightDarker} !important;
-    color: ${props => props.theme.buttonDark} !important;
+    color: ${props => props.theme.dark} !important;
     border-color: #ced4da !important;
     &:hover {
         color: #fff !important;
@@ -304,14 +304,14 @@ export const PropertyStyle = styled.div`
         visibility: visible;
         opacity: 1;
         span {
-            color: ${props => props.theme.buttonDark};
+            color: ${props => props.theme.dark};
         }
     }
     &:focus-within .propertyOption {
         visibility: visible;
         opacity: 1;
         span {
-            color: ${props => props.theme.buttonDark};
+            color: ${props => props.theme.dark};
         }
     }
 `;
@@ -372,7 +372,7 @@ export const TemplateHeaderStyle = styled.div`
         color: ${props => props.theme.lightDarker};
         opacity: 0.9;
         .span {
-            background-color: ${props => props.theme.buttonDark};
+            background-color: ${props => props.theme.dark};
             color: ${props => props.theme.secondary};
         }
     }
diff --git a/src/components/UserSettings/GeneralSettings.js b/src/components/UserSettings/GeneralSettings.js
index 2ebc1ccc2..710432207 100644
--- a/src/components/UserSettings/GeneralSettings.js
+++ b/src/components/UserSettings/GeneralSettings.js
@@ -12,7 +12,7 @@ import Gravatar from 'react-gravatar';
 import styled from 'styled-components';
 
 const StyledGravatar = styled(Gravatar)`
-    border: 3px solid ${props => props.theme.avatarBorderColor};
+    border: 3px solid ${props => props.theme.dark};
 `;
 
 class GeneralSettings extends Component {
diff --git a/src/pages/UserProfile.js b/src/pages/UserProfile.js
index 5e7472060..231ecdbc9 100644
--- a/src/pages/UserProfile.js
+++ b/src/pages/UserProfile.js
@@ -16,7 +16,7 @@ import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 const StyledGravatar = styled(Gravatar)`
-    border: 3px solid ${props => props.theme.avatarBorderColor};
+    border: 3px solid ${props => props.theme.dark};
 `;
 
 const StyledOrganizationCard = styled.div`
diff --git a/src/testUtils.js b/src/testUtils.js
index 588e97fc1..840386ce1 100644
--- a/src/testUtils.js
+++ b/src/testUtils.js
@@ -47,8 +47,8 @@ export const theme = {
     badgePaddingY: '0.3rem',
     badgePaddingX: '0.8rem',
     listGroupBorderColor: 'rgba(0, 0, 0, 0.125)',
-    buttonDark: 'rgb(91, 97, 118)',
-    avatarBorderColor: 'rgb(103, 109, 129)'
+    dark: 'rgb(91, 97, 118)',
+    dark: 'rgb(103, 109, 129)'
 };
 
 // wrap the components with the required providers

From e6095e4f3863304e208e1f8187cc305d5c6b41a1 Mon Sep 17 00:00:00 2001
From: Allard Oelen <oelen@l3s.de>
Date: Thu, 8 Apr 2021 17:36:38 +0200
Subject: [PATCH 08/10] Replace ORKG-primary-color

---
 .../AddPaper/Abstract/AbstractAnnotatorView.js         |  2 +-
 .../AddPaper/Contributions/ContributionItemList.js     |  4 ++--
 .../AddPaper/Contributions/ContributionsHelpTour.js    |  2 +-
 src/components/AddPaper/Contributions/styled.js        | 10 +++++-----
 src/components/AddPaper/GeneralData/GeneralData.js     |  4 ++--
 src/components/Comparison/ComparisonVersions.js        |  2 +-
 src/components/ComparisonPopup/styled.js               |  2 +-
 src/components/Home/Benefits.js                        |  2 +-
 src/components/Home/ObservatoriesCarousel.js           |  2 +-
 src/components/LastUpdatesBox/styled.js                |  2 +-
 .../ObservatoriesCarousel/ObservatoriesCarousel.js     |  2 +-
 src/components/PdfTextAnnotation/Help.js               |  4 ++--
 src/components/StatementBrowser/styled.js              |  2 +-
 src/components/ViewPaper/EditDialog/styled.js          |  2 +-
 .../RenderingComponents/styledComponents.js            |  4 ++--
 src/pages/AddPaper.js                                  |  2 +-
 src/pages/Observatories/Observatories.js               |  6 +++---
 src/pages/UserProfile.js                               |  2 +-
 src/pages/UserSettings.js                              |  2 +-
 src/testUtils.js                                       |  2 +-
 20 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/components/AddPaper/Abstract/AbstractAnnotatorView.js b/src/components/AddPaper/Abstract/AbstractAnnotatorView.js
index 9858347f4..d1bf786aa 100644
--- a/src/components/AddPaper/Abstract/AbstractAnnotatorView.js
+++ b/src/components/AddPaper/Abstract/AbstractAnnotatorView.js
@@ -121,7 +121,7 @@ class AbstractAnnotatorView extends Component {
                                                 width: '100%',
                                                 background: getTrackBackground({
                                                     values: this.props.certaintyThreshold,
-                                                    colors: [this.props.theme.orkgPrimaryColor, this.props.theme.lightDarker],
+                                                    colors: [this.props.theme.primary, this.props.theme.lightDarker],
                                                     min: 0,
                                                     max: 1
                                                 })
diff --git a/src/components/AddPaper/Contributions/ContributionItemList.js b/src/components/AddPaper/Contributions/ContributionItemList.js
index aeb8fa5a0..e338e0412 100644
--- a/src/components/AddPaper/Contributions/ContributionItemList.js
+++ b/src/components/AddPaper/Contributions/ContributionItemList.js
@@ -15,7 +15,7 @@ import { ActionButton } from 'components/AddPaper/Contributions/styled';
 
 export const StyledInput = styled(Input)`
     background: #fff;
-    color: ${props => props.theme.orkgPrimaryColor};
+    color: ${props => props.theme.primary};
     outline: 0;
     border: dotted 2px ${props => props.theme.listGroupBorderColor};
     border-radius: 0;
@@ -25,7 +25,7 @@ export const StyledInput = styled(Input)`
 
     &:focus {
         background: #fff;
-        color: ${props => props.theme.orkgPrimaryColor};
+        color: ${props => props.theme.primary};
         outline: 0;
         border: dotted 2px ${props => props.theme.listGroupBorderColor};
         padding: 0 4px;
diff --git a/src/components/AddPaper/Contributions/ContributionsHelpTour.js b/src/components/AddPaper/Contributions/ContributionsHelpTour.js
index a480c4aff..de4c38f9a 100644
--- a/src/components/AddPaper/Contributions/ContributionsHelpTour.js
+++ b/src/components/AddPaper/Contributions/ContributionsHelpTour.js
@@ -136,7 +136,7 @@ class ContributionsHelpTour extends Component {
                             : [])
                     ]}
                     showNumber={false}
-                    accentColor={this.props.theme.orkgPrimaryColor}
+                    accentColor={this.props.theme.primary}
                     rounded={10}
                     onRequestClose={this.requestCloseTour}
                     isOpen={this.props.isTourOpen}
diff --git a/src/components/AddPaper/Contributions/styled.js b/src/components/AddPaper/Contributions/styled.js
index a3d1f8f51..6ea16ca26 100644
--- a/src/components/AddPaper/Contributions/styled.js
+++ b/src/components/AddPaper/Contributions/styled.js
@@ -54,8 +54,8 @@ export const StyledHorizontalContributionsList = styled.ul`
                 text-decoration: none;
             }
             &.active-contribution {
-                background: ${props => props.theme.orkgPrimaryColor};
-                border: 1px solid ${props => props.theme.orkgPrimaryColor};
+                background: ${props => props.theme.primary};
+                border: 1px solid ${props => props.theme.primary};
                 color: #fff;
                 cursor: initial !important;
             }
@@ -86,8 +86,8 @@ export const AddContribution = styled(Button)`
         }
 
         &:hover {
-            background-color: ${props => props.theme.orkgPrimaryColor};
-            border: 1px solid ${props => props.theme.orkgPrimaryColor};
+            background-color: ${props => props.theme.primary};
+            border: 1px solid ${props => props.theme.primary};
             color: #fff;
         }
     }
@@ -144,7 +144,7 @@ export const StyledStatementItem = styled(ListGroupItem)`
     & > .statementItemIcon {
         font-size: 18px;
         margin-top: 3px;
-        color: ${props => props.theme.orkgPrimaryColor};
+        color: ${props => props.theme.primary};
 
         &.open {
             color: #fff;
diff --git a/src/components/AddPaper/GeneralData/GeneralData.js b/src/components/AddPaper/GeneralData/GeneralData.js
index d84dfae2b..edf2c24ef 100644
--- a/src/components/AddPaper/GeneralData/GeneralData.js
+++ b/src/components/AddPaper/GeneralData/GeneralData.js
@@ -558,7 +558,7 @@ const GeneralData = () => {
                         }
                     ]}
                     showNumber={false}
-                    accentColor={theme.orkgPrimaryColor}
+                    accentColor={theme.primary}
                     rounded={10}
                     onRequestClose={requestCloseTour}
                     isOpen={isTourOpen}
@@ -579,7 +579,7 @@ const GeneralData = () => {
                         }
                     ]}
                     showNumber={false}
-                    accentColor={theme.orkgPrimaryColor}
+                    accentColor={theme.primary}
                     rounded={10}
                     onRequestClose={() => {
                         setShowHelpButton(false);
diff --git a/src/components/Comparison/ComparisonVersions.js b/src/components/Comparison/ComparisonVersions.js
index 288fbf9d2..2bf3e6904 100644
--- a/src/components/Comparison/ComparisonVersions.js
+++ b/src/components/Comparison/ComparisonVersions.js
@@ -26,7 +26,7 @@ const StyledActivity = styled.div`
         display: inline-block;
     }
     a {
-        color: ${props => props.theme.ORKGPrimaryColor};
+        color: ${props => props.theme.primary};
     }
 
     &:last-child {
diff --git a/src/components/ComparisonPopup/styled.js b/src/components/ComparisonPopup/styled.js
index f59f2a736..87ce6c374 100644
--- a/src/components/ComparisonPopup/styled.js
+++ b/src/components/ComparisonPopup/styled.js
@@ -11,7 +11,7 @@ export const ComparisonBoxButton = styled(Button)`
 `;
 
 export const ComparisonBox = styled.div`
-    background: ${props => props.theme.orkgPrimaryColor};
+    background: ${props => props.theme.primary};
     border-radius: 11px 11px 0 0;
     width: 340px;
     min-height: 390px;
diff --git a/src/components/Home/Benefits.js b/src/components/Home/Benefits.js
index 64d74a043..eee0bca11 100644
--- a/src/components/Home/Benefits.js
+++ b/src/components/Home/Benefits.js
@@ -18,7 +18,7 @@ const CarouselContainer = styled.div`
         width: 10px !important;
         height: 10px !important;
         border-radius: 100% !important;
-        background-color: ${props => props.theme.orkgPrimaryColor} !important;
+        background-color: ${props => props.theme.primary} !important;
     }
 `;
 
diff --git a/src/components/Home/ObservatoriesCarousel.js b/src/components/Home/ObservatoriesCarousel.js
index 295de4b0e..1f33734d3 100644
--- a/src/components/Home/ObservatoriesCarousel.js
+++ b/src/components/Home/ObservatoriesCarousel.js
@@ -19,7 +19,7 @@ const CarouselContainer = styled.div`
         width: 10px !important;
         height: 10px !important;
         border-radius: 100% !important;
-        background-color: ${props => props.theme.orkgPrimaryColor} !important;
+        background-color: ${props => props.theme.primary} !important;
     }
 `;
 
diff --git a/src/components/LastUpdatesBox/styled.js b/src/components/LastUpdatesBox/styled.js
index f2b35c2b7..e11bb32b4 100644
--- a/src/components/LastUpdatesBox/styled.js
+++ b/src/components/LastUpdatesBox/styled.js
@@ -24,7 +24,7 @@ export const StyledActivity = styled.div`
         margin-top: 3px;
     }
     a {
-        color: ${props => props.theme.ORKGPrimaryColor};
+        color: ${props => props.theme.primary};
     }
 
     &:last-child {
diff --git a/src/components/ObservatoriesCarousel/ObservatoriesCarousel.js b/src/components/ObservatoriesCarousel/ObservatoriesCarousel.js
index bc59aeaaa..b0f39d959 100644
--- a/src/components/ObservatoriesCarousel/ObservatoriesCarousel.js
+++ b/src/components/ObservatoriesCarousel/ObservatoriesCarousel.js
@@ -19,7 +19,7 @@ const CarouselContainer = styled.div`
         width: 10px !important;
         height: 10px !important;
         border-radius: 100% !important;
-        background-color: ${props => props.theme.orkgPrimaryColor} !important;
+        background-color: ${props => props.theme.primary} !important;
     }
 `;
 
diff --git a/src/components/PdfTextAnnotation/Help.js b/src/components/PdfTextAnnotation/Help.js
index db4420b11..d30b56a68 100644
--- a/src/components/PdfTextAnnotation/Help.js
+++ b/src/components/PdfTextAnnotation/Help.js
@@ -19,7 +19,7 @@ const Help = props => {
         props.setIsOpen(false);
     };
 
-    const tourStyle = { borderTop: `4px solid ${themeContext.orkgPrimaryColor}` };
+    const tourStyle = { borderTop: `4px solid ${themeContext.primary}` };
 
     const tourSteps = [
         {
@@ -115,7 +115,7 @@ const Help = props => {
                 onAfterOpen={disableBody}
                 onBeforeClose={enableBody}
                 showNumber={false}
-                accentColor={themeContext.orkgPrimaryColor}
+                accentColor={themeContext.primary}
                 rounded={10}
                 onRequestClose={handleCloseTour}
                 isOpen={props.isOpen}
diff --git a/src/components/StatementBrowser/styled.js b/src/components/StatementBrowser/styled.js
index 19c671448..2c775f35f 100644
--- a/src/components/StatementBrowser/styled.js
+++ b/src/components/StatementBrowser/styled.js
@@ -18,7 +18,7 @@ export const StyledStatementItem = styled(ListGroupItem)`
     & > .statementItemIcon {
         font-size: 18px;
         margin-top: 3px;
-        color: ${props => props.theme.orkgPrimaryColor};
+        color: ${props => props.theme.primary};
 
         &.open {
             color: #fff;
diff --git a/src/components/ViewPaper/EditDialog/styled.js b/src/components/ViewPaper/EditDialog/styled.js
index 6fe2ac936..db4284220 100644
--- a/src/components/ViewPaper/EditDialog/styled.js
+++ b/src/components/ViewPaper/EditDialog/styled.js
@@ -34,7 +34,7 @@ export const StyledStatementItem = styled(ListGroupItem)`
     & > .statementItemIcon {
         font-size: 18px;
         margin-top: 3px;
-        color: ${props => props.theme.orkgPrimaryColor};
+        color: ${props => props.theme.primary};
 
         &.open {
             color: #fff;
diff --git a/src/libs/selfVisModel/RenderingComponents/styledComponents.js b/src/libs/selfVisModel/RenderingComponents/styledComponents.js
index 407fc8dc1..bd702c067 100644
--- a/src/libs/selfVisModel/RenderingComponents/styledComponents.js
+++ b/src/libs/selfVisModel/RenderingComponents/styledComponents.js
@@ -125,7 +125,7 @@ export const MetaMapperSelectorSimple = styled.div`
 
 export const PropertyCellInput = styled(Input)`
     background: #fff;
-    color: ${props => props.theme.orkgPrimaryColor};
+    color: ${props => props.theme.primary};
     outline: 0;
     border: dotted 2px ${props => props.theme.listGroupBorderColor};
     border-radius: 0;
@@ -137,7 +137,7 @@ export const PropertyCellInput = styled(Input)`
 
     &:focus {
         background: #fff;
-        color: ${props => props.theme.orkgPrimaryColor};
+        color: ${props => props.theme.primary};
         outline: 0;
         border: dotted 2px ${props => props.theme.listGroupBorderColor};
         padding: 0 4px;
diff --git a/src/pages/AddPaper.js b/src/pages/AddPaper.js
index e81ded1df..e4fcf4da2 100644
--- a/src/pages/AddPaper.js
+++ b/src/pages/AddPaper.js
@@ -51,7 +51,7 @@ const HelpIcon = styled(Icon)`
     height: 48px;
     width: 48px !important;
     z-index: 9999;
-    background-color: ${props => props.theme.orkgPrimaryColor};
+    background-color: ${props => props.theme.primary};
     display: inline-flex;
     -webkit-justify-content: center;
     justify-content: center;
diff --git a/src/pages/Observatories/Observatories.js b/src/pages/Observatories/Observatories.js
index 8408a4777..069aef443 100644
--- a/src/pages/Observatories/Observatories.js
+++ b/src/pages/Observatories/Observatories.js
@@ -18,7 +18,7 @@ const TabPaneStyled = styled(TabPane)`
 
 export const StyledResearchFieldWrapper = styled.div`
     border-radius: ${props => props.theme.borderRadius};
-    border: ${props => props.theme.borderWidth} solid ${props => props.theme.orkgPrimaryColor};
+    border: ${props => props.theme.borderWidth} solid ${props => props.theme.primary};
     padding: 15px 30px;
 `;
 
@@ -45,10 +45,10 @@ const StyledResearchFieldItem = styled(NavLink)`
     }
 
     &.active {
-        background: ${props => props.theme.orkgPrimaryColor};
+        background: ${props => props.theme.primary};
         color: #fff;
         cursor: initial !important;
-        border-color: ${props => props.theme.orkgPrimaryColor};
+        border-color: ${props => props.theme.primary};
     }
 `;
 
diff --git a/src/pages/UserProfile.js b/src/pages/UserProfile.js
index 231ecdbc9..ebc51392e 100644
--- a/src/pages/UserProfile.js
+++ b/src/pages/UserProfile.js
@@ -70,7 +70,7 @@ const StyledActivity = styled.div`
         display: inline-block;
     }
     a {
-        color: ${props => props.theme.ORKGPrimaryColor};
+        color: ${props => props.theme.primary};
     }
 
     &:last-child {
diff --git a/src/pages/UserSettings.js b/src/pages/UserSettings.js
index 74d6cf139..7d66da24a 100644
--- a/src/pages/UserSettings.js
+++ b/src/pages/UserSettings.js
@@ -19,7 +19,7 @@ export const StyledSettingsMenu = styled.div`
 
         &.active,
         &:hover {
-            background: ${props => props.theme.orkgPrimaryColor};
+            background: ${props => props.theme.primary};
             color: #fff;
         }
         &.active a {
diff --git a/src/testUtils.js b/src/testUtils.js
index 840386ce1..e188b8c61 100644
--- a/src/testUtils.js
+++ b/src/testUtils.js
@@ -8,7 +8,7 @@ import { ThemeProvider } from 'styled-components';
 // https://github.com/adamgruber/sass-extract-js/issues/12
 export const theme = {
     orkgBorderRadius: '6px',
-    orkgPrimaryColor: 'rgb(232, 97, 97)',
+    primary: 'rgb(232, 97, 97)',
     orkgBorderWidth: '1px',
     primary: 'rgb(232, 97, 97)',
     secondary: 'rgb(128, 134, 155)',

From 6ad6257fa1dda62b334912f6345f6d7d985d491a Mon Sep 17 00:00:00 2001
From: Kheir Eddine Farfar <kfarfar@gmail.com>
Date: Fri, 9 Apr 2021 11:09:26 +0200
Subject: [PATCH 09/10] update theme colors in testUtils

---
 src/assets/scss/ThemeVariables.scss |  2 +-
 src/testUtils.js                    | 17 ++++++-----------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/assets/scss/ThemeVariables.scss b/src/assets/scss/ThemeVariables.scss
index e9ddc2214..92dcd6b97 100644
--- a/src/assets/scss/ThemeVariables.scss
+++ b/src/assets/scss/ThemeVariables.scss
@@ -7,7 +7,7 @@ $light: #e9ebf2;
 $light-lighter: #f8f9fb;
 $light-darker: #dbdde5;
 $dark: #5b6176;
-$body-bg: #e9ebf2;
+$body-bg: $light;
 $body-color: #4f4f4f;
 $border-width: 1px;
 $border-radius: 6px;
diff --git a/src/testUtils.js b/src/testUtils.js
index e188b8c61..0db931d2c 100644
--- a/src/testUtils.js
+++ b/src/testUtils.js
@@ -7,24 +7,21 @@ import { ThemeProvider } from 'styled-components';
 
 // https://github.com/adamgruber/sass-extract-js/issues/12
 export const theme = {
-    orkgBorderRadius: '6px',
-    primary: 'rgb(232, 97, 97)',
-    orkgBorderWidth: '1px',
     primary: 'rgb(232, 97, 97)',
+    primaryDarker: 'rgb(198, 29, 29)',
     secondary: 'rgb(128, 134, 155)',
     secondaryDarker: 'rgb(80, 85, 101)',
-    light: 'rgb(233, 236, 239)',
+    light: 'rgb(233, 235, 242)',
     lightLighter: 'rgb(248, 249, 251)',
     lightDarker: 'rgb(219, 221, 229)',
+    dark: 'rgb(91, 97, 118)',
     bodyBg: 'rgb(233, 235, 242)',
     bodyColor: 'rgb(79, 79, 79)',
     borderWidth: '1px',
     borderRadius: '6px',
     themeColors: {
-        light: 'rgb(233, 235, 242)',
-        secondary: 'rgb(128, 134, 155)',
-        secondaryDarker: 'rgb(80, 85, 101)',
-        primaryDarker: 'rgb(198, 29, 29)'
+        primaryDarker: 'rgb(198, 29, 29)',
+        secondaryDarker: 'rgb(80, 85, 101)'
     },
     formFeedbackFontSize: '90%',
     inputBorderRadius: '6px',
@@ -46,9 +43,7 @@ export const theme = {
     badgeFontWeight: 500,
     badgePaddingY: '0.3rem',
     badgePaddingX: '0.8rem',
-    listGroupBorderColor: 'rgba(0, 0, 0, 0.125)',
-    dark: 'rgb(91, 97, 118)',
-    dark: 'rgb(103, 109, 129)'
+    listGroupBorderColor: 'rgba(0, 0, 0, 0.125)'
 };
 
 // wrap the components with the required providers

From 9e2dfd3fdbfaad53403450c84925553edbad27c3 Mon Sep 17 00:00:00 2001
From: Kheir Eddine Farfar <kfarfar@gmail.com>
Date: Fri, 9 Apr 2021 11:38:27 +0200
Subject: [PATCH 10/10] chore

---
 src/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils.js b/src/utils.js
index c53d98707..82c4c0075 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -554,7 +554,7 @@ export const similarPropertiesByLabel = (propertyLabel, propertyData) => {
 
 /**
  * Compare input value to select options
- * Builtins https://github.com/JedWatson/react-select/blob/d2a820efc70835adf864169eebc76947783a15e2/packages/react-select/src/Creatable.js
+ * Built-ins https://github.com/JedWatson/react-select/blob/d2a820efc70835adf864169eebc76947783a15e2/packages/react-select/src/Creatable.js
  * @param {String} inputValue candidate label
  * @param {Object} option option
  */