nathanwoodburn/det0x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

font fix and styling

Browse Source
This commit is contained in:
Aaron Oxborrow 2024-04-25 06:16:37 -07:00
parent 0ace2e1a0f
commit b6a9f68c94
No known key found for this signature in database
GPG Key ID: 3321DC7E88D3437E
4 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/App.jsx
View File

@ -17,15 +17,15 @@ function App() {
const { address } = useAccount();
return (
<div className="bg-neutral-50 h-screen flex">
<div className="h-screen flex">
<div className="flex-col justify-between items-center flex max-w-7xl mx-auto gap-10 w-full pt-3">
<nav className="w-full flex justify-between gap-2 px-4 py-2 items-center">
<nav className="w-full flex justify-between gap-2 px-4 sm:px-8 py-2 items-center">
<img className="w-36" src={brandLogo} />
<div className="flex items-center gap-4">
<div className="flex items-center gap-8">
{address && (
<a
href={`https://hns.id/account/${address}`}
className="text-neutral-700 text-sm font-semibold uppercase hidden md:block hover:text-neutral-500"
className="text-neutral-500 text-sm font-semibold uppercase tracking-wide hidden md:block hover:text-neutral-600"
>
My Domains
</a>
@ -33,52 +33,57 @@ function App() {
<ConnectButton />
</div>
</nav>
<section className="flex-grow w-full flex flex-col items-center p-4 gap-6 text-center">
<div className="text-neutral-950 text-4xl lg:text-5xl font-bold leading-none">
<section className="flex-grow w-full flex flex-col items-center p-4 gap-4 text-center">
<div className="text-neutral-950 text-4xl lg:text-5xl font-extrabold leading-none tracking-tight mt-2">
{HERO_TEXT}
</div>
<div className="text-neutral-500 text-lg lg:text-2xl font-bold leading-normal">
<div className="text-neutral-500 text-xl lg:text-2xl font-medium leading-normal tracking-tight">
{SUB_TEXT}
</div>
<div className="w-full flex-1 pt-6 max-w-xl text-left">
<div className="w-full flex-1 pt-10 max-w-xl text-left">
<Search />
</div>
</section>
<footer className="w-full border-t px-4 py-6 flex flex-col lg:flex-row lg:justify-between gap-4">
<ul className="flex gap-8 text-neutral-700 text-sm font-medium uppercase">
<footer className="w-full mx-auto px-4 sm:px-8 mb-4">
<div className="border-t w-full px-3 border-neutral-300 flex flex-col sm:flex-row sm:justify-between gap-4 pt-5 pb-6">
<ul className="flex items-center gap-8 text-neutral-500 text-[13px] font-medium uppercase">
<li>
<a
className="hover:text-neutral-500"
className="hover:text-neutral-700"
href={`https://twitter.com/${TWITTER_HANDLE}`}
target="_blank"
>
Twitter
</a>
</li>
<li>
<a
className="hover:text-neutral-500"
className="hover:text-neutral-700"
href="https://github.com/namebasehq/wallet-id"
target="_blank"
>
GitHub
</a>
</li>
<li>
<a
className="hover:text-neutral-500"
className="hover:text-neutral-700"
href={`https://opensea.io/collection/handshake-slds?search[stringTraits][0][name]=TLD&search[stringTraits][0][values][0]=${TLD}`}
target="_blank"
>
OpenSea
</a>
</li>
</ul>
<div className="flex items-center gap-3">
<div className="text-neutral-400 text-xs font-normal uppercase">
<div className="text-neutral-500 text-[11px] font-semibold opacity-50 uppercase">
powered by
</div>
<a href="https://hns.id">
<a href="https://hns.id" target="_blank">
<img src={hnsLogo} className="w-24" />
</a>
</div>
</div>
</footer>
</div>
</div>

4
src/components/Debug.jsx
View File

@ -6,14 +6,14 @@ export const Debug = ({ error, data }) => {
return (
<div className="flex flex-col gap-2 mt-10 text-left">
<span className="text-red-600 font-semibold bg-yellow-300 px-4 py-2 rounded-md">
<span className="text-black font-semibold bg-yellow-300 px-4 py-2 rounded-md">
TESTNET
</span>
{error && (
<div className="p-2 text-red-600 bg-red-100 rounded-md">{error}</div>
)}
{data && (
<pre className="p-2 text-gray-500 bg-gray-100 border border-gray-500 rounded-lg overflow-scroll">
<pre className="p-2 text-gray-500 bg-gray-100 ring-1 ring-gray-400 rounded-md overflow-y-auto">
{JSON.stringify(data, null, 2)}
</pre>
)}

11
src/components/search/Search.jsx
View File

@ -31,15 +31,12 @@ export const Search = () => {
return (
<>
<div className="flex-1 bg-white rounded-2xl border border-zinc-300 shadow">
<div className="flex-1 bg-white rounded-2xl border border-zinc-300 shadow focus-within:border-zinc-400/80 hover:border-zinc-400/80">
<SearchInput expand={show} onChange={onChange} />
{show && (
<div className="w-full p-3 bg-white rounded-b-2xl inline-flex flex-col lg:flex-row gap-2 flex-1 lg:overflow-scroll">
<div className="flex-1 lg:w-full lg:overflow-scroll items-center gap-2 flex">
<div
className="text-xl font-medium leading-loose lg:w-fit overflow-scroll"
style={{ scrollbarWidth: 'none' }}
>
<div className="w-full py-3 px-4 bg-white rounded-b-2xl inline-flex flex-col sm:flex-row gap-2 flex-1">
<div className="flex-1 lg:w-full items-center overflow-hidden gap-2 flex">
<div className="text-xl font-medium leading-loose lg:w-fit">
<span className="text-neutral-950">{label}</span>
<span className="text-neutral-400">.{TLD}</span>
</div>

2
src/components/search/SearchInput.jsx
View File

@ -15,7 +15,7 @@ export const SearchInput = ({ expand, onChange }) => {
>
<input
className={cn(
'grow shrink basis-0 rounded-t-2xl text-neutral-400 text-base font-medium leading-tight tracking-tight p-5 border-zinc-300 focus:outline-none',
'grow shrink basis-0 rounded-t-2xl text-neutral-600 text-base font-medium leading-tight tracking-tight p-4 border-zinc-300 focus:outline-none',
expand ? 'rounded-t-2xl border-b' : 'rounded-2xl'
)}
onChange={handleChange}