[dashboard] Misc style updates #3619
Conversation
gtsiolis
force-pushed
the
gt/misc-style-updates
branch
from
af9e396 to
84dffcb
Compare
|
/werft run 👍 started the job as gitpod-build-gt-misc-style-updates.12 |
There was a problem hiding this comment.
This should fix in some small visual details. @svenefftinge could you review and take over the remaining task to deep link to All Workspaces. WDYT?
Two things to consider before merging:
- Deep link to All Workspaces from the empty Workspaces list.
- New Integration button placement.
| <div className="text-center pb-6 text-gray-500">Prefix any git repository URL with gitpod.io/# or create a new workspace for a recently used project. <a className="text-gray-400 underline underline-thickness-thin underline-offset-small hover:text-gray-600" href="https://www.gitpod.io/docs/getting-started/">Learn more</a></div> | ||
| <span> | ||
| <button onClick={this.showStartWSModal} className="font-medium">New Workspace</button> | ||
| <button className="ml-2 font-medium border-gray-500 text-gray-500 bg-white hover:bg-gray-100 hover:bg-border-700 hover:text-gray-700">View All Workspaces</button> |
There was a problem hiding this comment.
issue: Probably the most important change in this one. We'll need to implement the deep link to All Workspaces.
There was a problem hiding this comment.
I have made it so that the button only occurs if there are actually any workspaces.
components/dashboard/src/index.css
Outdated
| @@ -35,15 +35,15 @@ | |||
|
|
|||
| @layer components { | |||
| button { | |||
| @apply cursor-pointer px-4 py-2 my-auto bg-green-600 hover:bg-green-700 border-2 border-green-800 text-gray-100 text-sm font-medium rounded-md focus:outline-none focus:ring focus:border-blue-300; | |||
| @apply cursor-pointer px-4 py-2 my-auto bg-green-600 hover:bg-green-700 border-2 border-green-600 hover:border-green-800 hover:border-green-800 text-gray-100 text-sm font-medium rounded-md focus:outline-none focus:ring focus:border-blue-300 transition ease-in-out; | |||
There was a problem hiding this comment.
issue: Need to make sure this doesn't override with changes in #3620
components/dashboard/src/index.css
Outdated
| } | ||
|
|
||
| button:disabled { | ||
| @apply cursor-default; | ||
| } | ||
|
|
||
| input[type=text] { | ||
| @apply text-xs block w-56 text-sm text-gray-600 rounded-md border-2 border-gray-400 focus:border-gray-500 focus:bg-white focus:ring-0; |
| <h3>Environment Variables</h3> | ||
| <h2 className="text-gray-500">Variables are used to store information like passwords.</h2> | ||
| </div> | ||
| {envVars.length !== 0 |
There was a problem hiding this comment.
thought: Not sure if there's a better more efficient way to check this here.
| {providers.length !== 0 | ||
| ? | ||
| <div className="mt-3 flex mt-0"> | ||
| <button onClick={() => setModal({ mode: "new" })} className="ml-2 font-medium">New Integration</button> |
There was a problem hiding this comment.
thought: This could look like weird. An alternative plan could be to a) introduce the table header (see Workspaces, Environment Variables) to add some visual balance or b) keep the New Integration button below the list.
| @@ -45,7 +45,7 @@ export default function Account() { | |||
|
|
|||
| <SettingsPage title='Account' subtitle='Manage account and git configuration.'> | |||
There was a problem hiding this comment.
issue: We're still missing the whitespace on the right of this page after a recent change. See #3582 (comment)
svenefftinge
force-pushed
the
gt/misc-style-updates
branch
from
8edfea1 to
de29078
Compare
svenefftinge
force-pushed
the
gt/misc-style-updates
branch
from
de29078 to
3e1c766
Compare
|
Good to merge? |
No description provided.