fix(sandbox): some css updates (#752)

* css updates
---------

Co-authored-by: Devtools <devtools@redhat.com>

Author: mfrancisc

workspaces/sandbox/make/sandbox.mk

@@ -43,10 +43,10 @@ start-rhdh-local: clone-rhdh-local generate-env
 	yq e 'del(.services.rhdh.volumes[] | select(. == "./configs:/opt/app-root/src/configs:Z"))' -i compose.yaml && \
 	yq e '.services.rhdh.ports = ["3000:3000"] | (.services.rhdh.ports) |= map(. style="double")' -i compose.yaml && \
 	podman-compose up -d  && \
-	echo "UI is up and running at: localhost:3000"
+	echo "UI is up and running at: http://localhost:3000"
 
 .PHONY: stop-rhdh-local
 stop-rhdh-local:
 	cd $(RHDH_LOCAL_DIR) && \
 	podman-compose down -v && \
-	rm -rf $(RHDH_LOCAL_DIR)
+	rm -rf $(RHDH_LOCAL_DIR)

workspaces/sandbox/plugins/sandbox/src/api/RegistrationBackendClient.tsx

@@ -140,8 +140,9 @@ export class RegistrationBackendClient implements RegistrationService {
     });
 
     if (!response.ok) {
-      const error: CommonResponse = await response.json();
-      throw new Error(error?.message);
+      throw new Error(
+        'Invalid phone number. Please verify the country code and number format, then try again.',
+      );
     }
   };
 

workspaces/sandbox/plugins/sandbox/src/components/Modals/AnsibleLaunchInfoModal.tsx

@@ -420,13 +420,12 @@ export const AnsibleLaunchInfoModal: React.FC<AnsibleLaunchInfoModalProps> = ({
                   fontWeight: 420,
                 }}
               >
-                While you wait, consider exploring the{' '}
-                <Link to="#" underline="none">
-                  AAP documentation.
+                New to Ansible Automation Platform? Get up to speed with our{' '}
+                <Link to="http://red.ht/ansibledevsandboxpath" underline="none">
+                  introductory learning path.
                 </Link>
+                <OpenInNewIcon />
               </Typography>
-
-              <OpenInNewIcon />
             </div>
             <div
               style={{

workspaces/sandbox/plugins/sandbox/src/components/SandboxActivities/SandboxActivitiesGrid.tsx

@@ -29,8 +29,7 @@ const FeaturedArticles: React.FC = () => {
       sx={{
         alignItems: 'center',
         justifyContent: 'space-between',
-        padding: '36px 240px 48px 60px',
-        backgroundColor: theme.palette.background.paper,
+        padding: '36px 60px 48px 60px',
       }}
     >
       <Typography
@@ -58,8 +57,11 @@ const Articles: React.FC = () => {
       sx={{
         alignItems: 'center',
         justifyContent: 'space-between',
-        padding: '36px 240px 48px 60px',
-        backgroundColor: theme.palette.background.default,
+        padding: '36px 60px 48px 60px',
+        backgroundColor:
+          theme.palette.mode === 'dark'
+            ? '#000000'
+            : theme.palette.background.default,
       }}
     >
       <ItemCardGrid>

workspaces/sandbox/plugins/sandbox/src/components/SandboxCatalog/SandboxCatalogCardButton.tsx

@@ -68,7 +68,9 @@ export const SandboxCatalogCardButton: React.FC<
   }
 
   const buttonSx = {
-    border: `1px solid ${theme.palette.primary.main}`,
+    border: `1px solid ${
+      theme.palette.mode === 'dark' ? '#92c5f9' : theme.palette.primary.main
+    }`,
     marginTop: theme.spacing(0.5),
     '&:hover': {
       backgroundColor: 'rgba(25, 118, 210, 0.04)',

workspaces/sandbox/plugins/sandbox/src/components/SandboxCatalog/SandboxCatalogGrid.tsx

@@ -32,9 +32,9 @@ export const SandboxCatalogGrid: React.FC = () => {
   };
 
   return (
-    <Grid container spacing={3} sx={{ maxWidth: '100%' }}>
+    <Grid container spacing={2} sx={{ maxWidth: '100%' }}>
       {productData?.map(product => (
-        <Grid item xs={12} sm="auto" md="auto" key={product.id}>
+        <Grid item xs="auto" sm="auto" md="auto" lg="auto" key={product.id}>
           <Box sx={{ width: '330px', height: '372px' }}>
             <SandboxCatalogCard
               id={product.id}

workspaces/sandbox/plugins/sandbox/src/components/SandboxCatalog/SandboxCatalogPage.tsx

@@ -35,10 +35,14 @@ export const SandboxCatalogPage = () => {
   return (
     <SandboxProvider>
       <Page themeId="sandbox">
-        <SandboxHeader pageTitle="Developer Sandbox" showSubTitle />
+        <SandboxHeader pageTitle="Developer Sandbox" />
         <Content className={classes.content} noPadding>
           <SandboxCatalogBanner />
-          <Box style={{ padding: '48px 60px 48px 60px' }}>
+          <Box
+            style={{
+              padding: '48px 60px 48px 60px',
+            }}
+          >
             <SandboxCatalogGrid />
           </Box>
 

workspaces/sandbox/plugins/sandbox/src/components/SandboxHeader.tsx

@@ -24,17 +24,12 @@ import { Header, Link } from '@backstage/core-components';
 
 interface SandboxHeaderProps {
   pageTitle: string;
-  showSubTitle?: boolean;
 }
 
-export const SandboxHeader: React.FC<SandboxHeaderProps> = ({
-  pageTitle,
-  showSubTitle,
-}) => {
+export const SandboxHeader: React.FC<SandboxHeaderProps> = ({ pageTitle }) => {
   const theme = useTheme();
   return (
     <Header
-      pageTitleOverride={!showSubTitle ? 'Activities' : 'Home'}
       title={
         <Typography
           color="textPrimary"
@@ -48,22 +43,20 @@ export const SandboxHeader: React.FC<SandboxHeaderProps> = ({
         </Typography>
       }
       subtitle={
-        showSubTitle && (
-          <Typography variant="body1" color="textSecondary">
-            powered by{' '}
-            <Link
-              to="https://developers.redhat.com/rhdh/overview"
-              underline="none"
-            >
-              Red Hat Developer Hub{' '}
-            </Link>
-            <OpenInNewIcon
-              fontSize="small"
-              color="primary"
-              sx={{ fontSize: '12px' }}
-            />
-          </Typography>
-        )
+        <Typography variant="body1" color="textSecondary">
+          powered by{' '}
+          <Link
+            to="https://developers.redhat.com/rhdh/overview"
+            underline="none"
+          >
+            Red Hat Developer Hub{' '}
+          </Link>
+          <OpenInNewIcon
+            fontSize="small"
+            color="primary"
+            sx={{ fontSize: '12px' }}
+          />
+        </Typography>
       }
       style={{
         background: 'none',