Fix icon color and code title rendering

Author: rossta

app/javascript/css/components/article-content.css

@@ -117,9 +117,4 @@
     padding-bottom: var(--space-s);
     padding-inline-start: var(--space-s);
   }
-
-  & a svg.icon {
-    width: 1rem;
-    height: 1rem;
-  }
 }

app/javascript/css/components/code.scss

@@ -48,14 +48,36 @@
     & a {
       font-family: var(--sans-serif);
       gap: 0.25rem;
-      align-items: center;
+      align-items: baseline;
       display: flex;
       font-weight: bold;
       text-decoration: none;
       & svg {
         // fill: var(--joy-light);
       }
     }
+
+    & a svg.icon {
+      width: 0.75rem;
+      height: 0.75rem;
+    }
+  }
+
+  svg {
+    fill: currentColor;
+    color: currentColor;
+
+    &.app-dots {
+      display: inline-block;
+      vertical-align: top;
+    }
+
+    &.copy-text {
+      /* width: 24px; */
+    }
+    &.check-mark {
+      /* width: 24px; */
+    }
   }
 }
 @media (min-width: $screen-lg) {
@@ -99,23 +121,6 @@
   line-height: 1.5715;
 }
 
-svg {
-  fill: currentColor;
-  color: currentColor;
-
-  &.app-dots {
-    display: inline-block;
-    vertical-align: top;
-  }
-
-  &.copy-text {
-    /* width: 24px; */
-  }
-  &.check-mark {
-    /* width: 24px; */
-  }
-}
-
 .clipboard-copy-container {
   font-family: var(--sans-serif);
 }

app/javascript/css/utilities/tailwind.css

@@ -897,14 +897,6 @@
   cursor: pointer;
 }
 
-.fill-current {
-  fill: currentColor;
-}
-
-.fill-green-600 {
-  fill: #16a34a;
-}
-
 .w-\[16px\] {
   width: 16px;
 }

app/views/components/code_block/app_file.rb

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