Skip to content

Commit 697c103

Browse files
gtsiolisgtsiolis
authored
Update search input style on project pages (#16636)
1 parent 1b6e8f3 commit 697c103

File tree

5 files changed

+40
-46
lines changed

5 files changed

+40
-46
lines changed

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

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
1818
import { CostCenterJSON, CostCenter_BillingStrategy } from "@gitpod/gitpod-protocol/lib/usage";
1919
import Modal from "../components/Modal";
2020
import { Heading2 } from "../components/typography/headings";
21+
import search from "../icons/search.svg";
2122

2223
export default function TeamDetail(props: { team: Team }) {
2324
const { team } = props;
@@ -134,17 +135,22 @@ export default function TeamDetail(props: { team: Team }) {
134135
</Property>
135136
)}
136137
</div>
137-
<div className="flex mt-4">
138-
<div className="flex">
139-
<div className="py-4">
140-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="16" height="16">
141-
<path
142-
fill="#A8A29E"
143-
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"
144-
/>
145-
</svg>
138+
<div className="flex">
139+
<div className="flex mt-3 pb-3">
140+
<div className="flex relative h-10 my-auto">
141+
<img
142+
src={search}
143+
title="Search"
144+
className="filter-grayscale absolute top-3 left-3"
145+
alt="search icon"
146+
/>
147+
<input
148+
className="w-64 pl-9 border-0"
149+
type="search"
150+
placeholder="Search Members"
151+
onChange={(e) => setSearchText(e.target.value)}
152+
/>
146153
</div>
147-
<input type="search" placeholder="Search Members" onChange={(e) => setSearchText(e.target.value)} />
148154
</div>
149155
</div>
150156

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

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { Link, Redirect } from "react-router-dom";
2222
import { Disposable } from "vscode-jsonrpc";
2323
import { useCurrentProject } from "./project-context";
2424
import { getProjectTabs } from "./projects.routes";
25+
import search from "../icons/search.svg";
2526

2627
export default function PrebuildsPage(props: { project?: Project; isAdminDashboard?: boolean }) {
2728
const currentProject = useCurrentProject();
@@ -142,30 +143,23 @@ export default function PrebuildsPage(props: { project?: Project; isAdminDashboa
142143
/>
143144
)}
144145
<div className={props.isAdminDashboard ? "" : "app-container"}>
145-
<div className={props.isAdminDashboard ? "flex" : "flex mt-8"}>
146-
<div className="flex">
147-
<div className="py-4">
148-
<svg
149-
xmlns="http://www.w3.org/2000/svg"
150-
fill="none"
151-
viewBox="0 0 16 16"
152-
width="16"
153-
height="16"
154-
>
155-
<path
156-
fill="#A8A29E"
157-
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"
158-
/>
159-
</svg>
160-
</div>
146+
<div className={props.isAdminDashboard ? "flex" : "flex pt-2"}>
147+
<div className="flex relative h-10 my-auto">
148+
<img
149+
src={search}
150+
title="Search"
151+
className="filter-grayscale absolute top-3 left-3"
152+
alt="search icon"
153+
/>
161154
<input
162155
type="search"
156+
className="w-64 pl-9 border-0"
163157
placeholder="Search Prebuilds"
164158
onChange={(e) => setSearchFilter(e.target.value)}
165159
/>
166160
</div>
167161
<div className="flex-1" />
168-
<div className="py-3 pl-3">
162+
<div className="py-2 pl-3">
169163
<DropDown prefix="Prebuild Status: " customClasses="w-32" entries={statusFilterEntries()} />
170164
</div>
171165
{!props.isAdminDashboard && (

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

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { prebuildStatusIcon, prebuildStatusLabel } from "./Prebuilds";
2323
import { useCurrentProject } from "./project-context";
2424
import { getProjectTabs } from "./projects.routes";
2525
import { shortCommitMessage, toRemoteURL } from "./render-utils";
26+
import search from "../icons/search.svg";
2627

2728
export default function ProjectsPage() {
2829
const history = useHistory();
@@ -226,24 +227,17 @@ export default function ProjectsPage() {
226227
</div>
227228
) : (
228229
<>
229-
<div className="flex mt-8">
230-
<div className="flex">
231-
<div className="py-4">
232-
<svg
233-
xmlns="http://www.w3.org/2000/svg"
234-
fill="none"
235-
viewBox="0 0 16 16"
236-
width="16"
237-
height="16"
238-
>
239-
<path
240-
fill="#A8A29E"
241-
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"
242-
/>
243-
</svg>
244-
</div>
230+
<div className="pt-2 flex">
231+
<div className="flex relative h-10 my-auto">
232+
<img
233+
src={search}
234+
title="Search"
235+
className="filter-grayscale absolute top-3 left-3"
236+
alt="search icon"
237+
/>
245238
<input
246239
type="search"
240+
className="w-64 pl-9 border-0"
247241
placeholder="Search Active Branches"
248242
onChange={(e) => setSearchFilter(e.target.value)}
249243
/>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export default function ProjectsPage() {
111111
/>
112112
</div>
113113
<div className="flex-1" />
114-
<div className="py-3 pl-3"></div>
114+
<div className="py-2 pl-3"></div>
115115
{team && (
116116
<Link to="./members" className="flex">
117117
<button className="ml-2 secondary">Invite Members</button>

‎components/dashboard/src/workspaces/WorkspacesSearchBar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ export const WorkspacesSearchBar: FunctionComponent<WorkspacesSearchBarProps> =
4040
/>
4141
</div>
4242
<div className="flex-1" />
43-
<div className="py-3"></div>
44-
<div className="py-3 pl-3">
43+
<div className="py-2"></div>
44+
<div className="py-2 pl-3">
4545
<DropDown
4646
prefix="Limit: "
4747
customClasses="w-32"

0 commit comments

Comments
 (0)