feat(sidebar): add dark theme colors [EE-3666] (#7414)

2025-08-08 07:15:23 +02:00 · 2022-08-10 07:12:20 +03:00 · 2022-08-10 07:12:20 +03:00 · c3ce4d8b53
commit c3ce4d8b53
parent fb3a31a4fd
83 changed files with 1738 additions and 1200 deletions
--- a/app/portainer/components/access-datatable/accessDatatable.html
+++ b/app/portainer/components/access-datatable/accessDatatable.html
@ -3,7 +3,9 @@
    <rd-widget-body classes="no-padding">
      <div class="toolBar">
        <div class="toolBarTitle vertical-center">
-          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-white icon-primary icon-nested-blue'"></pr-icon>
+          <div class="widget-icon space-right">
+            <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
+          </div>
          {{ $ctrl.titleText }}
        </div>
        <div class="searchBar vertical-center">
--- a/app/portainer/components/custom-templates-list/customTemplatesList.html
+++ b/app/portainer/components/custom-templates-list/customTemplatesList.html
@ -37,7 +37,7 @@
                Edit
              </a>
              <button class="btn btn-dangerlight btn-sm vertical-center" ng-click="$ctrl.onDeleteClick(template.Id); $event.stopPropagation();">
-                <pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>
+                <pr-icon icon="'trash-2'" feather="true"></pr-icon>
                Delete
              </button>
            </div>
--- a/app/portainer/components/datatables/access-tokens-datatable/access-tokens-datatable.html
+++ b/app/portainer/components/datatables/access-tokens-datatable/access-tokens-datatable.html
@ -3,7 +3,9 @@
    <rd-widget-body classes="no-padding">
      <div class="toolBar vertical-center">
        <div class="toolBarTitle vertical-center">
-          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-primary icon-nested-blue'"></pr-icon>
+          <div class="widget-icon space-right">
+            <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
+          </div>
          <span>{{ $ctrl.titleText }}</span>
        </div>
        <div class="searchBar vertical-center">
--- a/app/portainer/components/datatables/datatable.css
+++ b/app/portainer/components/datatables/datatable.css
@ -6,6 +6,7 @@
  border-radius: 8px;

  display: flex;
+  align-items: center;
  gap: 5px;
 }

--- a/app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html
+++ b/app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html
@ -3,7 +3,10 @@
    <rd-widget-body classes="no-padding">
      <div class="toolBar">
        <div class="toolBarTitle vertical-center">
-          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-white icon-primary icon-nested-blue'"></pr-icon>
+          <div class="widget-icon space-right">
+            <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
+          </div>
+
          {{ $ctrl.titleText }}
        </div>
        <div class="searchBar vertical-center">
--- a/app/portainer/components/datatables/groups-datatable/groupsDatatable.html
+++ b/app/portainer/components/datatables/groups-datatable/groupsDatatable.html
@ -3,10 +3,12 @@
    <rd-widget-body classes="no-padding">
      <div class="toolBar">
        <div class="toolBarTitle vertical-center">
-          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-white icon-primary icon-nested-blue'"></pr-icon>
+          <div class="widget-icon space-right">
+            <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
+          </div>
          {{ $ctrl.titleText }}
        </div>
-        <div class="searchBar">
+        <div class="searchBar vertical-center">
          <pr-icon icon="'search'" feather="true"></pr-icon>
          <input
            type="text"
@ -27,7 +29,8 @@
            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
            data-cy="endpointGroup-removeGroupButton"
          >
-            <pr-icon icon="'trash-2'" feather="true"></pr-icon>Remove
+            <pr-icon icon="'trash-2'" feather="true"></pr-icon>
+            Remove
          </button>
          <button type="button" class="btn btn-sm btn-primary h-fit" ui-sref="portainer.groups.new" data-cy="endpointGroup-addGroupButton">
            <pr-icon icon="'plus'" feather="true"></pr-icon>Add group
--- a/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
+++ b/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
@ -3,7 +3,9 @@
    <rd-widget-body classes="no-padding">
      <div class="toolBar">
        <div class="toolBarTitle vertical-center">
-          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
+          <div class="widget-icon space-right">
+            <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
+          </div>
          {{ $ctrl.titleText }}
        </div>
        <div class="searchBar vertical-center">
@ -28,7 +30,7 @@
            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
            data-cy="registry-removeRegistryButton"
          >
-            <pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
+            <pr-icon icon="'trash-2'" feather="true"></pr-icon>Remove
          </button>
          <button type="button" class="btn btn-sm btn-primary h-fit vertical-center !ml-0" ui-sref="portainer.registries.new" data-cy="registry-addRegistryButton">
            <pr-icon icon="'plus'" feather="true"></pr-icon>Add registry
--- a/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html
+++ b/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html
@ -3,7 +3,9 @@
    <rd-widget-body classes="no-padding" ng-if="$ctrl.createEnabled">
      <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
        <div class="toolBarTitle vertical-center">
-          <pr-icon icon="'layers'" feather="true" class-name="'icon-nested-blue vertical-center'" mode="'primary'"></pr-icon>
+          <div class="widget-icon space-right">
+            <pr-icon icon="'layers'" feather="true"></pr-icon>
+          </div>
          {{ $ctrl.titleText }}
        </div>
        <div class="searchBar vertical-center !mr-0">
