Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[dashboard] add button.gp-link CSS class #9641

Merged
merged 1 commit into from
May 11, 2022
Merged

[dashboard] add button.gp-link CSS class #9641

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 24 additions & 11 deletions components/dashboard/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
@tailwind utilities;

@layer base {
html, body {
html,
body {
@apply h-full;
}
body {
Expand Down Expand Up @@ -61,30 +62,42 @@
@apply cursor-default opacity-50 pointer-events-none;
}

a.gp-link {
@apply text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500;
button.gp-link {
@apply bg-transparent hover:bg-transparent p-0 rounded-none;
}

a.gp-link,
button.gp-link {
@apply text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500;
}

input[type=text], input[type=search], input[type=password], select {
input[type="text"],
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;
}
input[type=text]::placeholder, input[type=search]::placeholder, input[type=password]::placeholder {
input[type="text"]::placeholder,
input[type="search"]::placeholder,
input[type="password"]::placeholder {
@apply text-gray-400 dark:text-gray-500;
}
input[type=text].error, input[type=password].error, select.error {
input[type="text"].error,
input[type="password"].error,
select.error {
@apply border-gitpod-red dark:border-gitpod-red focus:border-gitpod-red dark:focus:border-gitpod-red;
}
input[disabled] {
@apply bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-400 dark:text-gray-500;
}
input[type=radio] {
input[type="radio"] {
@apply border border-gray-300 focus:border-gray-400 focus:bg-white focus:ring-0;
}
input[type=search] {
input[type="search"] {
@apply border-0 dark:bg-transparent;
}
input[type=checkbox] {
@apply disabled:opacity-50
input[type="checkbox"] {
@apply disabled:opacity-50;
}

progress {
Expand All @@ -99,4 +112,4 @@
progress::-moz-progress-bar {
@apply rounded-md bg-green-500;
}
}
}
11 changes: 5 additions & 6 deletions components/dashboard/src/projects/NewProject.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -368,9 +368,9 @@ export default function NewProject() {
<p className="text-gray-500 text-center text-base mt-12">
{loaded && noReposAvailable ? "Select account on " : "Select a Git repository on "}
<b>{selectedProviderHost}</b> (
<a className="gp-link cursor-pointer" onClick={() => setShowGitProviders(true)}>
<button className="gp-link cursor-pointer" onClick={() => setShowGitProviders(true)}>
change
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue(non-blocking): This will slightly affect how the link style is rendered but that's minor for now.

BEFORE AFTER
link-before link-after

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch 🏅 !

I guess it stems from text-sm in the Tailwind styles applied to the button element while a seems to just inherit as usual.

The upcoming button component should take it into account. If you need a volunteer for working on the component, you know where to find me 😊

</a>
</button>
)
</p>
<div className={`mt-2 flex-col ${noReposAvailable && isGitHub() ? "w-96" : ""}`}>
Expand Down Expand Up @@ -493,13 +493,12 @@ export default function NewProject() {
<div>
<div className="text-gray-500 text-center w-96 mx-8">
Repository not found?{" "}
<a
href="javascript:void(0)"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

praise: Nice!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion(non-blocking): We have a few more actions in /plans masked as links that could benefit from this. However, I wouldn't block this from merging it as we're going to update and replace plans entirly soon.

gitpod/components/dashboard/src/settings/Plans.tsx

Lines 390 to 396 in 0895496

<a
className="text-blue-light leading-6"
href="javascript:void(0)"
onClick={() => confirmCancelDowngrade()}
>
Cancel
</a>

gitpod/components/dashboard/src/settings/Plans.tsx

Lines 452 to 458 in 0895496

<a
className="text-blue-light leading-6"
href="javascript:void(0)"
onClick={() => confirmCancelDowngrade()}
>
Cancel
</a>

...

<button
onClick={(e) => reconfigure()}
className="text-gray-400 underline underline-thickness-thin underline-offset-small hover:text-gray-600"
className="gp-link text-gray-400 underline underline-thickness-thin underline-offset-small hover:text-gray-600"
>
Reconfigure
</a>
</button>
</div>
</div>
)}
Expand Down