Aligning things (#589)

epicweb-dev · Jan 7, 2024 · 68ebb04 · 68ebb04
1 parent 05821af
commit 68ebb04
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 29 deletions.
diff --git a/app/components/search-bar.tsx b/app/components/search-bar.tsx
@@ -53,9 +53,8 @@ export function SearchBar({
 					type="submit"
 					status={isSubmitting ? 'pending' : status}
 					className="flex w-full items-center justify-center"
-					size="sm"
 				>
-					<Icon name="magnifying-glass" size="sm" />
+					<Icon name="magnifying-glass" size="md" />
 					<span className="sr-only">Search</span>
 				</StatusButton>
 			</div>

diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { cn } from '#app/utils/misc.tsx'
 
 const buttonVariants = cva(
-	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors outline-none focus-visible:ring-4 focus-within:ring-4 ring-ring ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors outline-none focus-visible:ring-2 focus-within:ring-2 ring-ring ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
 	{
 		variants: {
 			variant: {

diff --git a/app/root.tsx b/app/root.tsx
@@ -238,26 +238,21 @@ function App() {
 		<Document nonce={nonce} theme={theme} env={data.ENV}>
 			<div className="flex h-screen flex-col justify-between">
 				<header className="container py-6">
-					<nav>
-						<div className="flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
-							<Link to="/">
-								<div className="font-light">epic</div>
-								<div className="font-bold">notes</div>
-							</Link>
-							<div className="ml-auto hidden max-w-sm flex-1 sm:block">
-								{searchBar}
-							</div>
-							<div className="flex items-center gap-10">
-								{user ? (
-									<UserDropdown />
-								) : (
-									<Button asChild variant="default" size="sm">
-										<Link to="/login">Log In</Link>
-									</Button>
-								)}
-							</div>
-							<div className="block w-full sm:hidden">{searchBar}</div>
+					<nav className="flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
+						<Logo />
+						<div className="ml-auto hidden max-w-sm flex-1 sm:block">
+							{searchBar}
 						</div>
+						<div className="flex items-center gap-10">
+							{user ? (
+								<UserDropdown />
+							) : (
+								<Button asChild variant="default" size="lg">
+									<Link to="/login">Log In</Link>
+								</Button>
+							)}
+						</div>
+						<div className="block w-full sm:hidden">{searchBar}</div>
 					</nav>
 				</header>
 
@@ -266,10 +261,7 @@ function App() {
 				</div>
 
 				<div className="container flex justify-between pb-5">
-					<Link to="/">
-						<div className="font-light">epic</div>
-						<div className="font-bold">notes</div>
-					</Link>
+					<Logo />
 					<ThemeSwitch userPreference={data.requestInfo.userPrefs.theme} />
 				</div>
 			</div>
@@ -279,6 +271,19 @@ function App() {
 	)
 }
 
+function Logo() {
+	return (
+		<Link to="/" className="group grid leading-snug">
+			<span className="font-light transition group-hover:-translate-x-1	">
+				epic
+			</span>
+			<span className="font-bold transition group-hover:translate-x-1	">
+				notes
+			</span>
+		</Link>
+	)
+}
+
 function AppWithProviders() {
 	const data = useLoaderData<typeof loader>()
 	return (

diff --git a/app/routes/settings+/profile.photo.tsx b/app/routes/settings+/profile.photo.tsx
@@ -189,7 +189,7 @@ export default function PhotoRoute() {
 					/>
 					<Button
 						asChild
-						className="cursor-pointer peer-valid:hidden peer-focus-within:ring-4 peer-focus-visible:ring-4"
+						className="cursor-pointer peer-valid:hidden peer-focus-within:ring-2 peer-focus-visible:ring-2"
 					>
 						<label htmlFor={fields.photoFile.id}>
 							<Icon name="pencil-1">Change</Icon>

diff --git a/app/routes/users+/$username_+/__note-editor.tsx b/app/routes/users+/$username_+/__note-editor.tsx
@@ -314,7 +314,7 @@ function ImageChooser({
 							className={cn('group absolute h-32 w-32 rounded-lg', {
 								'bg-accent opacity-40 focus-within:opacity-100 hover:opacity-100':
 									!previewImage,
-								'cursor-pointer focus-within:ring-4': !existingImage,
+								'cursor-pointer focus-within:ring-2': !existingImage,
 							})}
 						>
 							{previewImage ? (

diff --git a/app/routes/users+/$username_+/notes.tsx b/app/routes/users+/$username_+/notes.tsx
@@ -33,7 +33,7 @@ export default function NotesRoute() {
 		'line-clamp-2 block rounded-l-full py-2 pl-8 pr-6 text-base lg:text-xl'
 	return (
 		<main className="container flex h-full min-h-[400px] px-0 pb-12 md:px-8">
-			<div className="grid w-full grid-cols-4 bg-muted pl-2 md:container md:mx-2 md:rounded-3xl md:pr-0">
+			<div className="grid w-full grid-cols-4 bg-muted pl-2 md:container md:rounded-3xl md:pr-0">
 				<div className="relative col-span-1">
 					<div className="absolute inset-0 flex flex-col">
 						<Link