diff --git a/src/webview/cluster/app/cluster.style.tsx b/src/webview/cluster/app/cluster.style.tsx index 0758c1535..2dbac7cae 100644 --- a/src/webview/cluster/app/cluster.style.tsx +++ b/src/webview/cluster/app/cluster.style.tsx @@ -93,6 +93,15 @@ export default (theme: Theme) => }, textTransform: 'none' }, + sandboxButton: { + color: 'var(--vscode-button-foreground)', + backgroundColor: '#EE0000', + '&:hover': { + color: 'var(--vscode-button-foreground)', + backgroundColor: '#BE0000', + }, + textTransform: 'none' + }, cardContent: { background: 'var(--vscode-settings-focusedRowBackground)', border: '1px solid var(--vscode-settings-focusedRowBorder)', diff --git a/src/webview/cluster/app/cluster.tsx b/src/webview/cluster/app/cluster.tsx index cb7569023..4fda8058e 100644 --- a/src/webview/cluster/app/cluster.tsx +++ b/src/webview/cluster/app/cluster.tsx @@ -25,36 +25,36 @@ import './images/logo.png'; const useStyles = makeStyles(clusterStyle); const clusterTypes = [ - { - heading: 'Deploy it locally on your laptop', - description: 'Install on Laptop: Red Hat OpenShift Local (formerly Red Hat CodeReady Containers)', - smallInfo: 'Create a minimal OpenShift 4 cluster on your desktop/laptop for local development and testing.', - imageUrl: ['https://www.openshift.com/hubfs/images/icons/Icon-Red_Hat-Hardware-Laptop-A-Black-RGB.svg'], - urlAlt: 'crc', - redirectLink: '', - buttonText: 'Create/Refresh cluster', - tooltip: 'Create/Run local OpenShift 4 cluster using the guided workflow' - }, - { - heading: 'Launch Developer Sandbox', - description: 'Free access to the Developer Sandbox for Red Hat OpenShift', - smallInfo: 'If you are exploring how to run your code as containers in OpenShift, our free Developer Sandbox instantly gives you a way to try it out.', - imageUrl: ['https://assets.openshift.com/hubfs/images/logos/osh/Logo-Red_Hat-OpenShift-A-Standard-RGB.svg'], - urlAlt: 'dev sandbox', - redirectLink: '', - buttonText: 'Start your OpenShift experience', - tooltip: 'Launch your Developer Sandbox for Red Hat OpenShift' - }, - { - heading: 'Deploy it in your public cloud', - description: 'Run OpenShift clusters on your own by installing from another cloud provider.', - smallInfo: 'This includes Azure Red Hat Openshift, Red Hat OpenShift on IBM Cloud, Red Hat OpenShift Service on AWS, Google Cloud, AWS (x86_64), Azure.', - imageUrl: ['https://www.openshift.com/hubfs/images/logos/logo_aws.svg', 'https://www.openshift.com/hubfs/images/logos/logo-try-cloud.svg', 'https://www.openshift.com/hubfs/images/logos/logo_google_cloud.svg'], - urlAlt: 'public cloud', - redirectLink: 'https://console.redhat.com/openshift/create', - buttonText: 'Try it in your cloud', - tooltip: 'For complete installation, follow the official documentation.' - } + { + heading: 'Deploy it locally on your laptop', + description: 'Install on Laptop: Red Hat OpenShift Local (formerly Red Hat CodeReady Containers)', + smallInfo: 'Create a minimal OpenShift 4 cluster on your desktop/laptop for local development and testing.', + imageUrl: ['https://www.openshift.com/hubfs/images/icons/Icon-Red_Hat-Hardware-Laptop-A-Black-RGB.svg'], + urlAlt: 'crc', + redirectLink: '', + buttonText: 'Create/Refresh cluster', + tooltip: 'Create/Run local OpenShift 4 cluster using the guided workflow' + }, + { + heading: 'Launch Developer Sandbox', + description: 'Free access to the Developer Sandbox for Red Hat OpenShift', + smallInfo: 'If you are exploring how to run your code as containers in OpenShift, our free Developer Sandbox instantly gives you a way to try it out.', + imageUrl: ['https://assets.openshift.com/hubfs/images/logos/osh/Logo-Red_Hat-OpenShift-A-Standard-RGB.svg'], + urlAlt: 'dev sandbox', + redirectLink: '', + buttonText: 'Start your OpenShift experience', + tooltip: 'Launch your Developer Sandbox for Red Hat OpenShift' + }, + { + heading: 'Deploy it in your public cloud', + description: 'Run OpenShift clusters on your own by installing from another cloud provider.', + smallInfo: 'This includes Azure Red Hat Openshift, Red Hat OpenShift on IBM Cloud, Red Hat OpenShift Service on AWS, Google Cloud, AWS (x86_64), Azure.', + imageUrl: ['https://www.openshift.com/hubfs/images/logos/logo_aws.svg', 'https://www.openshift.com/hubfs/images/logos/logo-try-cloud.svg', 'https://www.openshift.com/hubfs/images/logos/logo_google_cloud.svg'], + urlAlt: 'public cloud', + redirectLink: 'https://console.redhat.com/openshift/create', + buttonText: 'Try it in your cloud', + tooltip: 'For complete installation, follow the official documentation.' + } ]; const vscodeApi = window.vscodeApi; @@ -98,17 +98,21 @@ export default function Header() { } }; + const moveBack = () => { + setShowWizard(''); + } + const InfrastructureLayout = ({ clusterTypes }) => ( <> {clusterTypes.map((list, index) => (
- + {list.heading}
- + {list.imageUrl.map((url: string, index: string | number) => ( ))} @@ -125,13 +129,13 @@ export default function Header() {
- +
handleView(index)} style={{ textDecoration: 'none' }} href={clusterTypes[index].redirectLink || '#'}> - - - + + + +
)} - { !showWizard && ( + {!showWizard && (