Unify search bar styles across components

2026-02-06 11:45:25 +01:00
parent 539377e63d
commit fb92f28a69
7 changed files with 412 additions and 34 deletions
--- a/pwa/src/components/Game.css
+++ b/pwa/src/components/Game.css
@@ -207,7 +207,6 @@ html {
 .username-link {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.2);
-  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
@@ -335,12 +334,54 @@ html {
  border-bottom: 3px solid var(--game-color-primary);
 }

+
 .game-main {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
 }

+/* Unified Search Bar */
+.game-search-container {
+  display: flex;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid var(--game-border-color);
+  border-radius: var(--game-radius-sm);
+  padding: 0 0.8rem;
+  transition: all 0.2s ease;
+  height: 40px;
+  position: relative;
+}
+
+.game-search-container:focus-within {
+  border-color: var(--game-text-secondary);
+  background: rgba(0, 0, 0, 0.6);
+  box-shadow: 0 0 8px rgba(255, 255, 255, 0.05);
+}
+
+.game-search-icon {
+  font-size: 1rem;
+  margin-right: 0.5rem;
+  opacity: 0.7;
+  flex-shrink: 0;
+}
+
+.game-search-input {
+  background: transparent;
+  border: none;
+  color: #fff;
+  font-family: var(--game-font-main);
+  font-size: 1rem;
+  width: 100%;
+  height: 100%;
+  outline: none;
+}
+
+.game-search-input::placeholder {
+  color: rgba(255, 255, 255, 0.3);
+}
+
 /* Explore Tab - Desktop 3-Column Layout */
 .explore-tab-desktop {
  display: grid;
--- a/pwa/src/components/GameHeader.css
+++ b/pwa/src/components/GameHeader.css
@@ -0,0 +1,308 @@
+/* GameHeader.css - Unified Tech HUD Theme */
+
+.game-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 1rem;
+    height: 60px;
+    background-color: rgba(5, 5, 8, 0.9);
+    border-bottom: 2px solid rgba(225, 29, 72, 0.4);
+    backdrop-filter: blur(16px);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5),
+        inset 0 -1px 0 rgba(225, 29, 72, 0.2);
+    /* Tech grid background pattern */
+    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+    background-size: 20px 20px;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+}
+
+.header-title-container {
+    display: flex;
+    align-items: baseline;
+    padding: 0.4rem 1.2rem;
+    background: linear-gradient(135deg, rgba(225, 29, 72, 0.1) 0%, transparent 100%);
+    border: 1px solid rgba(225, 29, 72, 0.3);
+    /* Angled Cut */
+    clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%, 0 15px);
+    border-left: 3px solid var(--game-color-primary);
+    position: relative;
+}
+
+.header-left h1 {
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: 800;
+    color: #fff;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    font-family: 'Orbitron', 'Saira Condensed', sans-serif;
+    text-shadow: 0 0 10px rgba(225, 29, 72, 0.4);
+    line-height: 1;
+}
+
+.header-version {
+    font-size: 0.65rem;
+    color: var(--game-color-primary);
+    margin-left: 0.5rem;
+    font-family: monospace;
+    opacity: 0.8;
+}
+
+/* --- Navigation Tabs (Unified Angled Style) --- */
+.nav-links {
+    display: flex;
+    gap: 4px;
+    /* Tight gaps for HUD feel */
+    align-items: center;
+    height: 100%;
+    margin-left: 1.5rem;
+}
+
+.nav-link {
+    height: 70%;
+    /* Not full height, more like buttons */
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 0 1.2rem;
+    color: var(--game-text-secondary);
+    cursor: pointer;
+    font-size: 0.85rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    /* Tech Shape: Angled top-left and bottom-right */
+    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
+    position: relative;
+}
+
+.nav-link:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.3);
+    color: #fff;
+    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
+    transform: translateY(-1px);
+}
+
+.nav-link.active {
+    background: rgba(225, 29, 72, 0.15);
+    border-color: var(--game-color-primary);
+    color: #fff;
+    box-shadow: inset 0 0 10px rgba(225, 29, 72, 0.1);
+}
+
+/* Active indicator "Light" */
+.nav-link.active::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    width: 6px;
+    height: 6px;
+    background: var(--game-color-primary);
+    box-shadow: 0 0 5px var(--game-color-primary);
+}
+
+/* --- User Info Section (Unified Style) --- */
+.user-info {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+}
+
+/* Tech Player Badge - Matches Nav Link Shape */
+.player-count-badge {
+    height: 36px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 12px;
+    background-color: rgba(0, 0, 0, 0.6);
+    border: 1px solid rgba(76, 209, 55, 0.3);
+    clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
+    font-size: 0.8rem;
+    color: #aaddaa;
+    font-family: monospace;
+}
+
+.status-dot {
+    width: 6px;
+    height: 6px;
+    background-color: #4cd137;
+    box-shadow: 0 0 6px #4cd137;
+    /* Start square/diamond for tech feel */
+    transform: rotate(45deg);
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 4px #4cd137;
+        opacity: 1;
+    }
+
+    50% {
+        box-shadow: 0 0 8px #4cd137;
+        opacity: 0.6;
+    }
+
+    100% {
+        box-shadow: 0 0 4px #4cd137;
+        opacity: 1;
+    }
+}
+
+/* Username Link - Matches Nav Link Style exactly */
+.username-link {
+    height: 36px;
+    background: rgba(10, 10, 15, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    padding: 0 1.2rem;
+    color: var(--game-text-primary);
+    cursor: pointer;
+    font-size: 0.85rem;
+    font-weight: 700;
+    transition: all 0.2s;
+    /* Same tech shape */
+    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
+    text-transform: uppercase;
+    display: flex;
+    align-items: center;
+}
+
+.username-link:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: var(--game-color-primary);
+    color: #fff;
+}
+
+.username-link.active {
+    border-color: var(--game-color-primary);
+    background: rgba(225, 29, 72, 0.15);
+    box-shadow: 0 0 10px rgba(225, 29, 72, 0.1);
+}
+
+/* Icon Buttons (Account/Logout) - Tech Squares */
+.header-icon-btn {
+    width: 36px;
+    height: 36px;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    color: var(--game-text-secondary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    transition: all 0.2s;
+    /* Angled corners */
+    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
+}
+
+.header-icon-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: var(--game-text-primary);
+    color: #fff;
+    transform: scale(1.05);
+}
+
+/* Override Language Selector Styles in Header context */
+.game-header .language-btn {
+    height: 36px;
+    border-radius: 0;
+    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.game-header .language-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.game-header .language-dropdown {
+    border-radius: 0;
+    border: 1px solid var(--game-border-color);
+    background: rgba(10, 10, 15, 0.95);
+    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
+}
+
+/* Separator line */
+.header-sep {
+    width: 1px;
+    height: 24px;
+    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2), transparent);
+    margin: 0 2px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .game-header {
+        padding: 0 0.5rem;
+        height: 56px;
+    }
+
+    .header-left h1 {
+        display: none;
+        /* Hide full text on mobile */
+    }
+
+    .header-title-container::after {
+        content: 'EotA';
+        /* Short title */
+        color: #fff;
+        font-weight: 800;
+    }
+
+    .nav-links {
+        margin-left: 0.5rem;
+        gap: 4px;
+        flex: 1;
+    }
+
+    .nav-link {
+        padding: 0 0.6rem;
+        font-size: 0.7rem;
+        clip-path: none;
+        /* Simplify for mobile touch */
+        border-radius: 4px;
+    }
+
+    .user-info {
+        gap: 0.4rem;
+    }
+
+    .player-count-badge {
+        padding: 0 6px;
+    }
+
+    .count-text {
+        display: none;
+    }
+
+    /* Dot only */
+
+    .username-link {
+        padding: 0 0.5rem;
+        max-width: 80px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        display: block;
+        /* block for ellipsis */
+        line-height: 34px;
+    }
+}
--- a/pwa/src/components/GameHeader.tsx
+++ b/pwa/src/components/GameHeader.tsx
@@ -9,6 +9,9 @@ import './Game.css'

 import { GameTooltip } from './common/GameTooltip'

