diff --git a/app/assets/javascripts/admin/utils/services/status_message.js.coffee b/app/assets/javascripts/admin/utils/services/status_message.js.coffee index f76d8b1b98..432c6ecf70 100644 --- a/app/assets/javascripts/admin/utils/services/status_message.js.coffee +++ b/app/assets/javascripts/admin/utils/services/status_message.js.coffee @@ -5,8 +5,8 @@ angular.module("admin.utils").factory "StatusMessage", -> alert: {style: {color: 'grey'}} notice: {style: {color: 'grey'}} success: {style: {color: '#9fc820'}} - failure: {style: {color: '#da5354'}} - error: {style: {color: '#da5354'}} + failure: {style: {color: '#C85136'}} + error: {style: {color: '#C85136'}} statusMessage: text: "" diff --git a/app/assets/javascripts/templates/admin/save_bar.html.haml b/app/assets/javascripts/templates/admin/save_bar.html.haml index b5f25eb659..08b6da5361 100644 --- a/app/assets/javascripts/templates/admin/save_bar.html.haml +++ b/app/assets/javascripts/templates/admin/save_bar.html.haml @@ -3,7 +3,7 @@ .seven.columns.alpha %h5#status-message{ ng: { show: "StatusMessage.invalidMessage == ''", style: 'StatusMessage.statusMessage.style' } } {{ StatusMessage.statusMessage.text || " " }} - %h5#status-message{ ng: { show: "StatusMessage.invalidMessage !== ''" }, style: 'color: #da5354' } + %h5#status-message{ ng: { show: "StatusMessage.invalidMessage !== ''" }, style: 'color: #C85136' } {{ StatusMessage.invalidMessage || " " }} .nine.columns.omega.text-right{ ng: { transclude: true } } diff --git a/app/views/admin/enterprises/_actions.html.haml b/app/views/admin/enterprises/_actions.html.haml index 250f508bf7..696fd1a780 100644 --- a/app/views/admin/enterprises/_actions.html.haml +++ b/app/views/admin/enterprises/_actions.html.haml @@ -17,18 +17,18 @@ = link_to_with_icon 'icon-chevron-right', t('.payment_methods'), spree.admin_payment_methods_path(enterprise_id: enterprise.id) (#{enterprise.payment_methods.count}) - if enterprise.payment_methods.count == 0 - %span.icon-exclamation-sign{"ofn-with-tip" => t('.payment_methods_tip'), style: "font-size: 16px;color: #DA5354"} + %span.warning-icon.icon-exclamation-sign{"ofn-with-tip" => t('.payment_methods_tip')} %br/ - if can?(:admin, Spree::ShippingMethod) && can?(:manage_shipping_methods, enterprise) = link_to_with_icon 'icon-plane', t('.shipping_methods'), spree.admin_shipping_methods_path(enterprise_id: enterprise.id) (#{enterprise.shipping_methods.count}) - if enterprise.shipping_methods.count == 0 - %span.icon-exclamation-sign{"ofn-with-tip" => t('.shipping_methods_tip'), style: "font-size: 16px;color: #DA5354"} + %span.warning-icon.icon-exclamation-sign{"ofn-with-tip" => t('.shipping_methods_tip')} %br/ - if can?(:admin, EnterpriseFee) && can?(:manage_enterprise_fees, enterprise) = link_to_with_icon 'icon-money', t('.enterprise_fees'), main_app.admin_enterprise_fees_path(enterprise_id: enterprise.id) (#{enterprise.enterprise_fees.count}) - if enterprise.enterprise_fees.count == 0 - %span.icon-warning-sign{"ofn-with-tip" => t('.enterprise_fees_tip'), style: "font-size: 16px;color: orange"} + %span.warning-icon.icon-warning-sign{"ofn-with-tip" => t('.enterprise_fees_tip')} diff --git a/app/views/admin/enterprises/_admin_index.html.haml b/app/views/admin/enterprises/_admin_index.html.haml index ed8df10b7f..2592d9970c 100644 --- a/app/views/admin/enterprises/_admin_index.html.haml +++ b/app/views/admin/enterprises/_admin_index.html.haml @@ -32,7 +32,7 @@ %td= enterprise_form.check_box :visible, {}, 'public', 'hidden' - if spree_current_user.admin? %td= enterprise_form.select :owner_id, enterprise.users.map{ |e| [ e.email, e.id ] }, {}, class: "select2 fullwidth" - %td + %td.enterprise-actions = render 'actions', enterprise: enterprise - if @enterprises.empty? %tr diff --git a/app/views/spree/admin/shared/_head.html.haml b/app/views/spree/admin/shared/_head.html.haml index 238052154e..d0fe96ce4a 100644 --- a/app/views/spree/admin/shared/_head.html.haml +++ b/app/views/spree/admin/shared/_head.html.haml @@ -14,7 +14,11 @@ %link{:href => "https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600&subset=latin,cyrillic,greek,vietnamese", :rel => "stylesheet", :type => "text/css"} -= stylesheet_pack_tag 'admin-styles', media: "screen, print" +- if feature?(:admin_style_v3, spree_current_user) + = stylesheet_pack_tag 'admin-style-v3', media: "screen, print" +- else + = stylesheet_pack_tag 'admin-styles', media: "screen, print" + = render "layouts/bugsnag_js" = javascript_include_tag 'admin/all' diff --git a/app/webpacker/css/admin/all.scss b/app/webpacker/css/admin/all.scss index d4251c1627..e6120ce37e 100644 --- a/app/webpacker/css/admin/all.scss +++ b/app/webpacker/css/admin/all.scss @@ -14,6 +14,7 @@ @import "~shortcut-buttons-flatpickr/dist/themes/light"; @import "globals/functions"; +@import "globals/palette"; @import "globals/variables"; @import "variables"; @import "globals/mixins"; diff --git a/app/webpacker/css/admin/components/input.scss b/app/webpacker/css/admin/components/input.scss index 2efdd237f4..afc58cbfe9 100644 --- a/app/webpacker/css/admin/components/input.scss +++ b/app/webpacker/css/admin/components/input.scss @@ -34,6 +34,6 @@ input[type="checkbox"].redesigned-input { } &:checked:before { - color: #5498da !important; + color: $color-txt-text !important; } } diff --git a/app/webpacker/css/admin/components/tooltip.scss b/app/webpacker/css/admin/components/tooltip.scss index 77612b180f..e159ee5463 100644 --- a/app/webpacker/css/admin/components/tooltip.scss +++ b/app/webpacker/css/admin/components/tooltip.scss @@ -10,7 +10,7 @@ left: 0; font-size: 13px; pointer-events: none; - background-color: #5498da; + background-color: $color-3; padding: 5px 15px; border-radius: 3px; color: #fff; @@ -19,7 +19,7 @@ } .arrow { - background-color: #5498da; + background-color: $color-3; position: absolute; width: 8px; height: 8px; diff --git a/app/webpacker/css/admin/enterprises.scss b/app/webpacker/css/admin/enterprises.scss index 55fd17b3ac..d0f2969088 100644 --- a/app/webpacker/css/admin/enterprises.scss +++ b/app/webpacker/css/admin/enterprises.scss @@ -35,3 +35,10 @@ form[name="enterprise_form"] { margin-bottom: 1em; margin-top: 1em; } + +table .enterprise-actions { + .warning-icon { + color: $warning-red; + font-size: 16px; + } +} diff --git a/app/webpacker/css/admin/globals/palette.scss b/app/webpacker/css/admin/globals/palette.scss new file mode 100644 index 0000000000..0c4bf1611c --- /dev/null +++ b/app/webpacker/css/admin/globals/palette.scss @@ -0,0 +1,7 @@ +// Basic color palette for admin +$color-1: #FFFFFF !default; // White +$color-2: #9FC820 !default; // Green +$color-3: #5498DA !default; // Light Blue +$color-4: #6788A2 !default; // Dark Blue +$color-5: #C60F13 !default; // Red +$color-6: #FF9300 !default; // Yellow diff --git a/app/webpacker/css/admin/globals/variables.scss b/app/webpacker/css/admin/globals/variables.scss index 5bd369d20b..167d5fe2f6 100644 --- a/app/webpacker/css/admin/globals/variables.scss +++ b/app/webpacker/css/admin/globals/variables.scss @@ -9,14 +9,6 @@ $base-font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, // Colors //-------------------------------------------------------------- -// Basic color palette for admin -$color-1: #FFFFFF !default; // White -$color-2: #9FC820 !default; // Green -$color-3: #5498DA !default; // Light Blue -$color-4: #6788A2 !default; // Dark Blue -$color-5: #C60F13 !default; // Red -$color-6: #FF9300 !default; // Yellow - // Body base colors $color-body-bg: $color-1 !default; $color-body-text: $color-4 !default; diff --git a/app/webpacker/css/admin/openfoodnetwork.scss b/app/webpacker/css/admin/openfoodnetwork.scss index 485c85027b..ddf284e6a0 100644 --- a/app/webpacker/css/admin/openfoodnetwork.scss +++ b/app/webpacker/css/admin/openfoodnetwork.scss @@ -75,7 +75,7 @@ a.action--disabled { cursor: default; &:hover { - color: #5498da; + color: $color-link; } } diff --git a/app/webpacker/css/admin/plugins/flatpickr-customization.scss b/app/webpacker/css/admin/plugins/flatpickr-customization.scss index d94b85df3d..79bc735d4d 100644 --- a/app/webpacker/css/admin/plugins/flatpickr-customization.scss +++ b/app/webpacker/css/admin/plugins/flatpickr-customization.scss @@ -1,5 +1,5 @@ $background-grey: #eceef1; -$background-blue: #5498da; +$background-blue: $color-3; // scss-lint:disable SelectorFormat diff --git a/app/webpacker/css/admin/variables.scss b/app/webpacker/css/admin/variables.scss index 8767b65aa3..f93b93a57f 100644 --- a/app/webpacker/css/admin/variables.scss +++ b/app/webpacker/css/admin/variables.scss @@ -4,8 +4,8 @@ $spree-green: #9fc820; $spree-blue: #5498da; $spree-light-blue: #eff5fc; -$warning-red: #da5354; -$warning-orange: #da7f52; +$warning-red: $color-5; +$warning-orange: $color-5; $bright-orange: #ffa92e; $medium-grey: #919191; $pale-blue: #cee1f4; diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss new file mode 100644 index 0000000000..72c5c4260c --- /dev/null +++ b/app/webpacker/css/admin_v3/all.scss @@ -0,0 +1,136 @@ +// Admin v3 styles +// While in feature-toggle, we inherit all files from old admin design. +// Individual files may be copied in order to replace the old files. + +@import "vendor/assets/stylesheets/normalize"; +@import "vendor/assets/stylesheets/responsive-tables"; +@import "vendor/assets/stylesheets/jquery.powertip"; +@import "~jquery-ui/themes/base/core"; +@import "~jquery-ui/themes/base/button"; +@import "~jquery-ui/themes/base/resizable"; +@import "vendor/assets/stylesheets/jquery-ui-theme"; +@import "~jquery-ui/themes/base/dialog"; +@import "../shared/textAngular"; +@import "../shared/ng-tags-input.min"; +@import "vendor/assets/stylesheets/select2.css.scss"; +@import "~flatpickr/dist/flatpickr"; +@import "~flatpickr/dist/themes/material_blue"; +@import "~shortcut-buttons-flatpickr/dist/themes/light"; + +@import "../admin/globals/functions"; +@import "globals/palette"; // admin_v3 +@import "../admin/globals/variables"; +@import "../admin/variables"; +@import "../admin/globals/mixins"; + +@import "../admin/plugins/font-awesome"; + +@import "../shared/variables/layout"; +@import "../shared/variables/variables"; +@import "../shared/utilities"; +@import "../admin/shared/typography"; +@import "../admin/shared/tables"; +@import "../admin/shared/icons"; +@import "../admin/shared/forms"; +@import "../admin/shared/layout"; +@import "../admin/shared/scroll_bar"; + +@import "../admin/plugins/flatpickr-customization"; +@import "../admin/plugins/powertip"; +@import "../admin/plugins/jstree"; +@import "../admin/plugins/select2"; + +@import "../admin/sections/orders"; +@import "../admin/sections/products"; + +@import "../admin/hacks/mozilla"; +@import "../admin/hacks/opera"; +@import "../admin/hacks/ie"; + +@import "../admin/components/actions"; +@import "../admin/components/alert-box"; +@import "../admin/components/alert_row"; +@import "../admin/components/buttons"; +@import "../admin/components/date-picker"; +@import "../admin/components/dialogs"; +@import "../admin/components/input"; +@import "../admin/components/jquery_dialog"; +@import "../admin/components/messages"; +@import "../admin/components/navigation"; +@import "../admin/components/ng-cloak"; +@import "../admin/components/page_actions"; +@import "../admin/components/pagination"; +@import "../admin/components/per_page_controls"; +@import "../admin/components/product_autocomplete"; +@import "../admin/components/progress"; +@import "../admin/components/save_bar"; +@import "../admin/components/sidebar"; +@import "../admin/components/simple_modal"; +@import "../admin/components/states"; +@import "../admin/components/stripe_connect_button"; +@import "../admin/components/subscriptions_states"; +@import "../admin/components/table-filter"; +@import "../admin/components/table_loading"; +@import "../admin/components/timepicker"; +@import "../admin/components/todo"; +@import "../admin/components/tooltip"; +@import "../admin/components/wizard_progress"; + +@import "../admin/pages/enterprise_form"; +@import "../admin/pages/subscription_form"; +@import "../admin/pages/subscription_line_items"; +@import "../admin/pages/subscription_review"; + +@import "../admin/advanced_settings"; +@import "../admin/alert"; +@import "../admin/animations"; +@import "../admin/change_type_form"; +@import "../admin/customers"; +@import "../admin/dashboard_item"; +@import "../admin/dashboard-single-ent"; +@import "../admin/dialog"; +@import "../admin/disabled"; +@import "../admin/dropdown"; +@import "../admin/enterprise_index_panels"; +@import "../admin/enterprises"; +@import "../admin/filters_and_controls"; +@import "../admin/grid"; +@import "../admin/icons"; +@import "../admin/index_panel_buttons"; +@import "../admin/index_panels"; +@import "../admin/modals"; +@import "../admin/offsets"; +@import "../admin/openfoodnetwork"; +@import "../admin/order_cycles"; +@import "../admin/orders"; +@import "../admin/product_import"; +@import "../admin/products"; +@import "../admin/question-mark-tooltip"; +@import "../admin/relationships"; +@import "../admin/reports"; +@import "../admin/select2"; +@import "../admin/sidebar-item"; +@import "../admin/side_menu"; +@import "../admin/tables"; +@import "../admin/tag_rules"; +@import "../admin/terms_of_service_files"; +@import "../admin/validation"; +@import "../admin/variables"; +@import "../admin/variant_overrides"; +@import "../admin/welcome"; + +@import "../shared/question-mark-icon"; +@import "../admin/question-mark-tooltip"; + +@import "~tom-select/src/scss/tom-select.default"; +@import "../admin/components/tom_select"; + +@import "app/components/help_modal_component/help_modal_component"; +@import "app/components/product_component/product_component"; +@import "app/components/selector_component/selector_component"; +@import "app/components/products_table_component/products_table_component"; +@import "app/components/selector_with_filter_component/selector_with_filter_component"; +@import "app/components/pagination_component/pagination_component"; +@import "app/components/table_header_component/table_header_component"; +@import "app/components/search_input_component/search_input_component"; +@import "app/components/confirm_modal_component/confirm_modal_component"; diff --git a/app/webpacker/css/admin_v3/globals/palette.scss b/app/webpacker/css/admin_v3/globals/palette.scss new file mode 100644 index 0000000000..a22e4a985b --- /dev/null +++ b/app/webpacker/css/admin_v3/globals/palette.scss @@ -0,0 +1,7 @@ +// Basic color palette for admin styles v3 +$color-1: #FFFFFF !default; // White +$color-2: #9FC820 !default; // Green +$color-3: #008397 !default; // Teal (Allports) +$color-4: #6788A2 !default; // Dark Blue +$color-5: #C85136 !default; // Red/Orange (Mojo) +$color-6: #FF9300 !default; // Yellow diff --git a/app/webpacker/css/mail/all.scss b/app/webpacker/css/mail/all.scss index eff74825b1..fb4d0596b2 100644 --- a/app/webpacker/css/mail/all.scss +++ b/app/webpacker/css/mail/all.scss @@ -1,3 +1,4 @@ +@import '../admin/globals/palette.scss'; @import '../admin/variables'; @import 'email'; @import 'payments_list'; diff --git a/app/webpacker/packs/admin-style-v3.scss b/app/webpacker/packs/admin-style-v3.scss new file mode 100644 index 0000000000..f06ef083d5 --- /dev/null +++ b/app/webpacker/packs/admin-style-v3.scss @@ -0,0 +1 @@ +@import "../css/admin_v3/all.scss"; diff --git a/lib/open_food_network/feature_toggle.rb b/lib/open_food_network/feature_toggle.rb index 9252fcbcc9..2dc902658f 100644 --- a/lib/open_food_network/feature_toggle.rb +++ b/lib/open_food_network/feature_toggle.rb @@ -11,6 +11,9 @@ module OpenFoodNetwork # We way move this to a YAML file when it becomes too awkward. # **WARNING:** Features not in this list will be removed. CURRENT_FEATURES = { + "admin_style_v3" => <<~DESC, + Test the work-in-progress design updates. + DESC "api_reports" => <<~DESC, An API endpoint for reports at /api/v0/reports/:report_type(/:report_subtype)