From 8cfbc92864d9bd47a46dc0120410c307a737d09a Mon Sep 17 00:00:00 2001
From: Ben Zhang <ben-z@users.noreply.github.com>
Date: Sun, 18 Aug 2024 17:10:33 -0700
Subject: [PATCH] Polish the SSH page (#3032)

The command generator layout may be slightly confusing at first glance.
This PR aims to make it clear where it starts and ends. Also includes
some minor fixes.

Before (left) and after (right):

<img width="2550" alt="image"
src="https://github.com/user-attachments/assets/46ad61eb-ac6b-4471-9f25-724a47553b13">
<img width="2549" alt="image"
src="https://github.com/user-attachments/assets/c71adfef-109b-4261-84b4-0bd882068010">
---
 components/ssh-command-generator.tsx |  6 +++---
 pages/docs/compute-cluster/ssh.mdx   | 16 ++--------------
 2 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/components/ssh-command-generator.tsx b/components/ssh-command-generator.tsx
index f9f7418..e49ecdc 100644
--- a/components/ssh-command-generator.tsx
+++ b/components/ssh-command-generator.tsx
@@ -140,9 +140,9 @@ export function SSHCommandGenerator() {
                 </dd>
             </dl>
             <div className="mt-8">
-                <h4 className="text-xl font-semibold">Results</h4>
+                <h4 className="text-xl font-semibold">Options</h4>
                 <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
-                    Below are options for connecting to <Code>{machineName}</Code>.
+                    Below are options for connecting to <span className="font-bold">{machineName}</span>.
                     Please choose the option that best fits your use case.
                 </p>
             </div>
@@ -150,7 +150,7 @@ export function SSHCommandGenerator() {
             {
                 sshInfo[machineName].paths.map(({hops, instructions}) => (
                     <div key={hops.join(" -> ")} className="mt-8">
-                        <h4 className="text-lg font-semibold">{hops.length === 1 ? "Direct Connection" : hops.join(" -> ")}</h4>
+                        <h4 className="text-lg font-semibold">{hops.length === 1 ? "Direct Connection" : hops.join(" → ")}</h4>
                         <ol className='list-decimal ltr:ml-6 rtl:mr-6 mt-6'>
                             {instructions.map((instruction, i) => {
                                 const MDXComponent = lookupStringMDX(sshInfoStrings, instruction)
diff --git a/pages/docs/compute-cluster/ssh.mdx b/pages/docs/compute-cluster/ssh.mdx
index dde809e..8c6139a 100644
--- a/pages/docs/compute-cluster/ssh.mdx
+++ b/pages/docs/compute-cluster/ssh.mdx
@@ -16,22 +16,15 @@ Note that the commands generated by this tool are only tested on Linux and macOS
 
 ### Command Generator
 
-Choose your preferred machine and entrypoint[^entrypoint] below. Your personalized SSH command will be generated and displayed below.
-
-[^entrypoint]: An entrypoint is a service or location that you connect to or be at when you connect to the cluster. This is necessary
-because the cluster is behind a [firewall](./firewall) and you cannot connect to it directly.
+Choose your preferred machine and fill in the fields below to obtain personalized SSH commands.
 
 import { SSHCommandGenerator } from '@/components/ssh-command-generator'
 import { Separator } from "@/components/ui/separator"
 
-<Separator className="mt-6" />
-
-<div className="mt-6">
+<div className="my-6 p-4 ring-1 ring-ring rounded-md">
     <SSHCommandGenerator />
 </div>
 
-<Separator className="mt-6" />
-
 The generated commands do *not* require setting up ssh agent[^ssh-agent] or ssh config[^ssh-config].
 However, you may soon find that setting them up will make your life easier. If you are interested in learning more about these
 tools, please check out [Tips and Tricks](#tips-and-tricks) and the official documentation linked in the footnotes.
@@ -42,11 +35,6 @@ that allows you to use your local SSH keys on remote machines.
 
 [^ssh-config]: [SSH config](https://www.ssh.com/ssh/config/) is a configuration file that allows you to simplify your SSH commands.
 
-<Callout type="info">
-Once you are able to connect to the cluster, you may want to take a look at the [Tips and Tricks](#tips-and-tricks)
-section to speed up your workflow.
-</Callout>
-
 ## Syntax
 
 The general syntax for connecting to the cluster is: