Skip to content

Commit d15d947

Browse files
MuhammadKhalilzadehMuhammadKhalilzadeh
authored
Merge pull request #1 from MuhammadKhalilzadeh/textfields
Text fields, still some inconsistencies are remaining
2 parents 201d621 + 136a1bc commit d15d947

13 files changed

+997
-136
lines changed

‎Client/package-lock.json

+651-36
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Client/package.json

+5
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,12 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@emotion/react": "^11.11.4",
14+
"@emotion/styled": "^11.11.5",
15+
"@mui/material": "^5.15.16",
1316
"react": "^18.2.0",
17+
"@fontsource/roboto": "^5.0.13",
18+
"@mui/icons-material": "^5.15.16",
1419
"react-dom": "^18.2.0"
1520
},
1621
"devDependencies": {

‎Client/src/App.jsx

+6-25
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,16 @@
1-
import { useState } from 'react'
2-
import reactLogo from './assets/react.svg'
3-
import viteLogo from '/vite.svg'
4-
import './App.css'
1+
import { useState } from "react";
2+
import PlayGround from "./screens/PlayGround/PlayGround";
53

64
function App() {
7-
const [count, setCount] = useState(0)
5+
const [count, setCount] = useState(0);
86

97
return (
108
<>
119
<div>
12-
<a href="https://vitejs.dev" target="_blank">
13-
<img src={viteLogo} className="logo" alt="Vite logo" />
14-
</a>
15-
<a href="https://react.dev" target="_blank">
16-
<img src={reactLogo} className="logo react" alt="React logo" />
17-
</a>
10+
<PlayGround />
1811
</div>
19-
<h1>Vite + React</h1>
20-
<div className="card">
21-
<button onClick={() => setCount((count) => count + 1)}>
22-
count is {count}
23-
</button>
24-
<p>
25-
Edit <code>src/App.jsx</code> and save to test HMR
26-
</p>
27-
</div>
28-
<p className="read-the-docs">
29-
Click on the Vite and React logos to learn more
30-
</p>
3112
</>
32-
)
13+
);
3314
}
3415

35-
export default App
16+
export default App;

‎Client/src/assets/icons/icon-red-error-0.svg

+3
Loading

‎Client/src/components/TextFields/Description/DescriptionTextField.jsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from "react";
2+
import "./descriptionTextField.css";
3+
import { TextField } from "@mui/material";
4+
5+
function DescriptionTextField({ hintText, hasError }) {
6+
return (
7+
<div className="description-field-holder">
8+
<div className="text-field-title">Website</div>
9+
<TextField
10+
error={hasError}
11+
className="description-field-area"
12+
multiline
13+
rows={4}
14+
placeholder="Enter a description..."
15+
helperText={hintText}
16+
/>
17+
</div>
18+
);
19+
}
20+
21+
export default DescriptionTextField;

‎Client/src/components/TextFields/Description/descriptionTextField.css

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
:root {
2+
--color-title-1: #344054;
3+
--font-family-1: "Roboto", "Helvetica", "Arial", sans-serif;
4+
--text-field-margin-0: 10px 20px;
5+
}
6+
7+
.description-field-holder {
8+
margin: var(--text-field-margin-0);
9+
margin-top: 20px;
10+
}
11+
12+
.text-field-title {
13+
color: var(--color-title-1);
14+
font-weight: bold;
15+
font-family: var(--font-family-1);
16+
margin-bottom: 10px;
17+
}
18+
19+
.description-field-area {
20+
font-size: 13px;
21+
border-radius: 8px;
22+
}
23+
24+
.description-field-label {
25+
margin-top: 10px;
26+
font-family: var(--font-family);
27+
font-size: 11px;
28+
}
29+
30+
.with-error {
31+
color: red;
32+
}

‎Client/src/components/TextFields/Email/EmailTextField.jsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React, { useState } from "react";
2+
import "./emailTextField.css";
3+
import { InputAdornment, TextField } from "@mui/material";
4+
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
5+
import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
6+
7+
function EmailTextField({
8+
id,
9+
label,
10+
variant,
11+
placeholder,
12+
icon,
13+
helperText,
14+
error,
15+
}) {
16+
const [showIcon, setShowIcon] = useState(false);
17+
18+
// State to control mouse hover effect
19+
const handleMouseEnter = () => setShowIcon(true);
20+
const handleMouseLeave = () => setShowIcon(false);
21+
22+
return (
23+
<>
24+
<div className="email-text-field-title">Email</div>
25+
<div className="email-text-field">
26+
<TextField
27+
error={error}
28+
className="email-text-field-input"
29+
id={id}
30+
label={label}
31+
variant={variant}
32+
placeholder={placeholder}
33+
InputProps={{
34+
endAdornment: (
35+
<InputAdornment position="end">
36+
{error && showIcon && (
37+
<ErrorOutlineIcon style={{ fill: "red" }} />
38+
)}
39+
{error && !showIcon && (
40+
<ErrorOutlineIcon style={{ fill: "red" }} />
41+
)}
42+
{!error && showIcon && <HelpOutlineIcon />}
43+
</InputAdornment>
44+
),
45+
}}
46+
helperText={helperText}
47+
onMouseEnter={handleMouseEnter}
48+
onMouseLeave={handleMouseLeave}
49+
/>
50+
</div>
51+
</>
52+
);
53+
}
54+
55+
export default EmailTextField;

