Skip to content

Update dotfiles input help text design#7493

Merged
roboquat merged 1 commit intomainfrom
gt/update-dotfiles-design
Jan 7, 2022
Merged

Update dotfiles input help text design#7493
roboquat merged 1 commit intomainfrom
gt/update-dotfiles-design

Conversation

@gtsiolis
Copy link
Contributor

@gtsiolis gtsiolis commented Jan 7, 2022 •
edited
Loading

Description

Following the changes in #7337, this will update dotfiles input help text design to match the design of other help text instances accross the product.

How to test

  1. Go to /preferences
  2. Notice how the dotfiles input help text matches the design of other help text instances accross the product. For example, check the help text when adding a new environment variable in /variables.
BEFORE AFTER
dotfiles-before dotfiles-after

Release Notes

NONE

@gtsiolis gtsiolis added user experience component: dashboard type: improvement Improves an existing feature or existing code team: webapp Issue belongs to the WebApp team labels Jan 7, 2022
@gtsiolis
Copy link
Contributor Author

gtsiolis commented Jan 7, 2022

@jankeromnes could you take a look at this minor change when you're free?

@gtsiolis gtsiolis requested a review from jankeromnes January 7, 2022 00:02
jankeromnes
jankeromnes approved these changes Jan 7, 2022
View reviewed changes
Copy link
Contributor

@jankeromnes jankeromnes left a comment

Choose a reason for hiding this comment

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

Nice! 🎯 Very subtle yet remarkable improvement ✨

components/dashboard/src/settings/Preferences.tsx
<h4>Repository URL</h4>
<input type="text" value={dotfileRepo} className="w-full" placeholder="e.g. https://github.com/username/dotfiles" onChange={(e) => setDotfileRepo(e.target.value)} />
<p className="text-base text-gray-500 dark:text-gray-400">Add a repository URL that includes dotfiles. Gitpod will clone and install your dotfiles for every new workspace.</p>
<div className="mt-1">
Copy link
Contributor

@jankeromnes jankeromnes Jan 7, 2022

Choose a reason for hiding this comment

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

Nit: You could add the mt-1 class to the <p/> element below, in order to avoid extra nesting. Not very important though.

Copy link
Contributor Author

@gtsiolis gtsiolis Jan 10, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

FWIW, Tried to replicate the semantics structure we already use elsewhere:

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

Lines 73 to 75 in e2c1988

<div className="mt-1">
<p className="text-gray-500">You can pass a variable for a specific project or use wildcard character (<CodeText>*/*</CodeText>) to make it available in more projects.</p>
</div>

Also, agree we could make this could be improved. Creating a reusable component for this form element could help. 💡

@roboquat roboquat added the lgtm label Jan 7, 2022
@roboquat
Copy link
Contributor

roboquat commented Jan 7, 2022

LGTM label has been added.

DetailsGit tree hash: b1364a7b456d86e1a4ccdc4b498d641ea2edeac3

@jankeromnes
Copy link
Contributor

jankeromnes commented Jan 7, 2022 •
edited by werft-gitpod-dev-com bot
Loading

Okay fine @roboquat 🙄

/approve no-issue

@roboquat
Copy link
Contributor

roboquat commented Jan 7, 2022

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: jankeromnes

Associated issue requirement bypassed by: jankeromnes

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@roboquat roboquat merged commit 9e69e6e into main Jan 7, 2022
@roboquat roboquat deleted the gt/update-dotfiles-design branch January 7, 2022 08:55
@gtsiolis
Copy link
Contributor Author

gtsiolis commented Jan 10, 2022 •
edited by werft-gitpod-dev-com bot
Loading

Thanks, @jankeromnes! 🏀

@roboquat roboquat added deployed: webapp Meta team change is running in production deployed Change is completely running in production labels Jan 11, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@jankeromnes jankeromnes jankeromnes approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@jankeromnes jankeromnes

Labels

approved component: dashboard deployed: webapp Meta team change is running in production deployed Change is completely running in production release-note-none size/XS team: webapp Issue belongs to the WebApp team type: improvement Improves an existing feature or existing code user experience

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@gtsiolis @roboquat @jankeromnes