diff --git a/app/assets/css/button.css b/app/assets/css/button.css index 0aece2a15..547d9fdc0 100644 --- a/app/assets/css/button.css +++ b/app/assets/css/button.css @@ -29,43 +29,79 @@ fieldset[disabled] .btn { } .btn.btn-primary { - @apply border-blue-8 bg-blue-8 text-white; - @apply hover:border-blue-9 hover:bg-blue-9 hover:text-white; - @apply th-dark:hover:border-blue-7 th-dark:hover:bg-blue-7; + @apply border-graphite-700 bg-graphite-700 text-mist-100; + @apply hover:border-graphite-700/90 hover:bg-graphite-700/90 hover:text-mist-100; + @apply focus:border-blue-5 focus:shadow-graphite-700/80 focus:text-mist-100; + + @apply th-dark:border-mist-100 th-dark:bg-mist-100 th-dark:text-graphite-700; + @apply th-dark:hover:border-mist-100/90 th-dark:hover:bg-mist-100/90 th-dark:hover:text-graphite-700; + @apply th-dark:focus:border-blue-5 th-dark:focus:shadow-white/80 th-dark:focus:text-graphite-700; + + @apply th-highcontrast:border-mist-100 th-highcontrast:bg-mist-100 th-highcontrast:text-graphite-700; + @apply th-highcontrast:hover:border-mist-100/90 th-highcontrast:hover:bg-mist-100/90 th-highcontrast:hover:text-graphite-700; + @apply th-highcontrast:focus:border-blue-5 th-highcontrast:focus:shadow-white/80 th-highcontrast:focus:text-graphite-700; +} + +/* Sidebar background is always dark, so we need to override the primary button styles */ +.btn.btn-primary.sidebar { + @apply border-mist-100 bg-mist-100 text-graphite-700; + @apply hover:border-mist-100/90 hover:bg-mist-100/90 hover:text-graphite-700; + @apply focus:border-blue-5 focus:shadow-white/80 focus:text-graphite-700; } .btn.btn-primary:active, .btn.btn-primary.active, .open > .dropdown-toggle.btn-primary { - @apply border-blue-5 bg-blue-9; + @apply border-graphite-700/80 bg-graphite-700 text-mist-100; + @apply th-dark:border-white/80 th-dark:bg-mist-100 th-dark:text-graphite-700; + @apply th-highcontrast:border-white/80 th-highcontrast:bg-mist-100 th-highcontrast:text-graphite-700; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { - @apply bg-blue-8; + @apply bg-graphite-700 text-mist-100; + @apply th-dark:bg-mist-100 th-dark:text-graphite-700; + @apply th-highcontrast:bg-mist-100 th-highcontrast:text-graphite-700; } /* Button Secondary */ .btn.btn-secondary { @apply border border-solid; - @apply border-blue-8 bg-blue-2 text-blue-9; - @apply hover:bg-blue-3; + @apply border-graphite-700 bg-mist-100 text-graphite-700; + @apply hover:border-graphite-700 hover:bg-graphite-700/10 hover:text-graphite-700; + @apply focus:border-blue-5 focus:shadow-graphite-700/20 focus:text-graphite-700; - @apply th-dark:border-blue-7 th-dark:bg-gray-10 th-dark:text-blue-3; - @apply th-dark:hover:bg-blue-11; + @apply th-dark:border-mist-100 th-dark:bg-graphite-700 th-dark:text-mist-100; + @apply th-dark:hover:border-mist-100 th-dark:hover:bg-mist-100/20 th-dark:hover:text-mist-100; + @apply th-dark:focus:border-blue-5 th-dark:focus:shadow-white/80 th-dark:focus:text-mist-100; + + @apply th-highcontrast:border-mist-100 th-highcontrast:bg-graphite-700 th-highcontrast:text-mist-100; + @apply th-highcontrast:hover:border-mist-100 th-highcontrast:hover:bg-mist-100/20 th-highcontrast:hover:text-mist-100; + @apply th-highcontrast:focus:border-blue-5 th-highcontrast:focus:shadow-white/80 th-highcontrast:focus:text-mist-100; +} + +.btn.btn-secondary:active, +.btn.btn-secondary.active, +.open > .dropdown-toggle.btn-secondary { + @apply border-graphite-700 bg-graphite-700/10 text-graphite-700; + @apply th-dark:border-mist-100 th-dark:bg-mist-100/20 th-dark:text-mist-100; + @apply th-highcontrast:border-mist-100 th-highcontrast:bg-mist-100/20 th-highcontrast:text-mist-100; } .btn.btn-danger { @apply border-error-8 bg-error-8; @apply hover:border-error-7 hover:bg-error-7 hover:text-white; + @apply focus:border-blue-5 focus:shadow-error-8/20 focus:text-white; + @apply th-dark:focus:border-blue-5 th-dark:focus:shadow-white/80 th-dark:focus:text-white; + @apply th-highcontrast:focus:border-blue-5 th-highcontrast:focus:shadow-white/80 th-highcontrast:focus:text-white; } .btn.btn-danger:active, .btn.btn-danger.active, .open > .dropdown-toggle.btn-danger { - @apply border-blue-5 bg-error-8 text-white; + @apply border-error-5 bg-error-8 text-white; } .btn.btn-dangerlight { @@ -74,6 +110,10 @@ fieldset[disabled] .btn { @apply hover:bg-error-2 th-dark:hover:bg-error-11; @apply border-error-5 th-highcontrast:border-error-7 th-dark:border-error-7; @apply border border-solid; + + @apply focus:border-blue-5 focus:shadow-error-8/20 focus:text-error-9; + @apply th-dark:focus:border-blue-5 th-dark:focus:shadow-white/80 th-dark:focus:text-white; + @apply th-highcontrast:focus:border-blue-5 th-highcontrast:focus:shadow-white/80; } .btn.btn-icon.btn-dangerlight { @apply hover:text-error-11 th-dark:hover:text-error-7; @@ -90,15 +130,18 @@ fieldset[disabled] .btn { /* secondary-grey */ .btn.btn-default, .btn.btn-light { - @apply border-gray-5 bg-white text-gray-7; - @apply hover:border-gray-5 hover:bg-gray-3 hover:text-gray-9; + @apply border-gray-5 bg-white text-gray-8; + @apply hover:border-gray-5 hover:bg-gray-3 hover:text-gray-10; + @apply focus:border-blue-5 focus:shadow-graphite-700/20 focus:text-gray-8; /* dark mode */ @apply th-dark:border-gray-warm-7 th-dark:bg-gray-iron-10 th-dark:text-gray-warm-4; @apply th-dark:hover:border-gray-6 th-dark:hover:bg-gray-iron-9 th-dark:hover:text-gray-warm-4; + @apply th-dark:focus:border-blue-5 th-dark:focus:shadow-white/80 th-dark:focus:text-gray-warm-4; @apply th-highcontrast:border-gray-2 th-highcontrast:bg-black th-highcontrast:text-white; @apply th-highcontrast:hover:border-gray-6 th-highcontrast:hover:bg-gray-9 th-highcontrast:hover:text-gray-warm-4; + @apply th-highcontrast:focus:border-blue-5 th-highcontrast:focus:shadow-white/80 th-highcontrast:focus:text-white; } .btn.btn-light:active, @@ -119,42 +162,17 @@ fieldset[disabled] .btn { .input-group-btn .btn.active, .btn-group .btn.active { - @apply border-blue-5 bg-blue-2 text-blue-10; - @apply th-dark:border-blue-9 th-dark:bg-blue-11 th-dark:text-blue-2; -} - -/* focus */ - -.btn.btn-primary:focus, -.btn.btn-secondary:focus, -.btn.btn-light:focus { - @apply border-blue-5; -} - -.btn.btn-danger:focus, -.btn.btn-dangerlight:focus { - @apply border-blue-6; -} - -.btn.btn-primary:focus, -.btn.btn-secondary:focus, -.btn.btn-light:focus, -.btn.btn-danger:focus, -.btn.btn-dangerlight:focus { - --btn-focus-color: var(--ui-blue-3); - box-shadow: 0px 0px 0px 4px var(--btn-focus-color); + @apply border-graphite-700/80 bg-graphite-700 text-mist-100; + @apply th-dark:border-white/80 th-dark:bg-mist-100 th-dark:text-graphite-700; + @apply th-highcontrast:border-white/80 th-highcontrast:bg-mist-100 th-highcontrast:text-graphite-700; } .btn.btn-icon:focus { box-shadow: none !important; } -[theme='dark'] .btn.btn-primary:focus, -[theme='dark'] .btn.btn-secondary:focus, -[theme='dark'] .btn.btn-light:focus, -[theme='dark'] .btn.btn-danger:focus, -[theme='dark'] .btn.btn-dangerlight:focus { - --btn-focus-color: var(--ui-blue-11); +.btn:focus { + box-shadow: 0px 0px 0px 2px var(--tw-shadow-color); } a.no-link, diff --git a/app/assets/css/colors.json b/app/assets/css/colors.json index 55f2922e5..94d3c2015 100644 --- a/app/assets/css/colors.json +++ b/app/assets/css/colors.json @@ -1,6 +1,31 @@ { "black": "#000000", "white": "#ffffff", + "graphite": { + "10": "#f5f5f6", + "50": "#e5e6e8", + "100": "#ced0d3", + "200": "#abafb5", + "300": "#7b8089", + "400": "#5c6066", + "500": "#484a4e", + "600": "#3a3b3f", + "700": "#2e2f33", + "800": "#222326", + "900": "#161719" + }, + "mist": { + "50": "#fcfbfa", + "100": "#f7f6f3", + "200": "#f0f0ec", + "300": "#e8e7e2", + "400": "#e2e1db", + "500": "#d9d8d2", + "600": "#ceccc4", + "700": "#bebcb4", + "800": "#a7a6a0", + "900": "#8b8983" + }, "gray": { "1": "#fcfcfd", "2": "#f9fafb", diff --git a/app/assets/css/theme.css b/app/assets/css/theme.css index eb2d36882..318e0d9e4 100644 --- a/app/assets/css/theme.css +++ b/app/assets/css/theme.css @@ -3,6 +3,16 @@ --black-color: var(--ui-black); --white-color: var(--ui-white); + --graphite-600: #3a3b3f; + --graphite-700: #2e2f33; + --graphite-800: #222326; + --graphite-900: #161719; + + --mist-50: #fcfbfa; + --mist-100: #f7f6f3; + --mist-200: #f0f0ec; + --mist-300: #e8e7e2; + --grey-1: #212121; --grey-2: #181818; --grey-3: #383838; @@ -58,6 +68,8 @@ --grey-58: #ebf4f8; --grey-59: #e6e6e6; --grey-61: rgb(231, 231, 231); + --grey-62: #fdfdfd; + --grey-63: #121212; --blue-1: #219; --blue-2: #337ab7; @@ -99,17 +111,16 @@ /* Default Theme */ --bg-card-color: var(--white-color); --bg-main-color: var(--white-color); - --bg-body-color: var(--grey-9); + --bg-body-color: var(--grey-62); --bg-checkbox-border-color: var(--grey-49); - --bg-sidebar-color: var(--ui-blue-10); - --bg-sidebar-nav-color: var(--ui-blue-11); + --bg-sidebar-color: var(--graphite-700); + --bg-sidebar-nav-color: var(--graphite-600); --bg-widget-color: var(--white-color); --bg-widget-header-color: var(--grey-10); --bg-widget-table-color: var(--ui-gray-3); --bg-header-color: var(--white-color); --bg-hover-table-color: var(--grey-14); --bg-input-group-addon-color: var(--ui-gray-3); - --bg-btn-default-color: var(--ui-blue-10); --bg-blocklist-hover-color: var(--ui-blue-2); --bg-table-color: var(--white-color); --bg-md-checkbox-color: var(--grey-12); @@ -128,7 +139,8 @@ --border-pagination-color: var(--ui-white); --bg-pagination-span-color: var(--white-color); --bg-pagination-hover-color: var(--ui-blue-3); - --bg-motd-body-color: var(--grey-20); + --bg-motd-body-color: var(--mist-50); + --bg-motd-btn-color: var(--graphite-700); --bg-item-highlighted-color: var(--grey-21); --bg-item-highlighted-null-color: var(--grey-14); --bg-panel-body-color: var(--white-color); @@ -144,8 +156,6 @@ --bg-daterangepicker-in-range: var(--grey-58); --bg-daterangepicker-active: var(--blue-14); --bg-input-autofill-color: var(--bg-inputbox); - --bg-btn-default-hover-color: var(--ui-blue-9); - --bg-btn-focus: var(--grey-59); --bg-small-select-color: var(--white-color); --bg-stepper-item-active: var(--white-color); --bg-stepper-item-counter: var(--grey-61); @@ -177,7 +187,6 @@ --text-navtabs-color: var(--grey-7); --text-navtabs-hover-color: var(--grey-6); --text-nav-tab-active-color: var(--grey-25); - --text-dropdown-menu-color: var(--grey-6); --text-log-viewer-color: var(--black-color); --text-json-tree-color: var(--blue-3); @@ -189,6 +198,8 @@ --text-pagination-color: var(--grey-26); --text-pagination-span-color: var(--grey-3); --text-pagination-span-hover-color: var(--grey-3); + --text-motd-body-color: var(--black-color); + --text-motd-btn-color: var(--mist-100); --text-summary-color: var(--black-color); --text-tooltip-color: var(--white-color); --text-rzslider-color: var(--grey-36); @@ -203,6 +214,7 @@ --text-button-group-color: var(--ui-gray-9); --text-button-dangerlight-color: var(--ui-error-5); --text-stepper-active-color: var(--ui-blue-8); + --border-color: var(--grey-42); --border-widget-color: var(--grey-43); --border-sidebar-color: var(--ui-blue-9); @@ -218,7 +230,8 @@ --border-pre-color: var(--grey-43); --border-pagination-span-color: var(--ui-white); --border-pagination-hover-color: var(--ui-white); - --border-panel-color: var(--white-color); + --border-motd-body-color: var(--mist-300); + --border-panel-color: var(--mist-300); --border-input-sm-color: var(--grey-47); --border-daterangepicker-color: var(--grey-19); --border-calendar-table: var(--white-color); @@ -265,8 +278,7 @@ --text-log-viewer-color-json-red: var(--text-log-viewer-color); --text-log-viewer-color-json-blue: var(--text-log-viewer-color); - --bg-body-color: var(--grey-2); - --bg-btn-default-color: var(--grey-3); + --bg-body-color: var(--grey-63); --bg-blocklist-hover-color: var(--ui-gray-iron-10); --bg-blocklist-item-selected-color: var(--ui-gray-iron-10); --bg-card-color: var(--grey-1); @@ -274,8 +286,6 @@ --bg-code-color: var(--grey-2); --bg-dropdown-menu-color: var(--ui-gray-warm-8); --bg-main-color: var(--grey-2); - --bg-sidebar-color: var(--grey-1); - --bg-sidebar-nav-color: var(--grey-2); --bg-widget-color: var(--grey-1); --bg-widget-header-color: var(--grey-3); --bg-widget-table-color: var(--grey-3); @@ -296,7 +306,8 @@ --bg-pagination-color: var(--grey-3); --bg-pagination-span-color: var(--grey-1); --bg-pagination-hover-color: var(--grey-3); - --bg-motd-body-color: var(--grey-1); + --bg-motd-body-color: var(--graphite-800); + --bg-motd-btn-color: var(--mist-100); --bg-item-highlighted-color: var(--grey-2); --bg-item-highlighted-null-color: var(--grey-2); --bg-panel-body-color: var(--grey-1); @@ -316,8 +327,6 @@ --bg-daterangepicker-in-range: var(--ui-gray-warm-11); --bg-daterangepicker-active: var(--blue-14); --bg-input-autofill-color: var(--bg-inputbox); - --bg-btn-default-hover-color: var(--grey-4); - --bg-btn-focus: var(--grey-3); --bg-small-select-color: var(--grey-2); --bg-stepper-item-active: var(--grey-1); --bg-stepper-item-counter: var(--grey-7); @@ -348,7 +357,6 @@ --text-navtabs-color: var(--grey-8); --text-navtabs-hover-color: var(--grey-9); --text-nav-tab-active-color: var(--white-color); - --text-dropdown-menu-color: var(--white-color); --text-log-viewer-color: var(--white-color); --text-json-tree-color: var(--grey-40); @@ -360,6 +368,8 @@ --text-pagination-color: var(--white-color); --text-pagination-span-color: var(--ui-white); --text-pagination-span-hover-color: var(--ui-white); + --text-motd-body-color: var(--mist-100); + --text-motd-btn-color: var(--graphite-700); --text-summary-color: var(--white-color); --text-tooltip-color: var(--white-color); --text-rzslider-color: var(--white-color); @@ -374,6 +384,7 @@ --text-button-group-color: var(--ui-white); --text-button-dangerlight-color: var(--ui-error-7); --text-stepper-active-color: var(--ui-white); + --border-color: var(--grey-3); --border-widget-color: var(--grey-1); --border-sidebar-color: var(--ui-gray-8); @@ -391,6 +402,7 @@ --border-blocklist-item-selected-color: var(--grey-31); --border-pagination-span-color: var(--grey-1); --border-pagination-hover-color: var(--grey-3); + --border-motd-body-color: var(--graphite-800); --border-panel-color: var(--grey-2); --border-input-sm-color: var(--grey-3); --border-daterangepicker-color: var(--grey-3); @@ -450,6 +462,7 @@ --bg-panel-body-color: var(--black-color); --bg-dropdown-menu-color: var(--ui-gray-warm-8); --bg-motd-body-color: var(--black-color); + --bg-motd-btn-color: var(--white-color); --bg-blocklist-hover-color: var(--black-color); --bg-blocklist-item-selected-color: var(--black-color); --bg-input-group-addon-color: var(--grey-3); @@ -481,11 +494,8 @@ --bg-navtabs-hover-color: var(--grey-3); --bg-nav-tab-active-color: var(--ui-black); - --bg-btn-default-color: var(--black-color); --bg-input-autofill-color: var(--bg-inputbox); --bg-code-color: var(--ui-black); - --bg-btn-default-hover-color: var(--grey-4); - --bg-btn-focus: var(--black-color); --bg-small-select-color: var(--black-color); --bg-stepper-item-active: var(--black-color); --bg-stepper-item-counter: var(--grey-3); @@ -523,6 +533,8 @@ --text-daterangepicker-end-date: var(--ui-white); --text-daterangepicker-in-range: var(--white-color); --text-daterangepicker-active: var(--white-color); + --text-motd-body-color: var(--white-color); + --text-motd-btn-color: var(--black-color); --text-json-tree-color: var(--white-color); --text-json-tree-leaf-color: var(--white-color); --text-json-tree-branch-preview-color: var(--white-color); @@ -553,6 +565,7 @@ --border-input-sm-color: var(--white-color); --border-pagination-color: var(--grey-1); --border-pagination-span-color: var(--grey-1); + --border-motd-body-color: var(--white-color); --border-daterangepicker-color: var(--white-color); --border-calendar-table: var(--black-color); --border-daterangepicker: var(--black-color); diff --git a/app/assets/css/vendor-override.css b/app/assets/css/vendor-override.css index 74fa94d4e..12e0fc947 100644 --- a/app/assets/css/vendor-override.css +++ b/app/assets/css/vendor-override.css @@ -201,8 +201,18 @@ pre { background-color: var(--bg-progress-color); } -.motd-body { - background-color: var(--bg-motd-body-color) !important; +.widget-body.motd-body { + border: 1px solid var(--border-motd-body-color); + color: var(--text-motd-body-color); + background: var(--bg-motd-body-color) url(../images/purple-gradient.svg) top right / 40% no-repeat; +} + +.widget-body.motd-body .btn.btn-link, +.widget-body.motd-body .btn.btn-link:hover { + padding: 0 5px 0 4px; + border-radius: 4px; + background-color: var(--bg-motd-btn-color); + color: var(--text-motd-btn-color); } .panel-body { @@ -408,14 +418,10 @@ input:-webkit-autofill { } .sidebar.tippy-box[data-placement^='right'] > .tippy-arrow:before { - border-right: 8px solid var(--ui-blue-9); + border-right: 8px solid var(--graphite-600); border-width: 6px 8px 6px 0; } -[theme='dark'] .sidebar.tippy-box[data-placement^='right'] > .tippy-arrow:before { - border-right: 8px solid var(--ui-gray-true-9); -} - [theme='highcontrast'] .sidebar.tippy-box[data-placement^='right'] > .tippy-arrow:before { border-right: 8px solid var(--ui-white); } diff --git a/app/assets/ico/android-chrome-192x192.png b/app/assets/ico/android-chrome-192x192.png index 8f31e405a..236db0e2b 100644 Binary files a/app/assets/ico/android-chrome-192x192.png and b/app/assets/ico/android-chrome-192x192.png differ diff --git a/app/assets/ico/android-chrome-256x256.png b/app/assets/ico/android-chrome-256x256.png index cc95d0044..52848e019 100644 Binary files a/app/assets/ico/android-chrome-256x256.png and b/app/assets/ico/android-chrome-256x256.png differ diff --git a/app/assets/ico/apple-touch-icon.png b/app/assets/ico/apple-touch-icon.png index aeea31ce8..f05e9c161 100644 Binary files a/app/assets/ico/apple-touch-icon.png and b/app/assets/ico/apple-touch-icon.png differ diff --git a/app/assets/ico/favicon-16x16.png b/app/assets/ico/favicon-16x16.png index f7a26b564..8c60e5d9f 100644 Binary files a/app/assets/ico/favicon-16x16.png and b/app/assets/ico/favicon-16x16.png differ diff --git a/app/assets/ico/favicon-32x32.png b/app/assets/ico/favicon-32x32.png index d1ccc9cea..8735718a2 100644 Binary files a/app/assets/ico/favicon-32x32.png and b/app/assets/ico/favicon-32x32.png differ diff --git a/app/assets/ico/favicon.ico b/app/assets/ico/favicon.ico index 28ed661f9..066969400 100644 Binary files a/app/assets/ico/favicon.ico and b/app/assets/ico/favicon.ico differ diff --git a/app/assets/ico/logomark.svg b/app/assets/ico/logomark.svg index b7679d482..140c1b494 100644 --- a/app/assets/ico/logomark.svg +++ b/app/assets/ico/logomark.svg @@ -1,35 +1,12 @@ - - - - - - - - - - - - - - - - - + + + + + - - - - - - - - - - - - - - + + + diff --git a/app/assets/ico/mstile-150x150.png b/app/assets/ico/mstile-150x150.png index 5e7eb6873..f48374538 100644 Binary files a/app/assets/ico/mstile-150x150.png and b/app/assets/ico/mstile-150x150.png differ diff --git a/app/assets/ico/safari-pinned-tab.svg b/app/assets/ico/safari-pinned-tab.svg index 79ce7b6fa..d0509a572 100644 --- a/app/assets/ico/safari-pinned-tab.svg +++ b/app/assets/ico/safari-pinned-tab.svg @@ -1 +1,6 @@ - \ No newline at end of file + + + + + + \ No newline at end of file diff --git a/app/assets/images/logo.png b/app/assets/images/logo.png deleted file mode 100644 index 2e46594f2..000000000 Binary files a/app/assets/images/logo.png and /dev/null differ diff --git a/app/assets/images/logo_alt.png b/app/assets/images/logo_alt.png deleted file mode 100644 index a6c6707ca..000000000 Binary files a/app/assets/images/logo_alt.png and /dev/null differ diff --git a/app/assets/images/logo_alt.svg b/app/assets/images/logo_alt.svg index 90e164ca1..8d254e4e5 100644 --- a/app/assets/images/logo_alt.svg +++ b/app/assets/images/logo_alt.svg @@ -1,60 +1,14 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/app/assets/images/logo_alt_black.svg b/app/assets/images/logo_alt_black.svg new file mode 100644 index 000000000..d9243b464 --- /dev/null +++ b/app/assets/images/logo_alt_black.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/app/assets/images/logo_ico.png b/app/assets/images/logo_ico.png deleted file mode 100644 index b4bfd2924..000000000 Binary files a/app/assets/images/logo_ico.png and /dev/null differ diff --git a/app/assets/images/logo_small.png b/app/assets/images/logo_small.png deleted file mode 100644 index 76d3a46b0..000000000 Binary files a/app/assets/images/logo_small.png and /dev/null differ diff --git a/app/assets/images/logo_small_alt.png b/app/assets/images/logo_small_alt.png deleted file mode 100644 index a5bc64771..000000000 Binary files a/app/assets/images/logo_small_alt.png and /dev/null differ diff --git a/app/assets/images/purple-gradient.svg b/app/assets/images/purple-gradient.svg new file mode 100644 index 000000000..0b3bc7160 --- /dev/null +++ b/app/assets/images/purple-gradient.svg @@ -0,0 +1,522 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/index.html b/app/index.html index 370070b48..52b9b5d10 100644 --- a/app/index.html +++ b/app/index.html @@ -20,7 +20,7 @@ - + @@ -47,7 +47,10 @@
- +
+ + +
diff --git a/app/portainer/views/auth/auth.html b/app/portainer/views/auth/auth.html index 09dadf050..2504141a7 100644 --- a/app/portainer/views/auth/auth.html +++ b/app/portainer/views/auth/auth.html @@ -4,7 +4,10 @@
- +
+ + +
diff --git a/app/portainer/views/init/admin/initAdmin.html b/app/portainer/views/init/admin/initAdmin.html index b5cfcfeb4..afff165b2 100644 --- a/app/portainer/views/init/admin/initAdmin.html +++ b/app/portainer/views/init/admin/initAdmin.html @@ -5,7 +5,10 @@
- +
+ + +
diff --git a/app/portainer/views/logout/logout.html b/app/portainer/views/logout/logout.html index fe9b2513d..95299d5d0 100644 --- a/app/portainer/views/logout/logout.html +++ b/app/portainer/views/logout/logout.html @@ -4,7 +4,10 @@
- +
+ + +
diff --git a/app/react/components/InformationPanel.tsx b/app/react/components/InformationPanel.tsx index b5c9dafc9..f25afadba 100644 --- a/app/react/components/InformationPanel.tsx +++ b/app/react/components/InformationPanel.tsx @@ -19,7 +19,7 @@ export function InformationPanel({ children, }: PropsWithChildren) { return ( - +
{title && ( diff --git a/app/react/portainer/account/AccountView/theme-options.tsx b/app/react/portainer/account/AccountView/theme-options.tsx index c76ddaa2f..21c1d00d9 100644 --- a/app/react/portainer/account/AccountView/theme-options.tsx +++ b/app/react/portainer/account/AccountView/theme-options.tsx @@ -7,28 +7,24 @@ export const options = [ id: 'light', icon: , label: 'Light Theme', - description: 'Default color mode', value: 'light', }, { id: 'dark', icon: , label: 'Dark Theme', - description: 'Dark color mode', value: 'dark', }, { id: 'highcontrast', icon: , label: 'High Contrast', - description: 'High contrast color mode', value: 'highcontrast', }, { id: 'auto', icon: , - label: 'Auto', - description: 'Sync with system theme', + label: 'System Theme', value: 'auto', }, ]; diff --git a/app/react/sidebar/EnvironmentSidebar.module.css b/app/react/sidebar/EnvironmentSidebar.module.css index 56165048c..2400d635a 100644 --- a/app/react/sidebar/EnvironmentSidebar.module.css +++ b/app/react/sidebar/EnvironmentSidebar.module.css @@ -1,12 +1,11 @@ .root { background-color: var(--bg-sidebar-nav-color); - border-color: var(--border-sidebar-color); } .closeBtn { - background-color: var(--bg-btn-default-color); + background-color: transparent; } .closeBtn:hover { - background-color: var(--bg-btn-default-hover-color); + background-color: var(--graphite-500); } diff --git a/app/react/sidebar/EnvironmentSidebar.tsx b/app/react/sidebar/EnvironmentSidebar.tsx index 2e51b449c..bea5f86c1 100644 --- a/app/react/sidebar/EnvironmentSidebar.tsx +++ b/app/react/sidebar/EnvironmentSidebar.tsx @@ -36,7 +36,7 @@ export function EnvironmentSidebar() { } return ( -
+
{environment ? ( ) : ( @@ -151,7 +151,7 @@ function Title({ environment, onClear }: TitleProps) { onClick={onClear} className={clsx( styles.closeBtn, - 'ml-auto mr-2 flex h-5 w-5 items-center justify-center rounded border-0 p-1 text-sm text-gray-5 transition-colors duration-200 hover:text-white be:text-gray-6 be:hover:text-white' + 'ml-auto mr-2 flex h-5 w-5 items-center justify-center rounded border-0 p-1 text-sm text-white transition-colors duration-200' )} > diff --git a/app/react/sidebar/Footer/Footer.tsx b/app/react/sidebar/Footer/Footer.tsx index 0c6636a3e..7374857c5 100644 --- a/app/react/sidebar/Footer/Footer.tsx +++ b/app/react/sidebar/Footer/Footer.tsx @@ -7,7 +7,6 @@ import { UpdateNotification } from './UpdateNotifications'; import { BuildInfoModalButton } from './BuildInfoModal'; import '@reach/dialog/styles.css'; import styles from './Footer.module.css'; -import Logo from './portainer_logo.svg?c'; export function Footer() { return isBE ? : ; @@ -19,7 +18,6 @@ function CEFooter() { - Community Edition @@ -43,7 +41,7 @@ function BEFooter() { function FooterContent({ children }: PropsWithChildren) { return ( -
+
{children}
); diff --git a/app/react/sidebar/Footer/portainer_logo.svg b/app/react/sidebar/Footer/portainer_logo.svg deleted file mode 100644 index 1bf390370..000000000 --- a/app/react/sidebar/Footer/portainer_logo.svg +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/app/react/sidebar/Header.module.css b/app/react/sidebar/Header.module.css index 002dad966..82a002e8a 100644 --- a/app/react/sidebar/Header.module.css +++ b/app/react/sidebar/Header.module.css @@ -1,9 +1,5 @@ .logo { display: inline; max-height: 55px; - max-width: min(100%, 230px); -} - -.collapseBtn:hover { - background-color: var(--bg-btn-default-hover-color); + max-width: min(100%, 220px); } diff --git a/app/react/sidebar/Header.tsx b/app/react/sidebar/Header.tsx index 60b24b883..b69aa7d3a 100644 --- a/app/react/sidebar/Header.tsx +++ b/app/react/sidebar/Header.tsx @@ -2,12 +2,13 @@ import { ChevronsLeft, ChevronsRight } from 'lucide-react'; import clsx from 'clsx'; import { isBE } from '@/react/portainer/feature-flags/feature-flags.service'; -import smallLogo from '@/assets/ico/logomark.svg'; import { Link } from '@@/Link'; import fullLogoBE from './portainer_logo-BE.svg'; import fullLogoCE from './portainer_logo-CE.svg'; +import smallLogoBE from './logomark-BE.svg'; +import smallLogoCE from './logomark-CE.svg'; import { useSidebarState } from './useSidebarState'; import styles from './Header.module.css'; @@ -20,7 +21,7 @@ export function Header({ logo: customLogo }: Props) { return (
-
+
); diff --git a/app/react/sidebar/SidebarItem/SidebarItem.tsx b/app/react/sidebar/SidebarItem/SidebarItem.tsx index 96fd5cbc8..7208516f3 100644 --- a/app/react/sidebar/SidebarItem/SidebarItem.tsx +++ b/app/react/sidebar/SidebarItem/SidebarItem.tsx @@ -59,7 +59,7 @@ export function SidebarItem({ return ( +
{title} -
+
{children}
diff --git a/app/react/sidebar/SidebarItem/SidebarTooltip.tsx b/app/react/sidebar/SidebarItem/SidebarTooltip.tsx index b9a2d11d4..ec25ffd99 100644 --- a/app/react/sidebar/SidebarItem/SidebarTooltip.tsx +++ b/app/react/sidebar/SidebarItem/SidebarTooltip.tsx @@ -8,7 +8,7 @@ type Props = { export function SidebarTooltip({ children, content }: Props) { return ( > = {}, options: TransitionOptions = {}, pathOptions: PathOptions = { diff --git a/app/react/sidebar/logomark-BE.svg b/app/react/sidebar/logomark-BE.svg new file mode 100644 index 000000000..beead5989 --- /dev/null +++ b/app/react/sidebar/logomark-BE.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/app/react/sidebar/logomark-CE.svg b/app/react/sidebar/logomark-CE.svg new file mode 100644 index 000000000..1ed2ea259 --- /dev/null +++ b/app/react/sidebar/logomark-CE.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/app/react/sidebar/portainer_logo-BE.svg b/app/react/sidebar/portainer_logo-BE.svg index ed7ab076d..ad9762aa8 100644 --- a/app/react/sidebar/portainer_logo-BE.svg +++ b/app/react/sidebar/portainer_logo-BE.svg @@ -1,51 +1,37 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + diff --git a/app/react/sidebar/portainer_logo-CE.svg b/app/react/sidebar/portainer_logo-CE.svg index 7b6c83a00..707c7b1a7 100644 --- a/app/react/sidebar/portainer_logo-CE.svg +++ b/app/react/sidebar/portainer_logo-CE.svg @@ -1,68 +1,38 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - + +