cleanup chat css

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 <div className={`message ${conclusion ? 'success' : hint.hidden ? 'warning' : 'information'} step-${step}` +
       ((selectedStep !== null && step == selectedStep) ? ' selected' : '') +
-      //
+      (step == proof?.steps?.length - (lastStepHasErrors(proof) ? 2 : 1) ? ' recent' : '') +
       (!conclusion && step >= (typewriterMode ? proof?.steps?.length : selectedStep+1) ? ' deleted-hint' : '') } onClick={toggleSelection}>
     <Markdown>{getHintText(hint)}</Markdown>
   </div>

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) {
+.chat .recent {
-  /* display: block; */
+  box-shadow: .0em .0em .4em .1em #8cbbe9;
-  margin-right: .2rem;
 }
 
-.button-row .btn-placeholder {
+.chat .selected {
-  display: inline-block;
+  /* border: 3px solid #5191d1; */
-  flex: 1;
+
-  margin: 0;
+  box-shadow: .0em .0em .4em .1em var(--clr-primary);
 }

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 {
+.exercise .step.selected .goal-tab {
-  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 {
   /* border: 3px solid #5191d1; */
   box-shadow: .0em .0em .4em .1em var(--clr-primary);
 }