style: add icon to send button, improve styling for textbox, bump packages

package.json

@@ -14,29 +14,29 @@
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@types/node": "^22.10.5",
+    "@types/node": "^22.13.0",
     "dotenv": "^16.4.7",
     "fs": "^0.0.1-security",
-    "lucide-react": "^0.469.0",
+    "lucide-react": "^0.474.0",
     "path": "^0.12.7",
-    "pnpm": "^9.15.3",
+    "pnpm": "^9.15.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^7.1.1",
+    "react-router-dom": "^7.1.5",
     "react-typed": "^2.0.12",
     "styled-components": "^6.1.14"
   },
   "devDependencies": {
-    "@eslint/js": "^9.11.1",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.2",
-    "eslint": "^9.11.1",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.12",
-    "globals": "^15.9.0",
-    "typescript": "^5.5.3",
-    "typescript-eslint": "^8.7.0",
-    "vite": "^5.4.8"
+    "@eslint/js": "^9.19.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.22.0",
+    "vite": "^5.4.14"
   }
 }

src/pages/contact/index.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Button, Paragraph, TextArea } from './styles';
 import { MainContainer } from '../../components/MainContent/styles';
+import { Send } from 'lucide-react';
 
 export default function Contact() {
   const emailAddress = import.meta.env.VITE_GIV_EMAIL;
@@ -18,8 +19,11 @@ export default function Contact() {
         <span>If you want to contact me, you can use the links above, or say put in the field below to send me an email!</span>
       </Paragraph>
       <form onSubmit={handleSubmit}>
-        <TextArea onChange={(e) => setTypedText(e.target.value)} />
-        <Button type='submit'>Send</Button>
+        <TextArea
+          onChange={(e) => setTypedText(e.target.value)}
+          className="bgb"  
+        />
+        <Button type='submit'><Send className="ico" />Send</Button>
       </form>
     </MainContainer>
   );

src/styles/global.ts

@@ -59,4 +59,19 @@ p {
 .firstSection {
   padding-top: 3.75rem;
 }
+
+.ico {
+  margin-right: 0.5rem;
+  height: 0.85rem;
+  width: 0.85rem;
+}
+
+.bgb {
+  background-color: ${props => props.theme["dark-cream"]};
+  color: ${props => props.theme.white};
+  border: none;
+  &:focus {
+    box-shadow: none;
+  }
+};
 `

src/styles/themes/default.ts

@@ -23,4 +23,5 @@ export const defaultTheme = {
 
   'cream': '#D4D4A1',
   'light-cream': '#F5F5DC',
+  'dark-cream': '#636342',
 }