[Editor] Design fixes

Author: janishutz

src/editor/components/OptionsPane.vue

@@ -16,7 +16,6 @@
     <div class="options-pane">
         <div class="options-container">
             <div class="options-section">
-                {{ linesDisplay }}
                 <p> Display </p>
                 <SliderOptions
                     v-model="boxesDisplay"

src/editor/components/SidePane.vue

@@ -79,17 +79,24 @@
         <!-- Non-collapsed -->
         <div id="tour-history" class="options-bar">
             <div v-if="!isSideBarCollapsed" title="Undo your last action" class="options-bar-left">
-                <span class="clickable-icon" @click="editor.undo">
-                    <i v-if="undoAvailable" class="fa-lg fa-solid fa-rotate-left"></i>
-                    <i v-else class="fa-lg fa-solid fa-rotate-left unavailable"></i>
+                <span class="clickable-icon" :class="undoAvailable ? '' : 'unavailable'" @click="editor.undo">
+                    <i class="fa-lg fa-solid fa-rotate-left"></i>
                 </span>
-                <span class="clickable-icon" title="Redo your last undone action" @click="editor.redo">
-                    <i v-if="redoAvailable" class="fa-lg fa-solid fa-rotate-right"></i>
-                    <i v-else class="fa-lg fa-solid fa-rotate-right unavailable"></i>
+                <span
+                    class="clickable-icon"
+                    :class="redoAvailable ? '' : 'unavailable'"
+                    title="Redo your last undone action"
+                    @click="editor.redo"
+                >
+                    <i class="fa-lg fa-solid fa-rotate-right"></i>
                 </span>
-                <span class="clickable-icon" title="Save" @click="editor.save">
-                    <i v-if="saveNeeded" class="fa-xl fa-solid fa-floppy-disk"></i>
-                    <i v-else class="fa-xl fa-solid fa-floppy-disk unavailable"></i>
+                <span
+                    class="clickable-icon"
+                    :class="saveNeeded ? '' : 'unavailable'"
+                    title="Save"
+                    @click="save"
+                >
+                    <i class="fa-xl fa-solid fa-floppy-disk"></i>
                 </span>
             </div>
             <div class="options-bar-right">
@@ -175,6 +182,12 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
+
+        .button.unavailable {
+            background-color: var(--theme-bg-1);
+            color: gray;
+            cursor: not-allowed;
+        }
     }
 
     .options-bar-sm {
@@ -220,16 +233,20 @@
         .clickable-icon {
             cursor: pointer;
 
+            &.unavailable {
+                color:  var(--theme-bg-3-20);
+                cursor: not-allowed;
+
+                :hover {
+                    color: var( --theme-bg-3-20 );
+                }
+            }
+
             :hover {
                 color: var(--theme-bg-4-20);
             }
         }
 
-        .unavailable {
-            color:  var(--theme-bg-3-20);
-            cursor: not-allowed;
-        }
-
         .options-bar-left {
             display: flex;
             align-items: center;

src/types/import.d.ts

@@ -46,6 +46,11 @@ export interface ParserOption<T> {
      * Thus: If true, assignment not required
      */
     'optional'?: boolean;
+
+    /**
+     * Notes to display on the parser details page
+     */
+    'notes'?: string;
 }
 
 export interface ImportAnnotation {