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

Jump to bottom

Connect: Adjust to the light theme #27080

Merged
merged 10 commits into from
Jun 5, 2023
Merged

Connect: Adjust to the light theme #27080

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
75e3fac
Adjust Connect to light theme
gzdunek May 19, 2023
3a83bcc
Remove `clusters/*` element
gzdunek May 19, 2023
0e8ff48
Add terminal colors
gzdunek May 25, 2023
db5edc2
Remove warning about using `false` as `color`
gzdunek May 25, 2023
a07d55c
Add custom styling for `Toggle`
gzdunek May 29, 2023
23d9f42
Fix light theme for file transfer, use the same border color for the …
gzdunek May 30, 2023
cc3441c
Do not hardcode color in `CliCommand`
gzdunek May 31, 2023
62c1782
Use #000 as black
gzdunek Jun 2, 2023
3b16d4b
Convert rgba colors to be non-opaque
gzdunek Jun 2, 2023
a6b2db7
Fix two slightly incorrect colors
gzdunek Jun 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 1 addition & 4 deletions web/packages/design/src/DataTable/InputSearch/InputSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,7 @@ const ChildWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
background: ${props =>
props.theme.name === 'dark'
? props.theme.colors.spotBackground[0]
: props.theme.colors.spotBackground[0]};
background: ${props => props.theme.colors.spotBackground[0]};
border-radius: 200px;
`;

Expand Down
12 changes: 10 additions & 2 deletions web/packages/design/src/DataTable/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,15 @@ import {
LabelCell,
ClickableLabelCell,
} from './Cells';
import { StyledPanel } from './StyledTable';
import { StyledPanel, StyledTableWrapper } from './StyledTable';

export { Cell, TextCell, DateCell, LabelCell, ClickableLabelCell, StyledPanel };
export {
Cell,
TextCell,
DateCell,
LabelCell,
ClickableLabelCell,
StyledPanel,
StyledTableWrapper,
};
export default Table;
24 changes: 24 additions & 0 deletions web/packages/design/src/theme/darkTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,30 @@ const colors = {
disabledBackground: 'rgba(255, 255, 255, 0.12)',
},

terminal: {
foreground: '#F1F2F4',
background: '#0C143D',
selectionBackground: 'rgba(255, 255, 255, 0.18)',
cursor: '#FFF',
cursorAccent: '#0C143D',
red: '#FF6257',
green: '#00BFA6',
yellow: '#FFAB00',
blue: '#009EFF',
magenta: '#9F85FF',
cyan: '#00D3F0',
brightWhite: 'rgba(255, 255, 255, 0.89)',
white: 'rgba(255, 255, 255, 0.78)',
brightBlack: 'rgba(255, 255, 255, 0.61)',
black: 'rgba(255, 255, 255, 0.46)',
brightRed: '#FF948D',
brightGreen: '#2EFFD5',
brightYellow: '#FFD98C',
brightBlue: '#7BCDFF',
brightMagenta: '#B9A6FF',
brightCyan: '#74EEFF',
},

subtle: blueGrey[50],
link: '#009EFF',
bgTerminal: '#010B1C',
Expand Down
24 changes: 24 additions & 0 deletions web/packages/design/src/theme/lightTheme.ts
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

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

The input text in file upload path is invisible.

file upload

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks for catching this.
I also changed "Drag your files here" border to match the input's border.

Copy link
Member

Choose a reason for hiding this comment

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

I feel like the active tab could have a little more contrast. It's rather hard to immediately spot which tab is active on my old full HD monitor.

I think it's sort of related to what you said about the shadow. We could either experiment with the contrast or add another indicator of an active tab.

active tab

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, I wanted to solve these two things at once.

Copy link
Member

Choose a reason for hiding this comment

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

Not relevant to the PR, but on full HD the colors on smaller fonts seem to blur a little bit. This is less visible on the dark theme. Compare the Refresh button in the top right and the table headers.

I don't think it's necessarily the fault of the colors, those fonts could be just bigger.

Light Dark
light theme dark theme

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm curious if this is related to: https://www.electronjs.org/docs/latest/faq#the-font-looks-blurry-what-is-this-and-what-can-i-do
I have not changed the browser window background color, so it still dark. Would like to test it when you have some time with light bg? (I don't have FHD display 😞)

Copy link
Member

Choose a reason for hiding this comment

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

I think the browser window background is already light since it uses theme.colors.levels.sunken. theme in this context is the light theme since I replaced it whole in the theme provider.

Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,30 @@ const colors = {
disabledBackground: 'rgba(255, 255, 255, 0.12)',
},

terminal: {
foreground: '#000',
background: '#F1F2F4',
selectionBackground: 'rgba(0, 0, 0, 0.18)',
cursor: '#000',
cursorAccent: '#F1F2F4',
red: '#9D0A00',
green: '#005742',
yellow: '#754F00',
blue: '#004B89',
magenta: '#3D1BB3',
cyan: '#015C6E',
brightWhite: 'rgba(0, 0, 0, 0.55)',
white: 'rgba(0, 0, 0, 0.68)',
brightBlack: 'rgba(0, 0, 0, 0.8)',
black: 'rgba(0, 0, 0, 0.89)',
brightRed: '#BF372E',
brightGreen: '#007562',
brightYellow: '#8F5F00',
brightBlue: '#006BB8',
brightMagenta: '#5531D4',
brightCyan: '#007282',
},

subtle: blueGrey[50],
link: '#0073BA',
bgTerminal: '#010B1C',
Expand Down
4 changes: 0 additions & 4 deletions web/packages/shared/components/FileTransfer/FileTransferStateless/CommonElements.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,6 @@ export const PathInput = forwardRef<

const StyledFieldInput = styled(FieldInput)`
input {
border: 1px solid ${props => props.theme.colors.text.muted};
background: transparent;
color: white;
box-shadow: none;
font-size: 14px;
height: 32px;
}
Expand Down
2 changes: 1 addition & 1 deletion web/packages/shared/components/FileTransfer/FileTransferStateless/UploadForm/UploadForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ const Dropzone = styled.button`
color: inherit;
background-color: ${props => props.theme.colors.spotBackground[0]};
margin-top: ${props => props.theme.space[3]}px;
border: 1px dashed ${props => props.theme.colors.spotBackground[1]};
border: 1px dashed ${props => props.theme.colors.text.muted};
height: 128px;
text-align: center;
cursor: pointer;
Expand Down
4 changes: 3 additions & 1 deletion web/packages/teleport/src/components/Toggle/Toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,10 @@ export default function Toggle({
onToggle,
children,
disabled,
className,
}: Props) {
return (
<StyledWrapper disabled={disabled}>
<StyledWrapper disabled={disabled} className={className}>
<StyledInput
checked={isToggled}
onChange={onToggle}
Expand All @@ -41,6 +42,7 @@ type Props = {
onToggle: () => void;
children?: ReactNode;
disabled?: boolean;
className?: string;
};

const StyledWrapper = styled.label`
Expand Down
2 changes: 1 addition & 1 deletion web/packages/teleterm/src/ui/DocumentCluster/ClusterNavButton/ClusterNavButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export type NavButtonProps = {
const StyledNavButton = styled.button(props => {
return {
color: props.active
? props.theme.colors.light
? props.theme.colors.text.main
: props.theme.colors.text.slightlyMuted,
cursor: 'pointer',
fontFamily: 'inherit',
Expand Down
2 changes: 1 addition & 1 deletion web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/ClusterResources.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default function ClusterResources() {

return (
<StyledMain>
<Flex mt={3} pb={5} flexDirection="column">
<Flex pb={5} flexDirection="column">
<SideNav mb={2} />
<HorizontalSplit>
{clusterCtx.isLocationActive('/resources/servers') && <Servers />}
Expand Down
112 changes: 59 additions & 53 deletions web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Databases/Databases.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import Table, { Cell, ClickableLabelCell } from 'design/DataTable';
import Table, {
Cell,
ClickableLabelCell,
StyledTableWrapper,
} from 'design/DataTable';
import { Danger } from 'design/Alert';
import { MenuLogin, MenuLoginProps } from 'shared/components/MenuLogin';
import { SearchPanel, SearchPagination } from 'shared/components/Search';
Expand Down Expand Up @@ -58,59 +62,61 @@ function DatabaseList(props: State) {
{fetchAttempt.status === 'error' && (
<Danger>{fetchAttempt.statusText}</Danger>
)}
<SearchPanel
updateQuery={updateQuery}
updateSearch={updateSearch}
pageIndicators={pageCount}
filter={agentFilter}
showSearchBar={true}
disableSearch={disabled}
/>
<DarkenWhileDisabled disabled={disabled}>
<Table
data={dbs}
columns={[
{
key: 'name',
headerText: 'Name',
isSortable: true,
},
{
key: 'description',
headerText: 'Description',
isSortable: true,
},
{
key: 'type',
headerText: 'Type',
isSortable: true,
},
{
key: 'labels',
headerText: 'Labels',
render: ({ labels }) => (
<ClickableLabelCell
labels={labels}
onClick={onAgentLabelClick}
/>
),
},
{
altKey: 'connect-btn',
render: db => (
<ConnectButton
dbUri={db.uri}
protocol={db.protocol as GatewayProtocol}
onConnect={dbUser => connect(db, dbUser)}
/>
),
},
]}
customSort={customSort}
emptyText={emptyText}
<StyledTableWrapper borderRadius={3}>
<SearchPanel
updateQuery={updateQuery}
updateSearch={updateSearch}
pageIndicators={pageCount}
filter={agentFilter}
showSearchBar={true}
disableSearch={disabled}
/>
<SearchPagination prevPage={prevPage} nextPage={nextPage} />
</DarkenWhileDisabled>
<DarkenWhileDisabled disabled={disabled}>
<Table
data={dbs}
columns={[
{
key: 'name',
headerText: 'Name',
isSortable: true,
},
{
key: 'description',
headerText: 'Description',
isSortable: true,
},
{
key: 'type',
headerText: 'Type',
isSortable: true,
},
{
key: 'labels',
headerText: 'Labels',
render: ({ labels }) => (
<ClickableLabelCell
labels={labels}
onClick={onAgentLabelClick}
/>
),
},
{
altKey: 'connect-btn',
render: db => (
<ConnectButton
dbUri={db.uri}
protocol={db.protocol as GatewayProtocol}
onConnect={dbUser => connect(db, dbUser)}
/>
),
},
]}
customSort={customSort}
emptyText={emptyText}
/>
<SearchPagination prevPage={prevPage} nextPage={nextPage} />
</DarkenWhileDisabled>
</StyledTableWrapper>
</>
);
}
Expand Down
80 changes: 43 additions & 37 deletions web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Kubes/Kubes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,11 @@ limitations under the License.
*/

import React from 'react';
import Table, { Cell, ClickableLabelCell } from 'design/DataTable';
import Table, {
Cell,
ClickableLabelCell,
StyledTableWrapper,
} from 'design/DataTable';
import { ButtonBorder } from 'design';
import { Danger } from 'design/Alert';
import { SearchPanel, SearchPagination } from 'shared/components/Search';
Expand Down Expand Up @@ -54,43 +58,45 @@ function KubeList(props: State) {
{fetchAttempt.status === 'error' && (
<Danger>{fetchAttempt.statusText}</Danger>
)}
<SearchPanel
updateQuery={updateQuery}
updateSearch={updateSearch}
pageIndicators={pageCount}
filter={agentFilter}
showSearchBar={true}
disableSearch={disabled}
/>
<DarkenWhileDisabled disabled={disabled}>
<Table
data={kubes}
columns={[
{
key: 'name',
headerText: 'Name',
isSortable: true,
},
{
key: 'labels',
headerText: 'Labels',
render: ({ labels }) => (
<ClickableLabelCell
labels={labels}
onClick={onAgentLabelClick}
/>
),
},
{
altKey: 'connect-btn',
render: kube => renderConnectButtonCell(kube.uri, connect),
},
]}
customSort={customSort}
emptyText={emptyText}
<StyledTableWrapper borderRadius={3}>
<SearchPanel
updateQuery={updateQuery}
updateSearch={updateSearch}
pageIndicators={pageCount}
filter={agentFilter}
showSearchBar={true}
disableSearch={disabled}
/>
<SearchPagination prevPage={prevPage} nextPage={nextPage} />
</DarkenWhileDisabled>
<DarkenWhileDisabled disabled={disabled}>
<Table
data={kubes}
columns={[
{
key: 'name',
headerText: 'Name',
isSortable: true,
},
{
key: 'labels',
headerText: 'Labels',
render: ({ labels }) => (
<ClickableLabelCell
labels={labels}
onClick={onAgentLabelClick}
/>
),
},
{
altKey: 'connect-btn',
render: kube => renderConnectButtonCell(kube.uri, connect),
},
]}
customSort={customSort}
emptyText={emptyText}
/>
<SearchPagination prevPage={prevPage} nextPage={nextPage} />
</DarkenWhileDisabled>
</StyledTableWrapper>
</>
);
}
Expand Down