Fixup File Name Tokens (#8036)

frontend/src/Settings/MediaManagement/Naming/NamingModal.css

@@ -30,6 +30,7 @@
   code {
     padding: 0 1px;
     border: 1px solid var(--borderColor);
-    background-color: #f7f7f7;
+    background-color: var(--modalCloseButtonHoverColor);
+    color: var(--movieBackgroundColor);
   }
 }

frontend/src/Settings/MediaManagement/Naming/NamingOption.css

@@ -7,11 +7,11 @@
 
   &:hover {
     .token {
-      background-color: #ddd;
+      background-color: var(--popoverTitleBackgroundInverseColor);
     }
 
     .example {
-      background-color: #ccc;
+      background-color: var(--popoverTitleBorderInverseColor);
     }
   }
 }
@@ -27,7 +27,7 @@
 .token {
   flex: 0 0 50%;
   padding: 6px 16px;
-  background-color: #eee;
+  background-color: var(--popoverTitleBorderColor);
   font-family: $monoSpaceFontFamily;
 }
 
@@ -38,7 +38,7 @@
   justify-content: space-between;
   flex: 0 0 50%;
   padding: 6px 16px;
-  background-color: #ddd;
+  background-color: var(--popoverTitleBackgroundColor);
 
   .footNote {
     padding: 2px;

frontend/src/Styles/Themes/light.js

@@ -198,8 +198,8 @@ module.exports = {
   popoverShadowColor: 'rgba(0, 0, 0, 0.2)',
   popoverArrowBorderColor: '#fff',
 
-  popoverTitleBackgroundInverseColor: '#595959',
-  popoverTitleBorderInverseColor: '#707070',
+  popoverTitleBackgroundInverseColor: '#9b9b9b',
+  popoverTitleBorderInverseColor: '#bfbfbf',
   popoverShadowInverseColor: 'rgba(0, 0, 0, 0.2)',
   popoverArrowBorderInverseColor: 'rgba(58, 63, 81, 0.75)',