Skip to content

Commit

Permalink
updating styles for dashboard dialogs (#2392)
Browse files Browse the repository at this point in the history 
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
  • Loading branch information
@annagav @pre-commit-ci
annagav and pre-commit-ci[bot] authored Sep 17, 2024
1 parent 2b81e73 commit b1f070c
Show file tree
Hide file tree
Showing 6 changed files with 169 additions and 101 deletions.
13 changes: 0 additions & 13 deletions frontend/public/scss/cards.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -334,19 +334,6 @@ div.std-card {
}
}

button.btn.btn-gradient-red-to-blue, a.btn.btn-gradient-red-to-blue {
color: white;
border: 1px solid $brand-darker-bg;
background: $brand-darker-bg !important;
transition: 0.25s;
}

button.btn.btn-gradient-red-to-blue:hover, a.btn.btn-gradient-red-to-blue:hover {
border-color: $home-page-header-blue;
background: $home-page-header-blue !important;
color: white !important;
}

div.std-card-body, div.enrolled-item, div.cart-helptext {
a:not(.btn) {
color: $home-page-header-blue;
Expand Down
113 changes: 113 additions & 0 deletions frontend/public/scss/common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -276,3 +276,116 @@ button.btn-secondary.unstyled {
margin: 0;
}
}

.modal-dialog {
font-family: Inter;
.modal-header {
border-bottom: none;
.btn-close {
border-radius: 100px;
color: $home-page-header-blue;
background-color: $home-page-grey-lite;
opacity: 0.7;
font-size: 13px;
}
.btn-close:hover {
color: $brand-darker-bg;
opacity: 1;
}
}
.modal-content {
padding: 5px 14px;
font-size: 15px;
}
.modal-title {
font-family: Poppins, sans-serif;
font-weight: 700;
}

}
.modal-subheader {
margin-top: -20px;
}
.float-container {
float: right;
margin-top: 30px;

button {
margin-left: 16px;
font-family: Poppins;
font-size: 14px;
font-weight: 600;
line-height: 21px;
text-align: center;
padding: 10px 25px;
}

button.cancel {
background-color: inherit;
color: inherit;
}
}
input[type=checkbox] {
accent-color: $brand-darker-bg;
width: 20px;
height: 20px;
}
label, input[type=checkbox] {
vertical-align: middle;
}
label {
font-size: 14px;
margin-left: 10px;
}
.callout {
margin-bottom: 20px;
margin-top: 30px;
font-size: 15px;
}

button.btn.btn-gradient-red-to-blue, a.btn.btn-gradient-red-to-blue {
color: white;
border: 1px solid $brand-darker-bg;
background: $brand-darker-bg !important;
transition: 0.25s;
}

button.btn.btn-gradient-red-to-blue:hover, a.btn.btn-gradient-red-to-blue:hover, button.btn.btn-gradient-white-to-blue:hover, a.btn.btn-gradient-white-to-blue:hover {
border-color: $home-page-header-blue;
background: $home-page-header-blue !important;
color: white !important;
}

button.btn.btn-gradient-white-to-blue, a.btn.btn-gradient-white-to-blue {
color: $home-page-header-blue;
border: 1px solid $home-page-border-grey;
background: white;
transition: 0.25s;
}

.callout {
flex-wrap: nowrap;
padding: 15px;
i.warning {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
color: #B87A00;
padding-right: 10px;
width: fit-content;
padding-left: 0;
}
p {
font-family: Inter, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 15.73px;
text-align: left;
color: $home-page-header-blue;
margin: 0;
flex-shrink: 1;
}
}
.callout-warning {
border: 1px solid rgba(255, 171, 0, 0.30);
border-left: 2px solid $warning;
background: #FFF3CC;
}
4 changes: 0 additions & 4 deletions frontend/public/scss/dashboard.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -341,10 +341,6 @@ $enrolled-passed-fg: #ffffff;
color: $footer-blue-bg;
}

.modal-title {
width: 500px;
}

