Enhance UI styling for tab buttons and kernel selection (#12)

Summary:
- Updated the styling of tab buttons in App.tsx to use a blue color scheme for active states, improving visibility and user experience.
- Modified the layout of kernel buttons in KernelOverview.tsx to use a flexbox for better responsiveness and adjusted padding for improved aesthetics.

Pull Request resolved: #12

Differential Revision: D76630971

Pulled By: FindHao

fbshipit-source-id: 85a8eccbb3bc1f908ea0a53fd7c9b621b5d54c7a

Author: FindHao

README.md

@@ -102,19 +102,14 @@ tritonparse.structured_logging.init(log_path)
 # === TritonParse init end ===
 
 # The below is your original Triton/PyTorch 2 code
-# Example: Using with torch.compile
-def your_kernel():
-    # Your PyTorch/Triton kernel code
-    pass
-
-compiled_kernel = torch.compile(your_kernel)
-result = compiled_kernel()
+...
 
 # === TritonParse parse ===
 import tritonparse.utils
 tritonparse.utils.unified_parse(log_path)
 # === TritonParse parse end ===
 ```
+See a full example in [`tests/test_add.py`](https://github.com/pytorch-labs/tritonparse/blob/main/tests/test_add.py).
 
 ### 2. Analyze with Web Interface
 

website/src/App.tsx

@@ -367,7 +367,7 @@ function App() {
             {dataLoaded && kernels.length > 0 && !selectedIR && (
               <div className="flex space-x-4">
                 <button
-                  className={`px-3 py-2 text-sm font-medium rounded-md ${activeTab === "overview" ? "bg-gray-100 text-gray-900" : "text-gray-500 hover:text-gray-700"
+                  className={`px-3 py-2 text-sm font-medium rounded-md ${activeTab === "overview" ? "bg-blue-700 text-white shadow-md" : "bg-blue-100 text-blue-700 hover:bg-blue-200"
                     }`}
                   onClick={() => {
                     setActiveTab("overview");
@@ -384,7 +384,7 @@ function App() {
                   Kernel Overview
                 </button>
                 <button
-                  className={`px-3 py-2 text-sm font-medium rounded-md ${activeTab === "comparison" ? "bg-gray-100 text-gray-900" : "text-gray-500 hover:text-gray-700"
+                  className={`px-3 py-2 text-sm font-medium rounded-md ${activeTab === "comparison" ? "bg-blue-700 text-white shadow-md" : "bg-blue-100 text-blue-700 hover:bg-blue-200"
                     }`}
                   onClick={() => {
                     setActiveTab("comparison");

website/src/pages/KernelOverview.tsx

@@ -91,18 +91,18 @@ const KernelOverview: React.FC<KernelOverviewProps> = ({
         <h2 className="text-xl font-semibold mb-4 text-gray-800">
           Available Kernels
         </h2>
-        <div className="grid grid-cols-1 gap-2">
+        <div className="flex flex-wrap gap-2">
           {kernels.map((k, index) => (
             <button
               key={index}
-              className={`p-3 text-left rounded-md transition-colors ${
+              className={`px-4 py-2 text-sm rounded-md transition-colors whitespace-nowrap ${
                 index === selectedKernel
-                  ? "bg-blue-100 border border-blue-300"
-                  : "bg-gray-50 border border-gray-200 hover:bg-blue-50"
+                  ? "bg-blue-100 border border-blue-300 text-blue-800"
+                  : "bg-gray-50 border border-gray-200 hover:bg-blue-50 text-gray-800"
               }`}
               onClick={() => onSelectKernel(index)}
             >
-              <div className="font-medium text-gray-800">{k.name}</div>
+              <div className="font-medium">{k.name}</div>
             </button>
           ))}
         </div>