Central place for style of primary buttons

frontend/src/components/App.scss

@@ -20,4 +20,41 @@ code {
 	background-color: #f8f9fa;
 	border-color: #0062cc;
 	box-shadow: none;
-}
+}
\ No newline at end of file
+
+.btn-primary{
+  margin-bottom: 0.625rem;
+  color: #000;
+  background: #f6f8fa;
+  font-size: 1.05rem;
+  letter-spacing: 0;
+  border-width: 0rem;
+  line-height: 1.375rem;
+  height: 2.25rem;
+  border-radius: 0.5rem !important;
+  text-align: left;
+  transition: 0.2s background;
+  -webkit-transition: 0.2s background;
+  -moz-transition: 0.2s background;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.btn-primary.active,
+.btn-primary:active {
+  color: #fff;
+  background: #000 !important;
+  font-weight: 500;
+  text-align: left;
+  border-width: 0rem;
+  height: 2.25rem;
+  line-height: 1.375rem;
+}
+
+.btn-primary:hover {
+  background: #e5e5e5;
+  border-color: #fff;
+  color: #000;
+}

frontend/src/components/molecules/DashboardButtonGroup/index.tsx

 import React from "react";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
-import styles from "./style.module.scss";
 import {
   faGlobe,
   faFileAlt,
@@ -22,7 +21,6 @@ const DashboardButtonGroup: React.FC = () => {
         {buttons.map(({ title, icon, url }, i) => (
           <Col xs={6} sm={6} md={4} lg={4} xl={3} key={i} style={{ paddingRight: "10px", paddingLeft:"10px"}}>
             <Button
-              className={styles.dashboardButton}
               href={url}
               target="_blank"
             >
@@ -30,7 +28,6 @@ const DashboardButtonGroup: React.FC = () => {
               <FontAwesomeIcon
                 style={{ fontSize: "1.125rem" }}
                 icon={icon}
-                className={styles.dashboardButtonSvg}
               />
             </Button>
           </Col>

frontend/src/components/molecules/DashboardButtonGroup/style.module.scss

-@import "assets/scss/custom";
-
-$button-background: transparentize($gray-200, 0.75);
-$button-border: transparentize($gray-300, 1);
-
-.dashboardButton,
-.dashboardButton:global(.a) {
-  margin-bottom: 0.625rem;
-  color: #000;
-  background: $button-background;
-  font-size: 1.05rem;
-  letter-spacing: 0;
-  border: 1px solid $button-border;
-  line-height: 1.375rem;
-  height: 2.25rem;
-  border-radius: 0.5rem !important;
-  text-align: left;
-  transition: 0.2s transform, 0.2s box-shadow, 0.2s background-color;
-  -webkit-transition: 0.2s transform, 0.2s box-shadow, 0.2s background-color;
-  -moz-transition: 0.2s transform, 0.2s box-shadow, 0.2s background-color;
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.dashboardButton:global(.active),
-.dashboardButton:active {
-  color: #fff;
-  background: #000 !important;
-  font-weight: 500;
-  text-align: left;
-  border-width: 0rem;
-  height: 2.25rem;
-  line-height: 1.375rem;
-}
-
-.dashboardButton:hover {
-  background-color: $button-background;
-  border-color: $gray-300;
-  color: #000;
-  transform: scale(1.03);
-  box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
-}

frontend/src/components/molecules/SideBarTabGroup/index.tsx

@@ -36,7 +36,6 @@ const SideBarTabGroup: React.FC<SideBarTabGroupProp> = ({
             as={NavLink}
             to={activeURL}
             activeClassName={"active"}
-            className={styles.tabGroupButton}
             key={title}
           >
             {title}
@@ -50,7 +49,6 @@ const SideBarTabGroup: React.FC<SideBarTabGroupProp> = ({
           <Button
             href={externalURL}
             target="_blank"
-            className={styles.tabGroupButton}
             key={title}
           >
             {title}
@@ -61,7 +59,7 @@ const SideBarTabGroup: React.FC<SideBarTabGroupProp> = ({
 
       return (
         <Button
-					className={classNames({ active: active }, styles.tabGroupButton)}
+					className={classNames({ active: active })}
 					onClick={onClick}
           key={title}
         >

frontend/src/components/molecules/SideBarTabGroup/style.module.scss

@@ -3,46 +3,11 @@
 $button-background: transparentize($gray-200, 0.75);
 $button-border: transparentize($gray-300, 1);
 
-.tabGroupButton,
-.tabGroupButton:global(.a) {
-  margin-bottom: 0.625rem;
-  color: #000;
-  background: $button-background;
-  font-size: 1.05rem;
-  letter-spacing: 0;
-  border: 1px solid $button-border;
-  line-height: 1.375rem;
-  height: 2.25rem;
-  border-radius: 0.5rem !important;
-  text-align: left;
-  transition: 0.2s transform, 0.2s box-shadow, 0.2s background;
-  -webkit-transition: 0.2s transform, 0.2s box-shadow, 0.2s background;
-  -moz-transition: 0.2s transform, 0.2s box-shadow, 0.2s background;
-}
-
 .tabGroupButtonSvg {
   float: right;
   margin-top: 0.22rem;
 }
 
-.tabGroupButton:global(.active),
-.tabGroupButton:active {
-  color: #fff;
-  background: #000 !important;
-  font-weight: 500;
-  text-align: left;
-  border-width: 0rem;
-  height: 2.25rem;
-  line-height: 1.375rem;
-}
-
-.tabGroupButton:hover {
-  background-color: $button-background;
-  border-color: $gray-300;
-  color: #000;
-  transform: scale(1.03);
-  box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
-}
 
 @media (max-width: 62rem) {
   .tabGroupButtonGroup {