Improve importing project screen

src/locales/en.json

@@ -563,6 +563,10 @@
   "import": {
     "header": {
       "string": "Importing project...",
+      "description": "Header that appears when importing a project from an external site"
+    },
+    "description": {
+      "string": "This may take a while if the project is large.",
       "description": "Appears when importing a project from an external site"
     },
     "cancel": {

src/p4/ImportProject.svelte

@@ -31,9 +31,17 @@
     background: rgba(0, 0, 0, 0.8);
     color: white;
   }
+  .inner {
+    max-width: 480px;
+  }
 </style>
 
 <div class="outer" out:fade={{duration: 200}}>
-  <h1>{$_('import.header')}</h1>
-  <button on:click={cancel}>{$_('import.cancel')}</button>
+  <div class="inner">
+    <h2>{$_('import.header')}</h2>
+    <p>
+      {$_('import.description')}
+    </p>
+    <button on:click={cancel}>{$_('import.cancel')}</button>
+  </div>
 </div>