@ -21,15 +23,14 @@
        </div>
        <div class="actionBar !gap-3" ng-if="!$ctrl.offlineMode" authorization="PortainerStackCreate, PortainerStackDelete">
          <button
-            ng-disabled="!$ctrl.createEnabled"
            type="button"
            class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
            authorization="PortainerStackDelete"
-            ng-disabled="$ctrl.state.selectedItemCount === 0"
+            ng-disabled="!$ctrl.createEnabled || $ctrl.state.selectedItemCount === 0"
            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
            data-cy="stack-removeStackButton"
          >
-            <pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
+            <pr-icon icon="'trash-2'" feather="true"></pr-icon>Remove
          </button>
          <button
            ng-disabled="!$ctrl.createEnabled"
--- a/app/portainer/components/datatables/strings-datatable/strings-datatable.html
+++ b/app/portainer/components/datatables/strings-datatable/strings-datatable.html
@ -2,7 +2,10 @@
  <rd-widget>
    <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap w-full relative">
      <div class="toolBarTitle vertical-center">
-        <pr-icon icon="$ctrl.titleIcon" feather="true" mode="'primary'" class-name="'icon-nested-blue space-right'"></pr-icon>
+        <div class="widget-icon space-right">
+          <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
+        </div>
+
        {{ $ctrl.titleText }}
      </div>
      <div class="searchBar vertical-center">
--- a/app/portainer/components/datatables/tags-datatable/tagsDatatable.html
+++ b/app/portainer/components/datatables/tags-datatable/tagsDatatable.html
@ -3,10 +3,12 @@
    <rd-widget-body classes="no-padding">
      <div class="toolBar">
        <div class="toolBarTitle vertical-center">
-          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-white icon-primary icon-nested-blue'"></pr-icon>
+          <div class="widget-icon space-right">
+            <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
+          </div>
          {{ $ctrl.titleText }}
        </div>
-        <div class="searchBar">
+        <div class="searchBar vertical-center">
          <pr-icon icon="'search'" feather="true"></pr-icon>
          <input
            type="text"
--- a/app/portainer/components/datatables/users-datatable/usersDatatable.html
+++ b/app/portainer/components/datatables/users-datatable/usersDatatable.html
@ -3,7 +3,9 @@
    <rd-widget-body classes="no-padding">
      <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
        <div class="toolBarTitle vertical-center">
-          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
+          <div class="widget-icon space-right">
+            <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
+          </div>
          {{ $ctrl.titleText }}
        </div>

@ -27,7 +29,7 @@
            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
            data-cy="user-removeUserButton"
          >
-            <pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
+            <pr-icon icon="'trash-2'" feather="true"></pr-icon>Remove
          </button>
        </div>
      </div>
--- a/app/portainer/components/widget/rd-widget-title.ts
+++ b/app/portainer/components/widget/rd-widget-title.ts
@ -14,7 +14,9 @@ export const rdWidgetTitle = {
    <div class="widget-header" ng-class="$ctrl.parentClasses">
      <div class="row">
        <span ng-class="$ctrl.classes" class="pull-left vertical-center">
-          <pr-icon icon="$ctrl.icon" feather="$ctrl.featherIcon" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
+          <div class="widget-icon space-right">
+            <pr-icon icon="$ctrl.icon" feather="$ctrl.featherIcon"></pr-icon>
+          </div>
          <span ng-transclude="title">{{ $ctrl.titleText }}</span>
        </span>
        <span ng-class="$ctrl.classes" class="pull-right" ng-transclude></span>
--- a/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.module.css
+++ b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.module.css
@ -7,6 +7,7 @@
  border: 0;
  margin: 0;
  padding: 0;
+  background: transparent;
 }

 .item {
--- a/app/portainer/home/EnvironmentList/EnvironmentList.module.css
+++ b/app/portainer/home/EnvironmentList/EnvironmentList.module.css
@ -50,6 +50,7 @@
  border: 0px;
  padding: 10px;
  height: 60px;
+  background: transparent;
 }

 .action-button {
--- a/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.html
+++ b/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.html
@ -3,7 +3,10 @@
    <rd-widget-body classes="no-padding">
      <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
        <div class="toolBarTitle vertical-center">
-          <pr-icon icon="'svg-clockrewind'" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
+          <div class="widget-icon space-right">
+            <pr-icon icon="'svg-clockrewind'"></pr-icon>
+          </div>
+
          Activity Logs
          <be-feature-indicator feature="{{::$ctrl.feature}}"></be-feature-indicator>
        </div>
--- a/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html
+++ b/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html
@ -3,7 +3,10 @@
    <rd-widget-body classes="no-padding">
      <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
        <div class="toolBarTitle vertical-center">
-          <pr-icon icon="'svg-clockrewind'" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
+          <div class="widget-icon space-right">
+            <pr-icon icon="'svg-clockrewind'"></pr-icon>
+          </div>
+
          Authentication Events
          <be-feature-indicator feature="{{::$ctrl.feature}}"></be-feature-indicator>
        </div>