Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Student Modal Styling #318

Merged
merged 10 commits into from
May 27, 2024
Merged

Student Modal Styling #318

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
25f6ffd
update modal styling to mirror DS and edit button font
Apr 22, 2024
39ee405
update header typography and update outline styling
Apr 23, 2024
3ce7974
ran prettier
Apr 23, 2024
700ebce
update button padding to align with other containers
Apr 29, 2024
3a958a0
run prettier
Apr 29, 2024
eae5abb
re-add modalContent styling class
Apr 29, 2024
2a19d08
reinstate env example file
May 3, 2024
b9d81b5
prevent render of IEP fields if null or undefined
katconnors May 23, 2024
fbec6c7
edit to CI workflow
katconnors May 23, 2024
dd24a59
Merge branch 'main' into student-modal-styling
hannahmcg May 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .env.example
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was this file deleted for code cleanup reasons?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't mean to delete this actually i'll go ahead and reinstate it!

Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,4 @@ S3_USER_UPLOADS_SECRET_ACCESS_KEY=minioadmin
S3_USER_UPLOADS_BUCKET_NAME=compass-files

[email protected]
EMAIL_PASS=
EMAIL_PASS=
2 changes: 1 addition & 1 deletion .github/workflows/pr.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
name: PR
on: [pull_request]
on: [push]
jobs:
type-check:
name: type-check
Expand Down
2 changes: 2 additions & 0 deletions src/components/design_system/button/Button.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
text-decoration: none;
text-align: center;
font-size: var(--base-size);
font-family: var(--quicksand);
font-weight: normal;
text-transform: none;
line-height: normal;
letter-spacing: 0;
Expand Down
76 changes: 74 additions & 2 deletions src/components/design_system/modal/Modal.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,74 @@
/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
see notes in component file */
.editForm {
width: 100%;
}

.modalContent {
position: absolute;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is .modalContent used later on? If not, that could be a contender for code cleanup.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's used as styling for the other modals in the file (not the edit student one) so I left it in there, but we could maybe change the classnames to make the difference more clear?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense! In that case, no worries!

top: 25%;
left: 50%;
transform: translate(-50%);
width: 400;
background-color: white;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 24;
padding: 3rem;
}

.editModalContent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: auto;
background-color: white;
border: 1px solid var(--on-primary-container);
border-radius: 10px;
box-shadow: 24;
padding: 2rem;
color: var(--on-primary-container);
font-family: var(--inter);
}

.editModalHeader {
font-family: var(--quicksand);
font-weight: var(--semibold);
font-size: var(--h4);
text-align: center;
}

.editModalContainer {
background-color: #ffffff;
border-radius: 10px;
padding: 10px 20px;
}

.editModalTextfield {
width: 100%;
}

.editModalContainerButtons {
margin-top: 1rem;
padding: 10px 20px;
}

.editModalButtonWrap {
display: flex;
justify-content: space-between;
width: 100%;
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) {
.editModalContent {
width: 60%;
}
}

/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) {
.editModalContent {
width: 40%;
}
}
Loading
Loading