Update empty state text

app/components/form/fields/SshKeysField.tsx

@@ -131,7 +131,7 @@ export function SshKeysField({
           <EmptyMessage
             icon={<Key16Icon />}
             title="No SSH keys"
-            body="You need to add a key to be able to see it here"
+            body="Add a key to see it here"
             buttonText="Add SSH Key"
             onClick={() => setShowAddSshKey(true)}
           />

app/pages/ProjectsPage.tsx

@@ -37,7 +37,7 @@ const EmptyState = () => (
   <EmptyMessage
     icon={<Folder24Icon />}
     title="No projects"
-    body="You need to create a project to be able to see it here"
+    body="Create a project to see it here"
     buttonText="New project"
     buttonTo={pb.projectsNew()}
   />

app/pages/project/disks/DisksPage.tsx

@@ -41,7 +41,7 @@ const EmptyState = () => (
   <EmptyMessage
     icon={<Storage24Icon />}
     title="No disks"
-    body="You need to create a disk to be able to see it here"
+    body="Create a disk to see it here"
     buttonText="New disk"
     buttonTo={pb.disksNew(useProjectSelector())}
   />

app/pages/project/floating-ips/FloatingIpsPage.tsx

@@ -47,7 +47,7 @@ const EmptyState = () => (
   <EmptyMessage
     icon={<IpGlobal24Icon />}
     title="No floating IPs"
-    body="You need to create a floating IP to be able to see it here"
+    body="Create a floating IP to see it here"
     buttonText="New Floating IP"
     buttonTo={pb.floatingIpsNew(useProjectSelector())}
   />

app/pages/project/images/ImagesPage.tsx

@@ -33,7 +33,7 @@ const EmptyState = () => (
   <EmptyMessage
     icon={<Images24Icon />}
     title="No images"
-    body="You need to create an image to be able to see it here"
+    body="Create an image to see it here"
     // buttonText="New image"
     // buttonTo="new"
   />

app/pages/project/instances/InstancesPage.tsx

@@ -39,7 +39,7 @@ const EmptyState = () => (
   <EmptyMessage
     icon={<Instances24Icon />}
     title="No instances"
-    body="You need to create an instance to be able to see it here"
+    body="Create an instance to see it here"
     buttonText="New instance"
     buttonTo={pb.instancesNew(useProjectSelector())}
   />

app/pages/project/instances/instance/tabs/StorageTab.tsx

@@ -160,7 +160,7 @@ export function StorageTab() {
     <EmptyMessage
       icon={<Storage24Icon />}
       title="No disks"
-      body="You need to attach a disk to this instance to be able to see it here"
+      body="Attach a disk to this instance to see it here"
     />
   )
 

app/pages/project/snapshots/SnapshotsPage.tsx

@@ -46,7 +46,7 @@ const EmptyState = () => (
   <EmptyMessage
     icon={<Snapshots24Icon />}
     title="No snapshots"
-    body="You need to create a snapshot to be able to see it here"
+    body="Create a snapshot to see it here"
     buttonText="New snapshot"
     buttonTo={pb.snapshotsNew(useProjectSelector())}
   />

app/pages/project/vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx

@@ -162,7 +162,7 @@ export function VpcFirewallRulesTab() {
     <TableEmptyBox>
       <EmptyMessage
         title="No firewall rules"
-        body="You need to create a rule to be able to see it here"
+        body="Create a rule to see it here"
         buttonText="New rule"
         buttonTo={pb.vpcFirewallRulesNew(vpcSelector)}
       />

app/pages/project/vpcs/VpcPage/tabs/VpcSubnetsTab.tsx

@@ -90,7 +90,7 @@ export function VpcSubnetsTab() {
   const emptyState = (
     <EmptyMessage
       title="No VPC subnets"
-      body="You need to create a subnet to be able to see it here"
+      body="Create a subnet to see it here"
       buttonText="New subnet"
       buttonTo={pb.vpcSubnetsNew(vpcSelector)}
     />

app/pages/project/vpcs/VpcsPage.tsx

@@ -38,7 +38,7 @@ const EmptyState = () => (
   <EmptyMessage
     icon={<Networking24Icon />}
     title="No VPCs"
-    body="You need to create a VPC to be able to see it here"
+    body="Create a VPC to see it here"
     buttonText="New VPC"
     buttonTo={pb.vpcsNew(useProjectSelector())}
   />

app/pages/settings/SSHKeysPage.tsx

@@ -67,7 +67,7 @@ export function SSHKeysPage() {
     <EmptyMessage
       icon={<Key16Icon />}
       title="No SSH keys"
-      body="You need to add a SSH key to be able to see it here"
+      body="Add a SSH key to see it here"
       buttonText="Add SSH key"
       onClick={() => navigate(pb.sshKeysNew())}
     />

app/pages/system/SiloImagesPage.tsx

@@ -43,7 +43,7 @@ const EmptyState = () => (
   <EmptyMessage
     icon={<Images24Icon />}
     title="No images"
-    body="You need to promote an image to be able to see it here"
+    body="Promote an image to see it here"
   />
 )
 

app/pages/system/networking/IpPoolsPage.tsx

@@ -39,7 +39,7 @@ const EmptyState = () => (
   <EmptyMessage
     icon={<IpGlobal24Icon />}
     title="No IP pools"
-    body="You need to create an IP pool to be able to see it here"
+    body="Create an IP pool to see it here"
     buttonText="New IP pool"
     buttonTo={pb.ipPoolsNew()}
   />

app/pages/system/silos/SiloIpPoolsTab.tsx

@@ -32,7 +32,7 @@ const EmptyState = () => (
   <EmptyMessage
     icon={<Networking24Icon />}
     title="No IP pools"
-    body="You need to create an IP pool to be able to see it here"
+    body="Create an IP pool to see it here"
     buttonText="New IP pool"
     buttonTo={pb.ipPoolsNew()}
   />

app/pages/system/silos/SilosPage.tsx

@@ -38,7 +38,7 @@ const EmptyState = () => (
   <EmptyMessage
     icon={<Cloud24Icon />}
     title="No silos"
-    body="You need to create a silo to be able to see it here"
+    body="Create a silo to see it here"
     buttonText="New silo"
     buttonTo={pb.silosNew()}
   />

app/ui/lib/EmptyMessage.stories.tsx

@@ -13,7 +13,7 @@ export const Default = () => (
   <EmptyMessage
     icon={<Instances24Icon />}
     title="No instances"
-    body="You need to create an instance to be able to see it here"
+    body="Create an instance to see it here"
     buttonText="New instance"
     buttonTo="new"
   />

app/ui/lib/EmptyMessage.tsx

@@ -46,7 +46,9 @@ export function EmptyMessage(props: Props) {
         </div>
       )}
       <h3 className="text-sans-semi-lg">{props.title}</h3>
-      {props.body && <p className="mt-1 text-sans-md text-secondary">{props.body}</p>}
+      {props.body && (
+        <p className="mt-1 text-balance text-sans-md text-secondary">{props.body}</p>
+      )}
       {button}
     </div>
   )