nicer time

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte

@@ -36,6 +36,6 @@
 <style>
   .explanationModalContent {
     max-width: 300px;
-    padding: 16px 12px 6px;
+    padding: 16px 12px 0px;
   }
 </style>

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte

@@ -68,15 +68,15 @@
       />
     </Property>
   {:else if schema.type === "formula"}
-    <Property
-      name="Formula type"
-      value={schema?.formulaType === "dynamic" ? "Dynamic" : "Static"}
-    />
     <Property name="Formula">
       <BindingValue
         value={schema?.formula}
       />
     </Property>
+    <Property
+      name="Formula type"
+      value={schema?.formulaType === "dynamic" ? "Dynamic" : "Static"}
+    />
   {/if}
   <Property
     name="Required"

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte

@@ -1,9 +1,40 @@
 <script>
-  import { Subject, Section } from './components'
+  import { onMount } from "svelte"
+  import { Block, Subject, Section } from './components'
+
+  let timestamp = Date.now();
+
+  onMount(() => {
+    let run = true;
+
+    const updateTimeStamp = () => {
+      timestamp = Date.now();
+      console.log(timestamp);
+      if (run) {
+        setTimeout(updateTimeStamp, 200)
+      }
+    }
+
+    updateTimeStamp();
+
+    return () => {
+      run = false;
+    }
+  })
 </script>
 
 <Subject heading="Dates as Numbers">
   <Section>
-    A date can be used in place of a numeric value, but it will be parsed as a UNIX epoch timestamp, which is the number of milliseconds since Jan 1st 1970.
+    A date can be used in place of a numeric value, but it will be parsed as a UNIX epoch timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent Date/Time will be a higher number.
+  </Section>
+
+  <Section>
+    Examples:
+    <br />
+    1st Jan 2000: <Block>946684800000</Block>
+    <br />
+    1st Jan 2020: <Block>1577836800000</Block>
+    <br />
+    Now: <Block>{timestamp}</Block>
   </Section>
 </Subject>

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte

@@ -21,7 +21,7 @@
 <style>
   .property {
     max-width: 100%;
-    margin-bottom: 5px;
+    margin-bottom: 8px;
   }
 
   .truncate {
@@ -31,13 +31,13 @@
   }
 
   .propertyName {
-    font-style: italic;
+    font-weight: 600;
     flex-shrink: 0;
   }
 
 
   .propertyDivider {
-    padding: 0 6px;
+    padding: 0 2px;
     flex-shrink: 0;
   }