Update PR template (#1190)

* Update PR template

* Move comments inline

* Updated template

* Move issues closed

.github/pull_request_template.md

@@ -1,4 +1,34 @@
-<!-- Add a brief description of your change here. -->
+<!--- Note to EXTERNAL Contributors -->
+<!-- Thanks for opening a PR!
+If it is a significant code change, please **make sure there is an open issue** for this.
+We work best with you when we have accepted the idea first before you code. -->
 
-- [] Does this change require a design review?
-- [] Does this change require manual testing?
+<!--- For ALL Contributors 👇 -->
+
+## Description & motivation 💭 <!-- Describe what has changed in this PR and the motivation behind it -->
+
+### Screenshots (if applicable) 📸 <!-- Add screenshots or videos -->
+
+### Design Considerations 🎨 <!-- Any questions, concerns, thoughts for Design? -->
+
+## Testing 🧪 <!-- Describe what has changed in this PR and the motivation behind it -->
+
+### How was this tested 👻 <!--- Please describe how you tested your changes and tests that were added -->
+
+- [ ] Manual testing
+- [ ] E2E tests added
+- [ ] Unit tests added
+
+### Steps for others to test: 🚶🏽‍♂️🚶🏽‍♀️ <!--- Please describe how we can test the changes in the PR -->
+
+## Checklists
+
+### Draft Checklist <!-- Add todos if not ready to review -->
+
+### Merge Checklist <!-- Add todos if not ready to merge -->
+
+### Issue(s) closed <!-- add issue number here -->
+
+## Docs
+
+### Any docs updates needed? <!--- Update README if applicable or point out where to update docs.temporal.io -->

src/lib/components/event/event-history-group-timeline.svelte

@@ -102,7 +102,9 @@
     <div
       bind:this={canvas}
       class="relative"
-      style="height: {blockHeight * eventGroups.length + yBuffer}px; width: {width}px;"
+      style="height:
+            {blockHeight * eventGroups.length +
+            yBuffer}px; width: {width}px;"
     >
       <VirtualList
         items={eventGroups}
@@ -124,7 +126,10 @@
           class="event-group"
           style="top:
                 {top +
-                blockHeight / 4}px; left: {left}px; width: {width}px; height: {height - 1}px; background: {color};"
+                blockHeight /
+                4}px; left: {left}px; width: {width}px; height:
+                {height -
+                1}px; background: {color};"
         />
         <button
           class="absolute truncate border-r border-gray-900 pl-2 text-left text-sm font-medium hover:bg-blueGray-200"

src/lib/holocene/checkbox.story.svelte

@@ -20,7 +20,7 @@
 <Hst.Story>
   <Hst.Variant title="A Checkbox">
     <div
-      class="h-20 w-full flex items-center justify-center"
+      class="flex h-20 w-full items-center justify-center"
       class:bg-primary={onDark}
     >
       <Checkbox

src/lib/holocene/checkbox.svelte

@@ -94,7 +94,7 @@
 
 <style lang="postcss">
   .checkbox {
-    @apply block cursor-pointer select-none w-[18px] leading-[18px] text-sm text-primary;
+    @apply block w-[18px] cursor-pointer select-none text-sm leading-[18px] text-primary;
   }
 
   .checkbox.hoverable {
@@ -118,7 +118,7 @@
   }
 
   .checkmark {
-    @apply absolute box-content top-0 left-0 h-4 w-4 cursor-pointer rounded-sm border border-gray-500 bg-white;
+    @apply absolute top-0 left-0 box-content h-4 w-4 cursor-pointer rounded-sm border border-gray-500 bg-white;
   }
 
   .checkmark.hoverable {

src/lib/holocene/modal.svelte

@@ -133,7 +133,7 @@
         <span>Content</span>
       </slot>
       {#if error}
-        <p class="text-sm font-normal text-danger mt-2">{error}</p>
+        <p class="mt-2 text-sm font-normal text-danger">{error}</p>
       {/if}
     </div>
     <div class="flex items-center justify-end space-x-2 p-6">