Create a new button variant for our 'button but look like regular text' style

src/components/SearchHit.js

@@ -114,7 +114,6 @@ export class SearchHit extends Component {
               }),
             },
             paddingRight: 1,
-
           }}
           divider
           button={!selected}

src/components/SearchPanel.js

@@ -64,17 +64,9 @@ export class SearchPanel extends Component {
         />
         {
           fetchSearch && suggestedSearches && query === '' && suggestedSearches.map(search => (
-            <Typography component="p" key={search} variant="body1">
+            <Typography component="p" key={search} variant="body1" sx={{ margin: 2 }}>
               <Button
-                sx={{
-                  '& span': {
-                    lineHeight: '1.5em',
-                  },
-                  margin: 2,
-                  padding: 0,
-                  textAlign: 'inherit',
-                  textTransform: 'none',
-                }}
+                variant="inlineText"
                 color="secondary"
                 onClick={() => fetchSearch(`${searchService.id}?q=${search}`, search)}
               >

src/config/settings.js

@@ -324,6 +324,20 @@ export default {
           },
         ],
       },
+      MuiButton: {
+        styleOverrides: {
+          inlineText: {
+            lineHeight: '1.5em',
+            padding: 0,
+            textAlign: 'inherit',
+            textTransform: 'none',
+
+          },
+          inlineTextSecondary: ({ theme }) => ({
+            color: theme.palette.secondary.main,
+          }),
+        }
+      },
       MuiButtonBase: {
         defaultProps: {
           disableTouchRipple: true,