Merge branch '535-renaming-sass-colors-for-consistency' into 'master'

refactor: update theme variables Closes #535 See merge request TIBHannover/orkg/orkg-frontend!551
TIBHannover · Apr 9, 2021 · d64f31c · d64f31c
2 parents 7741e37 + 9e2dfd3
commit d64f31c
Show file tree

Hide file tree

Showing 122 changed files with 340 additions and 350 deletions.
diff --git 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/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
@@ -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;
-$body-bg: #e9ebf2;
-$body-color: #4f4f4f; //#646464;
-$border-width: $ORKG-border-width;
-$border-radius: $ORKG-border-radius;
-
-// Add a new theme color
+$primary: #e86161;
+$primary-darker: darken($primary, 20%);
+$secondary: #80869b;
+$secondary-darker: darken($secondary, 20%);
+$light: #e9ebf2;
+$light-lighter: #f8f9fb;
+$light-darker: #dbdde5;
+$dark: #5b6176;
+$body-bg: $light;
+$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;
diff --git 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.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
@@ -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/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/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
@@ -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,9 +35,9 @@ 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};
+            background-color: ${props => props.theme.lightLighter};
             position: relative;
             box-sizing: border-box;
             padding: 7px 15px 7px 15px;
@@ -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;
             }
@@ -69,8 +69,8 @@ export const StyledHorizontalContributionsList = styled.ul`
 export const AddContribution = styled(Button)`
     &&& {
         padding: 0;
-        border: 1px solid ${props => props.theme.ultraLightBlueDarker};
-        background-color: ${props => props.theme.ultraLightBlue};
+        border: 1px solid ${props => props.theme.lightDarker};
+        background-color: ${props => props.theme.lightLighter};
         border-radius: 60px;
         margin: 0 5px;
         cursor: pointer;
@@ -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;
         }
     }
@@ -131,8 +131,8 @@ 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;
-    border-color: ${props => props.theme.ultraLightBlueDarker} !important;
+    background-color: ${props => props.theme.lightLighter} !important;
+    border-color: ${props => props.theme.lightDarker} !important;
     overflow-wrap: break-word;
     word-break: break-all;
     flex: 1;
@@ -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;
@@ -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/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/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/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
@@ -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,13 +48,13 @@ 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}>
-                                            <Icon icon={faUser} className="text-darkblue" /> {author.label}
+                                        <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/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/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;
@@ -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/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/PropertyValue.js b/src/components/Comparison/PropertyValue.js
@@ -16,10 +16,10 @@ 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.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/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;
@@ -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
@@ -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/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>
     ));