Add quiet border to code block and use pygment css for app file name

Author: rossta

app/javascript/css/components/code.scss

@@ -2,6 +2,7 @@
 
 .code-wrapper {
   border-radius: var(--space-3xs-2xs);
+  border: 1px solid var(--joy-border-quiet);
 }
 
 @media screen and (min-width: $screen-md) {
@@ -50,10 +51,9 @@
       align-items: center;
       display: flex;
       font-weight: bold;
-      color: var(--joy-light);
       text-decoration: none;
       & svg {
-        fill: var(--joy-light);
+        // fill: var(--joy-light);
       }
     }
   }

app/javascript/css/config/theme.css

@@ -42,6 +42,7 @@
 
   --joy-background-inline-code: ghostwhite;
 
+  --joy-border-quiet: var(--joy-color-100);
   --joy-border-subtle: var(--joy-color-200);
   --joy-border: var(--joy-color-600);
   --joy-color-quote: var(--joy-color-600);
@@ -87,7 +88,8 @@
 
   --joy-background-inline-code: var(--dracula-black);
 
-  --joy-border-subtle: var(--joy-color-900);
+  --joy-border-quiet: var(--joy-color-900);
+  --joy-border-subtle: var(--joy-color-800);
   --joy-border: var(--joy-color-600);
 
   --joy-text: var(--joy-color-50);

app/views/components/code_block/app_file.rb

@@ -12,8 +12,8 @@ def initialize(filename, lines: nil, revision: nil, **attributes)
   def view_template
     render ::CodeBlock::Article.new(**attributes) do |code_block|
       code_block.title do
-        a(href: app_file.repo_url, target: "_blank", class: "flex items-center gap-1") {
-          plain app_file.filename
+        a(href: app_file.repo_url, target: "_blank", class: "nc flex items-center gap-1") {
+          plain app_file.app_path.to_s
           plain inline_svg_tag("external-link.svg", class: "icon icon-sm", height: 12, width: 12)
         }
       end