work on button styling

cmmerritt · Oct 19, 2024 · b59dc56 · b59dc56
1 parent a36ded6
commit b59dc56
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 12 deletions.
diff --git a/app/components/Signature.tsx b/app/components/Signature.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Button } from "@mui/material";
+import { styled } from "@mui/material/styles";
 import type { Signature as SignatureType } from "../models/signature.server";
 import { getQuoteKeywords } from "~/utils/quote";
 
@@ -24,18 +25,28 @@ const Signature: React.FC<SignatureProps> = ({
   const keywords = getQuoteKeywords(quoteRes.quote);
   const renderedQuote: JSX.Element[] = [];
 
+  const StyledButton = styled(Button)({
+    textTransform: 'none', 
+    fontFamily: font, 
+    fontSize: '1em',
+    color: color,
+    verticalAlign: 'baseline',
+    padding: 0,     
+    minWidth: 'auto', 
+    lineHeight: 'inherit',
+    height: 'auto',       
+  }) as typeof Button;
+
   quoteWords.forEach((word, i) => {
     if (keywords.includes(word)) {
       renderedQuote.push(
-        <Button
-          variant="outlined"
-          key={i}
-          style={{ fontWeight: "bold" }}
-          value={word} // Pass the word as the value
-          onClick={onClick}
-        >
-          {word}
-        </Button>
+        <StyledButton
+        key={i}
+        value={word} 
+        onClick={onClick}
+      >
+        {word}
+      </StyledButton>
       );
     } else {
       renderedQuote.push(<span key={i}>{word} </span>);
@@ -44,7 +55,7 @@ const Signature: React.FC<SignatureProps> = ({
 
   return (
     <>
-      <div style={{ fontFamily: font, fontSize: "2em", color: color }}>
+      <div style={{ display: 'flex', flexWrap: 'wrap', fontSize: "2em", alignItems: 'center', gap: '8px' }}>
         {renderedQuote}
       </div>
       <div style={{ fontFamily: font, fontSize: "1.5em", color: color }}>

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "include": ["env.d.ts", "**/*.ts", "**/*.tsx", "netlify-edge-plugin.ts", "app/shared/authors.ts"],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "lib": ["DOM", "DOM.Iterable", "ES2022", "ES6"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
@@ -18,6 +18,10 @@
       "~/*": ["./app/*"]
     },
     // Vite takes care of building everything, not tsc.
-    "noEmit": true
+    "noEmit": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "allowSyntheticDefaultImports": true
   }
 }