solidus_admin 0.2.0 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 28b57ee7cd36b6042c6a1f7a735587aaba8a9e78d6050744ff6687b3799154fc
-  data.tar.gz: de8a6150a3b9c7445d4b572cc4cd6af8aba87e6be2ffcd81582b7bdfd96b2b8a
+  metadata.gz: eb1be91a106eeda8c918e90021333cc919a8098487b273027c6f547cbb2e7143
+  data.tar.gz: 6ce342b7e8bd73c7fbe17f18008834f92d777fe3217af33dc6a4c6b86826b08d
 SHA512:
-  metadata.gz: 9db4b1349c35d1778bad7f922951a8c9f9d35e97e90c25a78c71d97a7e3ec6f772c9411490f6b66a1323c016e94a283ed2311ff11c4a142891fee2695bee6ba4
-  data.tar.gz: f24a6d904d75739bd41ef956f40489459b281e9aa9b3aa9981affdbe260865019a75c2200f56e201a0dd6f647d6d48d92483766ec5b6e99cc9e2f1d133924c65
+  metadata.gz: 3d376325dcd745b848f32a6a7d77a5f5281c71f6980817b25ed281feecfd66802fa289c1194822383212a490765cf5922bd002dfdcc6a9cfcc8e702c0febe972
+  data.tar.gz: ce0550afe24af170b05633ab316fea21507f145ac912b193df37a188fcdc811d9e2e8dd19da78da8468b3f47d9215845e8f1be980c39fd4bd72211d45456c267

data/README.md

@@ -1,17 +1,68 @@
-# solidus_admin (WIP)
+# Solidus Admin
 
 A Rails engine that provides an administrative interface to the Solidus ecommerce platform.
 
+## Overview
+
+- Based on ViewComponent and TailwindCSS
+- Uses StimulusJS and Turbo for interactivity
+- Works as a separate engine with its own routes
+- Uses the same models as the main Solidus engine
+- Has its own set of controllers
+
+## Installation
+
+`solidus_admin` is included by default in new stores generated with Solidus 4.3 or later, as well as those generated from the main branch.
+
+`solidus_admin` can be added to existing stores by bundling it in the Gemfile and running the installer generator:
+
+```bash
+bundle add solidus_admin
+bin/rails g solidus_admin:install
+```
+
+If you're using an authentication system other than `solidus_auth_devise` you'll need to manually configure authentication methods (see api documentation for `SolidusAdmin::Configuration`).
+
+If you encounter the error `couldn't find file 'solidus_admin/tailwind.css'` when loading admin pages, you need to manually build the `solidus_admin` tailwind CSS styles.
+This issue typically occurs when you bundle Solidus from a GitHub branch or from the local filesystem, or with the sandbox application.
+Please see [Customizing tailwind](docs/tailwindcss.md) for more information.
+
+### Components
+
+See [docs/contributing/components.md](docs/components.md) for more information about components.
+
+### Using it alongside `solidus_backend`
+
+`solidus_backend` is the current admin interface for Solidus. `SolidusAdmin` is under development, acts as a drop-in replacement for `solidus_backend` and will eventually replace it. It's designed to gradually take over existing functions.
+
+For now, you can use both `solidus_backend` and `SolidusAdmin` in the same application. To do this, mount the `SolidusAdmin` engine before `Spree::Core::Engine`.
+
+You can use a route `constraint` to replace any `solidus_backend` routes with `SolidusAdmin` routes.
+
+By default, `SolidusAdmin` routes are turned off if a cookie named `solidus_admin` is set to `false`, or if a query parameter named `solidus_admin` is set to `false`. This lets you switch between the two admin interfaces easily.
+
+This constraint is set up in the application's routes file, so you can easily change it:
+
+```ruby
+# config/routes.rb
+mount SolidusAdmin::Engine, at: '/admin', constraints: ->(req) {
+  $redis.get('solidus_admin') == 'true' # or any other logic
+}
+```
+
+### Authentication & Authorization
+
+- Solidus Amidn delegates authentication to `solidus_backend` and relies on `solidus_core` for authorization.
+
 ## Development
 
-- [Customizing tailwind](docs/customizing_tailwind.md)
-- [Customizing view components](docs/customizing_view_components.md)
-- [Customizing the main navigation](docs/customizing_menu_items.md)
+- [Customizing tailwind](docs/tailwindcss.md)
+- [Customizing view components](docs/customizing_components.md)
+- [Customizing the main navigation](docs/menu_items.md)
 
 ### Adding components to Solidus Admin
 
-When using the component generator from within the admin folder it will generate the component in the library
-instead of the sandbox application.
+Solidus Admin components can be generated with the `solidus_admin:component`generator:
 
 ```bash
 # the `solidus_admin/` namespace is added by default
@@ -23,6 +74,9 @@ bin/rails admin g solidus_admin:component foo
       create  spec/components/solidus_admin/foo/component_spec.rb
 ```
 
