restyle the web editor (#7333)

app/assets/css/app.css

@@ -87,7 +87,7 @@ body,
 
 .form-section-title {
   margin-top: 5px;
-  margin-bottom: 15px;
+  margin-bottom: 10px;
   color: var(--text-form-section-title-color);
   padding-left: 0;
   font-weight: 500;
@@ -867,3 +867,18 @@ json-tree .branch-preview {
   margin-left: 5px;
   margin-right: 5px;
 }
+
+.web-editor {
+  background-color: var(--bg-webeditor-color);
+  border-radius: 8px;
+  padding: 10px;
+}
+
+.web-editor a {
+  color: var(--text-link-color);
+}
+
+.web-editor a:hover {
+  color: var(--text-link-hover-color);
+  text-decoration-line: underline;
+}

app/assets/css/theme.css

@@ -161,6 +161,7 @@
   --bg-searchbar: var(--ui-gray-2);
   --bg-inputbox: var(--ui-gray-2);
   --bg-dropdown-hover: var(--ui-gray-3);
+  --bg-webeditor-color: var(--ui-gray-3);
 
   --text-main-color: var(--grey-7);
   --text-body-color: var(--grey-6);
@@ -298,8 +299,9 @@
   --bg-navtabs-color: var(--grey-3);
   --bg-navtabs-hover-color: var(--grey-3);
   --bg-table-selected-color: var(--grey-3);
-  --bg-codemirror-color: var(--grey-2);
-  --bg-codemirror-gutters-color: var(--grey-2);
+  --bg-codemirror-color: var(--ui-gray-warm-11);
+  --bg-codemirror-gutters-color: var(--ui-gray-warm-8);
+  --bg-codemirror-selected-color: var(--ui-gray-warm-7);
   --bg-dropdown-menu-color: var(--grey-1);
   --bg-log-viewer-color: var(--grey-2);
   --bg-log-line-selected-color: var(--grey-3);
@@ -319,7 +321,6 @@
   --bg-multiselect-checkbox-color: var(--grey-3);
   --bg-panel-body-color: var(--grey-1);
   --bg-boxselector-wrapper-disabled-color: var(--grey-39);
-  --bg-codemirror-selected-color: var(--grey-3);
   --bg-sidebar-header-color: var(--grey-1);
   --bg-multiselect-color: var(--grey-1);
   --bg-daterangepicker-color: var(--grey-3);
@@ -344,6 +345,7 @@
   --bg-searchbar: var(--grey-1);
   --bg-inputbox: var(--grey-2);
   --bg-dropdown-hover: var(--grey-3);
+  --bg-webeditor-color: var(--ui-gray-warm-9);
 
   --text-main-color: var(--white-color);
   --text-body-color: var(--white-color);
@@ -478,7 +480,7 @@
   --bg-blocklist-item-selected-color: var(--black-color);
   --bg-input-group-addon-color: var(--grey-3);
   --bg-table-color: var(--black-color);
-  --bg-codemirror-gutters-color: var(--black-color);
+  --bg-codemirror-gutters-color: var(--ui-gray-warm-11);
   --bg-codemirror-color: var(--black-color);
   --bg-codemirror-selected-color: var(--grey-3);
   --bg-log-viewer-color: var(--black-color);
@@ -526,6 +528,7 @@
   --bg-inputbox: var(--black-color);
   --bg-searchbar: var(--black-color);
   --bg-dropdown-hover: var(--black-color);
+  --bg-webeditor-color: var(--ui-gray-warm-9);
 
   --text-main-color: var(--white-color);
   --text-body-color: var(--white-color);

app/assets/css/vendor-override.css

@@ -163,12 +163,22 @@ code {
 
 .CodeMirror-gutters {
   background: var(--bg-codemirror-gutters-color);
-  border-right: 1px solid var(--border-codemirror-gutters-color);
+  border-right: 0px;
+}
+
+.CodeMirror-linenumber {
+  text-align: left;
+}
+
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+  padding: 0 20px;
 }
 
 .CodeMirror {
   background: var(--bg-codemirror-color);
   color: var(--text-codemirror-color);
+  border-radius: 8px;
 }
 
 .CodeMirror-selected {

app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.html

@@ -21,11 +21,11 @@
             placeholder="# Define or paste the content of your manifest file here"
           >
             <editor-description>
-              <p>Templates allow deploying any kind of Kubernetes resource (Deployment, Secret, ConfigMap...)</p>
-              <p>
+              <div>Templates allow deploying any kind of Kubernetes resource (Deployment, Secret, ConfigMap...)</div>
+              <div>
                 You can get more information about Kubernetes file format in the
                 <a href="https://kubernetes.io/docs/concepts/overview/working-with-objects/kubernetes-objects/" target="_blank">official documentation</a>.
-              </p>
+              </div>
             </editor-description>
           </web-editor-form>
 

app/kubernetes/views/deploy/deploy.html

@@ -113,8 +113,8 @@
                   placeholder="# Define or paste the content of your manifest file here"
                 >
                   <editor-description>
-                    <span class="col-sm-12 text-muted small" ng-show="ctrl.state.DeployType === ctrl.ManifestDeployTypes.COMPOSE">
-                      <p>
+                    <div ng-show="ctrl.state.DeployType === ctrl.ManifestDeployTypes.COMPOSE">
+                      <p class="vertical-center">
                         <pr-icon icon="'alert-circle'" mode="'warning'" feather="true"></pr-icon>
                         Portainer uses <a href="https://kompose.io/" target="_blank">Kompose</a> to convert your Compose manifest to a Kubernetes compliant manifest. Be wary that
                         not all the Compose format options are supported by Kompose at the moment.
@@ -123,9 +123,9 @@
                         You can get more information about Compose file format in the
                         <a href="https://docs.docker.com/compose/compose-file/" target="_blank">official documentation</a>.
                       </p>
-                    </span>
-                    <span class="col-sm-12 text-muted small" ng-show="ctrl.state.DeployType === ctrl.ManifestDeployTypes.KUBERNETES">
-                      <p>
+                    </div>
+                    <div ng-show="ctrl.state.DeployType === ctrl.ManifestDeployTypes.KUBERNETES">
+                      <p class="vertical-center">
                         <pr-icon icon="'alert-circle'" mode="'primary'" feather="true"></pr-icon>
                         This feature allows you to deploy any kind of Kubernetes resource in this environment (Deployment, Secret, ConfigMap...).
                       </p>
@@ -133,7 +133,7 @@
                         You can get more information about Kubernetes file format in the
                         <a href="https://kubernetes.io/docs/concepts/overview/working-with-objects/kubernetes-objects/" target="_blank">official documentation</a>.
                       </p>
-                    </span>
+                    </div>
                   </editor-description>
                 </web-editor-form>
 

app/portainer/components/form-components/web-editor-form/web-editor-form.html

@@ -1,11 +1,13 @@
 <ng-form name="$ctrl.webEditorForm">
-  <div class="col-sm-12 form-section-title"> Web editor </div>
-  <div class="form-group">
-    <span class="col-sm-12 text-muted small" ng-transclude="description"> </span>
-  </div>
-  <div class="form-group">
-    <div class="col-sm-12">
-      <code-editor identifier="{{ $ctrl.identifier }}" placeholder="{{ $ctrl.placeholder }}" yml="$ctrl.yml" value="$ctrl.value" on-change="($ctrl.editorUpdate)"></code-editor>
+  <div class="web-editor">
+    <div class="col-sm-12 form-section-title"> Web editor </div>
+    <div class="form-group col-sm-12 col-lg-12">
+      <div class="text-muted small" ng-transclude="description"> </div>
+    </div>
+    <div class="form-group">
+      <div class="col-sm-12 col-lg-12">
+        <code-editor identifier="{{ $ctrl.identifier }}" placeholder="{{ $ctrl.placeholder }}" yml="$ctrl.yml" value="$ctrl.value" on-change="($ctrl.editorUpdate)"></code-editor>
+      </div>
     </div>
   </div>
 </ng-form>