cleaning up

frontend/src/components/button.tsx

@@ -1,14 +1,15 @@
-type ClusterButtonProps = {
+type ButtonProps = {
   onClick: () => void;
   isLoading: boolean;
+  label: string;
 };
 
-const ClusterButton = ({ onClick, isLoading }: ClusterButtonProps) => {
+const Button = ({ onClick, isLoading, label }: ButtonProps) => {
   return (
     <button onClick={onClick} disabled={isLoading}>
-      {isLoading ? 'Clustering...' : 'Run Clustering'}
+      {isLoading ? 'Working...' : label}
     </button>
   );
 };
 
-export default ClusterButton;
+export default Button;

frontend/src/components/stickies.tsx

@@ -1,7 +1,7 @@
 import { useGetStickies, useClusterStickies } from '../api/api';
 import type { Sticky as StickyType } from '../types/types';
 import Sticky from './sticky';
-import ClusterButton from './button';
+import Button from './button';
 import './stickies.css';
 
 const Stickies = () => {
@@ -26,7 +26,7 @@ const Stickies = () => {
 
     return (
       <div>
-        <ClusterButton onClick={handleCluster} isLoading={isPending} />
+        <Button onClick={handleCluster} isLoading={isPending} label={'Group by Theme'}/>
         <div className="clusters-container">
           {clusters.map((group) => (
             <div key={group.label} className="cluster-group">
@@ -46,7 +46,7 @@ const Stickies = () => {
 
   return (
     <div>
-      <ClusterButton onClick={handleCluster} isLoading={isPending} />
+      <Button onClick={handleCluster} isLoading={isPending} />
       <div className="stickies-grid">
         {stickies?.map((sticky) => (
           <Sticky key={sticky.id} sticky={sticky} />

frontend/src/components/sticky.css

@@ -0,0 +1,14 @@
+.sticky-note {
+  width: 180px;
+  min-height: 180px;
+  padding: 16px;
+  border-radius: 2px;
+  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.15);
+  font-family: 'Patrick Hand', cursive, system-ui;
+  font-size: 14px;
+  line-height: 1.4;
+  color: #333;
+  display: flex;
+  align-items: flex-start;
+  word-break: break-word;
+}

frontend/src/components/sticky.tsx

@@ -1,4 +1,5 @@
 import type { Sticky as StickyType } from '../types/types';
+import './sticky.css';
 
 const COLOR_MAP: Record<string, string> = {
   yellow: '#fdfd96',
@@ -18,20 +19,9 @@ const Sticky = ({ sticky }: StickyProps) => {
 
   return (
     <div
+      className="sticky-note"
       style={{
         backgroundColor,
-        width: '180px',
-        minHeight: '180px',
-        padding: '16px',
-        borderRadius: '2px',
-        boxShadow: '2px 4px 8px rgba(0, 0, 0, 0.15)',
-        fontFamily: "'Patrick Hand', cursive, system-ui",
-        fontSize: '14px',
-        lineHeight: '1.4',
-        color: '#333',
-        display: 'flex',
-        alignItems: 'flex-start',
-        wordBreak: 'break-word',
         transform: `rotate(${Math.random() * 4 - 2}deg)`,
       }}
     >