Skip to content

Commit

Permalink
Design systems input (#348)
Browse files Browse the repository at this point in the history 
* added textfield styling to theme.ts

* added empty input.tsx
  • Loading branch information
@BeeSeeWhy
BeeSeeWhy authored Jun 29, 2024
1 parent 6254f57 commit 71f45f0
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 132 deletions.
5 changes: 1 addition & 4 deletions src/components/design_system/input/Input.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1 @@
/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
see notes in component file */
/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
see notes in component file */
/* this is located in src/theme.ts */
8 changes: 0 additions & 8 deletions src/components/design_system/input/Input.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1 @@
/** DESIGN SYSTEM COMPONENT PLACEHOLDER
* 1) Make a local branch for organizing your component (e.g. "design-systems-button")
* 2) Replace this file and the corresponding css file(s) with your component file(s), cleaning up any duplicate files that are outside of the design components folder.
* 3) Search and find all use cases for your component (likely linting will tell you where they are) and update the import paths
* 4) Check code for errors and delete this comment
* 5) Push code to branch and do a PR referencing the specific issue task you took for issue # 255.
* NOTE: If you want a css.d.ts file to be generated or updated to help with any type issues, you can run `npm run type-css`
* */
export {};
120 changes: 0 additions & 120 deletions src/pages/students/[student_id].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,26 +174,6 @@ const ViewStudentPage = () => {
<Container className={$Modal.editModalContainer}>
<TextField
className={$Modal.editModalTextfield}
sx={{
"& .MuiOutlinedInput-root": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#20159E",
},
},
"& .MuiOutlinedInput-root.Mui-focused": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#080155",
},
},
"& .MuiOutlinedInput-root:hover": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#080155",
},
},
"& .MuiInputLabel-root.Mui-focused": {
color: "#080155",
},
}}
label="First Name"
type="text"
name="firstName"
Expand All @@ -204,26 +184,6 @@ const ViewStudentPage = () => {
<Container className={$Modal.editModalContainer}>
<TextField
className={$Modal.editModalTextfield}
sx={{
"& .MuiOutlinedInput-root": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#20159E",
},
},
"& .MuiOutlinedInput-root.Mui-focused": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#080155",
},
},
"& .MuiOutlinedInput-root:hover": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#080155",
},
},
"& .MuiInputLabel-root.Mui-focused": {
color: "#080155",
},
}}
label="Last Name"
type="text"
name="lastName"
Expand All @@ -234,26 +194,6 @@ const ViewStudentPage = () => {
<Container className={$Modal.editModalContainer}>
<TextField
className={$Modal.editModalTextfield}
sx={{
"& .MuiOutlinedInput-root": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#20159E",
},
},
"& .MuiOutlinedInput-root.Mui-focused": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#080155",
},
},
"& .MuiOutlinedInput-root:hover": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#080155",
},
},
"& .MuiInputLabel-root.Mui-focused": {
color: "#080155",
},
}}
label="Email"
type="text"
name="email"
Expand All @@ -264,26 +204,6 @@ const ViewStudentPage = () => {
<Container className={$Modal.editModalContainer}>
<TextField
className={$Modal.editModalTextfield}
sx={{
"& .MuiOutlinedInput-root": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#20159E",
},
},
"& .MuiOutlinedInput-root.Mui-focused": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#080155",
},
},
"& .MuiOutlinedInput-root:hover": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#080155",
},
},
"& .MuiInputLabel-root.Mui-focused": {
color: "#080155",
},
}}
label="Grade"
type="number"
name="grade"
Expand All @@ -296,26 +216,6 @@ const ViewStudentPage = () => {
<Container className={$Modal.editModalContainer}>
<TextField
className={$Modal.editModalTextfield}
sx={{
"& .MuiOutlinedInput-root": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#20159E",
},
},
"& .MuiOutlinedInput-root.Mui-focused": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#080155",
},
},
"& .MuiOutlinedInput-root:hover": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#080155",
},
},
"& .MuiInputLabel-root.Mui-focused": {
color: "#080155",
},
}}
label="IEP Start Date"
type="date"
name="start_date"
Expand All @@ -327,26 +227,6 @@ const ViewStudentPage = () => {
<Container className={$Modal.editModalContainer}>
<TextField
className={$Modal.editModalTextfield}
sx={{
"& .MuiOutlinedInput-root": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#20159E",
},
},
"& .MuiOutlinedInput-root.Mui-focused": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#080155",
},
},
"& .MuiOutlinedInput-root:hover": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#080155",
},
},
"& .MuiInputLabel-root.Mui-focused": {
color: "#080155",
},
}}
label="IEP End Date"
type="date"
name="end_date"
Expand Down
30 changes: 30 additions & 0 deletions src/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,5 +113,35 @@ export const theme = createTheme({
disableRipple: true,
},
},
MuiTextField: {
styleOverrides: {
root: {
"& .MuiInputLabel-outlined": {
color: "var(--grey-10)",
"&.Mui-focused": {
color: "var(--primary)",
},
},
"& .MuiOutlinedInput-root": {
color: "var(--grey-10)",
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "var(--primary)",
borderWidth: "1px",
},
"&.Mui-focused": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "var(--primary)",
borderWidth: "2px",
},
},
"&:hover:not(.Mui-focused)": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "var(--grey-10)",
},
},
},
},
},
},
},
});

0 comments on commit 71f45f0

Please sign in to comment.