diff --git a/.eslintrc.yml b/.eslintrc.yml index 5915e45b0..a01e1f765 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -58,6 +58,7 @@ overrides: parser: '@typescript-eslint/parser' plugins: - '@typescript-eslint' + - 'regex' extends: - airbnb - airbnb-typescript @@ -103,6 +104,7 @@ overrides: 'react/jsx-no-bind': off 'no-await-in-loop': 'off' 'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }] + 'regex/invalid': ['error', [{ 'regex': 'data-feather="(.*)"', 'message': 'Please use `react-feather` package instead' }]] - files: - app/**/*.test.* extends: diff --git a/app/app.js b/app/app.js index 0443e8ddf..a226c7337 100644 --- a/app/app.js +++ b/app/app.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import feather from 'feather-icons'; import { PortainerEndpointTypes } from 'Portainer/models/endpoint/models'; /* @ngInject */ @@ -21,6 +22,10 @@ export function onStartupAngular($rootScope, $state, $interval, LocalStorage, En HttpRequestHelper.resetAgentHeaders(); }); + $transitions.onSuccess({}, () => { + feather.replace(); + }); + // Keep-alive Edge endpoints by sending a ping request every minute $interval(() => { ping(EndpointProvider, SystemService); diff --git a/app/assets/css/app.css b/app/assets/css/app.css index 13536a402..b38fb99c3 100644 --- a/app/assets/css/app.css +++ b/app/assets/css/app.css @@ -67,7 +67,6 @@ body, } .form-section-title { - border-bottom: 1px solid var(--border-form-section-title-color); margin-top: 5px; margin-bottom: 15px; color: var(--text-form-section-title-color); @@ -149,7 +148,7 @@ a[ng-click] { } .fa.red-icon { - color: #ae2323; + color: #f04438; } .fa.orange-icon { @@ -221,12 +220,13 @@ a[ng-click] { } .blocklist-item { - padding: 7px; - margin-bottom: 7px; + padding: 10px; + margin-bottom: 10px; cursor: pointer; - border: 1px solid var(--border-blocklist-color); - border-radius: 2px; + border: 1px solid var(--border-blocklist); + border-radius: 8px; box-shadow: var(--shadow-box-color); + margin-right: 10px; } .blocklist-item--disabled { @@ -243,6 +243,7 @@ a[ng-click] { .blocklist-item:hover { background-color: var(--bg-blocklist-hover-color); color: var(--text-blocklist-hover-color); + border: 1px solid var(--ui-blue-4); } .blocklist-item-box { @@ -379,12 +380,13 @@ a[ng-click] { } .panel-body { - padding-top: 30px; - background-color: var(--white-color) fff; + padding: 30px 25px; + background-color: var(--white-color); + border-radius: 8px; } .user-box { - margin-right: 25px; + margin-right: 15px; } .select-endpoint { diff --git a/app/assets/css/bootstrap-override.css b/app/assets/css/bootstrap-override.css new file mode 100644 index 000000000..fb72d65e5 --- /dev/null +++ b/app/assets/css/bootstrap-override.css @@ -0,0 +1,468 @@ +/* Main Color UI Override*/ + +.blue { + background: var(--bg-dashboard-item) !important; +} + +/* Button */ +.btn { + border-radius: 5px; +} + +.btn-primary { + background-color: var(--ui-blue-1); +} + +.btn-primary:hover, +.btn-primary:focus, +.btn-primary:active .active { + background-color: var(--ui-blue-2); +} + +.btn-danger { + background-color: var(--ui-red-1); +} + +.btn-success { + background-color: var(--ui-green-1); +} + +/* Toggle switch */ +.switch { + position: relative; + display: inline-block; + width: 42px; + height: 25px; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +/* Toggle */ + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--bg-switch-box-color); + -webkit-transition: 0.4s; + transition: 0.4s; +} + +.slider:before { + position: absolute; + content: ''; + height: 19px; + width: 19px; + left: 3px; + bottom: 3px; + background-color: var(--white-color); + -webkit-transition: 0.4s; + transition: 0.4s; +} + +input:checked + .slider { + background-color: var(--ui-blue-1); +} + +input:focus + .slider { + box-shadow: 0 0 1px var(--ui-blue-1); +} + +input:checked + .slider:before { + -webkit-transform: translateX(17px); + -ms-transform: translateX(17px); + transform: translateX(17px); +} + +.slider.round { + border-radius: 25px; +} + +.slider.round:before { + border-radius: 50%; +} + +/* Checkbox */ + +.md-checkbox input[type='checkbox']:enabled + label:before { + background-color: var(--bg-checkbox) !important; + border: 1px solid var(--border-checkbox) !important; + border-radius: 5px; +} + +.md-checkbox input[type='checkbox']:disabled + label:before { + border-radius: 5px; +} + +.md-checkbox input[type='checkbox']:checked + label:before { + background-color: var(--ui-blue-1) !important; + color: var(--ui-blue-1) !important; + border: 1px solid var(--ui-blue-1) !important; +} + +.md-checkbox input[type='checkbox']:checked + .checkmark { + border-color: var(--grey-6); + background-color: var(--bg-checkbox); +} + +/* Slider */ + +.rzslider .rz-pointer { + background-color: var(--white-color); + border: 3px solid var(--ui-blue-1); + width: 25px; + height: 25px; + top: -10px; +} + +.rzslider .rz-bar { + background-color: var(--ui-grey-1); + height: 8px; + border-radius: 5px; +} + +.rzslider .rz-selection { + background-color: var(--ui-blue-1); +} + +.rzslider .rz-pointer:after { + display: none; +} + +/* Datatable */ + +.datatable .searchBar { + border: 1px solid var(--border-searchbar); + padding: 5px; + background: var(--bg-searchbar) !important; + border-radius: 5px; +} + +.datatable .searchBar input[type='text'] { + border: 0px !important; +} + +.datatable .toolBar { + border-radius: 8px; +} + +.datatable .footer { + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + padding-bottom: 10px; +} + +.datatable .toolBar { + padding-top: 20px !important; + padding-bottom: 20px !important; +} + +.toolBar { + display: flex; + flex-direction: row; +} + +.toolBar > .toolBarTitle { + flex: auto; +} + +.toolBar > .searchBar { + flex: right; + margin-right: 10px; + width: 500px; + height: 30px; +} + +.datatable .searchBar { + padding: 4px 10px !important; + font-size: 14px; +} + +.toolBar > .actionBar { + flex: right; + margin-right: 10px; +} + +.datatable .actionBar { + padding: 0px !important; +} + +.toolBar > .settings { + width: 60px; +} + +.datatable .toolBar .settings { + margin-right: 5px !important; +} + +/* Widget */ + +.widget .widget-icon i { + color: var(--ui-blue-1); +} + +.widget .widget-body table thead { + border-top: 1px solid var(--border-table-color); +} + +/* Button Group */ +.input-group-addon:first-child { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} + +.input-group .form-control:not(:first-child):not(:last-child) { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} + +.input-group-btn:last-child .btn { + margin-left: 5px; + border-radius: 5px; +} + +.form-control { + border-radius: 5px; +} + +.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { + background-color: var(--bg-button-group); + border: 1px solid var(--border-button-group); + color: var(--text-button-group); +} + +.btn-group .btn-light { + background-color: var(--bg-button-group); + border: 1px solid var(--border-button-group); + color: var(--text-button-group); +} + +.btn-group .btn-dangerlight { + background-color: var(--ui-red-2); + border: 1px solid var(--border-button-group); + color: var(--ui-red-1); +} + +.btn.active { + box-shadow: none; +} + +/* Toaster */ + +#toast-container > .toast-success { + background-image: url(../images/icon-success.svg) !important; + background-position: top 20px left 20px; +} + +#toast-container > .toast-error { + background-image: url(../images/icon-error.svg) !important; + background-position: top 20px left 20px; +} + +#toast-container > .toast-warning { + background-image: url(../images/icon-warning.svg) !important; +} + +.toast-success .toast-progress { + background-color: var(--ui-green-1); +} +.toast-warning .toast-progress { + background-color: var(--ui-yellow); +} +.toast-error .toast-progress { + background-color: var(--ui-red-1); +} + +#toast-container > div { + color: var(--ui-grey-4); + background-color: var(--white-color); + border-radius: 8px; + padding: 20px 20px 20px 80px; + width: 300px; + opacity: 1; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + filter: alpha(opacity=100); +} + +#toast-container > div:hover { + -moz-box-shadow: 0 0 12px var(--ui-grey-4); + -webkit-box-shadow: 0 0 12px var(--ui-grey-4); + box-shadow: 0 0 12px var(--ui-grey-4); +} + +.toast-close-button { + color: var(--black-color); + text-decoration: none; + cursor: pointer; + opacity: 0.4; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); + filter: alpha(opacity=40); +} + +.toast-close-button:hover, +.toast-close-button:focus { + color: var(--black-color); + text-decoration: none; + cursor: pointer; + opacity: 0.6; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); + filter: alpha(opacity=60); +} + +.toast-title { + color: var(--black-color); + padding: 10px 0px; +} + +/* Modal */ + +.modal-dialog { + width: 450px; +} + +.modal-content { + padding: 55px 20px 20px 20px; + background-image: url(../images/icon-warning.svg); + background-repeat: no-repeat; + background-position: top 10px left 10px; +} + +.modal-header { + padding: 10px 0px 10px 0px; + border-bottom: none; +} + +.modal-header .close { + margin-top: -40px; +} + +.modal-header .modal-title { + font-weight: bold; +} + +.modal-body { + padding: 10px 0px; + border-bottom: none; +} + +.modal-body .bootbox-body { + font-size: 12px; + color: var(--text-bootbox); +} + +.modal-footer { + padding: 10px 0px; + border-top: none; + display: flex; +} + +.modal-footer .bootbox-cancel { + width: 100%; +} + +.modal-footer .bootbox-accept { + width: 100%; +} + +.bootbox-checkbox-list { + border: 0px; +} + +/* Boxselector */ + +.boxselector_wrapper input[type='radio']:checked + label, +.box-selector-item input[type='radio']:checked + label { + background: var(--ui-blue-3) !important; + color: black !important; + border-radius: 8px; + border-color: var(--ui-blue-4); + padding: 15px; + box-shadow: none; +} + +.boxselector_wrapper input[type='radio']:not(:disabled) + label, +.box-selector-item input[type='radio']:not(:disabled) + label { + background: var(--ui-grey-2); + color: var(--black-color) !important; + border-radius: 8px; + border-color: var(--ui-grey-1); + padding: 15px; + box-shadow: none; +} + +.row.header { + background-color: var(--bg-body-color) !important; + margin-bottom: 5px !important; +} + +/* Databatle Setting Menu */ + +.tableMenu { + border: 1px solid var(--border-bootbox); + border-radius: 8px; +} + +[data-reach-menu-list], +[data-reach-menu-items] { + background: none; +} + +.dropdown-menu { + border-radius: 8px; +} +.dropdown-menu .tableMenu { + border: 0px; +} + +/* Myaccount Dropdown Menu */ + +.myaccount-dropdown { + color: var(--text-body-color); + font-size: 17px; +} + +.myaccount-container { + margin-top: -25px; +} + +.myaccount-icon { + padding-left: 8px; +} + +.myaccount-link { + display: inline; + border: 0px; + background: none; + padding: 10px 0px; +} + +/* Status Indicator Label Style */ +.label { + border-radius: 8px !important; +} + +.label-danger { + background-color: var(--ui-red-1); +} + +.label-success { + background-color: var(--ui-green-1); +} + +/* Feather Icon */ + +.feather { + height: 18px; + width: 18px; + position: relative; + top: 3px; + margin-right: 5px; + color: var(--text-body-color); +} diff --git a/app/assets/css/index.js b/app/assets/css/index.js index 237167ee6..8c510efe3 100644 --- a/app/assets/css/index.js +++ b/app/assets/css/index.js @@ -21,3 +21,4 @@ import './app.css'; import './theme.css'; import './vendor-override.css'; import '../fonts/nomad-icon.css'; +import './bootstrap-override.css'; diff --git a/app/assets/css/rdash.css b/app/assets/css/rdash.css index 072f0880a..f52c20bfc 100644 --- a/app/assets/css/rdash.css +++ b/app/assets/css/rdash.css @@ -94,20 +94,18 @@ /* Fonts */ @font-face { - font-family: 'Montserrat'; - src: url('../fonts/montserrat-regular-webfont.eot'); - src: url('../fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/montserrat-regular-webfont.woff') format('woff'), - url('../fonts/montserrat-regular-webfont.ttf') format('truetype'), url('../fonts/montserrat-regular-webfont.svg#montserratregular') format('svg'); + font-family: 'Inter'; + src: url('../fonts/Inter-VariableFont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio: 0) { @font-face { - font-family: 'Montserrat'; - src: url('../fonts/montserrat-regular-webfont.svg') format('svg'); + font-family: 'Inter'; + src: url('../fonts/Inter-VariableFont.ttf') format('truetype'); } select { - font-family: Arial, Helvetica, sans-serif; + font-family: Inter, Arial, Helvetica, sans-serif; } } /* Base */ @@ -116,7 +114,7 @@ html { } body { background: var(--bg-body-color); - font-family: 'Montserrat'; + font-family: 'Inter'; color: var(--text-body-color) !important; } .row { @@ -172,9 +170,8 @@ div.input-mask { -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); background: var(--bg-widget-color); - border: 1px solid transparent; - border-radius: 2px; - border-color: var(--border-widget-color); + border: 1px solid var(--border-widget); + border-radius: 8px; } .widget .widget-header .pagination, .widget .widget-footer .pagination { @@ -182,9 +179,7 @@ div.input-mask { } .widget .widget-header { color: var(--text-widget-header-color); - background-color: var(--bg-widget-header-color); padding: 10px 15px; - border-bottom: 1px solid var(--border-widget-color); line-height: 30px; } .widget .widget-header i { @@ -192,6 +187,7 @@ div.input-mask { } .widget .widget-body { padding: 20px; + border-radius: 8px; } .widget .widget-body table thead { background: var(--bg-widget-table-color); diff --git a/app/assets/css/theme.css b/app/assets/css/theme.css index 7ddcc596c..b3a48046a 100644 --- a/app/assets/css/theme.css +++ b/app/assets/css/theme.css @@ -1,5 +1,20 @@ /* Color Variable */ -html { +:root { + --ui-blue-1: #0086c9; + --ui-blue-2: #026aa2; + --ui-blue-3: #e0f2fe; + --ui-blue-4: #0ba5ec; + --ui-red-1: #d92d20; + --ui-red-2: #fef3f2; + --ui-green-1: #12b76a; + --ui-yellow: #fdb022; + --ui-grey-1: #d0d5dd; + --ui-grey-2: #f9fafb; + --ui-grey-3: #344054; + --ui-grey-4: #667085; + --ui-grey-5: #101828; + --ui-grey-6: #f2f4f7; + --black-color: #000; --white-color: #fff; @@ -94,11 +109,9 @@ html { --orange-1: #e86925; --BE-only: var(--orange-1); -} -/* Default Theme */ -:root { - --bg-card-color: var(--grey-10); + /* Default Theme */ + --bg-card-color: var(--white-color); --bg-main-color: var(--white-color); --bg-body-color: var(--grey-9); --bg-checkbox-border-color: var(--grey-49); @@ -109,10 +122,10 @@ html { --bg-widget-table-color: var(--grey-13); --bg-header-color: var(--white-color); --bg-hover-table-color: var(--grey-14); - --bg-switch-box-color: var(--white-color); - --bg-input-group-addon-color: var(--grey-11); + --bg-switch-box-color: var(--ui-grey-1); + --bg-input-group-addon-color: var(--ui-grey-6); --bg-btn-default-color: var(--white-color); - --bg-blocklist-hover-color: var(--grey-12); + --bg-blocklist-hover-color: var(--ui-blue-3); --bg-boxselector-color: var(--white-color); --bg-table-color: var(--white-color); --bg-md-checkbox-color: var(--grey-12); @@ -143,6 +156,13 @@ html { --bg-panel-body-color: var(--white-color); --bg-codemirror-color: var(--white-color); --bg-codemirror-selected-color: var(--grey-22); + --bg-tooltip-color: var(--ui-grey-5); + --bg-input-sm-color: var(--white-color); + --bg-service-datatable-thead: var(--grey-23); + --bg-app-datatable-thead: var(--grey-23); + --bg-inner-datatable-thead: var(--grey-23); + --bg-service-datatable-tbody: var(--grey-24); + --bg-app-datatable-tbody: var(--grey-24); --bg-multiselect-color: var(--white-color); --bg-daterangepicker-color: var(--white-color); --bg-calendar-color: var(--white-color); @@ -162,6 +182,10 @@ html { --bg-stepper-item-active: var(--white-color); --bg-stepper-item-counter: var(--grey-61); --bg-sortbutton-color: var(--white-color); + --bg-dashboard-item: var(--ui-blue-3); + --bg-searchbar: var(--ui-grey-2); + --bg-inputbox: var(--ui-grey-2); + --bg-dropdown-hover: var(--ui-grey-6); --text-main-color: var(--grey-7); --text-body-color: var(--grey-6); @@ -193,14 +217,14 @@ html { --text-blocklist-item-selected-color: var(--grey-37); --text-progress-bar-color: var(--grey-27); --text-pagination-color: var(--grey-26); - --text-pagination-span-color: var(--blue-2); + --text-pagination-span-color: var(--ui-grey-6); --text-pagination-span-hover-color: var(--blue-4); --text-ui-select-color: var(--grey-6); --text-ui-select-hover-color: var(--grey-28); --text-summary-color: var(--black-color); - --text-multiselect-button-color: var(--grey-29); - --text-multiselect-item-color: var(--grey-30); + --text-tooltip-color: var(--white-color); --text-sidebar-list-color: var(--grey-56); + --text-rzslider-color: var(--grey-36); --text-rzslider-limit-color: var(--grey-36); --text-daterangepicker-end-date: var(--grey-57); @@ -210,6 +234,7 @@ html { --text-input-autofill-color: var(--black-color); --text-button-hover-color: var(--grey-6); --text-small-select-color: var(--grey-25); + --text-bootbox: var(--ui-grey-4); --border-color: var(--grey-42); --border-widget-color: var(--grey-43); @@ -244,6 +269,9 @@ html { --border-tooltip-color: var(--grey-47); --border-modal: 0px; --border-sortbutton: var(--grey-8); + --border-bootbox: var(--ui-grey-1); + --border-blocklist: var(--ui-grey-1); + --border-widget: var(--ui-grey-1); --hover-sidebar-color: var(--grey-37); --shadow-box-color: 0 3px 10px -2px var(--grey-50); @@ -265,9 +293,13 @@ html { --text-multiselect-item: var(--grey-30); --bg-multiselect-helpercontainer: var(--white-color); --text-input-textarea: var(--white-color); - --bg-service-datatable-thead: var(--grey-23); - --bg-inner-datatable-thead: var(--grey-23); - --bg-service-datatable-tbody: var(--grey-24); + + --border-checkbox: var(--ui-grey-1); + --bg-checkbox: var(--white-color); + --border-searchbar: var(--ui-grey-1); + --bg-button-group: var(--white-color); + --border-button-group: var(--ui-grey-1); + --text-button-group: var(--ui-grey-3); } :root[theme='dark'] { @@ -337,6 +369,10 @@ html { --bg-stepper-item-active: var(--grey-1); --bg-stepper-item-counter: var(--grey-7); --bg-sortbutton-color: var(--grey-1); + --bg-dashboard-item: var(--grey-3); + --bg-searchbar: var(--grey-1); + --bg-inputbox: var(--grey-2); + --bg-dropdown-hover: var(--grey-3); --text-main-color: var(--white-color); --text-body-color: var(--white-color); @@ -368,7 +404,7 @@ html { --text-blocklist-item-selected-color: var(--white-color); --text-progress-bar-color: var(--white-color); --text-pagination-color: var(--white-color); - --text-pagination-span-color: var(--blue-2); + --text-pagination-span-color: var(--ui-grey-6); --text-pagination-span-hover-color: var(--white-color); --text-ui-select-color: var(--white-color); --text-ui-select-hover-color: var(--white-color); @@ -385,6 +421,7 @@ html { --text-input-autofill-color: var(--grey-8); --text-button-hover-color: var(--white-color); --text-small-select-color: var(--grey-7); + --text-bootbox: var(--white-color); --border-color: var(--grey-3); --border-widget-color: var(--grey-1); @@ -408,9 +445,7 @@ html { --border-pagination-color: var(--grey-3); --border-pagination-span-color: var(--grey-3); --border-pagination-hover-color: var(--grey-3); - --border-pagination-hover-color: var(--grey-3); - --border-multiselect-button-color: var(--grey-3); - --border-searchbar-color: var(--grey-1); + --border-boxselector-wrapper-hover: 3px solid var(--blue-8); --border-panel-color: var(--grey-2); --border-daterangepicker-color: var(--grey-3); --border-calendar-table: var(--grey-3); @@ -420,6 +455,9 @@ html { --border-tooltip-color: var(--grey-3); --border-modal: 0px; --border-sortbutton: var(--grey-3); + --border-bootbox: var(--ui-grey-3); + --border-blocklist: var(--ui-grey-3); + --border-widget: var(--ui-grey-3); --hover-sidebar-color: var(--grey-3); --blue-color: var(--blue-2); @@ -439,9 +477,13 @@ html { --text-multiselect-item: var(--white-color); --bg-multiselect-helpercontainer: var(--grey-1); --text-input-textarea: var(--grey-1); - --bg-service-datatable-thead: var(--grey-1); - --bg-inner-datatable-thead: var(--grey-1); - --bg-service-datatable-tbody: var(--grey-1); + + --border-checkbox: var(--ui-grey-1); + --bg-checkbox: var(--white-color); + --border-searchbar: var(--ui-grey-1); + --bg-button-group: var(--white-color); + --border-button-group: var(--ui-grey-1); + --text-button-group: var(--ui-grey-3); } :root[theme='highcontrast'] { @@ -465,7 +507,7 @@ html { --bg-motd-body-color: var(--black-color); --bg-blocklist-hover-color: var(--black-color); --bg-blocklist-item-selected-color: var(--black-color); - --bg-input-group-addon-color: var(--grey-1); + --bg-input-group-addon-color: var(--grey-3); --bg-table-color: var(--black-color); --bg-codemirror-gutters-color: var(--black-color); --bg-codemirror-color: var(--black-color); @@ -512,6 +554,9 @@ html { --bg-stepper-item-active: var(--black-color); --bg-stepper-item-counter: var(--grey-3); --bg-sortbutton-color: var(--grey-1); + --bg-inputbox: var(--black-color); + --bg-searchbar: var(--black-color); + --bg-dropdown-hover: var(--black-color); --text-main-color: var(--white-color); --text-body-color: var(--white-color); @@ -554,7 +599,8 @@ html { --text-btn-default-color: var(--white-color); --text-small-select-color: var(--white-color); --text-multiselect-item-color: var(--white-color); - --text-pagination-span-color: var(--blue-2); + --text-pagination-span-color: var(--ui-grey-6); + --text-bootbox: var(--white-color); --border-color: var(--grey-55); --border-widget-color: var(--white-color); @@ -584,6 +630,9 @@ html { --border-modal: 1px solid var(--white-color); --border-blocklist-color: var(--white-color); --border-sortbutton: var(--black-color); + --border-bootbox: var(--black-color); + --border-blocklist: var(--white-color); + --border-widget: var(--white-color); --hover-sidebar-color: var(--blue-9); --hover-sidebar-color: var(--black-color); @@ -605,4 +654,11 @@ html { --text-cm-meta-color: var(--white-color); --text-cm-string-color: var(--red-7); --text-progress-bar-color: var(--black-color); + + --border-checkbox: var(--ui-grey-1); + --bg-checkbox: var(--white-color); + --border-searchbar: var(--ui-grey-1); + --bg-button-group: var(--white-color); + --border-button-group: var(--ui-grey-1); + --text-button-group: var(--ui-grey-3); } diff --git a/app/assets/css/vendor-override.css b/app/assets/css/vendor-override.css index 65adf7942..5ff5823fc 100644 --- a/app/assets/css/vendor-override.css +++ b/app/assets/css/vendor-override.css @@ -1,7 +1,7 @@ /* Overide Vendor CSS */ .form-control { - background-color: var(--bg-main-color) !important; border: 1px solid var(--border-form-control-color); + background-color: var(--bg-inputbox); color: var(--text-form-control-color); } @@ -10,7 +10,7 @@ } .table > thead > tr > th { - border-bottom: 2px solid var(--border-table-color); + border-bottom: 1px solid var(--border-table-color); } .table-hover > tbody > tr:hover { @@ -243,6 +243,10 @@ json-tree .branch-preview { .panel { border: 1px solid var(--border-panel-color); background-color: var(--bg-panel-body-color); + border-radius: 8px; + -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05); + -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05); + box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05); } .theme-information .col-sm-12 { @@ -381,3 +385,10 @@ fieldset[disabled] .btn { .multiSelect.inlineBlock button { margin: 0; } + +.nav-tabs > li.active > a { + border-top: 0px; + border-left: 0px; + border-right: 0px; + border-bottom: 3px solid red; +} diff --git a/app/assets/fonts/Inter-VariableFont.ttf b/app/assets/fonts/Inter-VariableFont.ttf new file mode 100644 index 000000000..969a990fb Binary files /dev/null and b/app/assets/fonts/Inter-VariableFont.ttf differ diff --git a/app/assets/fonts/montserrat-regular-webfont.eot b/app/assets/fonts/montserrat-regular-webfont.eot deleted file mode 100644 index 183869665..000000000 Binary files a/app/assets/fonts/montserrat-regular-webfont.eot and /dev/null differ diff --git a/app/assets/fonts/montserrat-regular-webfont.svg b/app/assets/fonts/montserrat-regular-webfont.svg deleted file mode 100644 index cb48bdafc..000000000 --- a/app/assets/fonts/montserrat-regular-webfont.svg +++ /dev/null @@ -1,1317 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/app/assets/fonts/montserrat-regular-webfont.ttf b/app/assets/fonts/montserrat-regular-webfont.ttf deleted file mode 100644 index 0bdf6e747..000000000 Binary files a/app/assets/fonts/montserrat-regular-webfont.ttf and /dev/null differ diff --git a/app/assets/fonts/montserrat-regular-webfont.woff b/app/assets/fonts/montserrat-regular-webfont.woff deleted file mode 100644 index 38c80488c..000000000 Binary files a/app/assets/fonts/montserrat-regular-webfont.woff and /dev/null differ diff --git a/app/assets/images/icon-error.svg b/app/assets/images/icon-error.svg new file mode 100644 index 000000000..564b5fa63 --- /dev/null +++ b/app/assets/images/icon-error.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/assets/images/icon-success.svg b/app/assets/images/icon-success.svg new file mode 100644 index 000000000..890fe91f5 --- /dev/null +++ b/app/assets/images/icon-success.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/assets/images/icon-warning.svg b/app/assets/images/icon-warning.svg new file mode 100644 index 000000000..8832458d8 --- /dev/null +++ b/app/assets/images/icon-warning.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/azure/Dashboard/DashboardView.test.tsx b/app/azure/Dashboard/DashboardView.test.tsx index bb6810ea2..b8e15473b 100644 --- a/app/azure/Dashboard/DashboardView.test.tsx +++ b/app/azure/Dashboard/DashboardView.test.tsx @@ -24,7 +24,9 @@ test('dashboard items should render correctly', async () => { const subscriptionElements = within(subscriptionsItem); expect(subscriptionElements.getByLabelText('value')).toBeVisible(); - expect(subscriptionElements.getByLabelText('icon')).toHaveClass('fa-th-list'); + expect(subscriptionElements.getByRole('img', { hidden: true })).toHaveClass( + 'fa-th-list' + ); expect(subscriptionElements.getByLabelText('resourceType')).toHaveTextContent( 'Subscriptions' ); @@ -34,7 +36,7 @@ test('dashboard items should render correctly', async () => { const resourceGroupElements = within(resourceGroupsItem); expect(resourceGroupElements.getByLabelText('value')).toBeVisible(); - expect(resourceGroupElements.getByLabelText('icon')).toHaveClass( + expect(resourceGroupElements.getByRole('img', { hidden: true })).toHaveClass( 'fa-th-list' ); expect( diff --git a/app/docker/containers/components/ContainersDatatable/ContainersDatatable.tsx b/app/docker/containers/components/ContainersDatatable/ContainersDatatable.tsx index 8e80699d5..aee2153cb 100644 --- a/app/docker/containers/components/ContainersDatatable/ContainersDatatable.tsx +++ b/app/docker/containers/components/ContainersDatatable/ContainersDatatable.tsx @@ -141,6 +141,14 @@ export function ContainersDatatable({ return ( + + + row.original)} + isAddActionVisible={isAddActionVisible} + endpointId={endpoint.Id} + /> + columns={columnsToHide} @@ -156,16 +164,6 @@ export function ContainersDatatable({ - - row.original)} - isAddActionVisible={isAddActionVisible} - endpointId={endpoint.Id} - /> - - - - - - - - - @@ -51,7 +51,7 @@ Recreate Recreation in progress... - Duplicate/Edit diff --git a/app/index.html b/app/index.html index 8748fde19..a87ff3b6b 100644 --- a/app/index.html +++ b/app/index.html @@ -35,6 +35,7 @@ +
-
{{ $ctrl.titleText }}
+
{{ $ctrl.titleText }}
diff --git a/app/portainer/components/PageHeader/HeaderContent.html b/app/portainer/components/PageHeader/HeaderContent.html index 51b1eb69c..a31ac2848 100644 --- a/app/portainer/components/PageHeader/HeaderContent.html +++ b/app/portainer/components/PageHeader/HeaderContent.html @@ -1,11 +1,3 @@
-
- - my account - - - log out - -
diff --git a/app/portainer/components/PageHeader/HeaderTitle.html b/app/portainer/components/PageHeader/HeaderTitle.html index 0880392ff..703646539 100644 --- a/app/portainer/components/PageHeader/HeaderTitle.html +++ b/app/portainer/components/PageHeader/HeaderTitle.html @@ -1,8 +1,20 @@
{{ $ctrl.titleText }} - - - {{ $ctrl.username }} -
+ + + + + {{ $ctrl.username }} + + + + diff --git a/app/portainer/components/Tip/Tooltip/Tooltip.css b/app/portainer/components/Tip/Tooltip/Tooltip.css index 9c31167e7..df94bcb49 100644 --- a/app/portainer/components/Tip/Tooltip/Tooltip.css +++ b/app/portainer/components/Tip/Tooltip/Tooltip.css @@ -1,10 +1,9 @@ .tooltip.portainer-tooltip .tooltip-inner { - font-family: Montserrat; background-color: var(--bg-tooltip-color); padding: 0.833em 1em; color: var(--text-tooltip-color); - border: 1px solid var(--border-tooltip-color); - border-radius: 0.14285714rem; + border: 1px solid var(--border-tooltip-color) !important; + border-radius: 10px; box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); } diff --git a/app/portainer/components/Tip/Tooltip/TooltipAngular.ts b/app/portainer/components/Tip/Tooltip/TooltipAngular.ts index eb2113474..8fe5c398a 100644 --- a/app/portainer/components/Tip/Tooltip/TooltipAngular.ts +++ b/app/portainer/components/Tip/Tooltip/TooltipAngular.ts @@ -13,9 +13,9 @@ export const TooltipAngular: IComponentOptions = { tooltip-class="portainer-tooltip" uib-tooltip="{{$ctrl.message}}" > - + `, }; diff --git a/app/portainer/components/custom-templates-list/customTemplatesList.html b/app/portainer/components/custom-templates-list/customTemplatesList.html index c8e86978d..9be63c932 100644 --- a/app/portainer/components/custom-templates-list/customTemplatesList.html +++ b/app/portainer/components/custom-templates-list/customTemplatesList.html @@ -2,7 +2,7 @@
-
{{ $ctrl.titleText }}
+
{{ $ctrl.titleText }}
diff --git a/app/portainer/components/datatables/datatable-columns-visibility/datatable-columns-visibility.html b/app/portainer/components/datatables/datatable-columns-visibility/datatable-columns-visibility.html index 7d00beba9..89a5b8f80 100644 --- a/app/portainer/components/datatables/datatable-columns-visibility/datatable-columns-visibility.html +++ b/app/portainer/components/datatables/datatable-columns-visibility/datatable-columns-visibility.html @@ -1,5 +1,5 @@ - Columns +
Show / Hide Columns
diff --git a/app/portainer/components/datatables/datatable.css b/app/portainer/components/datatables/datatable.css index 74c4d26a8..16f56713f 100644 --- a/app/portainer/components/datatables/datatable.css +++ b/app/portainer/components/datatables/datatable.css @@ -1,12 +1,11 @@ .datatable .toolBar { background-color: var(--bg-card-color); - color: var(--text-main-color); overflow: auto; padding: 10px; + font-size: 16px; } .datatable .actionBar { - color: #767676; padding: 10px; } @@ -26,12 +25,11 @@ } .datatable .toolBar .setting-active { - color: #337ab7; + color: var(--ui-blue-4); } .datatable .searchBar { - border-top: 1px solid var(--border-color); - border-bottom: 1px solid var(--border-color); + border: 1px solid var(--border-color); padding: 8px; background: var(--bg-main-color); } @@ -116,7 +114,7 @@ .tableMenu { color: #767676; - padding: 10px; + padding: 15px; background-color: var(--bg-dropdown-menu-color) !important; } @@ -125,11 +123,8 @@ } .tableMenu .menuContent { - border-bottom: 1px solid #777; font-size: 12px; margin: 10px 0; - max-height: 140px; - overflow-y: auto; } .tableMenu .menuContent .md-radio:first-child { diff --git a/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html b/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html index 107309c53..b50b99e47 100644 --- a/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html +++ b/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html @@ -3,10 +3,45 @@
{{ $ctrl.titleText }}
+
+ + +
+
+ + +
- Settings +
Table settings
@@ -43,41 +78,7 @@
-
- - -
-
- - -
+
diff --git a/app/portainer/components/datatables/titlebar/datatable-titlebar.html b/app/portainer/components/datatables/titlebar/datatable-titlebar.html index a56ff1aff..3570f74b0 100644 --- a/app/portainer/components/datatables/titlebar/datatable-titlebar.html +++ b/app/portainer/components/datatables/titlebar/datatable-titlebar.html @@ -1,7 +1,7 @@
- - {{ $ctrl.title }} + + {{ $ctrl.title }}
diff --git a/app/portainer/components/datatables/titlebar/index.js b/app/portainer/components/datatables/titlebar/index.js index 43dd588f7..c34989d1b 100644 --- a/app/portainer/components/datatables/titlebar/index.js +++ b/app/portainer/components/datatables/titlebar/index.js @@ -3,6 +3,7 @@ export const datatableTitlebar = { icon: '@', title: '@', feature: '@', + featherIcon: '<', }, templateUrl: './datatable-titlebar.html', }; diff --git a/app/portainer/components/widget/rd-widget-title.ts b/app/portainer/components/widget/rd-widget-title.ts index 8bab12f0a..84638d00f 100644 --- a/app/portainer/components/widget/rd-widget-title.ts +++ b/app/portainer/components/widget/rd-widget-title.ts @@ -3,6 +3,7 @@ export const rdWidgetTitle = { bindings: { titleText: '@', icon: '@', + featherIcon: '<', classes: '@?', }, transclude: { @@ -12,7 +13,7 @@ export const rdWidgetTitle = {
- + {{ $ctrl.titleText }} diff --git a/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsItem.tsx b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsItem.tsx index 3992dae56..fba65790d 100644 --- a/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsItem.tsx +++ b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsItem.tsx @@ -1,15 +1,21 @@ -import clsx from 'clsx'; import { PropsWithChildren } from 'react'; -interface Props { +import { Icon, IconProps } from '@/react/components/Icon'; + +interface Props extends IconProps { value: string | number; icon: string; } -export function Stat({ value, icon, children }: PropsWithChildren) { +export function Stat({ + value, + icon, + children, + featherIcon, +}: PropsWithChildren) { return ( -