3v324v23 commited on
Commit
221ee46
·
1 Parent(s): 6d2c2d9

Add subtle UI hint for the 'Your Name' easter egg

Browse files
client/src/components/SearchBar.css CHANGED
@@ -13,12 +13,32 @@
13
  /* Ensure searchbar is above siblings like location-active-plate */
14
  }
15
 
16
- .location-hint {
 
 
 
17
  margin-top: 0.6rem;
18
- margin-left: 0.15rem;
 
 
 
 
 
19
  font-size: 0.8rem;
20
- color: var(--text-secondary);
21
- max-width: 720px;
 
 
 
 
 
 
 
 
 
 
 
 
22
  }
23
 
24
  .location-hint .mono {
 
13
  /* Ensure searchbar is above siblings like location-active-plate */
14
  }
15
 
16
+ .searchbar-hints {
17
+ display: flex;
18
+ justify-content: space-between;
19
+ align-items: baseline;
20
  margin-top: 0.6rem;
21
+ padding: 0 0.25rem;
22
+ gap: 1rem;
23
+ flex-wrap: wrap;
24
+ }
25
+
26
+ .location-hint {
27
  font-size: 0.8rem;
28
+ color: var(--text-muted);
29
+ }
30
+
31
+ .easter-egg-hint {
32
+ font-size: 0.8rem;
33
+ color: var(--text-muted);
34
+ font-style: italic;
35
+ opacity: 0.9;
36
+ }
37
+
38
+ .easter-egg-hint span {
39
+ color: var(--accent-secondary);
40
+ font-weight: 600;
41
+ font-style: normal;
42
  }
43
 
44
  .location-hint .mono {
client/src/components/SearchBar.jsx CHANGED
@@ -182,8 +182,13 @@ export default function SearchBar({
182
  </button>
183
  </div>
184
  ) : (
185
- <div className="location-hint">
186
- Tip: include your city in the search or use your location
 
 
 
 
 
187
  </div>
188
  )}
189
  </div>
 
182
  </button>
183
  </div>
184
  ) : (
185
+ <div className="searchbar-hints">
186
+ <div className="location-hint">
187
+ Tip: include your city in the search or use your location
188
+ </div>
189
+ <div className="easter-egg-hint">
190
+ Psst... try searching for something from <span>Your Name</span> ✨
191
+ </div>
192
  </div>
193
  )}
194
  </div>