Merge pull request #972 from CDLUC3/feature/964/change-remove-buttons-to-secondary

Changed 'remove' buttons in Repository and Metadata Standards selectors

Author: jupiter007

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Updated
 - Updated Project Details subdomains field to only display once a user selects a research domain [#947]
+- Updated `Remove` buttons to be `secondary` buttons, rather than `red` [#964]
 
 ### Fixed
 

components/QuestionAdd/MetaDataStandards.tsx

@@ -202,7 +202,7 @@ const MetaDataStandardsSelector = ({
                   <Button
                     onClick={removeAllStandards}
                     isDisabled={selectedCount === 0}
-                    className="danger medium"
+                    className="secondary medium"
                   >
                     {Global('buttons.removeAll')}
                   </Button>
@@ -219,7 +219,7 @@ const MetaDataStandardsSelector = ({
                         </div>
                         <Button
                           onClick={() => removeStandard(std.id)}
-                          className="danger small"
+                          className="secondary small"
                         >
                           {Global('buttons.remove')}
                         </Button>
@@ -374,7 +374,7 @@ const MetaDataStandardsSelector = ({
                               <div className={styles.searchResultTitle}>{std.name}</div>
                               <Button
                                 onClick={() => toggleSelection(std)}
-                                className={`small ${isSelected ? 'danger' : 'primary'}`}
+                                className={`small ${isSelected ? 'secondary' : 'primary'}`}
                               >
                                 {isSelected ? Global('buttons.remove') : Global('buttons.select')}
                               </Button>

components/QuestionAdd/ReposSelector.tsx

@@ -279,7 +279,7 @@ const RepositorySelectionSystem = ({
                   <Button
                     onClick={removeAllRepos}
                     isDisabled={selectedCount === 0}
-                    className="danger medium"
+                    className="medium secondary"
                   >
                     {Global('buttons.removeAll')}
                   </Button>
@@ -311,7 +311,7 @@ const RepositorySelectionSystem = ({
                         </div>
                         <Button
                           onClick={() => removeRepo(repo.id)}
-                          className={`${styles.removeBtn} danger small`}
+                          className={`${styles.removeBtn} secondary small`}
                         >
                           {Global('buttons.remove')}
                         </Button>
@@ -504,7 +504,7 @@ const RepositorySelectionSystem = ({
                               <div className={styles.searchResultTitle}>{repo.name}</div>
                               <Button
                                 onClick={() => toggleSelection(repo)}
-                                className={`small ${isSelected ? 'danger' : 'primary'}`}
+                                className={`small ${isSelected ? 'secondary' : 'primary'}`}
                               >
                                 {isSelected ? Global('buttons.remove') : Global('buttons.select')}
                               </Button>

styles/form/_button.scss

@@ -71,7 +71,7 @@
 }
 
 @mixin button-secondary {
-  background: transparent;
+  background: var(--bg-white);
 
   // box-shadow makes border appear on the inside of button, keeping it same size as primary button, as opposed to
   // border, which renders the border on the outside of the button, making secondary larger than primary. An