‎Client/src/components/TextFields/Email/emailTextField.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
#outlined-basic {
2+
width: 320px;
3+
font-size: 13px;
4+
}
5+
6+
.email-text-field {
7+
position: relative;
8+
margin: 10px 20px;
9+
}
10+
11+
.email-text-field-title {
12+
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
13+
margin: 0 20px;
14+
margin-top: 30px;
15+
}

‎Client/src/components/TextFields/Website/WebsiteTextField.jsx

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React, { useState } from "react";
2+
import "./websiteTextField.css";
3+
import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
4+
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
5+
6+
function WebsiteTextField({
7+
showHelp = true,
8+
hasCopyButton = false,
9+
hintText,
10+
}) {
11+
const [copied, setCopied] = useState(false);
12+
13+
const handleCopy = () => {
14+
setCopied(true);
15+
setTimeout(() => setCopied(false), 1000);
16+
};
17+
18+
return (
19+
<>
20+
<div className="website-textfield-title">Website</div>
21+
<div className="website-textfield">
22+
<label className="website-label" htmlFor="website">
23+
http://
24+
</label>
25+
<input
26+
type="url"
27+
name="website-url"
28+
id="website-url"
29+
className="website-url"
30+
/>
31+
{showHelp && (
32+
<div
33+
className={
34+
`website-icon-holder ` + !hasCopyButton
35+
? "with-no-copy-button"
36+
: ""
37+
}
38+
>
39+
<HelpOutlineIcon style={{ fill: "var(--icon-color)" }} />
40+
</div>
41+
)}
42+
{hasCopyButton && (
43+
<div className="copy-to-clipboard-button" onClick={handleCopy}>
44+
<ContentCopyIcon className="copy-icon" />
45+
<span>{copied ? " Copied " : " Copy "}</span>
46+
</div>
47+
)}
48+
</div>
49+
<label className="website-textfield-hint">{hintText}</label>
50+
</>
51+
);
52+
}
53+
54+
export default WebsiteTextField;

‎Client/src/components/TextFields/Website/websiteTextField.css

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
:root {
2+
--border-color: #d0d5dd;
3+
--label-font-color: #475467;
4+
--icon-color: #98a2b3;
5+
--text-field-margin-0: 10px 20px;
6+
--text-field-margin-1: 10px 20px 5px;
7+
--font-family: "Roboto", "Helvetica", "Arial", sans-serif;
8+
}
9+
10+
.website-textfield-title {
11+
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
12+
margin: 0 20px;
13+
margin-top: 30px;
14+
}
15+
16+
.website-textfield {
17+
font-family: var(--font-family);
18+
display: flex;
19+
align-items: center;
20+
position: relative;
21+
margin: var(--text-field-margin-1);
22+
}
23+
24+
.website-textfield-hint {
25+
margin: var(--text-field-margin-0);
26+
font-family: var(--font-family);
27+
font-size: 11px;
28+
}
29+
30+
.website-label {
31+
height: 33px;
32+
padding: 5px 20px 5px 10px;
33+
border: solid 1px var(--border-color);
34+
border-right: none;
35+
border-radius: 8px 0 0 8px;
36+
font-size: 13px;
37+
text-align: center;
38+
display: flex;
39+
justify-content: center;
40+
align-items: center;
41+
color: var(--label-font-color);
42+
}
43+
44+
.website-url {
45+
width: 248px;
46+
height: 33px;
47+
padding: 5px 15px;
48+
border: solid 1px var(--border-color);
49+
}
50+
51+
.website-icon-holder {
52+
width: 40px;
53+
height: 33px;
54+
padding: 5px;
55+
border: solid 1px var(--border-color);
56+
border-left: none;
57+
text-align: center;
58+
display: flex;
59+
justify-content: center;
60+
align-items: center;
61+
}
62+
63+
.copy-to-clipboard-button {
64+
height: 33px;
65+
padding: 5px 20px 5px 10px;
66+
border: solid 1px var(--border-color);
67+
border-left: none;
68+
border-radius: 0 8px 8px 0;
69+
font-size: 13px;
70+
text-align: center;
71+
display: flex;
72+
justify-content: space-evenly;
73+
align-items: center;
74+
color: var(--label-font-color);
75+
cursor: pointer;
76+
}
77+
78+
.copy-icon {
79+
margin-right: 10px;
80+
}
81+
82+
.with-no-copy-button {
83+
display: none;
84+
}

‎Client/src/index.css

-68
This file was deleted.

0 commit comments

Comments
 (0)