Spaces:
Sleeping
Sleeping
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 |
-
.
|
|
|
|
|
|
|
|
|
|
| 17 |
margin-top: 0.6rem;
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
font-size: 0.8rem;
|
| 20 |
-
color: var(--text-
|
| 21 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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="
|
| 186 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>
|