+// Import the new specific header styles
+import './GameHeader.css'
+
 interface GameHeaderProps {
  className?: string
 }
@@ -61,43 +64,61 @@ export default function GameHeader({ className = '' }: GameHeaderProps) {
  return (
    <header className={`game-header ${className}`}>
      <div className="header-left">
-        <h1>Echoes of the Ash</h1>
+        <div className="header-title-container">
+          <h1>Echoes of the Ash</h1>
+          <span className="header-version">v0.9</span>
+        </div>
      </div>
+
      <nav className="nav-links">
        <button
          onClick={() => navigate('/game')}
          className={`nav-link ${isActive('/game') ? 'active' : ''}`}
        >
-          🎮 {t('common.game')}
+          <span style={{ fontSize: '1.1em' }}>🎮</span> {t('common.game')}
        </button>
        <button
          onClick={() => navigate('/leaderboards')}
          className={`nav-link ${isActive('/leaderboards') ? 'active' : ''}`}
        >
-          🏆 {t('common.leaderboards')}
+          <span style={{ fontSize: '1.1em' }}>🏆</span> {t('common.leaderboards')}
        </button>
      </nav>
+
      <div className="user-info">
-        <LanguageSelector />
        <GameTooltip content={t('game.onlineCount', { count: playerCount })}>
          <div className="player-count-badge">
            <span className="status-dot"></span>
-            <span className="count-text">{t('game.onlineCount', { count: playerCount })}</span>
+            <span className="count-text">{playerCount}</span>
          </div>
        </GameTooltip>
+
+        <LanguageSelector />
+
        <button
          onClick={() => navigate(`/profile/${currentCharacter?.id}`)}
          className={`username-link ${isOnOwnProfile ? 'active' : ''}`}
        >
          {currentCharacter?.name}
        </button>
-        <button
-          onClick={() => navigate('/account')}
-          className="button-secondary"
-        >
-          {t('common.account')}
-        </button>
-        <button onClick={logout} className="button-secondary">{t('auth.logout')}</button>
+
+        <div className="header-sep"></div>
+
+        <GameTooltip content={t('common.account')}>
+          <button
+            onClick={() => navigate('/account')}
+            className="header-icon-btn"
+            aria-label={t('common.account')}
+          >
+            ⚙️
+          </button>
+        </GameTooltip>
+
+        <GameTooltip content={t('auth.logout')}>
+          <button onClick={logout} className="header-icon-btn" aria-label={t('auth.logout')}>
+            🚪
+          </button>
+        </GameTooltip>
      </div>
    </header>
  )
--- a/pwa/src/components/game/CombatInventoryModal.css
+++ b/pwa/src/components/game/CombatInventoryModal.css
@@ -91,6 +91,7 @@

 /* Items List */
 .items-list {
+    width: 100%;
    flex: 1;
    overflow-y: auto;
    display: flex;
--- a/pwa/src/components/game/CombatInventoryModal.tsx
+++ b/pwa/src/components/game/CombatInventoryModal.tsx
@@ -55,14 +55,17 @@ export const CombatInventoryModal: React.FC<CombatInventoryModalProps> = ({
                </div>

                <div className="modal-body">
-                    <input
-                        type="text"
-                        className="search-input"
-                        placeholder={t('combat.modal.search_items')}
-                        value={searchTerm}
-                        onChange={e => setSearchTerm(e.target.value)}
-                        autoFocus
-                    />
+                    <div className="game-search-container" style={{ marginBottom: '1.5rem' }}>
+                        <span className="game-search-icon">🔍</span>
+                        <input
+                            type="text"
+                            className="game-search-input"
+                            placeholder={t('combat.modal.search_items')}
+                            value={searchTerm}
+                            onChange={e => setSearchTerm(e.target.value)}
+                            autoFocus
+                        />
+                    </div>

                    <div className="items-list">
                        {combatItems.length === 0 ? (
--- a/pwa/src/components/game/InventoryModal.tsx
+++ b/pwa/src/components/game/InventoryModal.tsx
@@ -428,9 +428,10 @@ function InventoryModal({

                    {/* Right Content: Search & List */}
                    <div className="inventory-content-area">
-                        <div className="inventory-search-bar">
-                            <span className="search-icon">🔍</span>
+                        <div className="game-search-container" style={{ marginBottom: '1.5rem' }}>
+                            <span className="game-search-icon">🔍</span>
                            <input
+                                className="game-search-input"
                                type="text"
                                placeholder={t('game.searchItems')}
                                value={inventoryFilter}
--- a/pwa/src/components/game/Workbench.tsx
+++ b/pwa/src/components/game/Workbench.tsx
@@ -488,17 +488,20 @@ function Workbench({
          {/* Column 2: Items List */}
          <div className="workbench-items-column">
            <div className="workbench-filters">
-              <input
-                type="text"
-                placeholder={t('game.searchItems')}
-                value={workbenchTab === 'craft' ? craftFilter : workbenchTab === 'repair' ? repairFilter : uncraftFilter}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  if (workbenchTab === 'craft') onSetCraftFilter(e.target.value)
-                  else if (workbenchTab === 'repair') onSetRepairFilter(e.target.value)
-                  else onSetUncraftFilter(e.target.value)
-                }}
-                className="filter-input"
-              />
+              <div className="game-search-container">
+                <span className="game-search-icon">🔍</span>
+                <input
+                  type="text"
+                  placeholder={t('game.searchItems')}
+                  value={workbenchTab === 'craft' ? craftFilter : workbenchTab === 'repair' ? repairFilter : uncraftFilter}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                    if (workbenchTab === 'craft') onSetCraftFilter(e.target.value)
+                    else if (workbenchTab === 'repair') onSetRepairFilter(e.target.value)
+                    else onSetUncraftFilter(e.target.value)
+                  }}
+                  className="game-search-input"
+                />
+              </div>
            </div>

            <div className="workbench-items-list">