diff --git a/client/src/components/chat.tsx b/client/src/components/chat.tsx index 0fbf1cb..e36dc6e 100644 --- a/client/src/components/chat.tsx +++ b/client/src/components/chat.tsx @@ -14,8 +14,8 @@ import Markdown from './markdown' import { useSelector } from 'react-redux' import { lastStepHasErrors } from './infoview/goals' -import '../css/level.css' import '../css/chat.css' +import { hasErrors } from './infoview/typewriter' /** Split a string by double newlines and filters out empty segments. */ function splitIntro (intro : string) { @@ -195,7 +195,7 @@ export function Hint({hint, step=null, conclusion=false} : GameHintWithStep) { // render all hints return
= (typewriterMode ? proof?.steps?.length : selectedStep+1) ? ' deleted-hint' : '') } onClick={toggleSelection}> {getHintText(hint)}
diff --git a/client/src/css/chat.css b/client/src/css/chat.css index 926fee9..b9cb927 100644 --- a/client/src/css/chat.css +++ b/client/src/css/chat.css @@ -1,17 +1,71 @@ +.chat { + flex: 1; + overflow-y: scroll; + margin-left: .5em; + margin-right: .5em; +} + +.chat-panel { + padding-top: 0; + padding-bottom: 0; + overflow: hidden; + display: flex; + flex-direction: column; + +} + +.button-row { + /* width:100%; */ + /* margin-left: .5em; + margin-right: .5em; */ + min-height: 2.5em; + border-top: 0.1em solid #aaa; + display: flex; + padding-top: .2rem; + margin: .5rem; + +} + +.button-row > *:not(:last-child) { + /* display: block; */ + margin-right: .2rem; +} + +.button-row .btn-placeholder { + display: inline-block; + flex: 1; + margin: 0; +} + +.button-row .btn { + flex: 1; + /* margin-top: 1rem; + margin-bottom: 1rem; + margin-left: .5rem; + margin-right: .5rem; */ + text-align: center; + margin: 0; + padding: .5em; +} + + .message { margin: 10px 0; padding: 5px 10px; border-radius: 3px 3px 3px 3px; } + .message.information, .message.info { /* color: #059; */ color: #000; background-color: #DDF6FF; } + .message.warning { color: #9F6000; background-color: #FEEFB3; } + .message.error { color: #D8000C; background-color: #FFBABA; @@ -28,14 +82,18 @@ background-color: #E5FFDD; } +.chat .message { + margin-left: .5em; + margin-right: .5em; + overflow-x: auto; +} -.button-row > *:not(:last-child) { - /* display: block; */ - margin-right: .2rem; +.chat .recent { + box-shadow: .0em .0em .4em .1em #8cbbe9; } -.button-row .btn-placeholder { - display: inline-block; - flex: 1; - margin: 0; +.chat .selected { + /* border: 3px solid #5191d1; */ + + box-shadow: .0em .0em .4em .1em var(--clr-primary); } diff --git a/client/src/css/level.css b/client/src/css/level.css index f5726d4..d79abd0 100644 --- a/client/src/css/level.css +++ b/client/src/css/level.css @@ -176,60 +176,6 @@ td code { height: 100%; } -.chat { - flex: 1; - overflow-y: scroll; - margin-left: .5em; - margin-right: .5em; -} - -.chat-panel { - padding-top: 0; - padding-bottom: 0; - overflow: hidden; - display: flex; - flex-direction: column; - -} - -.chat-panel .button-row { - /* width:100%; */ - /* margin-left: .5em; - margin-right: .5em; */ - min-height: 2.5em; - border-top: 0.1em solid #aaa; - display: flex; - padding-top: .2rem; - margin: .5rem; - -} - -.chat-panel .btn { - flex: 1; - /* margin-top: 1rem; - margin-bottom: 1rem; - margin-left: .5rem; - margin-right: .5rem; */ - text-align: center; - - margin: 0; - padding: .5em; -} - -/* .button-row.mobile { - margin: .5rem; - padding-top: .2rem; -} - -.button-row.mobile .btn { - padding: .5em; - border-radius: .2em; - width: 100%; - margin: 0; - text-align: center; -} */ - - .exercise-content { display: flex; flex-flow: column; @@ -261,17 +207,7 @@ td code { margin-top: 10px; } -.chat .message { - margin-left: .5em; - margin-right: .5em; - overflow-x: auto; -} - -.chat .recent { - box-shadow: .0em .0em .4em .1em #8cbbe9; -} - -.exercise .step.selected .goal-tabs, .chat .selected { +.exercise .step.selected .goal-tab { /* border: 3px solid #5191d1; */ box-shadow: .0em .0em .4em .1em var(--clr-primary); }