.nav-drawer {
position: fixed;
z-index: 1000;
Expand Down
15 changes: 0 additions & 15 deletions frontend/public/scss/layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,21 +74,6 @@ body {
}

body.new-design {
.modal-title {
font-family: Poppins, sans-serif;
font-weight: 700;
}

.modal-header {
.btn-close {
border-radius: 100px;
background: var(--Grey-Lite, #F0F5F7) url('data:image/svg+xml,<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon"><path id="X" fill-rule="evenodd" clip-rule="evenodd" d="M5 4.1239L8.94245 0.181446C9.18438 -0.0604821 9.57662 -0.0604821 9.81855 0.181446C10.0605 0.423375 10.0605 0.815619 9.81855 1.05755L5.8761 5L9.81855 8.94245C10.0605 9.18438 10.0605 9.57662 9.81855 9.81855C9.57662 10.0605 9.18438 10.0605 8.94245 9.81855L5 5.8761L1.05755 9.81855C0.815619 10.0605 0.423375 10.0605 0.181446 9.81855C-0.0604821 9.57662 -0.0604821 9.18438 0.181446 8.94245L4.1239 5L0.181446 1.05755C-0.0604821 0.815619 -0.0604821 0.423375 0.181446 0.181446C0.423375 -0.0604821 0.815619 -0.0604821 1.05755 0.181446L5 4.1239Z" fill="%2303152D"/></g></svg>');
background-repeat: no-repeat;
background-position: center center;
background-size: 10px 10px;
}
}

select.form-control {
background-image: url('data:image/svg+xml,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.41 3.8147e-06L6 4.58L10.59 3.8147e-06L12 1.41L6 7.41L0 1.41L1.41 3.8147e-06Z" fill="%23344055"/></svg>');
background-repeat: no-repeat;
Expand Down
34 changes: 0 additions & 34 deletions frontend/public/scss/product-page/product-details.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,33 +329,6 @@ body.new-design {
margin: 0 0 20px 0;
}

.callout {
flex-wrap: nowrap;
padding: 15px;
i.warning {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
color: #B87A00;
padding-right: 10px;
width: fit-content;
padding-left: 0;
}
p {
font-family: Inter, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 15.73px;
text-align: left;
color: $home-page-header-blue;
margin: 0;
flex-shrink: 1;
}
}
.callout-warning {
border: 1px solid rgba(255, 171, 0, 0.30);
border-left: 2px solid $warning;
background: #FFF3CC;
}

.enrollment-info-icon {
max-width: 18px;
padding: 0;
Expand Down Expand Up @@ -471,18 +444,11 @@ body.new-design {
border-bottom: none;
padding-bottom: 0;
}
.modal-content {
padding: 5px 14px;
}
}

.upgrade-enrollment-modal {
max-width: 750px;

.modal-content {
padding: 5px 14px;
}

.enroll-now-free {
font-size: 16px;
font-weight: 400;
Expand Down
91 changes: 56 additions & 35 deletions frontend/public/src/components/EnrolledItemCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,14 +240,24 @@ export class EnrolledItemCard extends React.Component<
return (
<Modal
id={`enrollment-${enrollment.id}-modal`}
className="text-center"
isOpen={emailSettingsModalVisibility}
toggle={() => this.toggleEmailSettingsModalVisibility()}
>
<ModalHeader toggle={() => this.toggleEmailSettingsModalVisibility()}>
Email Settings for {enrollment.run.course_number}
Email Settings
</ModalHeader>
<ModalBody>
<div className="modal-subheader">
Update your email preferences for{" "}
<b>{enrollment.run.course_number}</b>
</div>
<div className="d-flex callout callout-warning">
<i className="material-symbols-outlined warning">error</i>
<p className="p-0">
Unchecking the box will prevent you from receiving important
course updates and emails.
</p>
</div>
<Formik
onSubmit={this.onSubmitEmailSettings.bind(this)}
initialValues={{
Expand All @@ -258,7 +268,7 @@ export class EnrolledItemCard extends React.Component<
>
{({ values }) => {
return (
<Form className="text-center">
<Form>
<section>
<Field
type="hidden"
Expand All @@ -282,14 +292,20 @@ export class EnrolledItemCard extends React.Component<
Receive course emails
</label>
</section>
<Button type="submit" color="success">
Save Settings
</Button>{" "}
<Button
onClick={() => this.toggleEmailSettingsModalVisibility()}
>
Cancel
</Button>
<div className="float-container">
<Button
className="btn btn-gradient-white-to-blue"
onClick={() => this.toggleEmailSettingsModalVisibility()}
>
Cancel
</Button>
<Button
className="btn btn-gradient-red-to-blue"
type="submit"
>
Save Settings
</Button>
</div>
</Form>
)
}}
Expand All @@ -309,7 +325,6 @@ export class EnrolledItemCard extends React.Component<
return (
<Modal
id={`run-unenrollment-${enrollment.id}-modal`}
className="text-center"
isOpen={runUnenrollmentModalVisibility}
toggle={() => this.toggleRunUnenrollmentModalVisibility()}
role="dialog"
Expand Down Expand Up @@ -342,16 +357,21 @@ export class EnrolledItemCard extends React.Component<
for assistance.
</p>
) : null}
<Button
type="submit"
color="success"
onClick={() => this.onRunUnenrollment(enrollment)}
>
Unenroll
</Button>{" "}
<Button onClick={() => this.toggleRunUnenrollmentModalVisibility()}>
Cancel
</Button>
<div className="float-container">
<Button
className="btn btn-gradient-white-to-blue"
onClick={() => this.toggleRunUnenrollmentModalVisibility()}
>
Cancel
</Button>
<Button
type="submit"
className="btn btn-gradient-red-to-blue"
onClick={() => this.onRunUnenrollment(enrollment)}
>
Unenroll
</Button>
</div>
</ModalBody>
</Modal>
)
Expand All @@ -363,7 +383,6 @@ export class EnrolledItemCard extends React.Component<
return (
<Modal
id={`program-unenrollment-${enrollment.program.id}-modal`}
className="text-center"
isOpen={programUnenrollmentModalVisibility}
toggle={() => this.toggleProgramUnenrollmentModalVisibility()}
role="dialog"
Expand All @@ -383,18 +402,20 @@ export class EnrolledItemCard extends React.Component<
Are you sure you wish to unenroll from {enrollment.program.title}?
You will not be unenrolled from any courses within the program.
</p>
<Button
type="submit"
color="success"
onClick={() => this.onProgramUnenrollment(enrollment.program)}
>
Unenroll
</Button>{" "}
<Button
onClick={() => this.toggleProgramUnenrollmentModalVisibility()}
>
Cancel
</Button>
<div className="float-container">
<Button
type="submit"
color="success"
onClick={() => this.onProgramUnenrollment(enrollment.program)}
>
Unenroll
</Button>{" "}
<Button
onClick={() => this.toggleProgramUnenrollmentModalVisibility()}
>
Cancel
</Button>
</div>
</ModalBody>
</Modal>
)
Expand Down

0 comments on commit b1f070c

Please sign in to comment.