From cfdc9eae27e0fc6197abe694c7488a169dd618e9 Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Fri, 30 Sep 2022 20:06:09 +0200
Subject: fix(frontend): editor selection visibility

---
 subprojects/frontend/src/editor/EditorArea.tsx   |  1 +
 subprojects/frontend/src/editor/EditorPane.tsx   |  2 +-
 subprojects/frontend/src/editor/EditorStore.ts   |  4 ++++
 subprojects/frontend/src/editor/EditorTheme.ts   | 13 ++++++++++---
 subprojects/frontend/src/theme/ThemeProvider.tsx | 12 ++++++------
 5 files changed, 22 insertions(+), 10 deletions(-)

(limited to 'subprojects/frontend')

diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx
index 174b1205..e6227672 100644
--- a/subprojects/frontend/src/editor/EditorArea.tsx
+++ b/subprojects/frontend/src/editor/EditorArea.tsx
@@ -46,6 +46,7 @@ export default observer(function EditorArea({
     >
       <EditorTheme
         showLineNumbers={editorStore.showLineNumbers}
+        showActiveLine={!editorStore.hasSelection}
         ref={editorParentRef}
       />
       <EditorAreaDecorations parent={parent} scroller={scroller} />
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx
index bcd324e5..199a8e1d 100644
--- a/subprojects/frontend/src/editor/EditorPane.tsx
+++ b/subprojects/frontend/src/editor/EditorPane.tsx
@@ -21,7 +21,7 @@ function EditorLoading(): JSX.Element {
   );
 
   return (
-    <Box mx={2}>
+    <Box mx={2} width="100%">
       {skeletonSizes.map((length, i) => (
         /* eslint-disable-next-line react/no-array-index-key --
           Random placeholders have no identity.
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts
index c74e732f..d13f644c 100644
--- a/subprojects/frontend/src/editor/EditorStore.ts
+++ b/subprojects/frontend/src/editor/EditorStore.ts
@@ -255,6 +255,10 @@ export default class EditorStore {
     log.debug('Show line numbers', this.showLineNumbers);
   }
 
+  get hasSelection(): boolean {
+    return this.state.selection.ranges.some(({ from, to }) => from !== to);
+  }
+
   formatText(): boolean {
     this.client.formatText();
     return true;
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts
index db051d0e..3ec977da 100644
--- a/subprojects/frontend/src/editor/EditorTheme.ts
+++ b/subprojects/frontend/src/editor/EditorTheme.ts
@@ -10,8 +10,12 @@ function svgURL(svg: string): string {
 
 export default styled('div', {
   name: 'EditorTheme',
-  shouldForwardProp: (propName) => propName !== 'showLineNumbers',
-})<{ showLineNumbers: boolean }>(({ theme, showLineNumbers }) => {
+  shouldForwardProp: (propName) =>
+    propName !== 'showLineNumbers' && propName !== 'showActiveLine',
+})<{
+  showLineNumbers: boolean;
+  showActiveLine: boolean;
+}>(({ theme, showLineNumbers, showActiveLine }) => {
   const editorFontStyle = {
     ...theme.typography.editor,
     fontWeight: theme.typography.fontWeightEditorNormal,
@@ -39,7 +43,9 @@ export default styled('div', {
       padding: 0,
     },
     '.cm-activeLine': {
-      background: theme.palette.highlight.activeLine,
+      background: showActiveLine
+        ? theme.palette.highlight.activeLine
+        : 'transparent',
     },
     '.cm-activeLineGutter': {
       background: 'transparent',
@@ -367,6 +373,7 @@ export default styled('div', {
     '.cm-tooltip.cm-tooltip-autocomplete': {
       ...editorFontStyle,
       background: theme.palette.background.paper,
+      border: 'none',
       borderRadius: theme.shape.borderRadius,
       overflow: 'hidden',
       ...(theme.palette.mode === 'dark' && {
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index 550b3b30..09a72d54 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -247,20 +247,20 @@ const darkTheme = createResponsiveTheme({
     divider: alpha('#abb2bf', 0.24),
     outer: {
       background: '#21252b',
-      border: '#181a1f',
+      border: '#333841',
     },
     highlight: {
       number: '#6188a6',
       parameter: '#c8ae9d',
-      comment: '#5c6370',
-      activeLine: '#21252b',
-      selection: '#3e4453',
+      comment: '#7f848e',
+      activeLine: '#2c313c',
+      selection: '#404859',
       lineNumber: '#5c6370',
       foldPlaceholder: alpha('#ebebff', 0.12),
       activeLintRange: alpha('#fbc346', 0.28),
       occurences: {
-        read: alpha('#ebebff', 0.24),
-        write: alpha('#ebebff', 0.24),
+        read: alpha('#ebebff', 0.14),
+        write: alpha('#ebebff', 0.14),
       },
       search: {
         match: '#33eaff',
-- 
cgit v1.2.3-54-g00ecf