refactor: simplify print button with custom styling

Author: kasvith

src/renderer/src/print.tsx

@@ -6,7 +6,6 @@ import React, { useEffect, useMemo } from 'react'
 import ReactDOM from 'react-dom/client'
 import handlebars from 'handlebars'
 import surgeryOpNoteTemplate from '../../../resources/templates/surgery-opnote.hbs?raw'
-import { Button } from './components/ui/button'
 
 const printTemplate = handlebars.compile(surgeryOpNoteTemplate)
 
@@ -47,8 +46,10 @@ const Print = () => {
 
   return (
     <div className="w-full">
-      <div className="flex justify-end print-hidden">
-        <Button onClick={handlePrint}>Print</Button>
+      <div className="flex justify-end print-hidden p-1" id="print-area">
+        <button className="print-btn" onClick={handlePrint}>
+          Print
+        </button>
       </div>
       {printData && <div dangerouslySetInnerHTML={{ __html: printHtml }}></div>}
     </div>

src/renderer/src/styles/screen.css

@@ -284,3 +284,16 @@ body {
 .prose em {
   font-style: italic;
 }
+
+.print-btn {
+  padding: 8px 16px;
+  background-color: #3996f9;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.print-btn:hover {
+  background-color: #2f7ed8;
+}