chore: Minor Readme CSS code tidy up (#3138)

js/src/admin/components/ExtensionPage.js

@@ -203,7 +203,7 @@ export default class ExtensionPage extends AdminPage {
       Button.component(
         {
           icon: 'fab fa-readme',
-          class: 'Readme-link',
+          class: 'Button Button--text',
           onclick() {
             app.modal.show(ReadmeModal, { extension });
           },

js/src/admin/components/ReadmeModal.js

@@ -19,7 +19,7 @@ export default class ReadmeModal extends Modal {
   }
 
   className() {
-    return 'ReadmeModal Modal--large';
+    return 'ReadmeModal Modal--large Modal--inverted';
   }
 
   title() {
@@ -32,7 +32,7 @@ export default class ReadmeModal extends Modal {
     const text = app.translator.trans('core.admin.extension.readme.no_readme');
 
     return (
-      <div className="container">
+      <div className="Modal-body">
         {this.loading ? (
           <div className="ReadmeModal-loading">{LoadingIndicator.component()}</div>
         ) : (

less/admin.less

@@ -11,5 +11,4 @@
 @import "admin/AppearancePage";
 @import "admin/MailPage";
 @import "admin/NoJs";
-@import "admin/ReadmeModal";
 @import "admin/UsersListPage";

less/admin/ExtensionPage.less

@@ -150,19 +150,12 @@
   margin-left: 8px;
 }
 
-.Readme-link {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: @muted-color;
-}
-
 .ReadmeModal {
-  .Modal-header {
-    background: @control-bg;
-    color: @muted-color
-  }
-  img {
-      max-width: 100%;
-  }
-}
+   .Placeholder {
+     margin-bottom: 40px;
+   }
+
+   img {
+     max-width: 100%;
+   }
+ }

less/admin/ReadmeModal.less

@@ -1,5 +0,0 @@
-.ReadmeModal {
-    .Placeholder {
-        margin-bottom: 40px;
-    }
-}

less/common/Modal.less

@@ -134,6 +134,16 @@
   }
 }
 
+.Modal--inverted {
+  .Modal-header {
+    background-color: @control-bg;
+    color: @control-color;
+  }
+  .Modal-body {
+    background-color: transparent;
+    color: unset;
+  }
+}
 
 @media @phone {
   .ModalManager.fade {