Skip to content

Commit 8eb9d8c

Browse files
gtsiolisroboquat
gtsiolis
authored and
roboquat
committed
Update search input style
1 parent 2d15009 commit 8eb9d8c

File tree

10 files changed

+108
-137
lines changed

10 files changed

+108
-137
lines changed

‎components/dashboard/src/admin/BlockedRepositories.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { ItemFieldContextMenu } from "../components/ItemsList";
1616
import { ContextMenuEntry } from "../components/ContextMenu";
1717
import Alert from "../components/Alert";
1818
import { SpinnerLoader } from "../components/Loader";
19+
import searchIcon from "../icons/search.svg";
1920

2021
export function BlockedRepositories() {
2122
return (
@@ -116,24 +117,23 @@ export function BlockedRepositoriesList(props: Props) {
116117
onClose={() => setDeleteModalVisible(false)}
117118
/>
118119
)}
119-
<div className="pt-8 flex">
120+
<div className="pb-3 mt-3 flex">
120121
<div className="flex justify-between w-full">
121-
<div className="flex">
122-
<div className="py-4">
123-
{searching ? (
122+
<div className="flex relative h-10 my-auto">
123+
{searching ? (
124+
<span className="filter-grayscale absolute top-3 left-3">
124125
<SpinnerLoader small={true} />
125-
) : (
126-
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
127-
<path
128-
fillRule="evenodd"
129-
clipRule="evenodd"
130-
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"
131-
fill="#A8A29E"
132-
/>
133-
</svg>
134-
)}
135-
</div>
126+
</span>
127+
) : (
128+
<img
129+
src={searchIcon}
130+
title="Search"
131+
className="filter-grayscale absolute top-3 left-3"
132+
alt="search icon"
133+
/>
134+
)}
136135
<input
136+
className="w-64 pl-9 border-0"
137137
type="search"
138138
placeholder="Search by URL RegEx"
139139
onKeyDown={(ke) => ke.key === "Enter" && search()}

‎components/dashboard/src/admin/ProjectsSearch.tsx‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { AdminGetListResult, Project } from "@gitpod/gitpod-protocol";
1515
import { AdminPageHeader } from "./AdminPageHeader";
1616
import Pagination from "../Pagination/Pagination";
1717
import { SpinnerLoader } from "../components/Loader";
18+
import searchIcon from "../icons/search.svg";
1819

1920
export default function ProjectsSearchPage() {
2021
return (
@@ -94,24 +95,23 @@ export function ProjectsSearch() {
9495
return (
9596
<>
9697
<div className="app-container">
97-
<div className="pt-8 flex">
98+
<div className="pt-3 mb-3 flex">
9899
<div className="flex justify-between w-full">
99-
<div className="flex">
100-
<div className="py-4">
101-
{searching ? (
100+
<div className="flex relative h-10 my-auto">
101+
{searching ? (
102+
<span className="filter-grayscale absolute top-3 left-3">
102103
<SpinnerLoader small={true} />
103-
) : (
104-
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
105-
<path
106-
fillRule="evenodd"
107-
clipRule="evenodd"
108-
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"
109-
fill="#A8A29E"
110-
/>
111-
</svg>
112-
)}
113-
</div>
104+
</span>
105+
) : (
106+
<img
107+
src={searchIcon}
108+
title="Search"
109+
className="filter-grayscale absolute top-3 left-3"
110+
alt="search icon"
111+
/>
112+
)}
114113
<input
114+
className="w-64 pl-9 border-0"
115115
type="search"
116116
placeholder="Search Projects"
117117
onKeyDown={(k) => k.key === "Enter" && search()}
@@ -120,9 +120,6 @@ export function ProjectsSearch() {
120120
}}
121121
/>
122122
</div>
123-
<button disabled={searching} onClick={() => search()}>
124-
Search
125-
</button>
126123
</div>
127124
</div>
128125
<div className="flex flex-col space-y-2">

‎components/dashboard/src/admin/TeamsSearch.tsx‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import Label from "./Label";
1616
import { AdminPageHeader } from "./AdminPageHeader";
1717
import Pagination from "../Pagination/Pagination";
1818
import { SpinnerLoader } from "../components/Loader";
19+
import searchIcon from "../icons/search.svg";
1920

2021
export default function TeamsSearchPage() {
2122
return (
@@ -75,24 +76,23 @@ export function TeamsSearch() {
7576
};
7677
return (
7778
<>
78-
<div className="pt-8 flex">
79+
<div className="mb-3 mt-3 flex">
7980
<div className="flex justify-between w-full">
80-
<div className="flex">
81-
<div className="py-4">
82-
{searching ? (
81+
<div className="flex relative h-10 my-auto">
82+
{searching ? (
83+
<span className="filter-grayscale absolute top-3 left-3">
8384
<SpinnerLoader small={true} />
84-
) : (
85-
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
86-
<path
87-
fillRule="evenodd"
88-
clipRule="evenodd"
89-
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"
90-
fill="#A8A29E"
91-
/>
92-
</svg>
93-
)}
94-
</div>
85+
</span>
86+
) : (
87+
<img
88+
src={searchIcon}
89+
title="Search"
90+
className="filter-grayscale absolute top-3 left-3"
91+
alt="search icon"
92+
/>
93+
)}
9594
<input
95+
className="w-64 pl-9 border-0"
9696
type="search"
9797
placeholder="Search Organizations"
9898
onKeyDown={(k) => k.key === "Enter" && search()}
@@ -101,9 +101,6 @@ export function TeamsSearch() {
101101
}}
102102
/>
103103
</div>
104-
<button disabled={searching} onClick={() => search()}>
105-
Search
106-
</button>
107104
</div>
108105
</div>
109106
<div className="flex flex-col space-y-2">

‎components/dashboard/src/admin/UserSearch.tsx‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import Pagination from "../Pagination/Pagination";
1414
import { getGitpodService } from "../service/service";
1515
import { AdminPageHeader } from "./AdminPageHeader";
1616
import UserDetail from "./UserDetail";
17+
import searchIcon from "../icons/search.svg";
1718

1819
export default function UserSearch() {
1920
const location = useLocation();
@@ -64,24 +65,23 @@ export default function UserSearch() {
6465
return (
6566
<AdminPageHeader title="Admin" subtitle="Configure and manage instance settings.">
6667
<div className="app-container">
67-
<div className="pt-8 flex">
68+
<div className="mb-3 mt-3 flex">
6869
<div className="flex justify-between w-full">
69-
<div className="flex">
70-
<div className="py-4">
71-
{searching ? (
70+
<div className="flex relative h-10 my-auto">
71+
{searching ? (
72+
<span className="filter-grayscale absolute top-3 left-3">
7273
<SpinnerLoader small={true} />
73-
) : (
74-
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
75-
<path
76-
fillRule="evenodd"
77-
clipRule="evenodd"
78-
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"
79-
fill="#A8A29E"
80-
/>
81-
</svg>
82-
)}
83-
</div>
74+
</span>
75+
) : (
76+
<img
77+
src={searchIcon}
78+
title="Search"
79+
className="filter-grayscale absolute top-3 left-3"
80+
alt="search icon"
81+
/>
82+
)}
8483
<input
84+
className="w-64 pl-9 border-0"
8585
type="search"
8686
placeholder="Search Users"
8787
onKeyDown={(ke) => ke.key === "Enter" && search()}
@@ -90,9 +90,6 @@ export default function UserSearch() {
9090
}}
9191
/>
9292
</div>
93-
<button disabled={searching} onClick={() => search()}>
94-
Search
95-
</button>
9693
</div>
9794
</div>
9895
<div className="flex flex-col space-y-2">

‎components/dashboard/src/admin/WorkspacesSearch.tsx‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import Alert from "../components/Alert";
2828
import { isGitpodIo } from "../utils";
2929
import { SpinnerLoader } from "../components/Loader";
3030
import { WorkspaceStatusIndicator } from "../workspaces/WorkspaceStatusIndicator";
31+
import searchIcon from "../icons/search.svg";
3132

3233
interface Props {
3334
user?: User;
@@ -113,24 +114,23 @@ export function WorkspaceSearch(props: Props) {
113114
return (
114115
<>
115116
<div className="app-container">
116-
<div className="pt-8 flex">
117+
<div className="mt-3 mb-3 flex">
117118
<div className="flex justify-between w-full">
118-
<div className="flex">
119-
<div className="py-4">
120-
{searching ? (
119+
<div className="flex relative h-10 my-auto">
120+
{searching ? (
121+
<span className="filter-grayscale absolute top-3 left-3">
121122
<SpinnerLoader small={true} />
122-
) : (
123-
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
124-
<path
125-
fillRule="evenodd"
126-
clipRule="evenodd"
127-
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"
128-
fill="#A8A29E"
129-
/>
130-
</svg>
131-
)}
132-
</div>
123+
</span>
124+
) : (
125+
<img
126+
src={searchIcon}
127+
title="Search"
128+
className="filter-grayscale absolute top-3 left-3"
129+
alt="search icon"
130+
/>
131+
)}
133132
<input
133+
className="w-64 pl-9 border-0"
134134
type="search"
135135
placeholder="Search Workspace IDs"
136136
onKeyDown={(ke) => ke.key === "Enter" && search()}
@@ -139,9 +139,6 @@ export function WorkspaceSearch(props: Props) {
139139
}}
140140
/>
141141
</div>
142-
<button disabled={searching} onClick={() => search()}>
143-
Search
144-
</button>
145142
</div>
146143
</div>
147144
<Alert type={"info"} closable={false} showIcon={true} className="flex rounded p-2 mb-2 w-full">

‎components/dashboard/src/index.css‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,10 +84,9 @@
8484
input[type="text"],
8585
input[type="tel"],
8686
input[type="number"],
87-
input[type="search"],
8887
input[type="password"],
8988
select {
90-
@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;
89+
@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;
9190
}
9291
textarea::placeholder,
9392
input[type="text"]::placeholder,
@@ -112,8 +111,10 @@
112111
input[type="radio"] {
113112
@apply border border-gray-300 focus:border-gray-400 focus:bg-white focus:ring-0;
114113
}
114+
115+
/* Search */
115116
input[type="search"] {
116-
@apply border-0 dark:bg-transparent;
117+
@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;
117118
}
118119
input[type="checkbox"] {
119120
@apply disabled:opacity-50;

‎components/dashboard/src/projects/NewProject.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -359,7 +359,7 @@ export default function NewProject() {
359359
</div>
360360
</ContextMenu>
361361
{showSearchInput && (
362-
<div className="w-full relative ">
362+
<div className="w-full relative h-10 my-auto">
363363
<img
364364
src={search}
365365
title="Search"
@@ -368,7 +368,7 @@ export default function NewProject() {
368368
/>
369369
<input
370370
className="w-96 pl-10 border-0"
371-
type="text"
371+
type="search"
372372
placeholder="Search Repositories"
373373
value={repoSearchFilter}
374374
onChange={(e) => setRepoSearchFilter(e.target.value)}

‎components/dashboard/src/projects/Projects.tsx‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { ProjectListItem } from "./ProjectListItem";
1818
import { SpinnerLoader } from "../components/Loader";
1919
import { useListProjectsQuery } from "../data/projects/list-projects-query";
2020
import { projectsPathNew } from "./projects.routes";
21+
import search from "../icons/search.svg";
2122

2223
export default function ProjectsPage() {
2324
const history = useHistory();
@@ -93,25 +94,18 @@ export default function ProjectsPage() {
9394
)}
9495
{(data?.projects || []).length > 0 && (
9596
<div className="app-container">
96-
<div className="mt-8 pb-2 flex border-b border-gray-200 dark:border-gray-800">
97-
<div className="flex">
98-
<div className="py-4">
99-
<svg
100-
xmlns="http://www.w3.org/2000/svg"
101-
fill="none"
102-
viewBox="0 0 16 16"
103-
width="16"
104-
height="16"
105-
>
106-
<path
107-
fill="#A8A29E"
108-
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"
109-
/>
110-
</svg>
111-
</div>
97+
<div className="mt-3 pb-3 flex border-b border-gray-200 dark:border-gray-800">
98+
<div className="flex relative h-10 my-auto">
99+
<img
100+
src={search}
101+
title="Search"
102+
className="filter-grayscale absolute top-3 left-3"
103+
alt="search icon"
104+
/>
112105
<input
113106
type="search"
114-
placeholder="Search Projects"
107+
className="w-64 pl-9 border-0"
108+
placeholder="Filter Projects"
115109
onChange={(e) => setSearchFilter(e.target.value)}
116110
/>
117111
</div>

0 commit comments

Comments
 (0)