+Please note that when using the component generator from within the admin folder it will generate the component in the library
+instead of the sandbox application.
+
 ## Releasing
 
 1. Update the version in `lib/solidus_admin/version.rb`

data/Rakefile

@@ -5,6 +5,7 @@ require 'rake'
 require 'rake/testtask'
 require 'rspec/core/rake_task'
 require 'spree/testing_support/dummy_app/rake_tasks'
+require 'solidus_admin/testing_support/dummy_app/rake_tasks'
 require 'bundler/gem_tasks'
 
 namespace :tailwindcss do

data/app/assets/builds/solidus_admin/tailwind.css

@@ -1,7 +1,115 @@
 @import url("https://rsms.me/inter/inter.css");
 
+*, ::before, ::after{
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+::backdrop{
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
 /*
-! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -213,6 +321,8 @@ textarea {
   /* 1 */
   line-height: inherit;
   /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
   color: inherit;
   /* 1 */
   margin: 0;
@@ -236,9 +346,9 @@ select {
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -442,7 +552,7 @@ video {
 
 /* Make elements with the HTML hidden attribute stay hidden by default */
 
-[hidden] {
+[hidden]:where(:not([hidden="until-found"])) {
   display: none;
 }
 
@@ -458,106 +568,6 @@ summary{
   list-style: none;
 }
 
-*, ::before, ::after{
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-}
-
-::backdrop{
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-}
-
 .form-input,.form-textarea,.form-select,.form-multiselect{
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -604,6 +614,11 @@ summary{
 
 .form-input::-webkit-date-and-time-value{
   min-height: 1.5em;
+  text-align: inherit;
+}
+
+.form-input::-webkit-datetime-edit{
+  display: inline-flex;
 }
 
 .form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-year-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-meridiem-field{
@@ -621,6 +636,16 @@ summary{
           print-color-adjust: exact;
 }
 
+.form-select:where([size]:not([size="1"])){
+  background-image: initial;
+  background-position: initial;
+  background-repeat: unset;
+  background-size: initial;
+  padding-right: 0.75rem;
+  -webkit-print-color-adjust: unset;
+          print-color-adjust: unset;
+}
+
 .form-checkbox,.form-radio{
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -672,6 +697,14 @@ summary{
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
 }
 
+@media (forced-colors: active) {
+  .form-checkbox:checked{
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
 .form-checkbox:checked:hover,.form-checkbox:checked:focus,.form-radio:checked:hover,.form-radio:checked:focus{
   border-color: transparent;
   background-color: currentColor;
@@ -686,6 +719,14 @@ summary{
   background-repeat: no-repeat;
 }
 
+@media (forced-colors: active) {
+  .form-checkbox:indeterminate{
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
 .form-checkbox:indeterminate:hover,.form-checkbox:indeterminate:focus{
   border-color: transparent;
   background-color: currentColor;
@@ -800,6 +841,10 @@ summary{
   margin: 1.5rem;
 }
 
+.m-auto{
+  margin: auto;
+}
+
 .mb-1{
   margin-bottom: 0.25rem;
 }
@@ -924,10 +969,6 @@ summary{
   height: 1rem;
 }
 
-.h-4\/5{
-  height: 80%;
-}
-
 .h-5{
   height: 1.25rem;
 }
@@ -1044,6 +1085,10 @@ summary{
   width: 5rem;
 }
 
+.w-24{
+  width: 6rem;
+}
+
 .w-4{
   width: 1rem;
 }
@@ -1092,8 +1137,16 @@ summary{
   width: 1.5em;
 }
 
-.w-\[17\.78rem\]{
-  width: 17.78rem;
+.w-\[10\%\]{
+  width: 10%;
+}
+
+.w-\[15\%\]{
+  width: 15%;
+}
+
+.w-\[18\%\]{
+  width: 18%;
 }
 
 .w-\[1rem\]{
@@ -1104,6 +1157,10 @@ summary{
   width: 22px;
 }
 
+.w-\[24\%\]{
+  width: 24%;
+}
+
 .w-\[400px\]{
   width: 400px;
 }
@@ -1112,14 +1169,31 @@ summary{
   width: 52px;
 }
 
+.w-\[7\%\]{
+  width: 7%;
+}
+
 .w-\[72px\]{
   width: 72px;
 }
 
+.w-\[8\%\]{
+  width: 8%;
+}
+
+.w-\[calc\(5rem\+2rem\+2\.5rem\+1px\)\]{
+  width: calc(5rem + 2rem + 2.5rem + 1px);
+}
+
 .w-auto{
   width: auto;
 }
 
+.w-fit{
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .w-full{
   width: 100%;
 }
@@ -1136,6 +1210,10 @@ summary{
   min-width: 40rem;
 }
 
+.max-w-\[15rem\]{
+  max-width: 15rem;
+}
+
 .max-w-\[20px\]{
   max-width: 20px;
 }
@@ -1168,6 +1246,10 @@ summary{
   flex-grow: 1;
 }
 
+.basis-10{
+  flex-basis: 2.5rem;
+}
+
 .table-auto{
   table-layout: auto;
 }
@@ -1290,12 +1372,6 @@ summary{
   gap: 1.5rem;
 }
 
-.space-y-0 > :not([hidden]) ~ :not([hidden]){
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0px * var(--tw-space-y-reverse));
-}
-
 .space-y-0\.5 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1313,10 +1389,6 @@ summary{
   border-color: rgb(222 222 222 / var(--tw-divide-opacity));
 }
 
-.self-end{
-  align-self: flex-end;
-}
-
 .overflow-auto{
   overflow: auto;
 }
@@ -1423,10 +1495,6 @@ summary{
   border-top-width: 1px;
 }
 
-.border-dotted{
-  border-style: dotted;
-}
-
 .border-gray-100{
   --tw-border-opacity: 1;
   border-color: rgb(222 222 222 / var(--tw-border-opacity));
@@ -1600,20 +1668,11 @@ summary{
   padding: 1rem;
 }
 
-.p-6{
-  padding: 1.5rem;
-}
-
 .\!px-10{
   padding-left: 2.5rem !important;
   padding-right: 2.5rem !important;
 }
 
-.px-1{
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
 .px-1\.5{
   padding-left: 0.375rem;
   padding-right: 0.375rem;
@@ -1644,11 +1703,6 @@ summary{
   padding-right: 0.75rem;
 }
 
-.py-0{
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
 .py-0\.5{
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
@@ -1694,10 +1748,6 @@ summary{
   padding-bottom: 0.5rem;
 }
 
-.pb-0{
-  padding-bottom: 0px;
-}
-
 .pb-0\.5{
   padding-bottom: 0.125rem;
 }
@@ -1710,10 +1760,6 @@ summary{
   padding-bottom: 2rem;
 }
 
-.pt-0{
-  padding-top: 0px;
-}
-
 .pt-0\.5{
   padding-top: 0.125rem;
 }
@@ -1722,10 +1768,6 @@ summary{
   padding-top: 0.5rem;
 }
 
-.pt-20{
-  padding-top: 5rem;
-}
-
 .text-left{
   text-align: left;
 }
@@ -1841,6 +1883,11 @@ summary{
   line-height: 1;
 }
 
+.\!text-red-500{
+  --tw-text-opacity: 1 !important;
+  color: rgb(220 55 40 / var(--tw-text-opacity)) !important;
+}
+
 .text-black{
   --tw-text-opacity: 1;
   color: rgb(34 34 34 / var(--tw-text-opacity));
@@ -2402,12 +2449,6 @@ summary{
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-0:focus{
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
 .focus\:ring-2:focus{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2528,12 +2569,6 @@ summary{
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.active\:ring-0:active{
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
 .active\:ring-gray-300:active{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(186 186 186 / var(--tw-ring-opacity));

data/app/assets/stylesheets/solidus_admin/dark.css

@@ -9,4 +9,5 @@ html {
 
 main img {
   filter: invert(100%) hue-rotate(-180deg);
+  background-color: #fff;
 }

data/app/assets/stylesheets/solidus_admin/dimmed.css

@@ -8,4 +8,5 @@ html {
 
 main img {
   filter: invert(91%) brightness(1.5) contrast(1.5) hue-rotate(-180deg);
+  background-color: #ddd;
 }

data/app/components/solidus_admin/adjustment_reasons/edit/component.html.erb

@@ -0,0 +1,27 @@
+<%= turbo_frame_tag :edit_adjustment_reason_modal do %>
+  <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+    <%= form_for @adjustment_reason, url: solidus_admin.adjustment_reason_path(@adjustment_reason), html: { id: form_id } do |f| %>
+      <div class="flex flex-col gap-6 pb-4">
+        <%= render component("ui/forms/field").text_field(f, :name, class: "required") %>
+        <%= render component("ui/forms/field").text_field(f, :code, class: "required") %>
+        <label class="flex gap-2 items-center">
+          <%= hidden_field_tag "#{f.object_name}[active]", "0" %>
+          <%= render component("ui/forms/checkbox").new(
+            name: "#{f.object_name}[active]",
+            value: "1",
+            checked: f.object.active
+          ) %>
+          <span class="font-semibold text-xs ml-2"><%= Spree::AdjustmentReason.human_attribute_name :active %></span>
+          <%= render component("ui/toggletip").new(text: t(".hints.active")) %>
+        </label>
+      </div>
+      <% modal.with_actions do %>
+        <form method="dialog">
+          <%= render component("ui/button").new(scheme: :secondary, text: t('.cancel')) %>
+        </form>
+        <%= render component("ui/button").new(form: form_id, type: :submit, text: t('.submit')) %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+<%= render component("adjustment_reasons/index").new(page: @page) %>