UI fixes

UniversityOfHelsinkiCS · Oct 4, 2024 · 792b333 · 792b333
1 parent d4e335f
commit 792b333
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 9 deletions.
diff --git a/client/components/AnnotationBox/index.js b/client/components/AnnotationBox/index.js
@@ -44,7 +44,7 @@ const AnnotationBox = () => {
     return <NoAnnotationsView handleAnnotationBoxCollapse={handleAnnotationBoxCollapse} />
   }
 
-  if (width >= 1024 && teacherView) {
+  if (width >= 1024) {
     return (
       <div className="annotations-box">
         <Segment>

diff --git a/client/components/CEFRLevelSlider.js b/client/components/CEFRLevelSlider.js
@@ -2,11 +2,11 @@
 import React from 'react'
 import ReactSlider from 'react-slider'
 
-const CERFLevelSlider = ({ isDisabled, sliderValue, setSliderValue }) => {
+const CERFLevelSlider = ({ isDisabled, sliderValue, setSliderValue, noExtremeValue=true }) => {
   const handleSlider = value => {
-    if (value < 121) {
+    if (value < 121 && noExtremeValue) {
       setSliderValue(121)
-    } else if (value > 968) {
+    } else if (value > 968 && noExtremeValue) {
       setSliderValue(968)
     } else {
       setSliderValue(value)
@@ -28,12 +28,12 @@ const CERFLevelSlider = ({ isDisabled, sliderValue, setSliderValue }) => {
       />
 
       <div className="space-between exercise-density-slider-label-cont bold">
-        <span style={{ color: 'lightgrey' }}>A1</span>
+        <span style={{ color: noExtremeValue ? 'lightgrey' : '#000000' }}>A1</span>
         <span style={{ color: isDisabled ? 'lightgrey' : '#000000' }}>A2</span>
         <span style={{ color: isDisabled ? 'lightgrey' : '#000000' }}>B1</span>
         <span style={{ color: isDisabled ? 'lightgrey' : '#000000' }}>B2</span>
         <span style={{ color: isDisabled ? 'lightgrey' : '#000000' }}>C1</span>
-        <span style={{ color: 'lightgrey' }}>C2</span>
+        <span style={{ color: noExtremeValue ? 'lightgrey' : '#000000' }}>C2</span>
       </div>
     </>
   )

diff --git a/client/components/CommonStoryTextComponents/TextWithFeedback.js b/client/components/CommonStoryTextComponents/TextWithFeedback.js
@@ -130,7 +130,7 @@ const TextWithFeedback = ({
   const createChunkStyle = chunkPosition => {
     const chunkStart = chunkPosition === 'start'
     const chunkEnd = chunkPosition === 'end'
-    const chunkBorder = chunkIsOneVerb ? '1px red dotted' : '1px red solid'
+    const chunkBorder = chunkIsOneVerb ? '1px #af00ff dotted' : '1px #af00ff solid'
     const sidePadding = getSidePadding(exercise)
     const chunkStyle = {
       borderBottom: chunkBorder,

diff --git a/client/components/GroupView/GroupLearningSettingsModal.js b/client/components/GroupView/GroupLearningSettingsModal.js
@@ -81,8 +81,11 @@ const GroupLearningSettingsModal = ({ open, setOpen, groupId }) => {
           <>
               {/* slider */}
               <div>
-                  <CERFLevelSlider sliderValue={cefrSliderValue}
-                                   setSliderValue={setCefrSliderValue} />
+                  <CERFLevelSlider 
+                    sliderValue={cefrSliderValue}
+                    setSliderValue={setCefrSliderValue} 
+                    noExtremeValue={false}
+                  />
               </div>
               {/* customize learning settings */}
               <div className="flex-reverse" style={{ marginBottom: '1.5em', marginTop: '1.0em' }}>