Fix #4986: Add ability to filter images in /media_assets and /uploads depending on if they have become posts

app/javascript/src/styles/base/010_reset.scss

@@ -12,6 +12,9 @@ html, body {
 
 *, ::before, ::after {
   box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: var(--default-border-color);
 }
 
 body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, dl, dd, menu, input {

app/javascript/src/styles/base/040_colors.css

@@ -114,6 +114,8 @@ html {
   --link-color: var(--blue-5);
   --link-hover-color: var(--blue-3);
 
+  --default-border-color: var(--grey-1);
+
   --error-background-color: var(--red-1);
   --success-background-color: var(--green-0);
   --target-background: var(--yellow-0);
@@ -330,6 +332,8 @@ body[data-current-user-theme="dark"] {
   --link-color: var(--azure-4);
   --link-hover-color: var(--azure-3);
 
+  --default-border-color: var(--grey-7);
+
   --error-background-color: var(--red-9);
   --success-background-color: var(--green-9);
   --target-background: var(--azure-8);

app/javascript/src/styles/common/utilities.scss

@@ -61,6 +61,11 @@ $spacer: 0.25rem; /* 4px */
 
 .border, %border { border-width: 1px; }
 
+.border-b   { border-bottom-width: 1px; }
+.border-b-2 { border-bottom-width: 0.5 * $spacer; }
+
+.border-current { border-color: currentColor; }
+
 .rounded-sm, %rounded-sm { border-radius: 0.5 * $spacer; }
 .rounded,    %rounded    { border-radius: 1   * $spacer; }
 .rounded-lg, %rounded-lg { border-radius: 2   * $spacer; }
@@ -91,6 +96,8 @@ $spacer: 0.25rem; /* 4px */
 .mb-4  { margin-bottom: 4 * $spacer; }
 .mb-8  { margin-bottom: 8 * $spacer; }
 
+.-mb-px { margin-bottom: -1px; }
+
 .ml-4  { margin-left: 4 * $spacer; }
 
 .p-0    { padding: 0; }
@@ -112,6 +119,8 @@ $spacer: 0.25rem; /* 4px */
 .pt-4 { padding-top: 4 * $spacer; }
 .pt-8 { padding-top: 8 * $spacer; }
 
+.pb-2 { padding-bottom: 2 * $spacer; }
+
 .pr-2 { padding-right: 2 * $spacer; }
 .pr-4 { padding-right: 4 * $spacer; }
 
@@ -171,6 +180,7 @@ $spacer: 0.25rem; /* 4px */
 .flex-initial { flex: 0 1 auto; }
 .flex-grow-1 { flex-grow: 1; }
 .flex-col { flex-direction: column; }
+.flex-wrap { flex-wrap: wrap; }
 
 .items-start { align-items: flex-start; }
 .items-center { align-items: center; }