Skip to content

Commit

Permalink
Update search input style
Browse files Browse the repository at this point in the history
  • Loading branch information
@gtsiolis @roboquat
gtsiolis authored and roboquat committed Feb 21, 2023
1 parent 2d15009 commit 8eb9d8c
Show file tree
Hide file tree
Showing 10 changed files with 108 additions and 137 deletions.
30 changes: 15 additions & 15 deletions components/dashboard/src/admin/BlockedRepositories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { ItemFieldContextMenu } from "../components/ItemsList";
import { ContextMenuEntry } from "../components/ContextMenu";
import Alert from "../components/Alert";
import { SpinnerLoader } from "../components/Loader";
import searchIcon from "../icons/search.svg";

export function BlockedRepositories() {
return (
Expand Down Expand Up @@ -116,24 +117,23 @@ export function BlockedRepositoriesList(props: Props) {
onClose={() => setDeleteModalVisible(false)}
/>
)}
<div className="pt-8 flex">
<div className="pb-3 mt-3 flex">
<div className="flex justify-between w-full">
<div className="flex">
<div className="py-4">
{searching ? (
<div className="flex relative h-10 my-auto">
{searching ? (
<span className="filter-grayscale absolute top-3 left-3">
<SpinnerLoader small={true} />
) : (
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z"
fill="#A8A29E"
/>
</svg>
)}
</div>
</span>
) : (
<img
src={searchIcon}
title="Search"
className="filter-grayscale absolute top-3 left-3"
alt="search icon"
/>
)}
<input
className="w-64 pl-9 border-0"
type="search"
placeholder="Search by URL RegEx"
onKeyDown={(ke) => ke.key === "Enter" && search()}
Expand Down
33 changes: 15 additions & 18 deletions components/dashboard/src/admin/ProjectsSearch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { AdminGetListResult, Project } from "@gitpod/gitpod-protocol";
import { AdminPageHeader } from "./AdminPageHeader";
import Pagination from "../Pagination/Pagination";
import { SpinnerLoader } from "../components/Loader";
import searchIcon from "../icons/search.svg";

export default function ProjectsSearchPage() {
return (
Expand Down Expand Up @@ -94,24 +95,23 @@ export function ProjectsSearch() {
return (
<>
<div className="app-container">
<div className="pt-8 flex">
<div className="pt-3 mb-3 flex">
<div className="flex justify-between w-full">
<div className="flex">
<div className="py-4">
{searching ? (
<div className="flex relative h-10 my-auto">
{searching ? (
<span className="filter-grayscale absolute top-3 left-3">
<SpinnerLoader small={true} />
) : (
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z"
fill="#A8A29E"
/>
</svg>
)}
</div>
</span>
) : (
<img
src={searchIcon}
title="Search"
className="filter-grayscale absolute top-3 left-3"
alt="search icon"
/>
)}
<input
className="w-64 pl-9 border-0"
type="search"
placeholder="Search Projects"
onKeyDown={(k) => k.key === "Enter" && search()}
Expand All @@ -120,9 +120,6 @@ export function ProjectsSearch() {
}}
/>
</div>
<button disabled={searching} onClick={() => search()}>
Search
</button>
</div>
</div>
<div className="flex flex-col space-y-2">
Expand Down
33 changes: 15 additions & 18 deletions components/dashboard/src/admin/TeamsSearch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import Label from "./Label";
import { AdminPageHeader } from "./AdminPageHeader";
import Pagination from "../Pagination/Pagination";
import { SpinnerLoader } from "../components/Loader";
import searchIcon from "../icons/search.svg";

export default function TeamsSearchPage() {
return (
Expand Down Expand Up @@ -75,24 +76,23 @@ export function TeamsSearch() {
};
return (
<>
<div className="pt-8 flex">
<div className="mb-3 mt-3 flex">
<div className="flex justify-between w-full">
<div className="flex">
<div className="py-4">
{searching ? (
<div className="flex relative h-10 my-auto">
{searching ? (
<span className="filter-grayscale absolute top-3 left-3">
<SpinnerLoader small={true} />
) : (
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z"
fill="#A8A29E"
/>
</svg>
)}
</div>
</span>
) : (
<img
src={searchIcon}
title="Search"
className="filter-grayscale absolute top-3 left-3"
alt="search icon"
/>
)}
<input
className="w-64 pl-9 border-0"
type="search"
placeholder="Search Organizations"
onKeyDown={(k) => k.key === "Enter" && search()}
Expand All @@ -101,9 +101,6 @@ export function TeamsSearch() {
}}
/>
</div>
<button disabled={searching} onClick={() => search()}>
Search
</button>
</div>
</div>
<div className="flex flex-col space-y-2">
Expand Down
33 changes: 15 additions & 18 deletions components/dashboard/src/admin/UserSearch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import Pagination from "../Pagination/Pagination";
import { getGitpodService } from "../service/service";
import { AdminPageHeader } from "./AdminPageHeader";
import UserDetail from "./UserDetail";
import searchIcon from "../icons/search.svg";

export default function UserSearch() {
const location = useLocation();
Expand Down Expand Up @@ -64,24 +65,23 @@ export default function UserSearch() {
return (
<AdminPageHeader title="Admin" subtitle="Configure and manage instance settings.">
<div className="app-container">
<div className="pt-8 flex">
<div className="mb-3 mt-3 flex">
<div className="flex justify-between w-full">
<div className="flex">
<div className="py-4">
{searching ? (
<div className="flex relative h-10 my-auto">
{searching ? (
<span className="filter-grayscale absolute top-3 left-3">
<SpinnerLoader small={true} />
) : (
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z"
fill="#A8A29E"
/>
</svg>
)}
</div>
</span>
) : (
<img
src={searchIcon}
title="Search"
className="filter-grayscale absolute top-3 left-3"
alt="search icon"
/>
)}
<input
className="w-64 pl-9 border-0"
type="search"
placeholder="Search Users"
onKeyDown={(ke) => ke.key === "Enter" && search()}
Expand All @@ -90,9 +90,6 @@ export default function UserSearch() {
}}
/>
</div>
<button disabled={searching} onClick={() => search()}>
Search
</button>
</div>
</div>
<div className="flex flex-col space-y-2">
Expand Down
33 changes: 15 additions & 18 deletions components/dashboard/src/admin/WorkspacesSearch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import Alert from "../components/Alert";
import { isGitpodIo } from "../utils";
import { SpinnerLoader } from "../components/Loader";
import { WorkspaceStatusIndicator } from "../workspaces/WorkspaceStatusIndicator";
import searchIcon from "../icons/search.svg";

interface Props {
user?: User;
Expand Down Expand Up @@ -113,24 +114,23 @@ export function WorkspaceSearch(props: Props) {
return (
<>
<div className="app-container">
<div className="pt-8 flex">
<div className="mt-3 mb-3 flex">
<div className="flex justify-between w-full">
<div className="flex">
<div className="py-4">
{searching ? (
<div className="flex relative h-10 my-auto">
{searching ? (
<span className="filter-grayscale absolute top-3 left-3">
<SpinnerLoader small={true} />
) : (
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z"
fill="#A8A29E"
/>
</svg>
)}
</div>
</span>
) : (
<img
src={searchIcon}
title="Search"
className="filter-grayscale absolute top-3 left-3"
alt="search icon"
/>
)}
<input
className="w-64 pl-9 border-0"
type="search"
placeholder="Search Workspace IDs"
onKeyDown={(ke) => ke.key === "Enter" && search()}
Expand All @@ -139,9 +139,6 @@ export function WorkspaceSearch(props: Props) {
}}
/>
</div>
<button disabled={searching} onClick={() => search()}>
Search
</button>
</div>
</div>
<Alert type={"info"} closable={false} showIcon={true} className="flex rounded p-2 mb-2 w-full">
Expand Down
7 changes: 4 additions & 3 deletions components/dashboard/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,10 +84,9 @@
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select {
@apply block w-56 text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-500 focus:border-gray-400 dark:focus:border-gray-400 focus:ring-0;
@apply block w-56 text-gray-600 dark:text-gray-400 dark:bg-gray-800 bg-white rounded-md border border-gray-300 dark:border-gray-500 focus:border-gray-400 dark:focus:border-gray-400 focus:ring-0;
}
textarea::placeholder,
input[type="text"]::placeholder,
Expand All @@ -112,8 +111,10 @@
input[type="radio"] {
@apply border border-gray-300 focus:border-gray-400 focus:bg-white focus:ring-0;
}

/* Search */
input[type="search"] {
@apply border-0 dark:bg-transparent;
@apply border-0 dark:bg-gray-800 bg-gray-50 text-gray-600 dark:text-gray-400 rounded-md focus:border-gray-400 dark:focus:border-gray-400 focus:outline-none focus:ring ring-0 focus:ring-blue-400 dark:focus:ring-blue-500 transition ease-in-out;
}
input[type="checkbox"] {
@apply disabled:opacity-50;
Expand Down
4 changes: 2 additions & 2 deletions components/dashboard/src/projects/NewProject.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -359,7 +359,7 @@ export default function NewProject() {
</div>
</ContextMenu>
{showSearchInput && (
<div className="w-full relative ">
<div className="w-full relative h-10 my-auto">
<img
src={search}
title="Search"
Expand All @@ -368,7 +368,7 @@ export default function NewProject() {
/>
<input
className="w-96 pl-10 border-0"
type="text"
type="search"
placeholder="Search Repositories"
value={repoSearchFilter}
onChange={(e) => setRepoSearchFilter(e.target.value)}
Expand Down
28 changes: 11 additions & 17 deletions components/dashboard/src/projects/Projects.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { ProjectListItem } from "./ProjectListItem";
import { SpinnerLoader } from "../components/Loader";
import { useListProjectsQuery } from "../data/projects/list-projects-query";
import { projectsPathNew } from "./projects.routes";
import search from "../icons/search.svg";

export default function ProjectsPage() {
const history = useHistory();
Expand Down Expand Up @@ -93,25 +94,18 @@ export default function ProjectsPage() {
)}
{(data?.projects || []).length > 0 && (
<div className="app-container">
<div className="mt-8 pb-2 flex border-b border-gray-200 dark:border-gray-800">
<div className="flex">
<div className="py-4">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 16 16"
width="16"
height="16"
>
<path
fill="#A8A29E"
d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z"
/>
</svg>
</div>
<div className="mt-3 pb-3 flex border-b border-gray-200 dark:border-gray-800">
<div className="flex relative h-10 my-auto">
<img
src={search}
title="Search"
className="filter-grayscale absolute top-3 left-3"
alt="search icon"
/>
<input
type="search"
placeholder="Search Projects"
className="w-64 pl-9 border-0"
placeholder="Filter Projects"
onChange={(e) => setSearchFilter(e.target.value)}
/>
</div>
Expand Down
Loading

0 comments on commit 8eb9d8c

Please sign in to comment.