Updates (#150)

* updated styles
* updated npm dependencies
* added .nvmrc
* added typescript

Author: TomasBankauskas

.nvmrc

@@ -0,0 +1 @@
+v18

package-lock.json

@@ -12,12 +12,13 @@
     "lint:eslint": "eslint \"src/**/*.{css,js}\""
   },
   "devDependencies": {
-    "astro": "^1.0.0",
     "eslint": "^8.18.0",
-    "prettier": "^2.7.1",
+    "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.13.0"
   },
   "dependencies": {
-    "cypress": "^10.0.3"
+    "astro": "^4.5.18",
+    "cypress": "^13.7.2",
+    "typescript": "^5.4.4"
   }
 }

package.json

@@ -4,7 +4,7 @@
   <p>Here's an example of a Netlify Form! When you fill this out, the submissions can be found in the Netlify Admin site.</p>
   <div class="feedback-form">
       <form
-        netlify
+        data-netlify="true"
         netlify-honeypot
         name="feedback"
         method="POST"
@@ -32,18 +32,24 @@
   min-width: 250px;
   width: 45%;
 }
+label {
+  font-size: 16px;
+}
 input,
 textarea,
 button {
+  border-radius: 5px;
+  border: 1px solid #cbd5e1;
   font-size: inherit;
   margin: 15px 0;
   padding: 12px 20px;
   width: 100%;
 }
 button {
-  background-color: teal;
-  border: 1px solid black;
-  color: white;
+  background-color: #2bdcd2;
+  border: 1px solid #2bdcd2;
+  color: #1e293b;
+  font-size: 16px;
   width: 50%;
 }
 .hidden {

src/components/FeedbackForm.astro

@@ -26,7 +26,7 @@ const { title } = Astro.props as Props;
     --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
 
     --color-text: hsl(12, 5%, 4%);
-    --color-bg: hsl(0, 0%, 100%);
+    --color-bg: #f8fafc;
   }
 
   html {
@@ -52,4 +52,7 @@ const { title } = Astro.props as Props;
     font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
       DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
   }
+  :global(p) {
+    line-height: 1.6;
+  }
 </style>

src/components/Layout.astro

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

src/env.d.ts

@@ -9,6 +9,7 @@ import FeedbackForm from '../components/FeedbackForm.astro';
       <div class="logo">
         <img
           src="https://user-images.githubusercontent.com/43764894/223557634-f62606c5-bdf9-476c-9264-0d3728189962.png"
+          alt="Netlify and Astro.js logos"
         />
       </div>
     </div>
@@ -41,9 +42,6 @@ import FeedbackForm from '../components/FeedbackForm.astro';
 </Layout>
 
 <style>
-  :root {
-    text-align: center;
-  }
   .logo img {
     padding: 30px 0;
     width: 100%;