From ce05f58c44d9d8ff4cf2a78e23a31b7571d42454 Mon Sep 17 00:00:00 2001 From: Jan Keromnes Date: Tue, 13 Apr 2021 07:31:38 +0000 Subject: [PATCH] [dashboard] Implement dark theme Co-authored-by: George Tsiolis --- components/dashboard/src/App.tsx | 2 +- components/dashboard/src/FromReferrer.tsx | 2 +- components/dashboard/src/Login.tsx | 8 +- components/dashboard/src/WhatsNew.tsx | 4 +- components/dashboard/src/admin/UserDetail.tsx | 2 +- components/dashboard/src/admin/UserSearch.tsx | 12 +- .../dashboard/src/admin/WorkspaceDetail.tsx | 6 +- .../dashboard/src/admin/WorkspacesSearch.tsx | 10 +- .../dashboard/src/components/CheckBox.tsx | 4 +- .../dashboard/src/components/ContextMenu.tsx | 6 +- .../dashboard/src/components/DropDown.tsx | 4 +- .../dashboard/src/components/Header.tsx | 2 +- components/dashboard/src/components/Menu.tsx | 8 +- components/dashboard/src/components/Modal.tsx | 6 +- .../src/components/PageWithSubMenu.tsx | 2 +- .../src/components/SelectableCard.tsx | 4 +- .../dashboard/src/components/Separator.tsx | 2 +- .../dashboard/src/components/Tooltip.tsx | 2 +- components/dashboard/src/icons/ThreeDots.svg | 7 - .../dashboard/src/images/gitpod-dark.svg | 1 + components/dashboard/src/images/gitpod.svg | 17 +- components/dashboard/src/index.css | 36 +- .../src/prebuilds/InstallGitHubApp.tsx | 8 +- components/dashboard/src/provider-utils.tsx | 9 +- components/dashboard/src/settings/Account.tsx | 6 +- .../src/settings/EnvironmentVariables.tsx | 19 +- .../dashboard/src/settings/Integrations.tsx | 34 +- components/dashboard/src/settings/Plans.tsx | 16 +- .../dashboard/src/settings/Preferences.tsx | 10 +- components/dashboard/src/settings/Teams.tsx | 35 +- .../dashboard/src/start/CreateWorkspace.tsx | 14 +- components/dashboard/src/start/StartPage.tsx | 2 +- .../dashboard/src/start/StartWorkspace.tsx | 12 +- components/dashboard/src/tailwind.output.css | 656 +++++++++++++++++- .../src/workspaces/StartWorkspaceModal.tsx | 18 +- .../src/workspaces/WorkspaceEntry.tsx | 19 +- .../dashboard/src/workspaces/Workspaces.tsx | 14 +- components/dashboard/tailwind.config.js | 2 + 38 files changed, 815 insertions(+), 206 deletions(-) delete mode 100644 components/dashboard/src/icons/ThreeDots.svg create mode 100644 components/dashboard/src/images/gitpod-dark.svg diff --git a/components/dashboard/src/App.tsx b/components/dashboard/src/App.tsx index 7c9c3ec7954b14..dfd579d764c1c9 100644 --- a/components/dashboard/src/App.tsx +++ b/components/dashboard/src/App.tsx @@ -81,7 +81,7 @@ function App() { return

Your account has been blocked.

-

Please contact support if you think this is an error. See also terms of service.

+

Please contact support if you think this is an error. See also terms of service.

; } diff --git a/components/dashboard/src/FromReferrer.tsx b/components/dashboard/src/FromReferrer.tsx index 76e3419ba3fca4..498a2894d11540 100644 --- a/components/dashboard/src/FromReferrer.tsx +++ b/components/dashboard/src/FromReferrer.tsx @@ -19,7 +19,7 @@ export default function FromReferrer() { return
-

No Referrer Found

+

No Referrer Found

It looks like you are trying to open a workspace, but the referrer URL is empty. This happens when the git hoster doesn't send the referrer header.
Please prefix the repository URL with 

https://gitpod.io/#
in order to start a workspace. Learn more

diff --git a/components/dashboard/src/Login.tsx b/components/dashboard/src/Login.tsx index 4408b4217f5416..0f75ba0b121caa 100644 --- a/components/dashboard/src/Login.tsx +++ b/components/dashboard/src/Login.tsx @@ -10,6 +10,7 @@ import { UserContext } from "./user-context"; import { getGitpodService } from "./service/service"; import { iconForAuthProvider, openAuthorizeWindow, simplifyProviderName } from "./provider-utils"; import gitpod from './images/gitpod.svg'; +import gitpodDark from './images/gitpod-dark.svg'; import gitpodIcon from './icons/gitpod.svg'; import automate from "./images/welcome/automate.svg"; import code from "./images/welcome/code.svg"; @@ -87,11 +88,12 @@ export function Login() { } return (
- {showWelcome ?
+ {showWelcome ?
- + +

Welcome to Gitpod

@@ -127,7 +129,7 @@ export function Login() { {authProviders.map(ap => { return ( ); diff --git a/components/dashboard/src/WhatsNew.tsx b/components/dashboard/src/WhatsNew.tsx index 61ba46e5d49a9c..173998bc3759df 100644 --- a/components/dashboard/src/WhatsNew.tsx +++ b/components/dashboard/src/WhatsNew.tsx @@ -38,11 +38,11 @@ export function WhatsNew(props: { visible: boolean, onClose: () => void }) { } return

What's New 🎁

-
+

New Dashboard

We have made some layout changes on the dashboard to improve the overall user experience of Gitpod.

-
+

VS Code

We are changing the default IDE to VS Code.

    diff --git a/components/dashboard/src/admin/UserDetail.tsx b/components/dashboard/src/admin/UserDetail.tsx index 0c91e37d0b9c16..c7264776a19d39 100644 --- a/components/dashboard/src/admin/UserDetail.tsx +++ b/components/dashboard/src/admin/UserDetail.tsx @@ -201,7 +201,7 @@ export function Property(p: { name: string, children: string | ReactChild, actio {p.children}
{(p.actions || []).map(a => -
+
{a.label || ''}
)} diff --git a/components/dashboard/src/admin/UserSearch.tsx b/components/dashboard/src/admin/UserSearch.tsx index c8d46ed36db388..16daa563c64d41 100644 --- a/components/dashboard/src/admin/UserSearch.tsx +++ b/components/dashboard/src/admin/UserSearch.tsx @@ -72,13 +72,13 @@ export default function UserSearch() {
- ke.key === 'Enter' && search() } onChange={(v) => { setSearchTerm(v.target.value) }} /> + ke.key === 'Enter' && search() } onChange={(v) => { setSearchTerm(v.target.value) }} />
- +
-
+
Name
Created
@@ -99,13 +99,13 @@ function UserEntry(p: { user: User }) { log.error(e); } return -
+
{p.user.fullName
-
{p.user.fullName}
-
{email}
+
{p.user.fullName}
+
{email}
{moment(p.user.creationDate).fromNow()}
diff --git a/components/dashboard/src/admin/WorkspaceDetail.tsx b/components/dashboard/src/admin/WorkspaceDetail.tsx index a6e003b3cc24fb..a47c9a14fa8737 100644 --- a/components/dashboard/src/admin/WorkspaceDetail.tsx +++ b/components/dashboard/src/admin/WorkspaceDetail.tsx @@ -42,7 +42,7 @@ export default function WorkspaceDetail(props: { workspace: WorkspaceAndInstance } } const adminLinks = getAdminLinks(workspace); - const adminLink = (i: number) => {adminLinks[i]?.title || ''}; + const adminLink = (i: number) => {adminLinks[i]?.title || ''}; return <>
@@ -57,10 +57,10 @@ export default function WorkspaceDetail(props: { workspace: WorkspaceAndInstance
{moment(workspace.workspaceCreationTime).format('MMM D, YYYY')} {moment(workspace.instanceCreationTime).fromNow()} - {workspace.context.title} + {workspace.context.title}
- {user?.name || props.workspace.ownerId} + {user?.name || props.workspace.ownerId} {workspace.shareable ? 'Enabled' : 'Disabled'}
diff --git a/components/dashboard/src/admin/WorkspacesSearch.tsx b/components/dashboard/src/admin/WorkspacesSearch.tsx index 7c8b12b9bd9fc8..74fc1a4b868748 100644 --- a/components/dashboard/src/admin/WorkspacesSearch.tsx +++ b/components/dashboard/src/admin/WorkspacesSearch.tsx @@ -89,13 +89,13 @@ export function WorkspaceSearch(props: Props) {
- ke.key === 'Enter' && search() } onChange={(v) => { setSearchTerm(v.target.value) }} /> + ke.key === 'Enter' && search() } onChange={(v) => { setSearchTerm(v.target.value) }} />
- +
-
+
Name
Context
@@ -108,12 +108,12 @@ export function WorkspaceSearch(props: Props) { function WorkspaceEntry(p: { ws: WorkspaceAndInstance }) { return -
+
-
{p.ws.workspaceId}
+
{p.ws.workspaceId}
{getProject(WorkspaceAndInstance.toWorkspace(p.ws))}
diff --git a/components/dashboard/src/components/CheckBox.tsx b/components/dashboard/src/components/CheckBox.tsx index 7b7e9e06eaac30..69e1af776b212f 100644 --- a/components/dashboard/src/components/CheckBox.tsx +++ b/components/dashboard/src/components/CheckBox.tsx @@ -25,12 +25,12 @@ function CheckBox(props: { const checkboxId = `checkbox-${props.title}-${String(Math.random())}`; return
-
- +
{props.desc}
diff --git a/components/dashboard/src/components/ContextMenu.tsx b/components/dashboard/src/components/ContextMenu.tsx index f85ebf476e930d..abd735000e1565 100644 --- a/components/dashboard/src/components/ContextMenu.tsx +++ b/components/dashboard/src/components/ContextMenu.tsx @@ -53,7 +53,7 @@ function ContextMenu(props: ContextMenuProps) { }, []); // Empty array ensures that effect is only run on mount and unmount - const font = "text-gray-600 hover:text-gray-800" + const font = "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-100" const menuId = String(Math.random()); @@ -66,10 +66,10 @@ function ContextMenu(props: ContextMenuProps) { {props.children}
{expanded ? -
+
{props.menuEntries.map((e, index) => { const clickable = e.href || e.onClick || e.link; - const entry =
+ const entry =
{e.title}
{e.active ?
✓
: null}
const key = `entry-${menuId}-${index}-${e.title}`; diff --git a/components/dashboard/src/components/DropDown.tsx b/components/dashboard/src/components/DropDown.tsx index 3bc74dffb0980d..bba016ba8b9f6c 100644 --- a/components/dashboard/src/components/DropDown.tsx +++ b/components/dashboard/src/components/DropDown.tsx @@ -18,7 +18,7 @@ export interface DropDownProps { } function Arrow(props: {up: boolean}) { - return + return } function DropDown(props: DropDownProps) { @@ -36,7 +36,7 @@ function DropDown(props: DropDownProps) { } } }) - const font = "text-gray-400 text-sm leading-1 group hover:text-gray-600 transition ease-in-out" + const font = "text-gray-400 dark:text-gray-500 text-sm leading-1 group hover:text-gray-600 dark:hover:text-gray-400 transition ease-in-out" return ( {props.prefix}{current} diff --git a/components/dashboard/src/components/Header.tsx b/components/dashboard/src/components/Header.tsx index 73afc2c5b699c7..95bbc660d54d0f 100644 --- a/components/dashboard/src/components/Header.tsx +++ b/components/dashboard/src/components/Header.tsx @@ -12,7 +12,7 @@ export interface HeaderProps { } export default function Header(p: HeaderProps) { - return
+ return

{p.title}

diff --git a/components/dashboard/src/components/Menu.tsx b/components/dashboard/src/components/Menu.tsx index 43a46780c7f2cb..2ce77feaa38f74 100644 --- a/components/dashboard/src/components/Menu.tsx +++ b/components/dashboard/src/components/Menu.tsx @@ -20,13 +20,13 @@ interface Entry { function MenuItem(entry: Entry) { const location = useLocation(); - let classes = "flex block text-sm font-medium px-3 px-0 py-1.5 rounded-md transition ease-in-out"; + let classes = "flex block text-sm font-medium dark:text-gray-200 px-3 px-0 py-1.5 rounded-md transition ease-in-out"; const all = [entry.link, ...(entry.alternatives||[])]; const path = location.pathname.toLowerCase(); if (all.find( n => n === path || n+'/' === path)) { - classes += " bg-gray-200"; + classes += " bg-gray-200 dark:bg-gray-700"; } else { - classes += " text-gray-600 hover:bg-gray-100 transition ease-in-out"; + classes += " text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800"; } return
  • {entry.link.startsWith('https://') @@ -57,7 +57,7 @@ function Menu(props: { left: Entry[], right: Entry[] }) { {props.right.map(MenuItem)} -
    +
    -
    e.stopPropagation()}> +
    e.stopPropagation()}> {props.closeable !== false && ( -
    +
    @@ -61,7 +61,7 @@ export default function Modal(props: {
    )} {props.title ? <>

    {props.title}

    -
    +
    {props.children}
    diff --git a/components/dashboard/src/components/PageWithSubMenu.tsx b/components/dashboard/src/components/PageWithSubMenu.tsx index 6bdba0e0a63fd8..691da1514ed6cb 100644 --- a/components/dashboard/src/components/PageWithSubMenu.tsx +++ b/components/dashboard/src/components/PageWithSubMenu.tsx @@ -30,7 +30,7 @@ export function PageWithSubMenu(p: PageWithSubMenuProps) { if (e.link.some(l => l.toLocaleLowerCase() === location.pathname)) { classes += " bg-gray-800 text-gray-50"; } else { - classes += " hover:bg-gray-100"; + classes += " hover:bg-gray-100 dark:hover:bg-gray-800"; } return
  • diff --git a/components/dashboard/src/components/SelectableCard.tsx b/components/dashboard/src/components/SelectableCard.tsx index 2b5e1d5288d2a3..5c0928f05cae55 100644 --- a/components/dashboard/src/components/SelectableCard.tsx +++ b/components/dashboard/src/components/SelectableCard.tsx @@ -13,9 +13,9 @@ export interface SelectableCardProps { } function SelectableCard(props: SelectableCardProps) { - return
    + return
    -

    {props.title}

    +

    {props.title}

    {props.children} diff --git a/components/dashboard/src/components/Separator.tsx b/components/dashboard/src/components/Separator.tsx index d494e9c9db3610..a0fb4a43ca1a6a 100644 --- a/components/dashboard/src/components/Separator.tsx +++ b/components/dashboard/src/components/Separator.tsx @@ -5,5 +5,5 @@ */ export default function Separator() { - return
    ; + return
    ; } \ No newline at end of file diff --git a/components/dashboard/src/components/Tooltip.tsx b/components/dashboard/src/components/Tooltip.tsx index fbcf30cfc422a7..26576811333045 100644 --- a/components/dashboard/src/components/Tooltip.tsx +++ b/components/dashboard/src/components/Tooltip.tsx @@ -20,7 +20,7 @@ function Tooltip(props: TooltipProps) { {props.children}
    {expanded ? -
    +
    {props.content}
    : diff --git a/components/dashboard/src/icons/ThreeDots.svg b/components/dashboard/src/icons/ThreeDots.svg deleted file mode 100644 index d0ebc0af648427..00000000000000 --- a/components/dashboard/src/icons/ThreeDots.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/components/dashboard/src/images/gitpod-dark.svg b/components/dashboard/src/images/gitpod-dark.svg new file mode 100644 index 00000000000000..81f91fee4a5fc3 --- /dev/null +++ b/components/dashboard/src/images/gitpod-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/dashboard/src/images/gitpod.svg b/components/dashboard/src/images/gitpod.svg index eb65e2642f6106..c6bdadfb678b98 100644 --- a/components/dashboard/src/images/gitpod.svg +++ b/components/dashboard/src/images/gitpod.svg @@ -1,16 +1 @@ - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/components/dashboard/src/index.css b/components/dashboard/src/index.css index 8b791229904b02..fa02d9bb8f4221 100644 --- a/components/dashboard/src/index.css +++ b/components/dashboard/src/index.css @@ -16,12 +16,12 @@ @apply bg-white dark:bg-gitpod-black text-black dark:text-white; } h1 { - @apply text-gray-900 dark:text-gray-50 font-bold; + @apply text-gray-900 dark:text-gray-100 font-bold; line-height: 64px; font-size: 48px; } h2 { - @apply text-base text-gray-500; + @apply text-base text-gray-500 dark:text-gray-400; } h3 { @apply text-2xl text-gray-800 dark:text-gray-100 leading-9 font-semibold; @@ -34,42 +34,44 @@ } .btn-login { - @apply rounded-md border-none bg-gray-100 hover:bg-gray-200 text-gray-500; + @apply rounded-md border-none bg-gray-100 hover:bg-gray-200 text-gray-500 dark:text-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600; + } + .dark .dark\:filter-invert { + @apply filter-invert; } - } @layer components { button { - @apply cursor-pointer px-4 py-2 my-auto bg-green-600 hover:bg-green-700 text-gray-100 text-sm font-medium rounded-md focus:outline-none focus:ring transition ease-in-out; + @apply cursor-pointer px-4 py-2 my-auto bg-green-600 dark:bg-green-700 hover:bg-green-700 dark:hover:bg-green-600 text-gray-100 dark:text-green-100 text-sm font-medium rounded-md focus:outline-none focus:ring transition ease-in-out; } button.secondary { - @apply bg-gray-100 hover:bg-gray-200 text-gray-500 hover:text-gray-600; + @apply bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-500 dark:text-gray-100 hover:text-gray-600; } button.danger { - @apply bg-red-600 hover:bg-red-700 text-gray-100; + @apply bg-red-600 hover:bg-red-700 text-gray-100 dark:text-red-100; } button.danger.secondary { - @apply bg-red-50 hover:bg-red-100 text-red-600 hover:text-red-700; + @apply bg-red-50 dark:bg-red-300 hover:bg-red-100 dark:hover:bg-red-200 text-red-600 hover:text-red-700; } button:disabled { @apply cursor-default opacity-50 pointer-events-none; } - input[type=text], input[type=password], select { - @apply block w-56 text-gray-600 rounded-md border border-gray-300 focus:border-gray-400 focus:bg-white focus:ring-0; + 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=password]::placeholder { - @apply text-gray-400; + input[type=text]::placeholder, input[type=search]::placeholder, input[type=password]::placeholder { + @apply text-gray-400 dark:text-gray-500; } - input[disabled] { - @apply bg-gray-100 border border-gray-200 text-gray-400; + @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] { - @apply rounded-md border border-gray-300 focus:border-gray-400 focus:bg-white focus:ring-0; + @apply border border-gray-300 focus:border-gray-400 focus:bg-white focus:ring-0; + } + input[type=search] { + @apply border-0 dark:bg-transparent; } progress { diff --git a/components/dashboard/src/prebuilds/InstallGitHubApp.tsx b/components/dashboard/src/prebuilds/InstallGitHubApp.tsx index a93398b5ea6d31..afb654e41a34cd 100644 --- a/components/dashboard/src/prebuilds/InstallGitHubApp.tsx +++ b/components/dashboard/src/prebuilds/InstallGitHubApp.tsx @@ -50,9 +50,9 @@ export default function InstallGitHubApp() { const installationId = params.get("installation_id") || undefined; if (!installationId) { return
    -
    +
    -

    No Installation ID Found

    +

    No Installation ID Found

    Did you came here from the GitHub app's page?
    @@ -67,7 +67,7 @@ export default function InstallGitHubApp() {

    Install GitHub App

    You are about to install the GitHub app for Gitpod.
    -
    +
    info This action will also allow Gitpod to access private repositories. You can edit git provider permissions later in user settings.
    @@ -86,7 +86,7 @@ export default function InstallGitHubApp() { ]}>
    Could not install the GitHub app.
    -
    +
    info {modal}
    diff --git a/components/dashboard/src/provider-utils.tsx b/components/dashboard/src/provider-utils.tsx index 9209d1c746571f..f11734a37e579a 100644 --- a/components/dashboard/src/provider-utils.tsx +++ b/components/dashboard/src/provider-utils.tsx @@ -9,17 +9,16 @@ import github from './images/github.svg'; import gitlab from './images/gitlab.svg'; import { gitpodHostUrl } from "./service/service"; - function iconForAuthProvider(type: string) { switch (type) { case "GitHub": - return github + return ; case "GitLab": - return gitlab + return ; case "Bitbucket": - return bitbucket + return ; default: - break; + return <>; } } diff --git a/components/dashboard/src/settings/Account.tsx b/components/dashboard/src/settings/Account.tsx index 941b83ed0aa6c5..5e4e4c5a5e962e 100644 --- a/components/dashboard/src/settings/Account.tsx +++ b/components/dashboard/src/settings/Account.tsx @@ -29,8 +29,8 @@ export default function Account() { return

    Delete Account

    -
    -

    You are about to permanently delete your account.

    +
    +

    You are about to permanently delete your account.

    1. All your workspaces and related data will be deleted and cannot be restored afterwards.
    2. Your subscription will be cancelled. If you obtained a Gitpod subscription through the GitHub marketplace, you need to cancel your plan there.
      3. @@ -46,7 +46,7 @@ export default function Account() {

      Profile

      -

      The following information will be used to set up git configuration. You can override git author name and email per project by using the default environment variables GIT_AUTHOR_NAME and GIT_COMMITTER_EMAIL.

      +

      The following information will be used to set up git configuration. You can override git author name and email per project by using the default environment variables GIT_AUTHOR_NAME and GIT_COMMITTER_EMAIL.

      diff --git a/components/dashboard/src/settings/EnvironmentVariables.tsx b/components/dashboard/src/settings/EnvironmentVariables.tsx index d6fcc285c29ed8..9f8e2efe8e6d37 100644 --- a/components/dashboard/src/settings/EnvironmentVariables.tsx +++ b/components/dashboard/src/settings/EnvironmentVariables.tsx @@ -9,7 +9,6 @@ import { useEffect, useRef, useState } from "react"; import ContextMenu from "../components/ContextMenu"; import Modal from "../components/Modal"; import { getGitpodService } from "../service/service"; -import ThreeDots from '../icons/ThreeDots.svg'; import { PageWithSubMenu } from "../components/PageWithSubMenu"; import settingsMenu from "./settings-menu"; @@ -52,7 +51,7 @@ function AddEnvVarModal(p: EnvVarModalProps) { return

      {isNew ? 'New' : 'Edit'} Variable

      -
      +
      {error ?
      {error}
      : null} @@ -70,7 +69,7 @@ function AddEnvVarModal(p: EnvVarModalProps) { onChange={(v) => { update({repositoryPattern: v.target.value}) }} />
      -

      You can pass a variable for a specific project or use wildcard character (*/*) to make it available in more projects.

      +

      You can pass a variable for a specific project or use wildcard character (*/*) to make it available in more projects.

      @@ -168,16 +167,16 @@ export default function EnvVars() { : null}
      {envVars.length === 0 - ?
      + ?
      -

      No Environment Variables

      +

      No Environment Variables

      In addition to user-specific environment variables you can also pass variables through a workspace creation URL. Learn more
      :
      -
      +
      Name
      Scope
      @@ -185,11 +184,11 @@ export default function EnvVars() {
      {envVars.map(ev => { - return
      + return
      {ev.name}
      {ev.repositoryPattern}
      -
      +
      deleteV(ev) }, ]}> - Actions + Actions
      diff --git a/components/dashboard/src/settings/Integrations.tsx b/components/dashboard/src/settings/Integrations.tsx index dd595bd526ae92..56c0d1019b5d96 100644 --- a/components/dashboard/src/settings/Integrations.tsx +++ b/components/dashboard/src/settings/Integrations.tsx @@ -12,7 +12,6 @@ import { getGitpodService, gitpodHostUrl } from "../service/service"; import { UserContext } from "../user-context"; import copy from '../images/copy.svg'; import exclamation from '../images/exclamation.svg'; -import ThreeDots from '../icons/ThreeDots.svg'; import Modal from "../components/Modal"; import { openAuthorizeWindow } from "../provider-utils"; import CheckBox from '../components/CheckBox'; @@ -95,7 +94,7 @@ function GitProviders() { if (connectedWithSecondProvider) { result.push({ title: 'Disconnect', - customFontStyle: 'text-red-600', + customFontStyle: 'text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300', onClick: () => setDisconnectModal({ provider }) }); } @@ -234,10 +233,9 @@ function GitProviders() { {diconnectModal && ( setDisconnectModal(undefined)}>

      Disconnect Provider

      -
      +

      Are you sure you want to disconnect the following provider?

      - -
      +
      {diconnectModal.provider.authProviderType}
      {diconnectModal.provider.host}
      @@ -251,7 +249,7 @@ function GitProviders() { {editModal && ( setEditModal(undefined)}>

      Edit Permissions

      -
      +
      Configure provider permissions.
      @@ -283,7 +281,7 @@ function GitProviders() {

      Manage permissions for git providers.

      {authProviders && authProviders.map(ap => ( -
      +
        @@ -302,9 +300,9 @@ function GitProviders() { Permissions
      -
      +
      - Actions + Actions
      @@ -349,7 +347,7 @@ function GitIntegrations() { }) result.push({ title: 'Remove', - customFontStyle: 'text-red-600', + customFontStyle: 'text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300', onClick: () => setModal({ mode: "delete", provider }) }); return result; @@ -366,7 +364,7 @@ function GitIntegrations() { {modal?.mode === "delete" && ( setModal(undefined)}>

      Remove Integration

      -
      +

      Are you sure you want to remove the following git integration?

      @@ -394,9 +392,9 @@ function GitIntegrations() {
      {providers && providers.length === 0 && ( -
      +
      -

      No Git Integrations

      +

      No Git Integrations

      In addition to the default Git Providers you can authorize
      with a self hosted instace of a provider.
      @@ -404,7 +402,7 @@ function GitIntegrations() { )}
      {providers && providers.map(ap => ( -
      +
      @@ -418,9 +416,9 @@ function GitIntegrations() { {ap.host}
      -
      +
      - Actions + Actions
      @@ -584,11 +582,11 @@ function GitIntegrationModal(props: ({ return (

      {props.mode === "new" ? "New Git Integration" : "Git Integration"}

      -
      +
      {props.mode === "edit" && props.provider.status === "pending" && (
      - You need to activate this integration. + You need to activate this integration.
      )}
      diff --git a/components/dashboard/src/settings/Plans.tsx b/components/dashboard/src/settings/Plans.tsx index cf3161db00cb60..75fe6ff935916e 100644 --- a/components/dashboard/src/settings/Plans.tsx +++ b/components/dashboard/src/settings/Plans.tsx @@ -401,15 +401,15 @@ export default function () {

      {planCards}
      -
      +
      If you are interested in purchasing a plan for a team, purchase a Team plan with one centralized billing. Learn more
      {!!confirmUpgradeToPlan && setConfirmUpgradeToPlan(undefined)}>

      Upgrade to {confirmUpgradeToPlan.name}

      -
      +

      You are about to upgrade to {confirmUpgradeToPlan.name}.

      - {!Plans.isFreePlan(currentPlan.chargebeeId) &&
      + {!Plans.isFreePlan(currentPlan.chargebeeId) &&
      For this billing cycle you will be charged only the total difference ({(confirmUpgradeToPlan.currency === 'EUR' ? '€' : '$') + (confirmUpgradeToPlan.pricePerMonth - applyCoupons(currentPlan, appliedCoupons).pricePerMonth)}). The new total will be effective from the next billing cycle.
      } @@ -424,9 +424,9 @@ export default function () { } {!!confirmDowngradeToPlan && setConfirmDowngradeToPlan(undefined)}>

      Downgrade to {confirmDowngradeToPlan.name}

      -
      +

      You are about to downgrade to {confirmDowngradeToPlan.name}.

      -
      +
      {!Plans.isFreePlan(confirmDowngradeToPlan.chargebeeId) ? Your account will downgrade to {confirmDowngradeToPlan.name} on the next billing cycle. @@ -434,19 +434,19 @@ export default function () {
      - +
      } {!!teamClaimModal && ( setTeamClaimModal(undefined)}>

      Team Invitation

      -
      +

      {teamClaimModal.mode === "error" ? teamClaimModal.errorText : teamClaimModal.text}

      {teamClaimModal.mode === "confirmation" && ( -
      -

      Color Scheme

      +

      Theme

      Light or dark?

      diff --git a/components/dashboard/src/settings/Teams.tsx b/components/dashboard/src/settings/Teams.tsx index 566ba454e7b5a5..e0b43664a33a99 100644 --- a/components/dashboard/src/settings/Teams.tsx +++ b/components/dashboard/src/settings/Teams.tsx @@ -9,7 +9,6 @@ import { countries } from 'countries-list'; import ContextMenu, { ContextMenuEntry } from "../components/ContextMenu"; import { PageWithSubMenu } from "../components/PageWithSubMenu"; import { getGitpodService } from "../service/service"; -import ThreeDots from '../icons/ThreeDots.svg'; import Modal from "../components/Modal"; import { AssigneeIdentifier, TeamSubscription, TeamSubscriptionSlotResolved } from "@gitpod/gitpod-protocol/lib/team-subscription-protocol"; import { Currency, Plan, Plans } from "@gitpod/gitpod-protocol/lib/plans"; @@ -457,9 +456,9 @@ function AllTeams() { )} {(getActiveSubs().length === 0 && !pendingPlanPurchase) && ( -
      +
      -

      No Active Teams

      +

      No Active Teams

      Get started by creating a team
      and adding team members. Learn more
      @@ -469,7 +468,7 @@ function AllTeams() { {(getActiveSubs().length > 0 || !!pendingPlanPurchase) && (
      {pendingPlanPurchase && ( -
      +
        @@ -489,7 +488,7 @@ function AllTeams() {
      )} {getActiveSubs().map((sub, index) => ( -
      +
        @@ -511,9 +510,9 @@ function AllTeams() { )}
      -
      +
      - Actions + Actions
      @@ -565,7 +564,7 @@ function InviteMembersModal(props: { return (

      Invite Members

      -
      +

      Invite members to the team using the URL below.

      @@ -610,12 +609,12 @@ function AddMembersModal(props: { return (

      Add Members

      -
      +

      Add members to the team.

      - setType(e.target.value)}> {props.types.map(type => ( @@ -683,7 +682,7 @@ function NewTeamModal(props: {
      - setCurrency(e.target.value as any)}> {Currency.getAll().map(c => ( @@ -703,7 +702,7 @@ function NewTeamModal(props: {
      - Total: {expectedPrice} per month + Total: {expectedPrice} per month
      @@ -728,7 +727,7 @@ function ManageTeamModal(props: { return (

      Manage Team

      -
      +

      Add members using their username prefixed by the Git Provider's host.

      @@ -837,7 +836,7 @@ function Slot(props: {
      {/* */}
      - editMode && setAssigneeIdentifier(e.target.value)} diff --git a/components/dashboard/src/start/CreateWorkspace.tsx b/components/dashboard/src/start/CreateWorkspace.tsx index 52a6d4c72b22f1..b19a4b8c2c4621 100644 --- a/components/dashboard/src/start/CreateWorkspace.tsx +++ b/components/dashboard/src/start/CreateWorkspace.tsx @@ -158,13 +158,13 @@ export default class CreateWorkspace extends React.Component{}}>

      Running Workspaces

      -
      +

      You already have running workspaces with the same context. You can open an existing one or open a new workspace.

      <> {result?.existingWorkspaces?.map(w => - +
      -

      {w.workspace.id}

      +

      {w.workspace.id}

      {w.workspace.contextURL}

       @@ -190,11 +190,11 @@ export default class CreateWorkspace extends React.Component

      - Docs + Docs — - Status + Status — - Blog + Blog

      } ; @@ -208,7 +208,7 @@ function LimitReachedModal(p: { children: React.ReactNode }) { Limit Reached {user?.name -
      +
      {p.children}
      diff --git a/components/dashboard/src/start/StartPage.tsx b/components/dashboard/src/start/StartPage.tsx index 370e4f61fa0624..9b051a592723f4 100644 --- a/components/dashboard/src/start/StartPage.tsx +++ b/components/dashboard/src/start/StartPage.tsx @@ -50,7 +50,7 @@ function ProgressBar(props: { phase: number, error: boolean }) { classes += ' bg-green-400'; } else if (i > phase) { // Haven't reached this phase yet - classes += ' bg-gray-200'; + classes += ' bg-gray-200 dark:bg-gray-800'; } else if (error) { // This phase has failed classes += ' bg-red-500'; diff --git a/components/dashboard/src/start/StartWorkspace.tsx b/components/dashboard/src/start/StartWorkspace.tsx index c3b601d49f8fea..89e4bbc065ad23 100644 --- a/components/dashboard/src/start/StartWorkspace.tsx +++ b/components/dashboard/src/start/StartWorkspace.tsx @@ -251,11 +251,11 @@ export default class StartWorkspace extends React.Component -
      +
       
      -

      {this.state.workspaceInstance.workspaceId}

      -

      {this.state.workspace?.contextURL}

       +

      {this.state.workspaceInstance.workspaceId}

      +

      {this.state.workspace?.contextURL}
      @@ -274,11 +274,11 @@ export default class StartWorkspace extends React.Component -
      +
       
      -

      {this.state.workspaceInstance.workspaceId}

      -

      {this.state.workspace?.contextURL}

       +

      {this.state.workspaceInstance.workspaceId}

      +

      {this.state.workspace?.contextURL}
      diff --git a/components/dashboard/src/tailwind.output.css b/components/dashboard/src/tailwind.output.css index c62a958142e7df..d311963c539638 100644 --- a/components/dashboard/src/tailwind.output.css +++ b/components/dashboard/src/tailwind.output.css @@ -774,7 +774,7 @@ body { .dark body { --tw-bg-opacity: 1; - background-color: rgba(28, 25, 23, var(--tw-bg-opacity)); + background-color: rgba(22, 22, 22, var(--tw-bg-opacity)); } body { @@ -795,7 +795,7 @@ h1 { .dark h1 { --tw-text-opacity: 1; - color: rgba(250, 250, 249, var(--tw-text-opacity)); + color: rgba(245, 245, 244, var(--tw-text-opacity)); } h1 { @@ -810,6 +810,11 @@ h2 { color: rgba(120, 113, 108, var(--tw-text-opacity)); } +.dark h2 { + --tw-text-opacity: 1; + color: rgba(168, 162, 158, var(--tw-text-opacity)); +} + h3 { font-weight: 600; font-size: 1.5rem; @@ -860,6 +865,16 @@ p { background-color: rgba(231, 229, 228, var(--tw-bg-opacity)); } +.dark .btn-login { + --tw-bg-opacity: 1; + background-color: rgba(41, 37, 36, var(--tw-bg-opacity)); +} + +.dark .btn-login:hover { + --tw-bg-opacity: 1; + background-color: rgba(87, 83, 78, var(--tw-bg-opacity)); +} + .btn-login { border-radius: 0.375rem; border-style: none; @@ -867,6 +882,16 @@ p { color: rgba(120, 113, 108, var(--tw-text-opacity)); } +.dark .btn-login { + --tw-text-opacity: 1; + color: rgba(231, 229, 228, var(--tw-text-opacity)); +} + +.dark .dark\:filter-invert { + -webkit-filter: invert(1); + filter: invert(1); +} + .container { width: 100%; margin-right: auto; @@ -913,6 +938,16 @@ button:hover { background-color: rgba(77, 124, 15, var(--tw-bg-opacity)); } +.dark button { + --tw-bg-opacity: 1; + background-color: rgba(77, 124, 15, var(--tw-bg-opacity)); +} + +.dark button:hover { + --tw-bg-opacity: 1; + background-color: rgba(101, 163, 13, var(--tw-bg-opacity)); +} + button { border-radius: 0.375rem; cursor: pointer; @@ -944,6 +979,14 @@ button:focus { button { --tw-text-opacity: 1; color: rgba(245, 245, 244, var(--tw-text-opacity)); +} + +.dark button { + --tw-text-opacity: 1; + color: rgba(236, 252, 203, var(--tw-text-opacity)); +} + +button { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; @@ -960,6 +1003,16 @@ button.secondary:hover { background-color: rgba(231, 229, 228, var(--tw-bg-opacity)); } +.dark button.secondary { + --tw-bg-opacity: 1; + background-color: rgba(68, 64, 60, var(--tw-bg-opacity)); +} + +.dark button.secondary:hover { + --tw-bg-opacity: 1; + background-color: rgba(87, 83, 78, var(--tw-bg-opacity)); +} + button.secondary { --tw-text-opacity: 1; color: rgba(120, 113, 108, var(--tw-text-opacity)); @@ -970,6 +1023,11 @@ button.secondary:hover { color: rgba(87, 83, 78, var(--tw-text-opacity)); } +.dark button.secondary { + --tw-text-opacity: 1; + color: rgba(245, 245, 244, var(--tw-text-opacity)); +} + button.danger { --tw-bg-opacity: 1; background-color: rgba(220, 38, 38, var(--tw-bg-opacity)); @@ -985,6 +1043,11 @@ button.danger { color: rgba(245, 245, 244, var(--tw-text-opacity)); } +.dark button.danger { + --tw-text-opacity: 1; + color: rgba(254, 226, 226, var(--tw-text-opacity)); +} + button.danger.secondary { --tw-bg-opacity: 1; background-color: rgba(254, 242, 242, var(--tw-bg-opacity)); @@ -995,6 +1058,16 @@ button.danger.secondary:hover { background-color: rgba(254, 226, 226, var(--tw-bg-opacity)); } +.dark button.danger.secondary { + --tw-bg-opacity: 1; + background-color: rgba(252, 165, 165, var(--tw-bg-opacity)); +} + +.dark button.danger.secondary:hover { + --tw-bg-opacity: 1; + background-color: rgba(254, 202, 202, var(--tw-bg-opacity)); +} + button.danger.secondary { --tw-text-opacity: 1; color: rgba(220, 38, 38, var(--tw-text-opacity)); @@ -1011,69 +1084,133 @@ button:disabled { pointer-events: none; } -input[type=text]:focus, input[type=password]:focus, select:focus { +input[type=text], input[type=search], input[type=password], select { --tw-bg-opacity: 1; background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); } -input[type=text], input[type=password], select { +.dark input[type=text], .dark input[type=search], .dark input[type=password], .dark select { + --tw-bg-opacity: 1; + background-color: rgba(41, 37, 36, var(--tw-bg-opacity)); +} + +input[type=text], input[type=search], input[type=password], select { --tw-border-opacity: 1; border-color: rgba(214, 211, 209, var(--tw-border-opacity)); } -input[type=text]:focus, input[type=password]:focus, select:focus { +input[type=text]:focus, input[type=search]:focus, input[type=password]:focus, select:focus { --tw-border-opacity: 1; border-color: rgba(168, 162, 158, var(--tw-border-opacity)); } -input[type=text], input[type=password], select { +.dark input[type=text], .dark input[type=search], .dark input[type=password], .dark select { + --tw-border-opacity: 1; + border-color: rgba(120, 113, 108, var(--tw-border-opacity)); +} + +.dark input[type=text]:focus, .dark input[type=search]:focus, .dark input[type=password]:focus, .dark select:focus { + --tw-border-opacity: 1; + border-color: rgba(168, 162, 158, var(--tw-border-opacity)); +} + +input[type=text], input[type=search], input[type=password], select { border-radius: 0.375rem; border-width: 1px; display: block; } -input[type=text]:focus, input[type=password]:focus, select:focus { +input[type=text]:focus, input[type=search]:focus, input[type=password]:focus, select:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -input[type=text], input[type=password], select { +input[type=text], input[type=search], input[type=password], select { --tw-text-opacity: 1; color: rgba(87, 83, 78, var(--tw-text-opacity)); +} + +.dark input[type=text], .dark input[type=search], .dark input[type=password], .dark select { + --tw-text-opacity: 1; + color: rgba(168, 162, 158, var(--tw-text-opacity)); +} + +input[type=text], input[type=search], input[type=password], select { width: 14rem; } -input[type=text]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder { +input[type=text]::-webkit-input-placeholder, input[type=search]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder { --tw-text-opacity: 1; color: rgba(168, 162, 158, var(--tw-text-opacity)); } -input[type=text]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder { +input[type=text]:-ms-input-placeholder, input[type=search]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder { --tw-text-opacity: 1; color: rgba(168, 162, 158, var(--tw-text-opacity)); } -input[type=text]::-ms-input-placeholder, input[type=password]::-ms-input-placeholder { +input[type=text]::-ms-input-placeholder, input[type=search]::-ms-input-placeholder, input[type=password]::-ms-input-placeholder { --tw-text-opacity: 1; color: rgba(168, 162, 158, var(--tw-text-opacity)); } -input[type=text]::placeholder, input[type=password]::placeholder { +input[type=text]::placeholder, input[type=search]::placeholder, input[type=password]::placeholder { --tw-text-opacity: 1; color: rgba(168, 162, 158, var(--tw-text-opacity)); } +.dark input[type=text]::-webkit-input-placeholder, .dark input[type=search]::-webkit-input-placeholder, .dark input[type=password]::-webkit-input-placeholder { + --tw-text-opacity: 1; + color: rgba(120, 113, 108, var(--tw-text-opacity)); +} + +.dark input[type=text]:-ms-input-placeholder, .dark input[type=search]:-ms-input-placeholder, .dark input[type=password]:-ms-input-placeholder { + --tw-text-opacity: 1; + color: rgba(120, 113, 108, var(--tw-text-opacity)); +} + +.dark input[type=text]::-ms-input-placeholder, .dark input[type=search]::-ms-input-placeholder, .dark input[type=password]::-ms-input-placeholder { + --tw-text-opacity: 1; + color: rgba(120, 113, 108, var(--tw-text-opacity)); +} + +.dark input[type=text]::placeholder, .dark input[type=search]::placeholder, .dark input[type=password]::placeholder { + --tw-text-opacity: 1; + color: rgba(120, 113, 108, var(--tw-text-opacity)); +} + input[disabled] { --tw-bg-opacity: 1; background-color: rgba(245, 245, 244, var(--tw-bg-opacity)); +} + +.dark input[disabled] { + --tw-bg-opacity: 1; + background-color: rgba(68, 64, 60, var(--tw-bg-opacity)); +} + +input[disabled] { --tw-border-opacity: 1; border-color: rgba(231, 229, 228, var(--tw-border-opacity)); +} + +.dark input[disabled] { + --tw-border-opacity: 1; + border-color: rgba(87, 83, 78, var(--tw-border-opacity)); +} + +input[disabled] { border-width: 1px; --tw-text-opacity: 1; color: rgba(168, 162, 158, var(--tw-text-opacity)); } +.dark input[disabled] { + --tw-text-opacity: 1; + color: rgba(120, 113, 108, var(--tw-text-opacity)); +} + input[type=radio]:focus { --tw-bg-opacity: 1; background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); @@ -1090,7 +1227,6 @@ input[type=radio]:focus { } input[type=radio] { - border-radius: 0.375rem; border-width: 1px; } @@ -1100,6 +1236,14 @@ input[type=radio]:focus { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } +.dark input[type=search] { + background-color: transparent; +} + +input[type=search] { + border-width: 0px; +} + progress { border-radius: 0.25rem; height: 0.5rem; @@ -23869,6 +24013,82 @@ progress::-moz-progress-bar { display: none !important; } +.dark .dark\:block { + display: block !important; +} + +.dark .dark\:inline-block { + display: inline-block !important; +} + +.dark .dark\:inline { + display: inline !important; +} + +.dark .dark\:flex { + display: flex !important; +} + +.dark .dark\:inline-flex { + display: inline-flex !important; +} + +.dark .dark\:table { + display: table !important; +} + +.dark .dark\:table-caption { + display: table-caption !important; +} + +.dark .dark\:table-cell { + display: table-cell !important; +} + +.dark .dark\:table-column { + display: table-column !important; +} + +.dark .dark\:table-column-group { + display: table-column-group !important; +} + +.dark .dark\:table-footer-group { + display: table-footer-group !important; +} + +.dark .dark\:table-header-group { + display: table-header-group !important; +} + +.dark .dark\:table-row-group { + display: table-row-group !important; +} + +.dark .dark\:table-row { + display: table-row !important; +} + +.dark .dark\:flow-root { + display: flow-root !important; +} + +.dark .dark\:grid { + display: grid !important; +} + +.dark .dark\:inline-grid { + display: inline-grid !important; +} + +.dark .dark\:contents { + display: contents !important; +} + +.dark .dark\:hidden { + display: none !important; +} + .flex-row { flex-direction: row !important; } @@ -58238,6 +58458,11 @@ progress::-moz-progress-bar { filter: grayscale(1) !important; } +.filter-invert { + -webkit-filter: invert(1) !important; + filter: invert(1) !important; +} + .filter-brightness-10 { -webkit-filter: brightness(10) !important; filter: brightness(10) !important; @@ -81026,6 +81251,82 @@ progress::-moz-progress-bar { display: none !important; } + .dark .sm\:dark\:block { + display: block !important; + } + + .dark .sm\:dark\:inline-block { + display: inline-block !important; + } + + .dark .sm\:dark\:inline { + display: inline !important; + } + + .dark .sm\:dark\:flex { + display: flex !important; + } + + .dark .sm\:dark\:inline-flex { + display: inline-flex !important; + } + + .dark .sm\:dark\:table { + display: table !important; + } + + .dark .sm\:dark\:table-caption { + display: table-caption !important; + } + + .dark .sm\:dark\:table-cell { + display: table-cell !important; + } + + .dark .sm\:dark\:table-column { + display: table-column !important; + } + + .dark .sm\:dark\:table-column-group { + display: table-column-group !important; + } + + .dark .sm\:dark\:table-footer-group { + display: table-footer-group !important; + } + + .dark .sm\:dark\:table-header-group { + display: table-header-group !important; + } + + .dark .sm\:dark\:table-row-group { + display: table-row-group !important; + } + + .dark .sm\:dark\:table-row { + display: table-row !important; + } + + .dark .sm\:dark\:flow-root { + display: flow-root !important; + } + + .dark .sm\:dark\:grid { + display: grid !important; + } + + .dark .sm\:dark\:inline-grid { + display: inline-grid !important; + } + + .dark .sm\:dark\:contents { + display: contents !important; + } + + .dark .sm\:dark\:hidden { + display: none !important; + } + .sm\:flex-row { flex-direction: row !important; } @@ -114750,6 +115051,11 @@ progress::-moz-progress-bar { filter: grayscale(1) !important; } + .sm\:filter-invert { + -webkit-filter: invert(1) !important; + filter: invert(1) !important; + } + .sm\:filter-brightness-10 { -webkit-filter: brightness(10) !important; filter: brightness(10) !important; @@ -137539,6 +137845,82 @@ progress::-moz-progress-bar { display: none !important; } + .dark .md\:dark\:block { + display: block !important; + } + + .dark .md\:dark\:inline-block { + display: inline-block !important; + } + + .dark .md\:dark\:inline { + display: inline !important; + } + + .dark .md\:dark\:flex { + display: flex !important; + } + + .dark .md\:dark\:inline-flex { + display: inline-flex !important; + } + + .dark .md\:dark\:table { + display: table !important; + } + + .dark .md\:dark\:table-caption { + display: table-caption !important; + } + + .dark .md\:dark\:table-cell { + display: table-cell !important; + } + + .dark .md\:dark\:table-column { + display: table-column !important; + } + + .dark .md\:dark\:table-column-group { + display: table-column-group !important; + } + + .dark .md\:dark\:table-footer-group { + display: table-footer-group !important; + } + + .dark .md\:dark\:table-header-group { + display: table-header-group !important; + } + + .dark .md\:dark\:table-row-group { + display: table-row-group !important; + } + + .dark .md\:dark\:table-row { + display: table-row !important; + } + + .dark .md\:dark\:flow-root { + display: flow-root !important; + } + + .dark .md\:dark\:grid { + display: grid !important; + } + + .dark .md\:dark\:inline-grid { + display: inline-grid !important; + } + + .dark .md\:dark\:contents { + display: contents !important; + } + + .dark .md\:dark\:hidden { + display: none !important; + } + .md\:flex-row { flex-direction: row !important; } @@ -171263,6 +171645,11 @@ progress::-moz-progress-bar { filter: grayscale(1) !important; } + .md\:filter-invert { + -webkit-filter: invert(1) !important; + filter: invert(1) !important; + } + .md\:filter-brightness-10 { -webkit-filter: brightness(10) !important; filter: brightness(10) !important; @@ -194052,6 +194439,82 @@ progress::-moz-progress-bar { display: none !important; } + .dark .lg\:dark\:block { + display: block !important; + } + + .dark .lg\:dark\:inline-block { + display: inline-block !important; + } + + .dark .lg\:dark\:inline { + display: inline !important; + } + + .dark .lg\:dark\:flex { + display: flex !important; + } + + .dark .lg\:dark\:inline-flex { + display: inline-flex !important; + } + + .dark .lg\:dark\:table { + display: table !important; + } + + .dark .lg\:dark\:table-caption { + display: table-caption !important; + } + + .dark .lg\:dark\:table-cell { + display: table-cell !important; + } + + .dark .lg\:dark\:table-column { + display: table-column !important; + } + + .dark .lg\:dark\:table-column-group { + display: table-column-group !important; + } + + .dark .lg\:dark\:table-footer-group { + display: table-footer-group !important; + } + + .dark .lg\:dark\:table-header-group { + display: table-header-group !important; + } + + .dark .lg\:dark\:table-row-group { + display: table-row-group !important; + } + + .dark .lg\:dark\:table-row { + display: table-row !important; + } + + .dark .lg\:dark\:flow-root { + display: flow-root !important; + } + + .dark .lg\:dark\:grid { + display: grid !important; + } + + .dark .lg\:dark\:inline-grid { + display: inline-grid !important; + } + + .dark .lg\:dark\:contents { + display: contents !important; + } + + .dark .lg\:dark\:hidden { + display: none !important; + } + .lg\:flex-row { flex-direction: row !important; } @@ -227776,6 +228239,11 @@ progress::-moz-progress-bar { filter: grayscale(1) !important; } + .lg\:filter-invert { + -webkit-filter: invert(1) !important; + filter: invert(1) !important; + } + .lg\:filter-brightness-10 { -webkit-filter: brightness(10) !important; filter: brightness(10) !important; @@ -250565,6 +251033,82 @@ progress::-moz-progress-bar { display: none !important; } + .dark .xl\:dark\:block { + display: block !important; + } + + .dark .xl\:dark\:inline-block { + display: inline-block !important; + } + + .dark .xl\:dark\:inline { + display: inline !important; + } + + .dark .xl\:dark\:flex { + display: flex !important; + } + + .dark .xl\:dark\:inline-flex { + display: inline-flex !important; + } + + .dark .xl\:dark\:table { + display: table !important; + } + + .dark .xl\:dark\:table-caption { + display: table-caption !important; + } + + .dark .xl\:dark\:table-cell { + display: table-cell !important; + } + + .dark .xl\:dark\:table-column { + display: table-column !important; + } + + .dark .xl\:dark\:table-column-group { + display: table-column-group !important; + } + + .dark .xl\:dark\:table-footer-group { + display: table-footer-group !important; + } + + .dark .xl\:dark\:table-header-group { + display: table-header-group !important; + } + + .dark .xl\:dark\:table-row-group { + display: table-row-group !important; + } + + .dark .xl\:dark\:table-row { + display: table-row !important; + } + + .dark .xl\:dark\:flow-root { + display: flow-root !important; + } + + .dark .xl\:dark\:grid { + display: grid !important; + } + + .dark .xl\:dark\:inline-grid { + display: inline-grid !important; + } + + .dark .xl\:dark\:contents { + display: contents !important; + } + + .dark .xl\:dark\:hidden { + display: none !important; + } + .xl\:flex-row { flex-direction: row !important; } @@ -284289,6 +284833,11 @@ progress::-moz-progress-bar { filter: grayscale(1) !important; } + .xl\:filter-invert { + -webkit-filter: invert(1) !important; + filter: invert(1) !important; + } + .xl\:filter-brightness-10 { -webkit-filter: brightness(10) !important; filter: brightness(10) !important; @@ -307078,6 +307627,82 @@ progress::-moz-progress-bar { display: none !important; } + .dark .\32xl\:dark\:block { + display: block !important; + } + + .dark .\32xl\:dark\:inline-block { + display: inline-block !important; + } + + .dark .\32xl\:dark\:inline { + display: inline !important; + } + + .dark .\32xl\:dark\:flex { + display: flex !important; + } + + .dark .\32xl\:dark\:inline-flex { + display: inline-flex !important; + } + + .dark .\32xl\:dark\:table { + display: table !important; + } + + .dark .\32xl\:dark\:table-caption { + display: table-caption !important; + } + + .dark .\32xl\:dark\:table-cell { + display: table-cell !important; + } + + .dark .\32xl\:dark\:table-column { + display: table-column !important; + } + + .dark .\32xl\:dark\:table-column-group { + display: table-column-group !important; + } + + .dark .\32xl\:dark\:table-footer-group { + display: table-footer-group !important; + } + + .dark .\32xl\:dark\:table-header-group { + display: table-header-group !important; + } + + .dark .\32xl\:dark\:table-row-group { + display: table-row-group !important; + } + + .dark .\32xl\:dark\:table-row { + display: table-row !important; + } + + .dark .\32xl\:dark\:flow-root { + display: flow-root !important; + } + + .dark .\32xl\:dark\:grid { + display: grid !important; + } + + .dark .\32xl\:dark\:inline-grid { + display: inline-grid !important; + } + + .dark .\32xl\:dark\:contents { + display: contents !important; + } + + .dark .\32xl\:dark\:hidden { + display: none !important; + } + .\32xl\:flex-row { flex-direction: row !important; } @@ -340802,6 +341427,11 @@ progress::-moz-progress-bar { filter: grayscale(1) !important; } + .\32xl\:filter-invert { + -webkit-filter: invert(1) !important; + filter: invert(1) !important; + } + .\32xl\:filter-brightness-10 { -webkit-filter: brightness(10) !important; filter: brightness(10) !important; diff --git a/components/dashboard/src/workspaces/StartWorkspaceModal.tsx b/components/dashboard/src/workspaces/StartWorkspaceModal.tsx index 4789df633d4dfc..ed358514ca6a3d 100644 --- a/components/dashboard/src/workspaces/StartWorkspaceModal.tsx +++ b/components/dashboard/src/workspaces/StartWorkspaceModal.tsx @@ -24,9 +24,9 @@ interface StartWorkspaceModalProps { type Mode = 'Recent' | 'Examples'; function Tab(p: { name: Mode, selection: Mode, setSelection: (selection: Mode) => any }) { - const selectedTab = 'border-gray-800 text-gray-800'; - const inactiveTab = 'border-none text-gray-400'; - return
      p.setSelection(p.name)} className={"cursor-pointer py-2 px-4 border-b-4 " + (p.selection === p.name ? selectedTab : inactiveTab)}>{p.name}
      + const selectedTab = 'text-gray-800 dark:text-gray-200 border-gray-800 dark:border-gray-400'; + const inactiveTab = 'text-gray-400 dark:text-gray-600 hover:border-gray-400 dark:hover:border-gray-600'; + return
      p.setSelection(p.name)} className={"cursor-pointer py-2 px-4 border-b-4 border-transparent transition ease-in-out " + (p.selection === p.name ? selectedTab : inactiveTab)}>{p.name}
      } export function StartWorkspaceModal(p: StartWorkspaceModalProps) { @@ -35,9 +35,9 @@ export function StartWorkspaceModal(p: StartWorkspaceModalProps) { useEffect(() => setSelection(computeSelection()), [p.recent, p.selected]); const list = (selection === 'Recent' ? p.recent : p.examples).map(e => - +
      -

      {e.title}

      +

      {e.title}

      {e.description}

      ); @@ -45,13 +45,13 @@ export function StartWorkspaceModal(p: StartWorkspaceModalProps) { return

      New Workspace

      {/* separator */} -
      +
      -
      +
      {list.length > 0 ?

      {selection === 'Recent' ? @@ -62,13 +62,13 @@ export function StartWorkspaceModal(p: StartWorkspaceModalProps) { {list.length > 0 ? list : (selection === 'Recent' ?

      -

      No Recent Projects

      +

      No Recent Projects

      Projects you use frequently will show up here.

      Prefix a git repository URL with gitpod.io/# or start with an example.

      :
      -

      No Example Projects

      +

      No Example Projects

      Sorry there seem to be no example projects, that work with your current git provider.

      ) } diff --git a/components/dashboard/src/workspaces/WorkspaceEntry.tsx b/components/dashboard/src/workspaces/WorkspaceEntry.tsx index 8d77cf9961ee94..3b5f1a42848cfe 100644 --- a/components/dashboard/src/workspaces/WorkspaceEntry.tsx +++ b/components/dashboard/src/workspaces/WorkspaceEntry.tsx @@ -7,7 +7,6 @@ import { CommitContext, Workspace, WorkspaceInfo, WorkspaceInstance, WorkspaceInstancePhase } from '@gitpod/gitpod-protocol'; import { GitpodHostUrl } from '@gitpod/gitpod-protocol/lib/util/gitpod-host-url'; import ContextMenu, { ContextMenuEntry } from '../components/ContextMenu'; -import ThreeDots from '../icons/ThreeDots.svg'; import moment from 'moment'; import Modal from '../components/Modal'; import { MouseEvent, useState } from 'react'; @@ -81,7 +80,7 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) { }, { title: 'Delete', - customFontStyle: 'text-red-600', + customFontStyle: 'text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300', onClick: () => { setModalVisible(true); } @@ -94,19 +93,19 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) { setChangesModalVisible(true); } return
      -
      +
      @@ -126,9 +125,9 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
      {moment(WorkspaceInfo.lastActiveISODate(desc)).fromNow()}
      -
      +
      - Actions + Actions
      @@ -138,10 +137,10 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) { {isModalVisible && setModalVisible(false)}>

      Delete Workspace

      -
      +

      Are you sure you want to delete this workspace?

      -

      {ws.id}

      +

      {ws.id}

      {ws.description}

      diff --git a/components/dashboard/src/workspaces/Workspaces.tsx b/components/dashboard/src/workspaces/Workspaces.tsx index c8bc850ca4b440..75eb0d7d164d43 100644 --- a/components/dashboard/src/workspaces/Workspaces.tsx +++ b/components/dashboard/src/workspaces/Workspaces.tsx @@ -72,7 +72,7 @@ export default class Workspaces extends React.Component
      - { if (wsModel) wsModel.setSearch(v.target.value) }} /> + { if (wsModel) wsModel.setSearch(v.target.value) }} />
      @@ -104,7 +104,7 @@ export default class Workspaces extends React.Component 0 || wsModel.searchTerm ?
      -
      +
      Name
      Context
      @@ -119,8 +119,8 @@ export default class Workspaces extends React.Component
      -
      Garbage Collection
      -

      Unpinned workspaces that have been stopped for more than 14 days will be automatically deleted. Learn more

      +
      Garbage Collection
      +

      Unpinned workspaces that have been stopped for more than 14 days will be automatically deleted. Learn more

      } @@ -132,10 +132,10 @@ export default class Workspaces extends React.Component :
      -
      +
      -

      No Active Workspaces

      -
      Prefix any git repository URL with gitpod.io/# or create a new workspace for a recently used project. Learn more
      +

      No Active Workspaces

      +
      Prefix any git repository URL with gitpod.io/# or create a new workspace for a recently used project. Learn more
      {wsModel.getAllFetchedWorkspaces().size > 0 ? :null} diff --git a/components/dashboard/tailwind.config.js b/components/dashboard/tailwind.config.js index 46a19846a5173d..7d4a44f59374fd 100644 --- a/components/dashboard/tailwind.config.js +++ b/components/dashboard/tailwind.config.js @@ -67,12 +67,14 @@ module.exports = { // https://github.com/benface/tailwindcss-filters#usage 'none': 'none', 'grayscale': 'grayscale(1)', + 'invert': 'invert(1)', 'brightness-10': 'brightness(10)', }, }, variants: { extend: { opacity: ['disabled'], + display: ['dark'], } }, plugins: [