From 5c75b56af885467d6dfb46b3d410abfd9b0ca17b Mon Sep 17 00:00:00 2001
From: alexwine36 <alexwine36@gmail.com>
Date: Tue, 17 Sep 2024 14:31:18 -0600
Subject: [PATCH] fix: updated styling

---
 .../src/components/Button/index.module.css    | 23 +++++++++++++++++++
 .../src/components/Button/index.tsx           |  7 ++++++
 .../src/components/OptionGrid/index.tsx       |  3 ++-
 .../RunnableComparisonCard/index.tsx          |  7 +++---
 4 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 apps/sample-nextjs/src/components/Button/index.module.css
 create mode 100644 apps/sample-nextjs/src/components/Button/index.tsx

diff --git a/apps/sample-nextjs/src/components/Button/index.module.css b/apps/sample-nextjs/src/components/Button/index.module.css
new file mode 100644
index 0000000..926db77
--- /dev/null
+++ b/apps/sample-nextjs/src/components/Button/index.module.css
@@ -0,0 +1,23 @@
+
+
+.button {
+    background-color: #f1f1f1;
+	color: black;
+	padding: 0.5em;
+	font-size: 16px;
+	border: none;
+	cursor: pointer;
+	margin-right: 1em;
+	/* height: 100%; */
+	/* display: flex; */
+	/* align-items: center; */
+    transition: all 0.3s;
+}
+
+.button:disabled {
+    opacity: 0.5;
+}
+
+.button:hover {
+    box-shadow: 1px 3px 8px 0 rgba(0, 0, 0, 0.2);
+}
\ No newline at end of file
diff --git a/apps/sample-nextjs/src/components/Button/index.tsx b/apps/sample-nextjs/src/components/Button/index.tsx
new file mode 100644
index 0000000..49356f2
--- /dev/null
+++ b/apps/sample-nextjs/src/components/Button/index.tsx
@@ -0,0 +1,7 @@
+import { ButtonHTMLAttributes } from 'react';
+import styles from './index.module.css';
+
+export const Button = (props: ButtonHTMLAttributes<HTMLButtonElement>) => {
+	console.log(styles);
+	return <button className={styles.button} type="button" {...props} />;
+};
diff --git a/apps/sample-nextjs/src/components/OptionGrid/index.tsx b/apps/sample-nextjs/src/components/OptionGrid/index.tsx
index 3d7fe65..0f99658 100644
--- a/apps/sample-nextjs/src/components/OptionGrid/index.tsx
+++ b/apps/sample-nextjs/src/components/OptionGrid/index.tsx
@@ -2,6 +2,7 @@
 
 import { useAtom } from 'jotai';
 import { useComparisons } from '../../hooks/use-comparisons';
+import { Button } from '../Button';
 import { RunnableComparisonCard } from '../RunnableComparisonCard';
 import styles from './index.module.css';
 export const OptionGrid = () => {
@@ -10,7 +11,7 @@ export const OptionGrid = () => {
 	const [optionsAtoms] = useAtom(optionsAtomsAtom);
 	return (
 		<div>
-			<button onClick={handleRunAll}>Run All</button>
+			<Button onClick={handleRunAll}>Run All</Button>
 			<div className={styles.grid}>
 				{optionsAtoms.map((option, index) => (
 					<RunnableComparisonCard atom={option} key={index} />
diff --git a/apps/sample-nextjs/src/components/RunnableComparisonCard/index.tsx b/apps/sample-nextjs/src/components/RunnableComparisonCard/index.tsx
index af2f3a8..7246000 100644
--- a/apps/sample-nextjs/src/components/RunnableComparisonCard/index.tsx
+++ b/apps/sample-nextjs/src/components/RunnableComparisonCard/index.tsx
@@ -2,6 +2,7 @@ import { PrimitiveAtom, useAtom, useAtomValue } from 'jotai';
 import { ComparisonOptionAtom, inputAtom, microtaskQueueAtom } from '../../state/atoms';
 import { formatNumber } from '../../utils/format-number';
 import { timeFunction } from '../../utils/time-func';
+import { Button } from '../Button';
 import { ComparisonCard } from '../ComparisonCard';
 
 type RunnableComparisonCardProps = {
@@ -53,8 +54,8 @@ export const RunnableComparisonCard = ({ atom }: RunnableComparisonCardProps) =>
 	};
 
 	return (
-		<ComparisonCard title={title} description={description} danger={mainThread}>
-			<button
+		<ComparisonCard danger={mainThread} description={description} title={title}>
+			<Button
 				disabled={running}
 				onClick={async () => {
 					await handleRun();
@@ -62,7 +63,7 @@ export const RunnableComparisonCard = ({ atom }: RunnableComparisonCardProps) =>
 			>
 				Run
 				{/* Run {mainThread ? 'Main Thread' : 'Web Worker'} */}
-			</button>
+			</Button>
 			<div>
 				<p>Duration: {formatNumber(duration)}ms</p>
 				<p>Result: {formatNumber(result)}</p>