Updated the styling

- moved watermark after the logo
- added more distinctive styling to the code part
- updated the paragraph with the counter

Author: high1

src/components/App.css

@@ -29,9 +29,16 @@
 }
 
 .App-link {
+  margin-top: 2rem;
   color: #61dafb;
 }
 
+.App code {
+  background: #FFF3;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
 @keyframes App-logo-spin {
   from {
     scale: 1.0;

src/components/App.tsx

@@ -7,18 +7,22 @@ const App: Component = () => {
   const [count, setCount] = createSignal(0),
     timer = setInterval(() => setCount(count() + 1), 1000);
   onCleanup(() => clearInterval(timer));
-  return(
-  <div class="App">
-    <header class="App-header">
-      <img src={logo} class="App-logo" alt="logo" />
-      <p>
-        Edit <code>src/App.tsx</code> and save to reload. <code>{count()}</code> and counting...
-      </p>
-      <a class="App-link" href="https://solidjs.com" target="_blank" rel="noopener noreferrer">
-        <img src={wordmark} class="App-wordmark" alt="wordmark" />
-      </a>
-    </header>
-  </div>
-)};
+  return (
+    <div class="App">
+      <header class="App-header">
+        <img src={logo} class="App-logo" alt="logo" />
+        <a class="App-link" href="https://solidjs.com" target="_blank" rel="noopener noreferrer">
+          <img src={wordmark} class="App-wordmark" alt="wordmark" />
+        </a>
+        <p>
+          Edit <code>src/App.tsx</code> and save to reload.
+        </p>
+        <p>
+          Page has been open for <code>{count}</code> seconds.
+        </p>
+      </header>
+    </div>
+  );
+};
 
 export default App;