From 87a6ac09b976029b109b69df2ccd1c205ee6cb4e Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Tue, 18 Aug 2020 12:20:07 +0100
Subject: [PATCH] Central place for style of primary buttons
---
frontend/src/components/App.scss | 39 +++++++++++++++-
.../molecules/DashboardButtonGroup/index.tsx | 3 --
.../DashboardButtonGroup/style.module.scss | 44 -------------------
.../molecules/SideBarTabGroup/index.tsx | 4 +-
.../SideBarTabGroup/style.module.scss | 35 ---------------
5 files changed, 39 insertions(+), 86 deletions(-)
delete mode 100644 frontend/src/components/molecules/DashboardButtonGroup/style.module.scss
diff --git a/frontend/src/components/App.scss b/frontend/src/components/App.scss
index 89d65ef2e..ff9b3213f 100644
--- a/frontend/src/components/App.scss
+++ b/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;
+}
diff --git a/frontend/src/components/molecules/DashboardButtonGroup/index.tsx b/frontend/src/components/molecules/DashboardButtonGroup/index.tsx
index b3d2ce1c7..341c6d39b 100644
--- a/frontend/src/components/molecules/DashboardButtonGroup/index.tsx
+++ b/frontend/src/components/molecules/DashboardButtonGroup/index.tsx
@@ -1,7 +1,6 @@
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>
diff --git a/frontend/src/components/molecules/DashboardButtonGroup/style.module.scss b/frontend/src/components/molecules/DashboardButtonGroup/style.module.scss
deleted file mode 100644
index 64a10f835..000000000
--- a/frontend/src/components/molecules/DashboardButtonGroup/style.module.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-@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);
-}
diff --git a/frontend/src/components/molecules/SideBarTabGroup/index.tsx b/frontend/src/components/molecules/SideBarTabGroup/index.tsx
index 05259d51e..ea5defb32 100644
--- a/frontend/src/components/molecules/SideBarTabGroup/index.tsx
+++ b/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}
>
diff --git a/frontend/src/components/molecules/SideBarTabGroup/style.module.scss b/frontend/src/components/molecules/SideBarTabGroup/style.module.scss
index c6af7abdc..a6c24ad0b 100644
--- a/frontend/src/components/molecules/SideBarTabGroup/style.module.scss
+++ b/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 {
--
GitLab