Improvements to one-shot upgrade UI

plugins/tiddlywiki/upgrade/SiteSubtitle.tid

@@ -0,0 +1,3 @@
+title: $:/SiteSubtitle
+
+upgrade your files to the latest version

plugins/tiddlywiki/upgrade/SiteTitle.tid

@@ -0,0 +1,3 @@
+title: $:/SiteTitle
+
+~TiddlyWiki Upgrader

plugins/tiddlywiki/upgrade/UpdateAddressBar.tid

@@ -0,0 +1,3 @@
+title: $:/config/Navigation/UpdateAddressBar
+
+no

plugins/tiddlywiki/upgrade/UpgradeWizard.tid

@@ -1,34 +1,44 @@
 title: $:/UpgradeWizard
 tags: $:/tags/StoryBackdrop
 
+<div class="tw-upgrade-wizard-wrapper">
+
+<div class="tw-upgrade-wizard">
+
+! ~TiddlyWiki Upgrade Wizard
+
 <$list filter="[[$:/Import]is[missing]]">
 
-Drag a TiddlyWiki file here to upgrade it
+{{$:/core/images/download-button}}
 
-<$browse/>
+Drag a ~TiddlyWiki file here to upgrade it
+
+or click to pick the file <$browse/>
 
 </$list>
 
 <$reveal state="$:/Import!!status" type="match" text="pending">
 
-And now there's a pending import
+The following tiddlers will be included in the upgrade
 
 <$set name="storyTiddler" value="$:/Import">
 
-<$tiddler tiddler="$:/Import">
-
-<$transclude tiddler="$:/core/ui/ViewTemplate/import"/>
-
-</$tiddler>
+{{$:/Import||$:/core/ui/ImportListing}}
 
 </$set>
 
+<$button message="tw-perform-import" param=<<currentTiddler>>>Upgrade</$button>
+
 </$reveal>
 
 <$reveal state="$:/Import!!status" type="match" text="complete">
 
-All done
+Upgrade completed. Click the button below to save your upgraded ~TiddlyWiki file
 
 {{$:/plugins/tiddlywiki/upgrade/save}}
 
 </$reveal>
+
+</div>
+
+</div>

plugins/tiddlywiki/upgrade/sidebar.tid

@@ -0,0 +1,3 @@
+title: $:/state/sidebar
+
+no

plugins/tiddlywiki/upgrade/styles.tid

@@ -0,0 +1,40 @@
+title: $:/plugins/tiddlywiki/upgrade/styles
+tags: $:/tags/stylesheet
+
+.tw-upgrade-wizard-wrapper {
+	width: 100%;
+	text-align: center;
+}
+
+.tw-upgrade-wizard {
+	background: <<colour tiddler-background>>;
+	padding: 2em;
+	display: inline-block;
+	position: relative;
+}
+
+.tw-upgrade-wizard svg.tw-image-download-button {
+	width: 14em;
+	height: 14em;
+	fill: <<colour muted-foreground>>;
+}
+
+.tw-upgrade-wizard table {
+	text-align: left;
+}
+
+.tw-upgrade-wizard input[type=file] {
+	position: absolute;
+	top: 0;
+	right: 0;
+	min-width: 100%;
+	min-height: 100%;
+	font-size: 999px;
+	text-align: right;
+	filter: alpha(opacity=0);
+	opacity: 0;
+	outline: none;
+	background: white;
+	cursor: pointer;
+	display: block;
+}