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 1 commit
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;
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
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
100 changes: 53 additions & 47 deletions web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Servers/Servers.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 } from 'shared/components/MenuLogin';
import { SearchPanel, SearchPagination } from 'shared/components/Search';
Expand Down Expand Up @@ -54,53 +58,55 @@ function ServerList(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
columns={[
{
key: 'hostname',
headerText: 'Hostname',
isSortable: true,
},
{
key: 'addr',
headerText: 'Address',
isSortable: false,
render: renderAddressCell,
},
{
key: 'labels',
headerText: 'Labels',
render: ({ labels }) => (
<ClickableLabelCell
labels={labels}
onClick={onAgentLabelClick}
/>
),
},
{
altKey: 'connect-btn',
render: server =>
renderConnectCell(
() => getSshLogins(server.uri),
login => connect(server, login)
),
},
]}
customSort={customSort}
emptyText={emptyText}
data={servers}
<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
columns={[
{
key: 'hostname',
headerText: 'Hostname',
isSortable: true,
},
{
key: 'addr',
headerText: 'Address',
isSortable: false,
render: renderAddressCell,
},
{
key: 'labels',
headerText: 'Labels',
render: ({ labels }) => (
<ClickableLabelCell
labels={labels}
onClick={onAgentLabelClick}
/>
),
},
{
altKey: 'connect-btn',
render: server =>
renderConnectCell(
() => getSshLogins(server.uri),
login => connect(server, login)
),
},
]}
customSort={customSort}
emptyText={emptyText}
data={servers}
/>
<SearchPagination prevPage={prevPage} nextPage={nextPage} />
</DarkenWhileDisabled>
</StyledTableWrapper>
</>
);
}
Expand Down
3 changes: 2 additions & 1 deletion web/packages/teleterm/src/ui/DocumentGateway/CliCommand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@ export function CliCommand({ cliCommand, onRun, isLoading }: CliCommandProps) {
>
<Flex
mr="2"
color={shouldDisplayIsLoading ? 'text.slightlyMuted' : 'text.main'}
// always use light colors
color={shouldDisplayIsLoading ? 'rgba(255, 255, 255, 0.72)' : 'light'}
Copy link
Member

Choose a reason for hiding this comment

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

Could you remove the hardcoded color? It won't play nice with custom themes that we eventually want to add.

Not sure what are some of the ways we can solve this, perhaps we could manipulate the opacity instead?

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 used the color modification function to manually add some transparency to the light color.

width="100%"
css={`
overflow: auto;
Expand Down