diff --git a/app/components/layout/SearchInput.tsx b/app/components/layout/SearchInput.tsx deleted file mode 100644 index 25c4d863e..000000000 --- a/app/components/layout/SearchInput.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import clsx from "clsx"; -import * as React from "react"; - -export function SearchInput() { - if (process.env.NODE_ENV !== "development") return
; - return ; -} - -export function SearchInputDev() { - const [inputValue, setInputValue] = React.useState(""); - - const handleEnter = () => { - const [action, value] = inputValue.split(":"); - if (!action) return; - - let fetchUrl = ""; - switch (action) { - case "liu": { - if (!value) return; - fetchUrl = `/mock-auth?username=${encodeURIComponent(value)}`; - break; - } - case "lit": { - if (!value) return; - fetchUrl = `/mock-auth?team=${encodeURIComponent(value)}`; - break; - } - case "seed": { - if (!value) fetchUrl = "/seed"; - else fetchUrl = `/seed?variation=${encodeURIComponent(value)}`; - break; - } - default: { - console.error("invalid action"); - return; - } - } - - return fetch(fetchUrl, { method: "post" }).then((res) => { - if (res.status === 200) location.reload(); - else { - console.error(`http error when trying an admin action: ${res.status}`); - } - }); - }; - - return ( - - ); -} - -export function DumbSearchInput({ - value, - setValue, - handleEnter, -}: { - value: string; - setValue: (newValue: string) => void; - handleEnter: () => Promise | undefined; -}) { - return ( -
- setValue(e.target.value)} - onKeyDown={(event) => { - if (event.key === "Enter") { - void handleEnter(); - } - }} - /> -
- ); -} diff --git a/app/components/layout/index.tsx b/app/components/layout/index.tsx index becf1eff0..d5cf55d09 100644 --- a/app/components/layout/index.tsx +++ b/app/components/layout/index.tsx @@ -4,7 +4,6 @@ import { useWindowSize } from "~/hooks/useWindowSize"; import { HamburgerButton } from "./HamburgerButton"; import { Menu } from "./Menu"; import { MobileMenu } from "./MobileMenu"; -import { SearchInput } from "./SearchInput"; import { UserItem } from "./UserItem"; export const Layout = React.memo(function Layout({ @@ -33,10 +32,6 @@ export const Layout = React.memo(function Layout({ return ( <>
-
- {/* xxx: replace with admin page */} - -
{pageTitle}
diff --git a/app/styles/layout.css b/app/styles/layout.css index 5b279e27f..4a2e36d46 100644 --- a/app/styles/layout.css +++ b/app/styles/layout.css @@ -3,15 +3,10 @@ position: relative; z-index: 501; - display: grid; - align-items: center; + display: flex; + justify-content: flex-end; padding: var(--s-4); background-color: var(--bg); - grid-template-columns: 1fr 2fr; -} - -.layout__header__search-container { - display: none; } .layout__header__title-container { @@ -158,37 +153,6 @@ border-radius: 0 0 var(--rounded) var(--rounded); } -.layout__search-input__container { - display: flex; - height: 1rem; - align-items: center; - justify-content: center; - padding: var(--s-5) var(--s-4); - background-color: var(--bg-lighter); - border-radius: var(--rounded); -} - -.layout__search-input__container:focus-within { - outline: 2px solid var(--theme); -} - -.layout__search-input { - width: 12rem; - height: 2rem; - flex-grow: 1; - border: none; - background-color: var(--bg-lighter); - color: var(---text); - font-size: var(--fonts-sm); - outline: none; -} - -.layout__search-input::placeholder { - color: var(--text-lighter); - font-weight: var(--semi-bold); - letter-spacing: 0.5px; -} - .layout__log-in-button { display: flex; height: var(--item-size); @@ -221,17 +185,6 @@ gap: var(--s-2); } -@media screen and (min-width: 640px) { - .layout__header { - grid-template-columns: 1fr 1fr 1fr; - } - - .layout__header__search-container { - display: block; - max-width: 12rem; - } -} - .menu { --small-icons-height: 1.25rem;