From 4df8e16a53cd88ba69884337b09e763e9d77e874 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Wed, 31 Jul 2024 12:42:58 -0700
Subject: [PATCH] Adjust some styling in the directory and markdown previews
 (#182)

The column headers for the directory preview were a solid color, which
was conflicting with the translucent colors for the rest of the UI. I've
changed this to be more consistent. I've also updated a border color
that was conflicting with the rest of the UI.

The code blocks in the markdown preview were also solid colored and the
actions were causing the whole window UI to lose its transparency when
they were hovered over. This was due to it applying a backdrop-filter,
which breaks the window transparency. I've removed this blur and an
invalid color variable.

This also fixes the bottom margins for both blocks so there's more space
when scrolled all the way to the bottom of the block. Before, the
overlay scrollbars were obscuring the content.
---
 frontend/app/block/block.less           |  2 +-
 frontend/app/element/markdown.less      | 12 ++++--------
 frontend/app/theme.less                 |  4 ++--
 frontend/app/view/directorypreview.less |  2 +-
 4 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/frontend/app/block/block.less b/frontend/app/block/block.less
index 72a2a0b8e..ffe8795c2 100644
--- a/frontend/app/block/block.less
+++ b/frontend/app/block/block.less
@@ -78,7 +78,7 @@
                 gap: 8px;
                 align-self: stretch;
                 font: var(--header-font);
-                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+                border-bottom: 1px solid var(--border-color);
                 border-radius: var(--block-border-radius) var(--block-border-radius) 0 0;
 
                 .block-frame-preicon-button {
diff --git a/frontend/app/element/markdown.less b/frontend/app/element/markdown.less
index 288bee119..557780e61 100644
--- a/frontend/app/element/markdown.less
+++ b/frontend/app/element/markdown.less
@@ -6,10 +6,7 @@
     font-family: var(--markdown-font);
     font-size: 14px;
     overflow-wrap: break-word;
-
-    &.bottom-margin {
-        margin-bottom: 10px;
-    }
+    margin-bottom: 10px;
 
     .title {
         color: var(--app-text-color);
@@ -65,7 +62,8 @@
         }
 
         .codeblock-actions {
-            display: none;
+            visibility: hidden;
+            display: flex;
             position: absolute;
             top: 4px;
             right: 4px;
@@ -74,8 +72,6 @@
             justify-content: flex-end;
             padding-left: 4px;
             padding-right: 4px;
-            background-color: var(--line-actions-bg-color);
-            backdrop-filter: blur(8px);
 
             i {
                 color: var(--line-actions-inactive-color);
@@ -100,7 +96,7 @@
         }
 
         &:hover .codeblock-actions {
-            display: flex;
+            visibility: visible;
         }
     }
 
diff --git a/frontend/app/theme.less b/frontend/app/theme.less
index 84143e73c..0d655a4c6 100644
--- a/frontend/app/theme.less
+++ b/frontend/app/theme.less
@@ -7,11 +7,11 @@
     --secondary-text-color: rgb(195, 200, 194);
     --grey-text-color: #666;
     --main-bg-color: rgb(34, 34, 34);
-    --border-color: #333333;
+    --border-color: rgba(255, 255, 255, 0.08);
     --base-font: normal 14px / normal "Inter", sans-serif;
     --fixed-font: normal 12px / normal "Hack", monospace;
     --accent-color: rgb(88, 193, 66);
-    --panel-bg-color: rgba(31, 33, 31, 1);
+    --panel-bg-color: rgba(31, 33, 31, 0.5);
     --highlight-bg-color: rgba(255, 255, 255, 0.2);
     --markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
         "Apple Color Emoji", "Segoe UI Emoji";
diff --git a/frontend/app/view/directorypreview.less b/frontend/app/view/directorypreview.less
index c5099cd28..d6a75b5e9 100644
--- a/frontend/app/view/directorypreview.less
+++ b/frontend/app/view/directorypreview.less
@@ -15,12 +15,12 @@
         display: flex;
         flex-direction: column;
         font: var(--base-font);
+        margin-bottom: 10px;
         .dir-table-head {
             .dir-table-head-row {
                 display: flex;
                 border-bottom: 1px solid var(--border-color);
                 padding: 4px 6px;
-                background-color: var(--panel-bg-color);
                 font-size: 0.75rem;
 
                 .dir-table-head-cell {