Revert "Slight tweaks to mcp client view"

This reverts commit 96f09e5.

Author: dgageot

src/extension/ui/src/components/CatalogGrid.tsx

@@ -76,9 +76,10 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({ appProps }) => {
         justifyContent="center"
         sx={CATALOG_LAYOUT_SX}
       >
-        <Typography variant="h3">Docker MCP Toolkit</Typography>
+        <Typography variant="h3">Docker MCP Catalog</Typography>
         <Typography sx={{ color: 'text.secondary' }}>
-          Find and connect your favorite tools to MCP clients. One click away.
+          Browse the Docker MCP Catalog and connect Dockerized MCP servers to
+          your favorite MCP Client
         </Typography>
       </Stack>
       {hasOutOfCatalog && (

src/extension/ui/src/components/tabs/YourClients.tsx

@@ -26,7 +26,7 @@ import ContinueIcon from '../../assets/continue.svg';
 import CursorIcon from '../../assets/cursor.svg';
 import GordonIcon from '../../assets/gordon-icon.png';
 import { CATALOG_LAYOUT_SX, DOCKER_MCP_COMMAND } from '../../Constants';
-import { LinkOff, LinkOffOutlined, LinkOutlined } from '@mui/icons-material';
+import { LinkOffOutlined, LinkOutlined } from '@mui/icons-material';
 
 // Initialize the Docker Desktop client
 const client = createDockerDesktopClient();
@@ -43,15 +43,12 @@ const iconMap = {
 };
 
 const ConnectButtonStyle = (theme: Theme) => ({
-  fontSize: '14px',
+  fontSize: '1.3em',
   p: 1,
   alignItems: 'center',
   justifyContent: 'center',
   [theme.breakpoints.down('sm')]: {
-    p: '2px',
-    '& .MuiTypography-root': {
-      fontSize: '12px',
-    },
+    fontSize: '1em',
   },
 });
 
@@ -193,7 +190,6 @@ function ClientSetting({
             {
               mcpClientState.exists && mcpClientState.configured && (
                 <Button
-                  color="warning"
                   onClick={async () => {
                     setButtonsLoading({
                       ...buttonsLoading,
@@ -216,25 +212,22 @@ function ClientSetting({
                   <Stack direction="row" alignItems="center" spacing={1} sx={ConnectButtonStyle}>
                     {(buttonsLoading[name] && (
                       <>
-                        <LinkOutlined />
-                        <Typography>
+                        <Typography sx={{ fontSize: 12, width: 70 }}>
                           Connect
                         </Typography>
                         <CircularProgress size={12} />
                       </>
                     )) || (
-                        <>
-                          <LinkOffOutlined />
-                          <Typography>
-                            Disconnect
-                          </Typography>
-                        </>
+                        <Typography sx={{ fontSize: 12, width: 90 }}>
+                          Disconnect
+                        </Typography>
                       )}
                   </Stack>
                 </Button>
               )}
             {mcpClientState.exists && !mcpClientState.configured && (
               <Button
+                sx={{ fontSize: 12 }}
                 onClick={async () => {
                   setButtonsLoading({
                     ...buttonsLoading,
@@ -264,28 +257,25 @@ function ClientSetting({
                 <Stack direction="row" alignItems="center" spacing={1} sx={ConnectButtonStyle}>
                   {(buttonsLoading[name] && (
                     <>
-                      <LinkOffOutlined />
-                      <Typography>
+                      <Typography sx={{ fontSize: 12, width: 70 }}>
                         Disconnect
                       </Typography>
                       <CircularProgress size={12} />
                     </>
                   )) || (
-                      <>
-                        <LinkOutlined />
-                        <Typography>
-                          Connect
-                        </Typography>
-                      </>
+                      <Typography sx={{ fontSize: 12, width: 90 }}>
+                        Connect
+                      </Typography>
                     )}
                 </Stack>
               </Button>
             )}
             {
               !mcpClientState.exists && (
                 <Button
+                  sx={{ fontSize: 12 }}
                   size="small"
-                  variant="outlined"
+                  disabled
                   onClick={async () => {
                     setButtonsLoading({
                       ...buttonsLoading,
@@ -304,19 +294,15 @@ function ClientSetting({
                   <Stack direction="row" alignItems="center" spacing={1} sx={ConnectButtonStyle}>
                     {(buttonsLoading[name] && (
                       <>
-                        <LinkOffOutlined />
-                        <Typography>
-                          Attempt disconnect
+                        <Typography sx={{ fontSize: 12, width: 70 }}>
+                          Disconnect
                         </Typography>
                         <CircularProgress size={12} />
                       </>
                     )) || (
-                        <>
-                          <LinkOutlined />
-                          <Typography>
-                            Attempt connection
-                          </Typography>
-                        </>
+                        <Typography sx={{ fontSize: 12, width: 90 }}>
+                          Connect
+                        </Typography>
                       )}
                   </Stack>
                 </Button>