Skip to content

Commit f77c43d

Browse files
gtsiolisgtsiolis
committed
Update search input style on project pages
1 parent e4e0514 commit f77c43d

File tree

3 files changed

+37
-43
lines changed

3 files changed

+37
-43
lines changed

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

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
1717
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";
20+
import search from "../icons/search.svg";
2021

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

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

Lines changed: 10 additions & 16 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,23 +143,16 @@ 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 mt-3 pb-3"}>
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
155+
className="w-64 pl-9 border-0"
162156
type="search"
163157
placeholder="Search Prebuilds"
164158
onChange={(e) => setSearchFilter(e.target.value)}

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

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { prebuildStatusIcon, prebuildStatusLabel } from "./Prebuilds";
2222
import { useCurrentProject } from "./project-context";
2323
import { getProjectTabs } from "./projects.routes";
2424
import { shortCommitMessage, toRemoteURL } from "./render-utils";
25+
import search from "../icons/search.svg";
2526

2627
export default function ProjectsPage() {
2728
const history = useHistory();
@@ -197,7 +198,7 @@ export default function ProjectsPage() {
197198
subtitle={
198199
<h2 className="tracking-wide">
199200
View recent active branches for{" "}
200-
<a target="_blank" rel="noreferrer noopener" className="gp-link" href={project?.cloneUrl!}>
201+
<a className="gp-link" href={project?.cloneUrl!}>
201202
{toRemoteURL(project?.cloneUrl || "")}
202203
</a>
203204
.
@@ -225,23 +226,16 @@ export default function ProjectsPage() {
225226
</div>
226227
) : (
227228
<>
228-
<div className="flex mt-8">
229-
<div className="flex">
230-
<div className="py-4">
231-
<svg
232-
xmlns="http://www.w3.org/2000/svg"
233-
fill="none"
234-
viewBox="0 0 16 16"
235-
width="16"
236-
height="16"
237-
>
238-
<path
239-
fill="#A8A29E"
240-
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"
241-
/>
242-
</svg>
243-
</div>
229+
<div className="mt-3 pb-3 flex border-b border-gray-200 dark:border-gray-800">
230+
<div className="flex relative h-10 my-auto">
231+
<img
232+
src={search}
233+
title="Search"
234+
className="filter-grayscale absolute top-3 left-3"
235+
alt="search icon"
236+
/>
244237
<input
238+
className="w-64 pl-9 border-0"
245239
type="search"
246240
placeholder="Search Active Branches"
247241
onChange={(e) => setSearchFilter(e.target.value)}

0 commit comments

Comments
 (0)