Added plugin icons, modified landing panel styles and formatting

Author: jake-pauls

ui-svelte-starter/plugin/icons/[email protected]

@@ -9,20 +9,39 @@
     };
   });
 
-  export let name;
+  export let src;
 </script>
 
-<div>
-  <sp-heading>Hello {name}!</sp-heading>
-  <sp-heading>Plugin has been open for {count} seconds.</sp-heading>
-  <sp-detail>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</sp-detail>
+<div class="container">
+  <img {src} alt="svelte" height="75px" width="75px"/>
+  <div class="body">
+    <sp-heading>Plugin has been open for {count} seconds.</sp-heading>
+    <sp-detail>Visit the <a href="https://www.adobe.io/photoshop/uxp/">UXP documentation</a> to learn how to build plugins for Photoshop.</sp-detail>
+  </div>
 </div>
 
 <style>
-  div {
-    text-align: center;
-    padding: 1em;
-    max-width: 240px;
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    padding: 0.5em;
     margin: 0 auto;
   }
+
+  .body {
+    text-align: center;
+    font-size: 12px;
+  }
+  
+  sp-detail a {
+    color: #34a1eb;
+    text-decoration: none; 
+  }
+
+  sp-detail a:hover {
+    text-decoration: underline;
+  }
 </style>

ui-svelte-starter/plugin/icons/[email protected]

@@ -1,19 +1,14 @@
+html,
 body {
   margin: 0;
+  height: 100%;
+  width: 100%;
   padding: 8px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-}
-
-a {
-  color: rgb(0, 100, 200);
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-a:visited {
-  color: rgb(0, 80, 160);
-}
+  -webkit-font-smoothing: antialiased;
+  background-color: var(--uxp-host-background-color);
+  color: var(--uxp-host-text-color);
+  border-color: var(--uxp-host-border-color);
+  font-size: var(--uxp-host-font-size);
+}

ui-svelte-starter/plugin/svelte.png

@@ -5,17 +5,17 @@ import { entrypoints } from 'uxp';
 const app = new App({
   target: document.body,
   props: {
-    name: 'UXP'
-  }
+    src: 'svelte.png'
+  },
 });
 
 entrypoints.setup({
-  plugin: {
+  plugin: { 
     create(plugin) {
-	  console.log('Plugin created successfully.', plugin)
-	},
-	panels: {
-	  helloSvelte: app,
-	},
+      console.log('Plugin created successfully.', plugin)
+    },
+    panels: {
+      svelte: app,
+    },
   },
 });