add button styling

MetaCell · Feb 28, 2024 · df0e265 · df0e265
1 parent 098a33a
commit df0e265
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/src/components/NodeDetailView/Details/DatasetDetails.js b/src/components/NodeDetailView/Details/DatasetDetails.js
@@ -2,7 +2,7 @@ import React, {useEffect} from "react";
 import {
     Box,
     Typography,
-    Divider,
+    Divider, Button,
 } from "@material-ui/core";
 import Links from './Views/Links';
 import SimpleLinkedChip from './Views/SimpleLinkedChip';
@@ -100,11 +100,20 @@ const DatasetDetails = (props) => {
 
         <Box id={node.graph_node?.id + detailsLabel}>
             <Divider />
-            <button onClick={exportToPDF}>Export PDF</button>
             <Box className="tab-content">
-                <Box className='title-container'>
-                    <DatasetIcon />
-                    <Typography component="h3">Dataset Details</Typography>
+                <Box className='title-container' sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                }}>
+                    <Box sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                    }}>
+                        <DatasetIcon />
+                        <Typography component="h3">Dataset Details</Typography>
+                    </Box>
+                    <Button className="containedSecondary" disableElevation onClick={exportToPDF}>Export PDF</Button>
                 </Box>
                 {datasetPropertiesModel?.map( property => {
                     if ( property.visible ){

diff --git a/src/styles/constant.js b/src/styles/constant.js
@@ -48,6 +48,7 @@ const vars = {
   grey50: '#E1E3E8',
   grey25: '#F0F1F2',
   grey600: '#2E3A59',
+  lightblue: 'rgba(55, 121, 225, 0.10)'
 };
 
 export default vars;
diff --git a/src/theme.js b/src/theme.js
@@ -52,7 +52,8 @@ const {
   grey600,
   gray800,
   gray400,
-  gray25
+  gray25,
+  lightblue
 } = vars;
 
 const theme = createTheme({
@@ -368,6 +369,14 @@ const theme = createTheme({
         height: '2.375rem',
         padding: 0,
         minWidth: '9.875rem',
+
+        '&.containedSecondary': {
+          backgroundColor: lightblue,
+          color: primaryColor,
+          minWidth: 'fit-content',
+          padding: '0.75rem',
+          height: '2.4375rem',
+        },
       },
       label: {
         textTransform: 'none',