Only students and users who can log into Materia can access this widget.
If the widget collects scores, those scores will be associated with the user.
@@ -517,13 +522,17 @@ const MyWidgetsSettingsDialog = ({ onClose, inst, currentUser, otherUserPerms, o
Anyone with a link can play this widget without logging in.
All recorded scores will be anonymous. Can't use in an
diff --git a/src/components/my-widgets-settings-dialog.scss b/src/components/my-widgets-settings-dialog.scss
index 30066e173..ebd99fa23 100644
--- a/src/components/my-widgets-settings-dialog.scss
+++ b/src/components/my-widgets-settings-dialog.scss
@@ -1,3 +1,5 @@
+@import 'include.scss';
+
$mobile-width: 620px;
.settings-modal {
@@ -9,13 +11,18 @@ $mobile-width: 620px;
max-height: 100%;
.top-bar {
+ position: relative;
+ left: -20px;
display: flex;
flex-direction: row;
+ width: calc(100% + 20px);
border-bottom: #999 dotted 1px;
- padding-bottom: 20px;
+ padding-bottom: 10px;
+ margin-bottom: 10px;
align-items: center;
.title {
+ margin-left: 20px;
font-size: 1.3em;
color: #555;
font-weight: bold;
@@ -40,13 +47,23 @@ $mobile-width: 620px;
border-radius: 5px;
}
+ div.error {
+ position: relative;
+ left: -20px;
+ width: calc(100% + 20px);
+
+ p {
+ margin: 0.5em 0;
+ }
+ }
+
.attemptsPopup {
display: flex;
flex-direction: column;
align-items: baseline;
// justify-content: center;
+ margin: 0 0.5em;
padding: 0 1em 0 0;
- margin: 0 20px 0 20px;
max-height: 75%;
overflow-y: auto;
overflow-x: hidden;
@@ -109,6 +126,7 @@ $mobile-width: 620px;
width: 100%;
height: 8.4px;
border: 1px solid #ccc;
+ //background: #f9f9f9;
background: #f9f9f9;
border-radius: 4px;
padding-top: 1px;
@@ -316,6 +334,11 @@ $mobile-width: 620px;
padding: 0;
list-style: none;
+ .radio-wrapper {
+ margin: 0 0 0 5px;
+ font-weight: 400;
+ }
+
&.embedded {
.input-desc {
font-size: 0.8em;
@@ -396,6 +419,141 @@ $mobile-width: 620px;
}
}
+.darkMode .settings-modal {
+ .top-bar {
+ border-bottom: #999 dotted 1px;
+
+ .title {
+ color: #d8d8d8;
+ }
+
+ .availability-error {
+ color: #f00;
+ }
+ }
+
+ .student-role-notice {
+ background: #1d1f25;
+ }
+
+ .attemptsPopup {
+ .attempt-content {
+ .data-holder {
+ .selector {
+ input {
+ background: none;
+ }
+
+ input[type='range']::-webkit-slider-runnable-track {
+ border: 1px solid #181920;
+ background: #d8d8d8;
+ }
+ input[type='range']::-webkit-slider-thumb {
+ border: 1px solid #2469a8;
+ background: #61a4e2;
+ }
+ input[type='range']:focus::-webkit-slider-runnable-track {
+ background: #61a4e2;
+ }
+ input[type='range']::-moz-range-track {
+ border: 1px solid #ccc;
+ background: #f9f9f9;
+ }
+ input[type='range']::-moz-range-thumb {
+ border: 1px solid #4380ad;
+ background: #519bd1;
+ }
+ input[type='range']::-ms-fill-lower {
+ border: 1px solid #ccc;
+ background: #f9f9f9;
+ }
+ input[type='range']::-ms-fill-upper {
+ border: 1px solid #ccc;
+ background: #f9f9f9;
+ }
+ input[type='range']::-ms-thumb {
+ border: 1px solid #4380ad;
+ background: #519bd1;
+ }
+ input[type='range']:focus::-ms-fill-lower {
+ background: #3071a9;
+ }
+ input[type='range']:focus::-ms-fill-upper {
+ background: #367ebd;
+ }
+ }
+
+ .mobile {
+ select {
+ border: 1px solid #ccc;
+ }
+ }
+
+ .attempt-holder {
+ color: rgba(255, 255, 255, 0.6);
+
+ &.disabled {
+ span {
+ color: rgb(255, 255, 255);
+ }
+ }
+
+ span {
+ &:hover {
+ color: rgb(255, 255, 255);
+ }
+
+ &.active {
+ color: rgb(255, 255, 255);
+ }
+ &.disabled {
+ color: rgba(255, 255, 255, 0.5);
+ }
+ }
+ }
+
+ .data-explanation {
+ .input-desc {
+ background-color: $color-input-desc-dark;
+ }
+ }
+ }
+ }
+
+ .to-from {
+ .access {
+ .access-options {
+ .input-desc {
+ background-color: $color-input-desc-dark;
+ }
+ .disabled {
+ label {
+ color: #b5b3b3;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .bottom-buttons {
+ display: inline-flex;
+ list-style: none;
+ justify-content: center;
+ align-items: center;
+ margin: 10px 0;
+ padding: 0;
+
+ .cancel_button {
+ cursor: pointer;
+ }
+ }
+
+ input[type='radio'] {
+ cursor: pointer;
+ }
+}
+
.from-picker {
margin-top: 20px;
display: flex;
@@ -414,6 +572,19 @@ $mobile-width: 620px;
.date-picker {
list-style: none;
padding: 0;
+ font-weight: 400;
+
+ li {
+ margin-bottom: 0.5em;
+ }
+
+ .custom-radio {
+ margin: 0 0.5em 0 0;
+ }
+
+ .radio-wrapper {
+ margin: 0;
+ }
.date-list-elem {
display: flex;
@@ -423,7 +594,7 @@ $mobile-width: 620px;
}
label {
- margin-left: 5px;
+ margin: 0 0.5em;
}
input[type='radio'] {
@@ -473,3 +644,49 @@ $mobile-width: 620px;
}
}
}
+
+.darkMode {
+ div.error {
+ position: relative;
+ left: -20px;
+ width: calc(100% + 20px);
+
+ p {
+ margin: 0.5em 0;
+ color: #fff;
+ background-color: rgba(255, 0, 0, 0.5);
+ }
+ }
+}
+
+.darkMode .from-picker {
+ .date-picker {
+ input[type='text'] {
+ background-color: $color-input-box-bg-dark;
+ color: #fff;
+ border: solid 1px $color-input-box-border-dark;
+
+ &.error {
+ background-color: rgba(255, 0, 0, 0.5);
+ }
+ }
+
+ .am {
+ border: 1px solid rgba(255, 255, 255, 0.6);
+ }
+
+ .pm {
+ border: 1px solid rgba(255, 255, 255, 0.6);
+ }
+
+ .am,
+ .pm {
+ color: rgba(255, 255, 255, 0.6);
+
+ &.selected {
+ background: #295b99;
+ color: #ffffff;
+ }
+ }
+ }
+}
diff --git a/src/components/no-content-icon.scss b/src/components/no-content-icon.scss
index a872a39e5..09272ff90 100644
--- a/src/components/no-content-icon.scss
+++ b/src/components/no-content-icon.scss
@@ -32,3 +32,17 @@ div#no-score-content, div#not-scorable {
}
}
}
+
+.darkMode div#no-score-content, .darkMode div#not-scorable {
+ &#no-score-content {
+ background: #21232a url('/img/kogneato_no_scores_dark.svg') 10% 30%/250px auto no-repeat;
+ }
+
+ &#not-scorable {
+ background: #21232a url('/img/kogneato_with_a_broom_dark.svg') 20% 20%/auto 240px no-repeat;
+ }
+
+ p {
+ color: #fff;
+ }
+}
diff --git a/src/components/period-select.jsx b/src/components/period-select.jsx
index c0e7a8a27..b0f77d21c 100644
--- a/src/components/period-select.jsx
+++ b/src/components/period-select.jsx
@@ -104,20 +104,26 @@ const PeriodSelect = ({availInfo, index, formData, setFormData}) => {
{ loadingRender }
diff --git a/src/components/user-admin-page.scss b/src/components/user-admin-page.scss
index bb115bb5e..da67a3787 100644
--- a/src/components/user-admin-page.scss
+++ b/src/components/user-admin-page.scss
@@ -11,6 +11,7 @@
box-shadow: 0 0 10px #aaa;
width: 720px;
+ font-weight: 400;
.page {
@@ -239,6 +240,11 @@
width: 160px;
}
+ input {
+ width: 50%;
+ padding: 0.5em;
+ }
+
.radio {
display: inline-block;
// width: 200px;
@@ -541,6 +547,132 @@
}
}
+.darkMode .support-page {
+ background-color: #21232a;
+ border: 1px solid #181920;
+ box-shadow: 0 0 10px #08090c;
+
+ .page {
+ #breadcrumb-container {
+ background: #21232a;
+ border: 1px solid #181920;
+
+ .breadcrumb {
+ a {
+ color: #91c8fc;
+ }
+ }
+
+ svg {
+ fill: #d8d8d8;
+ }
+ }
+
+ .top {
+ color: #ffffff;
+ background: #1d1f25;
+ }
+
+ .search {
+ input.user_search {
+ color: #fff;
+ background-color: $color-input-box-border-dark;
+ border: solid 1px $color-input-box-border-dark;
+ }
+ }
+
+ .search_match {
+ background: #1d1f25;
+ border: 1px solid #181920;
+ }
+
+ .search_error {
+ color: red;
+ }
+
+ .search_list {
+ .search_match.deleted {
+ background-color: rgba(0, 0, 0, 0.2);
+ }
+
+ ul li.type {
+ color: #d8d8d8;
+ }
+
+ ul li.deleted {
+ color: red;
+ }
+ }
+
+ .admin-subsection {
+ &.overview {
+
+ input {
+ color: #fff;
+ background: $color-input-box-bg-dark;
+ border: solid 1px $color-input-box-border-dark;
+ }
+
+ .right-justify {
+ .apply-changes {
+ .error-text {
+ color: red;
+ }
+
+ .success-text {
+ color: green;
+ }
+ }
+ }
+ }
+
+ &.instances {
+ ul {
+ li.instance {
+ div.widget-title {
+ background: #4c4e58;
+
+ span.incomplete-status-holder {
+ color: #555;
+ }
+ }
+
+ &.expanded {
+ div.widget-title {
+ background: #295b99;
+ }
+
+ .info-holder {
+ background: #1b304b;
+ }
+
+ .inst-info {
+ .scores {
+ background: #21232a;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .inst-action-buttons {
+ button:disabled {
+ background: #ffba5d7a;
+ }
+ }
+
+ }
+
+ .page > ul {
+ > li {
+ background-color: #21232a;
+ border: 1px solid #181920;
+ }
+ }
+}
+
.clickable {
cursor: pointer;
}
diff --git a/src/components/widget-creator-page.scss b/src/components/widget-creator-page.scss
index b6c53df53..a51492f32 100644
--- a/src/components/widget-creator-page.scss
+++ b/src/components/widget-creator-page.scss
@@ -103,6 +103,10 @@ a {
}
}
+.darkMode #action-bar {
+ background: #1d1f25;
+}
+
.confirmation-bar {
position: relative;
display: flex;
@@ -212,6 +216,39 @@ a {
}
}
+.darkMode .popup {
+ height: 0;
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.4s ease-in-out;
+
+ background: #1d1f25;
+
+ header {
+ height: auto;
+ padding: 0;
+ margin: 15px 0;
+
+ background: none;
+
+ font-size: 21px;
+ font-weight: 700;
+ color: #fff;
+ }
+
+ p {
+ padding: 0;
+ margin: 10px 0 20px 0;
+ font-size: 14px;
+ }
+
+ &.show {
+ height: auto;
+ max-height: 200px;
+ padding: 10px 20% 22px 20%;
+ }
+}
+
.page {
margin: 0 20px;
padding: 0;
@@ -229,6 +266,23 @@ a {
}
}
+.darkMode .page {
+ margin: 0 20px;
+ padding: 0;
+ text-align: center;
+
+ border: #181920 1px solid;
+ border-radius: 5px 5px 0 0;
+ box-shadow: #08090c 1px 3px 10px 0px;
+
+ .center {
+ min-height: 600px;
+ height: calc(100vh - 185px);
+ position: relative;
+ z-index: 5;
+ }
+}
+
.edit_button {
position: relative;
display: inline-block;
@@ -267,6 +321,16 @@ a {
text-decoration: none;
}
}
+.darkMode .orange {
+ background: #f79d29;
+ color: #422f15;
+
+ &:hover {
+ background: #ffce8c;
+ background-image: linear-gradient(#f79d29, #ffbc78);
+ text-decoration: none;
+ }
+}
#embed_dialog {
position: absolute;
@@ -291,6 +355,31 @@ a {
z-index: 10;
}
}
+
+#embed_dialog {
+ position: absolute;
+ top: -50%;
+ left: 50%;
+ margin: -250px -387px;
+ width: 675px;
+ height: 535px;
+ z-index: 2;
+ box-shadow: 0px 0px 1000px #000, 0px 0px 10px #000;
+ opacity: 0;
+ transition: all 0.3s ease;
+ background: #21232a;
+ overflow-x: hidden;
+
+ &.show {
+ opacity: 1;
+ box-shadow: none;
+ text-align: left;
+ top: 50%;
+ width: 800px;
+ z-index: 10;
+ }
+}
+
#confirm_dialog {
position: absolute;
top: -50%;
diff --git a/src/components/widget-embed-footer.jsx b/src/components/widget-embed-footer.jsx
index eefbecf82..fad5c6800 100644
--- a/src/components/widget-embed-footer.jsx
+++ b/src/components/widget-embed-footer.jsx
@@ -1,10 +1,21 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
const EmbedFooter = () => {
+ const darkModeRef = useRef(false)
+
+ useEffect(() => {
+ const bodyRef = document.body
+ if (bodyRef && bodyRef.classList.contains('darkMode')) {
+ darkModeRef.current = true
+ }
+ },[])
+
+ const logoRef = darkModeRef.current ? "/img/materia-logo-thin-darkmode.svg" : "/img/materia-logo-thin.svg"
+
return (
{availInfo.header}
- - {availChange(index, true)}}/> - +
-
- {availChange(index, false)}}/>
-
+
? '#C3C5C8' : parseInt(percent, 10) !== 1 ? '#e2dcdf' - : 'rgba(106, 148, 81, .2)' + : 'rgba(225, 234, 221, 1)' context.strokeStyle = greyMode === true ? '#B3B5B8' : '#db8081' context.beginPath() diff --git a/src/components/scores.scss b/src/components/scores.scss index 057f34fce..0361b8139 100644 --- a/src/components/scores.scss +++ b/src/components/scores.scss @@ -72,6 +72,19 @@ $preview-purple: #b944cc; } } +.darkMode .container { + background: $color-input-desc-dark; + box-shadow: #08090c 1px 3px 10px 0px; + + &.loading { + background-color: #21232a; + } + + &.expired, &.invalid, &.score_restrict { + background: #21232a; + } +} + .overview { display: flex; align-items: stretch; @@ -209,6 +222,55 @@ $preview-purple: #b944cc; } } +.darkMode .overview { + background: $color-background-dark-gray; + border: solid 1px #181920; + + &.incomplete { + #overview-incomplete { + color: #fff; + + h2 { + border-bottom: solid 1px #181920; + } + } + } + + #overview-score { + .overall_score { + color: #fff; + background-color: $color-background-dark; + } + + h1 { + color: darken(#fff, 10%); + } + } + + + #overview-table { + background-color: $color-background-dark; + + table { + font-weight: 400; + color: #ccc; + + tr:last-child td { + color: #fff; + border-top: 1px solid #aaa; + } + + .negative { + color: #ff7c90; + } + + .positive { + color: rgb(106, 189, 106); + } + } + } +} + article { header { z-index: 8; @@ -386,6 +448,59 @@ article { } } +.darkMode article { + header { + background: #1d1f25; + border-bottom: 1px #181920 solid; + + &.preview { + border-top: 4px $preview-purple solid; + + &:before { + background: $preview-purple; + color: #ffffff; + } + } + + nav.previous-attempts { + h1 { + color: #fff; + background: #4c4e58; + } + + &.open { + h1 { + color: #fff; + background: #43454e; + } + } + + ul { + background: #21232a; + box-shadow: 5px 5px 15px 1px #08090c; + + .date { + color: #61a4e2; + } + + .score { + color: #d8d8d8; + } + + li { + &:hover { + background-color: #1b304b; + } + } + } + } + + > h1 { + color: #fff; + } + } +} + .special_details { padding-bottom: 40px; position: relative; @@ -542,6 +657,61 @@ article { } } +.darkMode .details { + h1 { + color: #fff; + } + + table { + border: solid 1px #181920; + + tr { + &.details_header { + background: #1d1f25; + } + + &:not(.feedback) { + td, th { + background: #21232a; + border-bottom: solid 1px #181920; + } + } + + th { + color: darken(#fff, 30%); + } + + td { + &:first-child { + border-right: solid 1px #181920; + } + } + + &.no-value td.response, + &.partial-value td.response { + background-color: #633041; + } + + &.full-value td.response { + background-color: #295525; + } + + &.feedback td { + background: #21232a; + border-bottom: solid 3px #181920; + + &:after { + color: #d8d8d8; + } + + p { + background: #21232a; + } + } + } + } +} + section.score-graph { max-height: 0; overflow: hidden; @@ -582,24 +752,24 @@ h1.scoreFontColor { } #popup.score_restrict { -text-align: center; -border-radius: 3px; -border: #f0f0f0 3px solid; -width: 300px; -height: 100px; - -h2, -p { text-align: center; -} -h2 { - font-size: 24px; - font-weight: bold; - margin: 4px; -} -p { - font-weight: 500; -} + border-radius: 3px; + border: #f0f0f0 3px solid; + width: 300px; + height: 100px; + + h2, + p { + text-align: center; + } + h2 { + font-size: 24px; + font-weight: bold; + margin: 4px; + } + p { + font-weight: 500; + } } iframe#container { diff --git a/src/components/settings-page.jsx b/src/components/settings-page.jsx index ce0c1ebd7..4df1e6d17 100644 --- a/src/components/settings-page.jsx +++ b/src/components/settings-page.jsx @@ -23,7 +23,7 @@ const SettingsPage = () => { staleTime: Infinity, retry: false, onError: (err) => { - if (err.message == "Invalid Login") { + if (err.message == 'Invalid Login') { setAlertDialog({ enabled: true, message: 'You must be logged in to view your settings.', @@ -38,12 +38,12 @@ const SettingsPage = () => { useEffect(() => { if (mounted && ! isFetching && currentUser) { mounted.current = true - setState({...state, notify: currentUser.profile_fields.notify, useGravatar: currentUser.profile_fields.useGravatar}) + setState({...state, notify: currentUser.profile_fields.notify, useGravatar: currentUser.profile_fields.useGravatar, darkMode: currentUser.profile_fields.darkMode ? currentUser.profile_fields.darkMode : false}) return () => (mounted.current = false) } },[isFetching]) - const [state, setState] = useState({notify: false, useGravatar: false}) + const [state, setState] = useState({notify: false, useGravatar: false, darkMode: false}) const mutateUserSettings = useUpdateUserSettings() @@ -56,13 +56,23 @@ const SettingsPage = () => { setState({...state, useGravatar: pref}) } + const _updateDarkModePref = event => { + setState({...state, darkMode: !state.darkMode}); + } + const _submitSettings = () => { mutateUserSettings.mutate({ notify: state.notify, useGravatar: state.useGravatar, - successFunc: () => {}, + darkMode: state.darkMode, + successFunc: () => { + // immediately apply/revoke darkmode to body tag. This will be automatically applied + // on subsequent page views across the application + if (state.darkMode) document.body.classList.add('darkMode') + else document.body.classList.remove('darkMode') + }, errorFunc: (err) => { - if (err.message == "Invalid Login") { + if (err.message == 'Invalid Login') { setAlertDialog({ enabled: true, message: 'You must be logged in to view your settings.', @@ -70,7 +80,7 @@ const SettingsPage = () => { fatal: true, enableLoginButton: true }) - } else if (err.message == "Unauthorized") { + } else if (err.message == 'Unauthorized') { setAlertDialog({ enabled: true, message: 'You do not have permission to view this page.', @@ -79,7 +89,7 @@ const SettingsPage = () => { enableLoginButton: false }) } - setError((err.message || "Error") + ": Failed to update settings.") + setError((err.message || 'Error') + ': Failed to update settings.') } }) } @@ -126,28 +136,48 @@ const SettingsPage = () => { Notifications -
-
-
-
-Email notifications will be sent to {currentUser.email}.
+ + +Email notifications will be sent to {currentUser.email}.
- - _updateIconPref(true)}/> - - (Upload or change your icon at gravatar.com) + + +
- + +
-
- _updateIconPref(false)} />
-
+
+
Note: This does not influence widgets.
- - Show Deleted Instances? + -
-
-
-
+
+