GivFNZ/my-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Aidan 2025-02-01 22:54:23 -05:00
parent 7e9f346110
commit ffbab3bfe5
4 changed files with 37 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
package.json
View File

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

8
src/pages/contact/index.tsx
View File

@ -1,6 +1,7 @@
import { useState } from 'react'; import { useState } from 'react';
import { Button, Paragraph, TextArea } from './styles'; import { Button, Paragraph, TextArea } from './styles';
import { MainContainer } from '../../components/MainContent/styles'; import { MainContainer } from '../../components/MainContent/styles';
import { Send } from 'lucide-react';
export default function Contact() { export default function Contact() {
const emailAddress = import.meta.env.VITE_GIV_EMAIL; 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> <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> </Paragraph>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<TextArea onChange={(e) => setTypedText(e.target.value)} /> <TextArea
<Button type='submit'>Send</Button> onChange={(e) => setTypedText(e.target.value)}
className="bgb"
/>
<Button type='submit'><Send className="ico" />Send</Button>
</form> </form>
</MainContainer> </MainContainer>
); );

15
src/styles/global.ts
View File

@ -59,4 +59,19 @@ p {
.firstSection { .firstSection {
padding-top: 3.75rem; 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;
}
};
` `

1
src/styles/themes/default.ts
View File

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