Refactor UI with design system, tablet optimization, and enhanced styling

src/components/ui/Button.module.css

@@ -1,29 +1,36 @@
-/* Design tokens */
-:root {
-  --color-primary: #ff9800;
-  --color-primary-hover: #ffa726;
-  --color-secondary: #333;
-  --color-secondary-hover: #444;
-  --color-danger: #f44336;
-  --color-danger-hover: #ef5350;
-  --color-white: #fff;
-  --border-radius: 6px;
-  --transition: all 0.2s ease;
-}
-
+/* Use CSS custom properties from global design system */
 .button {
   border: none;
-  border-radius: var(--border-radius);
+  border-radius: var(--radius-md);
   cursor: pointer;
   font-weight: 600;
-  transition: var(--transition);
+  transition: var(--transition-base);
   touch-action: manipulation;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: var(--space-sm);
   text-decoration: none;
   user-select: none;
+  font-family: inherit;
+  position: relative;
+  overflow: hidden;
+}
+
+.button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
+  transform: translateX(-100%);
+  transition: transform 0.3s ease;
+}
+
+.button:hover::before {
+  transform: translateX(100%);
 }
 
 .button:focus-visible {
@@ -31,52 +38,97 @@
   outline-offset: 2px;
 }
 
+.button:active {
+  transform: translateY(1px);
+}
+
 /* Variants */
 .primary {
   background: var(--color-primary);
-  color: var(--color-white);
+  color: white;
+  box-shadow: var(--shadow-md);
 }
 
 .primary:hover:not(.disabled) {
   background: var(--color-primary-hover);
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-1px);
 }
 
 .secondary {
   background: var(--color-secondary);
-  color: var(--color-white);
+  color: var(--color-text);
+  box-shadow: var(--shadow-sm);
 }
 
 .secondary:hover:not(.disabled) {
   background: var(--color-secondary-hover);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
 }
 
 .danger {
   background: var(--color-danger);
-  color: var(--color-white);
+  color: white;
+  box-shadow: var(--shadow-md);
 }
 
 .danger:hover:not(.disabled) {
-  background: var(--color-danger-hover);
+  background: #ef5350;
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-1px);
 }
 
-/* Sizes */
+/* Sizes with improved touch targets for tablets */
 .small {
-  padding: 8px 16px;
-  font-size: 0.875rem;
+  padding: var(--space-sm) var(--space-md);
+  font-size: var(--font-size-sm);
+  min-height: var(--touch-target-min);
+  border-radius: var(--radius-sm);
 }
 
 .medium {
-  padding: 12px 24px;
-  font-size: 1rem;
+  padding: var(--space-md) var(--space-lg);
+  font-size: var(--font-size-base);
+  min-height: var(--touch-target-comfortable);
+  border-radius: var(--radius-md);
 }
 
 .large {
-  padding: 18px 32px;
-  font-size: 1.25rem;
+  padding: var(--space-lg) var(--space-xl);
+  font-size: var(--font-size-lg);
+  min-height: 56px;
+  border-radius: var(--radius-lg);
+}
+
+/* Tablet-specific size adjustments */
+@media (min-width: 768px) and (max-width: 1024px) {
+  .small {
+    min-height: var(--touch-target-comfortable);
+    padding: var(--space-md) var(--space-lg);
+    font-size: var(--font-size-base);
+  }
+  
+  .medium {
+    min-height: var(--touch-target-comfortable);
+    padding: var(--space-lg) var(--space-xl);
+    font-size: var(--font-size-lg);
+  }
+  
+  .large {
+    min-height: 64px;
+    padding: var(--space-xl) var(--space-xxl);
+    font-size: var(--font-size-xl);
+  }
 }
 
 /* States */
 .disabled {
   opacity: 0.5;
   cursor: not-allowed;
+  transform: none !important;
+}
+
+.disabled:hover::before {
+  transform: translateX(-100%);
 }