fix sidebar formatting

Author: jderochervlk

app/styles/main.css

@@ -275,6 +275,7 @@
 }
 
 @layer components {
+  /* TODO RR7: do I need this? */
   /* @import "./_typography.css"; */
 
   body {
@@ -305,167 +306,175 @@
   color: inherit;
 }
 
+.ͼ2 {
+.cm-gutters-before {
+  background-color: inherit;
+}
+.cm-gutters {
+  background-color: none !important;
+}
+
 .cm-gutters .errors {
-  /*@apply bg-white text-red-500;*/
+  @apply bg-white text-red-500;
   @apply w-6;
   background-color: inherit;
 }
 
-/*.cm-scroller {*/
-/*min-height: 40vh;*/
-/*}*/
+.cm-scroller {
+  min-height: 40vh;
+}
 
-.cm-s-material.mc-editor {
-  /*background-color: #263238;*/
+.mc-editor {
+  background-color: #263238;
   @apply font-mono;
   /*py-8;*/
 }
 
-.cm-s-material .cm-gutters {
-  /*@apply  text-gray-80;*/
+ .cm-gutters {
+  @apply  text-gray-80;
   border: none;
   background-color: inherit;
   color: inherit;
 }
 
-/*.CodeMirror pre.cm-line,*/
-/*.CodeMirror pre.cm-line-like {*/
-/*}*/
+.CodeMirror pre.cm-line,
+.CodeMirror pre.cm-line-like {
+}
 
-.cm-s-material .cm-guttermarker,
-.cm-s-material .cm-guttermarker-subtle,
-.cm-s-material .cm-linenumber {
+ .cm-guttermarker,
+ .cm-guttermarker-subtle,
+ .cm-linenumber {
   @apply text-gray-80;
 }
 
-.cm-s-material .cm-cursor {
+ .cm-cursor {
   border-left: 1px solid #ffcc00;
 }
 
-.cm-s-material div.cm-selected {
+ div.cm-selected {
   background: rgba(128, 203, 196, 0.2);
 }
 
-.cm-s-material.cm-focused div.cm-selected {
+.cm-focused div.cm-selected {
   background: rgba(128, 203, 196, 0.2);
 }
 
-.cm-s-material .cm-line::selection,
-.cm-s-material .cm-line > span::selection,
-.cm-s-material .cm-line > span > span::selection {
+ .cm-line::selection,
+ .cm-line > span::selection,
+ .cm-line > span > span::selection {
   background: rgba(128, 203, 196, 0.2);
 }
 
-.cm-s-material .cm-line::-moz-selection,
-.cm-s-material .cm-line > span::-moz-selection,
-.cm-s-material .cm-line > span > span::-moz-selection {
+ .cm-line::-moz-selection,
+ .cm-line > span::-moz-selection,
+ .cm-line > span > span::-moz-selection {
   background: rgba(128, 203, 196, 0.2);
 }
 
-.cm-s-material .cm-activeline-background {
+ .cm-activeline-background {
   background: rgba(0, 0, 0, 0.5);
 }
 
-.cm-s-material .cm-keyword {
+ .cm-keyword {
   @apply text-berry-dark-50;
 }
 
-.cm-s-material .cm-keyword2 {
+ .cm-keyword2 {
   @apply text-water-dark;
 }
 
-.cm-s-material .cm-variant-constructor {
+ .cm-variant-constructor {
   @apply text-orange-dark;
 }
 
-.cm-s-material .cm-module {
+ .cm-module {
   @apply text-water-dark;
 }
 
-.cm-s-material .cm-operator {
+ .cm-operator {
   @apply text-berry-dark-50;
 }
 
-.cm-s-material .cm-variable-2 {
+ .cm-variable-2 {
   color: #eeffff;
 }
 
-.cm-s-material .cm-variable-3,
-.cm-s-material .cm-type {
+ .cm-variable-3,
+ .cm-type {
   color: #f07178;
 }
 
-.cm-s-material .cm-builtin {
+ .cm-builtin {
   @apply text-orange-dark;
 }
 
-.cm-s-material .cm-decorator {
+ .cm-decorator {
   @apply text-water-dark;
 }
 
-.cm-s-material .cm-type-annotation {
+ .cm-type-annotation {
   @apply text-gray-40;
 }
 
-.cm-s-material .cm-atom {
+ .cm-atom {
   @apply text-orange-dark;
 }
 
-.cm-s-material .cm-number {
+ .cm-number {
   @apply text-turtle-dark;
 }
 
-.cm-s-material .cm-def {
+ .cm-def {
   @apply text-gray-30;
 }
 
-.cm-s-material .cm-string {
+ .cm-string {
   @apply text-turtle-dark;
 }
 
-.cm-s-material .cm-string-2 {
+ .cm-string-2 {
   @apply text-turtle-dark;
 }
 
-.cm-s-material .cm-comment {
+ .cm-comment {
   @apply text-gray-60;
 }
 
-.cm-s-material .cm-variable {
+ .cm-variable {
   @apply text-gray-30;
 }
 
  .cm-tag {
   color: #ff5370;
 }
 
-.cm-s-material .cm-meta {
+ .cm-meta {
   color: #ffcb6b;
 }
 
-.cm-s-material .cm-attribute {
+ .cm-attribute {
   color: #c792ea;
 }
 
-.cm-s-material .cm-property {
+ .cm-property {
   color: #c792ea;
 }
 
-.cm-s-material .cm-qualifier {
+ .cm-qualifier {
   color: #decb6b;
 }
 
-.cm-s-material .cm-variable-3,
-.cm-s-material .cm-type {
+ .cm-variable-3,
+ .cm-type {
   color: #decb6b;
 }
 
-.cm-s-material .cm-error {
+ .cm-error {
   color: rgba(255, 255, 255, 1);
   background-color: #ff5370;
 }
 
-.cm-s-material .cm-matchingbracket {
+ .cm-matchingbracket {
   text-decoration: underline;
   color: white !important;
 }
@@ -549,7 +558,7 @@
   right: 0;
   width: 100%;
 }
-
+}
 .wrapper {
   position: relative;
   display: inline-block;

src/components/CodeMirror.res

@@ -329,6 +329,8 @@ let createEditor = (config: editorConfig): editorInstance => {
   | _ => CM6.JavaScript.javascript()
   }
 
+  Console.log(language)
+
   // Setup compartments for dynamic config
   let languageConf = CM6.Compartment.create()
   let readOnlyConf = CM6.Compartment.create()