From 79163b75d63ec09abdebcdc29bb233e6eba327c6 Mon Sep 17 00:00:00 2001
From: Mark Phelps <209477+markphelps@users.noreply.github.com>
Date: Mon, 10 Jul 2023 21:48:58 -0400
Subject: [PATCH 1/5] feat: redo rules list styles

---
 ui/src/app/flags/Evaluation.tsx          |  80 ++++++-----
 ui/src/components/rules/NewRule.tsx      | 163 +++++++++++++++++++++++
 ui/src/components/rules/Rule.tsx         |   2 +-
 ui/src/components/rules/SortableRule.tsx |   8 +-
 4 files changed, 207 insertions(+), 46 deletions(-)
 create mode 100644 ui/src/components/rules/NewRule.tsx

diff --git a/ui/src/app/flags/Evaluation.tsx b/ui/src/app/flags/Evaluation.tsx
index f74e0bbfeb..b128f33781 100644
--- a/ui/src/app/flags/Evaluation.tsx
+++ b/ui/src/app/flags/Evaluation.tsx
@@ -36,7 +36,6 @@ import { IEvaluatable } from '~/types/Evaluatable';
 import { IRule, IRuleList } from '~/types/Rule';
 import { ISegment, ISegmentList } from '~/types/Segment';
 import { IVariant } from '~/types/Variant';
-import { classNames } from '~/utils/helpers';
 import { FlagProps } from './FlagProps';
 
 export default function Evaluation() {
@@ -260,49 +259,46 @@ export default function Evaluation() {
                   them into place.
                 </p>
               </div>
-              <DndContext
-                sensors={sensors}
-                collisionDetection={closestCenter}
-                onDragStart={onDragStart}
-                onDragEnd={onDragEnd}
-              >
-                <SortableContext
-                  items={rules.map((rule) => rule.id)}
-                  strategy={verticalListSortingStrategy}
+              <div className="w-full rounded-md p-6 lg:w-3/4">
+                <DndContext
+                  sensors={sensors}
+                  collisionDetection={closestCenter}
+                  onDragStart={onDragStart}
+                  onDragEnd={onDragEnd}
                 >
-                  <ul
-                    role="list"
-                    className={classNames(
-                      'w-full space-y-5 p-5 lg:w-3/4',
-                      activeRule ? 'bg-violet-50' : 'bg-gray-50'
-                    )}
+                  <SortableContext
+                    items={rules.map((rule) => rule.id)}
+                    strategy={verticalListSortingStrategy}
                   >
-                    {rules &&
-                      rules.length > 0 &&
-                      rules.map((rule) => (
-                        <SortableRule
-                          key={rule.id}
-                          namespace={namespace}
-                          rule={rule}
-                          onEdit={() => {
-                            setEditingRule(rule);
-                            setShowEditRuleForm(true);
-                          }}
-                          onDelete={() => {
-                            setDeletingRule(rule);
-                            setShowDeleteRuleModal(true);
-                          }}
-                          readOnly={readOnly}
-                        />
-                      ))}
-                  </ul>
-                </SortableContext>
-                <DragOverlay>
-                  {activeRule ? (
-                    <Rule namespace={namespace} rule={activeRule} />
-                  ) : null}
-                </DragOverlay>
-              </DndContext>
+                    <ul role="list" className="flex-col space-y-5 md:flex">
+                      {rules &&
+                        rules.length > 0 &&
+                        rules.map((rule) => (
+                          <SortableRule
+                            key={rule.id}
+                            totalRules={rules.length}
+                            namespace={namespace}
+                            rule={rule}
+                            onEdit={() => {
+                              setEditingRule(rule);
+                              setShowEditRuleForm(true);
+                            }}
+                            onDelete={() => {
+                              setDeletingRule(rule);
+                              setShowDeleteRuleModal(true);
+                            }}
+                            readOnly={readOnly}
+                          />
+                        ))}
+                    </ul>
+                  </SortableContext>
+                  <DragOverlay>
+                    {activeRule ? (
+                      <Rule namespace={namespace} rule={activeRule} />
+                    ) : null}
+                  </DragOverlay>
+                </DndContext>
+              </div>
             </div>
           ) : (
             <EmptyState
diff --git a/ui/src/components/rules/NewRule.tsx b/ui/src/components/rules/NewRule.tsx
new file mode 100644
index 0000000000..b662a2e97e
--- /dev/null
+++ b/ui/src/components/rules/NewRule.tsx
@@ -0,0 +1,163 @@
+import { Menu, Transition } from '@headlessui/react';
+import {
+  ArrowDownIcon,
+  ArrowsUpDownIcon,
+  ArrowUpIcon,
+  CheckIcon,
+  ChevronRightIcon,
+  EllipsisVerticalIcon,
+  UsersIcon,
+  VariableIcon
+} from '@heroicons/react/24/outline';
+import { Fragment } from 'react';
+import { IEvaluatable } from '~/types/Evaluatable';
+import { INamespace } from '~/types/Namespace';
+import { classNames } from '~/utils/helpers';
+
+type NewRuleProps = {
+  namespace: INamespace;
+  totalRules: number;
+  rule: IEvaluatable;
+  onEdit?: () => void;
+  onDelete?: () => void;
+  style?: React.CSSProperties;
+  className?: string;
+  readOnly?: boolean;
+};
+
+export default function NewRule(props: NewRuleProps) {
+  const {
+    namespace,
+    totalRules,
+    rule,
+    onEdit,
+    onDelete,
+    style,
+    className,
+    readOnly,
+    ...rest
+  } = props;
+  return (
+    <li className="w-full items-center divide-y divide-dotted divide-violet-200 rounded-md border px-6 py-2 shadow-sm shadow-violet-100 bg-white border-violet-300 sm:flex sm:flex-col">
+      <div className="flex w-full flex-1 items-center text-xs">
+        <span className="ml-2 hidden h-6 w-6 justify-start text-gray-300 sm:flex">
+          {rule.rank === 1 && <ArrowDownIcon />}
+          {rule.rank === totalRules && <ArrowUpIcon />}
+          {rule.rank !== 1 && rule.rank !== totalRules && <ArrowsUpDownIcon />}
+        </span>
+        <div className="ml-2 flex grow items-center justify-evenly">
+          <a href="#" className="group flex">
+            <span className="flex items-center px-6 py-4 font-medium">
+              <UsersIcon
+                className="h-6 w-6 text-violet-400"
+                aria-hidden="true"
+              />
+              <div className="ml-6 min-w-0 flex-auto text-center">
+                <p className="mt-1 flex whitespace-nowrap text-gray-500">
+                  Matches Segment
+                </p>
+                <p className="truncate font-semibold text-gray-900">
+                  {rule.segment.name}
+                </p>
+              </div>
+            </span>
+          </a>
+          <ChevronRightIcon className="h-6 w-6 text-gray-300" />
+          {rule.rollouts.length === 0 && (
+            <a href="#" className="group flex">
+              <span className="flex items-center font-medium">
+                <CheckIcon className="h-6 w-6 text-violet-400" />
+                <div className="ml-6 min-w-0 flex-auto text-center">
+                  <p className="mt-1 flex text-gray-500">Return Match</p>
+                  <p className="font-semibold text-gray-900">true</p>
+                </div>
+              </span>
+            </a>
+          )}
+          {rule.rollouts.length === 1 && (
+            <a href="#" className="group flex">
+              <span className="flex items-center font-medium">
+                <VariableIcon className="h-6 w-6 text-violet-400" />
+                <div className="ml-6 min-w-0 flex-auto text-center">
+                  <p className="mt-1 flex text-gray-500">Return Variant</p>
+                  <p className="font-semibold text-gray-900">abc</p>
+                </div>
+              </span>
+            </a>
+          )}
+          {rule.rollouts.length > 1 && (
+            <a href="#" className="group flex">
+              <span className="flex items-center font-medium">
+                <VariableIcon className="h-6 w-6 text-violet-400" />
+                <div className="ml-6 min-w-0 flex-auto text-center">
+                  <p className="mt-1 flex text-gray-500">
+                    Return a Distribution
+                  </p>
+                </div>
+              </span>
+            </a>
+          )}
+        </div>
+        <Menu as="div" className="hidden sm:flex">
+          <Menu.Button className="-m-2.5 block p-2.5 text-gray-500 hover:text-gray-900">
+            <EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
+          </Menu.Button>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <Menu.Items className="absolute right-0 z-10 mt-2 w-32 origin-top-right rounded-md py-2 shadow-lg ring-1 ring-gray-900/5 bg-white focus:outline-none">
+              <Menu.Item>
+                {({ active }) => (
+                  <a
+                    href="#"
+                    className={classNames(
+                      active ? 'bg-gray-50' : '',
+                      'block px-3 py-1 leading-6 text-gray-900'
+                    )}
+                  >
+                    Edit
+                  </a>
+                )}
+              </Menu.Item>
+              <Menu.Item>
+                {({ active }) => (
+                  <a
+                    href="#"
+                    className={classNames(
+                      active ? 'bg-gray-50' : '',
+                      'block px-3 py-1 leading-6 text-gray-900'
+                    )}
+                  >
+                    Delete
+                  </a>
+                )}
+              </Menu.Item>
+            </Menu.Items>
+          </Transition>
+        </Menu>
+      </div>
+      {rule.rollouts.length > 1 && (
+        <div className="flex w-full items-center justify-center px-6 py-2 pt-4 text-xs">
+          <div className="flex w-fit space-x-6 px-2 text-xs">
+            {rule.rollouts.map((rollout) => (
+              <span className="inline-flex items-center gap-x-1.5 rounded-full px-3 py-1 text-xs font-medium text-gray-700 bg-violet-100">
+                <div className="truncate text-gray-900">
+                  {rollout.variant.key}
+                </div>
+                <div className="m-auto whitespace-nowrap text-gray-600">
+                  {rollout.distribution.rollout} %
+                </div>
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </li>
+  );
+}
diff --git a/ui/src/components/rules/Rule.tsx b/ui/src/components/rules/Rule.tsx
index b34d9a7148..202158b427 100644
--- a/ui/src/components/rules/Rule.tsx
+++ b/ui/src/components/rules/Rule.tsx
@@ -38,7 +38,7 @@ const Rule = forwardRef(
       key={rule.id}
       ref={ref}
       style={style}
-      className={`${className} flex rounded-md border p-6 bg-white border-gray-200 hover:shadow hover:shadow-violet-100 hover:border-violet-200`}
+      className={`${className} flex rounded-md border p-6 bg-white border-violet-300 hover:shadow hover:shadow-violet-100 hover:border-violet-200`}
     >
       <div
         className={classNames(
diff --git a/ui/src/components/rules/SortableRule.tsx b/ui/src/components/rules/SortableRule.tsx
index b63977ba3f..1704f5413b 100644
--- a/ui/src/components/rules/SortableRule.tsx
+++ b/ui/src/components/rules/SortableRule.tsx
@@ -1,10 +1,11 @@
 import { useSortable } from '@dnd-kit/sortable';
 import { IEvaluatable } from '~/types/Evaluatable';
 import { INamespace } from '~/types/Namespace';
-import Rule from './Rule';
+import NewRule from './NewRule';
 
 type SortableRuleProps = {
   namespace: INamespace;
+  totalRules: number;
   rule: IEvaluatable;
   onEdit: () => void;
   onDelete: () => void;
@@ -12,7 +13,7 @@ type SortableRuleProps = {
 };
 
 export default function SortableRule(props: SortableRuleProps) {
-  const { namespace, rule, onEdit, onDelete, readOnly } = props;
+  const { namespace, totalRules, rule, onEdit, onDelete, readOnly } = props;
   const {
     isDragging,
     attributes,
@@ -35,7 +36,7 @@ export default function SortableRule(props: SortableRuleProps) {
   const className = isDragging ? 'border-violet-200 cursor-move' : '';
 
   return (
-    <Rule
+    <NewRule
       key={rule.id}
       ref={setNodeRef}
       {...listeners}
@@ -43,6 +44,7 @@ export default function SortableRule(props: SortableRuleProps) {
       style={style}
       className={className}
       namespace={namespace}
+      totalRules={totalRules}
       rule={rule}
       onEdit={onEdit}
       onDelete={onDelete}

From e673deba82a2128fc57a7d2a1679e27669ad17af Mon Sep 17 00:00:00 2001
From: Mark Phelps <209477+markphelps@users.noreply.github.com>
Date: Tue, 11 Jul 2023 10:22:36 -0400
Subject: [PATCH 2/5] feat: done tweaking the ui

---
 ui/package-lock.json                | 798 ++++++++++++++++++++++++++++
 ui/package.json                     |   1 +
 ui/src/app/flags/Evaluation.tsx     |   5 +-
 ui/src/components/rules/NewRule.tsx |  88 ++-
 ui/tailwind.config.cjs              |   6 +-
 5 files changed, 851 insertions(+), 47 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index c98ed36f98..afcc1ce300 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -77,6 +77,7 @@
         "prettier-plugin-organize-imports": "^3.2.2",
         "prettier-plugin-tailwindcss": "^0.3.0",
         "tailwindcss": "^3.3.2",
+        "tailwindcss-bg-patterns": "^0.2.0",
         "ts-jest": "^29.1.1",
         "ts-node": "^10.9.1",
         "typescript": "^4.9.5",
@@ -2576,6 +2577,15 @@
         "react": ">=16.3"
       }
     },
+    "node_modules/@fullhuman/postcss-purgecss": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
+      "integrity": "sha512-kwOXw8fZ0Lt1QmeOOrd+o4Ibvp4UTEBFQbzvWldjlKv5n+G9sXfIPn1hh63IQIL8K8vbvv1oYMJiIUbuy9bGaA==",
+      "dev": true,
+      "dependencies": {
+        "purgecss": "^3.1.3"
+      }
+    },
     "node_modules/@headlessui/react": {
       "version": "1.7.15",
       "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.15.tgz",
@@ -4582,6 +4592,38 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/acorn-node": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^7.0.0",
+        "acorn-walk": "^7.0.0",
+        "xtend": "^4.0.2"
+      }
+    },
+    "node_modules/acorn-node/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-node/node_modules/acorn-walk": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/acorn-walk": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
@@ -4776,6 +4818,15 @@
       "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==",
       "dev": true
     },
+    "node_modules/at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.14",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
@@ -5256,6 +5307,15 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -5431,6 +5491,16 @@
       "integrity": "sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==",
       "dev": true
     },
+    "node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -5446,6 +5516,16 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -5520,6 +5600,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-unit-converter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
+      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
+      "dev": true
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5647,6 +5733,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/defined": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
+      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -5656,6 +5751,23 @@
         "node": ">=8"
       }
     },
+    "node_modules/detective": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
+      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
+      "dev": true,
+      "dependencies": {
+        "acorn-node": "^1.8.2",
+        "defined": "^1.0.0",
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "detective": "bin/detective.js"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -7065,6 +7177,21 @@
         "url": "https://www.patreon.com/infusion"
       }
     },
+    "node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -7412,6 +7539,18 @@
       "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
       "dev": true
     },
+    "node_modules/html-tags": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/human-signals": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
@@ -9647,6 +9786,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@@ -9888,6 +10039,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/modern-normalize": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
+      "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/moment": {
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
@@ -9954,6 +10117,15 @@
         "tailwindcss": "^2.0.0 || ^3.0.0"
       }
     },
+    "node_modules/node-emoji": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
+      "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.17.21"
+      }
+    },
     "node_modules/node-int64": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
@@ -10446,6 +10618,38 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-functions": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
+      "integrity": "sha512-N5yWXWKA+uhpLQ9ZhBRl2bIAdM6oVJYpDojuI1nF2SzXBimJcdjFwiAouBVbO5VuOF3qA6BSFWFc3wXbbj72XQ==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.2",
+        "object-assign": "^4.1.1",
+        "postcss": "^6.0.9",
+        "postcss-value-parser": "^3.3.0"
+      }
+    },
+    "node_modules/postcss-functions/node_modules/postcss": {
+      "version": "6.0.23",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+      "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.1",
+        "source-map": "^0.6.1",
+        "supports-color": "^5.4.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/postcss-functions/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+      "dev": true
+    },
     "node_modules/postcss-import": {
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
@@ -10713,6 +10917,15 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
       "dev": true
     },
+    "node_modules/pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/prompts": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -10766,6 +10979,30 @@
         }
       ]
     },
+    "node_modules/purgecss": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-3.1.3.tgz",
+      "integrity": "sha512-hRSLN9mguJ2lzlIQtW4qmPS2kh6oMnA9RxdIYK8sz18QYqd6ePp4GNDl18oWHA1f2v2NEQIh51CO8s/E3YGckQ==",
+      "dev": true,
+      "dependencies": {
+        "commander": "^6.0.0",
+        "glob": "^7.0.0",
+        "postcss": "^8.2.1",
+        "postcss-selector-parser": "^6.0.2"
+      },
+      "bin": {
+        "purgecss": "bin/purgecss.js"
+      }
+    },
+    "node_modules/purgecss/node_modules/commander": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -10946,6 +11183,22 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/reduce-css-calc": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
+      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
+      "dev": true,
+      "dependencies": {
+        "css-unit-converter": "^1.1.1",
+        "postcss-value-parser": "^3.3.0"
+      }
+    },
+    "node_modules/reduce-css-calc/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+      "dev": true
+    },
     "node_modules/redux": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
@@ -11264,6 +11517,21 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dev": true,
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "dev": true
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -11630,6 +11898,169 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss-bg-patterns": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss-bg-patterns/-/tailwindcss-bg-patterns-0.2.0.tgz",
+      "integrity": "sha512-g5A+J/r0C5jcRkpAOoRetit60LmSpBId+WP2fyUdnp7iJnGonFggsFkvEhMfddzsosYisrnuYwfCb3IHjQ2NxQ==",
+      "dev": true,
+      "dependencies": {
+        "tailwindcss": "2.0.3"
+      }
+    },
+    "node_modules/tailwindcss-bg-patterns/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/tailwindcss-bg-patterns/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/tailwindcss-bg-patterns/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/tailwindcss-bg-patterns/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/tailwindcss-bg-patterns/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tailwindcss-bg-patterns/node_modules/object-hash": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
+      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/tailwindcss-bg-patterns/node_modules/postcss-js": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
+      "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
+      "dev": true,
+      "dependencies": {
+        "camelcase-css": "^2.0.1",
+        "postcss": "^8.1.6"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/tailwindcss-bg-patterns/node_modules/postcss-nested": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.6"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/tailwindcss-bg-patterns/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tailwindcss-bg-patterns/node_modules/tailwindcss": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.0.3.tgz",
+      "integrity": "sha512-s8NEqdLBiVbbdL0a5XwTb8jKmIonOuI4RMENEcKLR61jw6SdKvBss7NWZzwCaD+ZIjlgmesv8tmrjXEp7C0eAQ==",
+      "dev": true,
+      "dependencies": {
+        "@fullhuman/postcss-purgecss": "^3.1.3",
+        "bytes": "^3.0.0",
+        "chalk": "^4.1.0",
+        "color": "^3.1.3",
+        "detective": "^5.2.0",
+        "didyoumean": "^1.2.1",
+        "fs-extra": "^9.1.0",
+        "html-tags": "^3.1.0",
+        "lodash": "^4.17.20",
+        "modern-normalize": "^1.0.0",
+        "node-emoji": "^1.8.1",
+        "object-hash": "^2.1.1",
+        "postcss-functions": "^3",
+        "postcss-js": "^3.0.3",
+        "postcss-nested": "^5.0.1",
+        "postcss-selector-parser": "^6.0.4",
+        "postcss-value-parser": "^4.1.0",
+        "pretty-hrtime": "^1.0.3",
+        "reduce-css-calc": "^2.1.8",
+        "resolve": "^1.19.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "autoprefixer": "^10.0.2",
+        "postcss": "^8.0.9"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -12028,6 +12459,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
@@ -12304,6 +12744,15 @@
         "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -14027,6 +14476,15 @@
         "prop-types": "^15.8.1"
       }
     },
+    "@fullhuman/postcss-purgecss": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
+      "integrity": "sha512-kwOXw8fZ0Lt1QmeOOrd+o4Ibvp4UTEBFQbzvWldjlKv5n+G9sXfIPn1hh63IQIL8K8vbvv1oYMJiIUbuy9bGaA==",
+      "dev": true,
+      "requires": {
+        "purgecss": "^3.1.3"
+      }
+    },
     "@headlessui/react": {
       "version": "1.7.15",
       "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.15.tgz",
@@ -15491,6 +15949,31 @@
       "dev": true,
       "requires": {}
     },
+    "acorn-node": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+      "dev": true,
+      "requires": {
+        "acorn": "^7.0.0",
+        "acorn-walk": "^7.0.0",
+        "xtend": "^4.0.2"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+          "dev": true
+        },
+        "acorn-walk": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+          "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+          "dev": true
+        }
+      }
+    },
     "acorn-walk": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
@@ -15639,6 +16122,12 @@
       "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==",
       "dev": true
     },
+    "at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true
+    },
     "autoprefixer": {
       "version": "10.4.14",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
@@ -15978,6 +16467,12 @@
         }
       }
     },
+    "bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "dev": true
+    },
     "call-bind": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -16093,6 +16588,16 @@
       "integrity": "sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==",
       "dev": true
     },
+    "color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -16108,6 +16613,16 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
+    "color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -16169,6 +16684,12 @@
         "which": "^2.0.1"
       }
     },
+    "css-unit-converter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
+      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
+      "dev": true
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -16260,12 +16781,29 @@
         "object-keys": "^1.1.1"
       }
     },
+    "defined": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
+      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
+      "dev": true
+    },
     "detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
       "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
       "dev": true
     },
+    "detective": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
+      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
+      "dev": true,
+      "requires": {
+        "acorn-node": "^1.8.2",
+        "defined": "^1.0.0",
+        "minimist": "^1.2.6"
+      }
+    },
     "didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -17270,6 +17808,18 @@
       "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
       "dev": true
     },
+    "fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "requires": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -17514,6 +18064,12 @@
       "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
       "dev": true
     },
+    "html-tags": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
+      "dev": true
+    },
     "human-signals": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
@@ -19129,6 +19685,16 @@
       "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
       "dev": true
     },
+    "jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.6",
+        "universalify": "^2.0.0"
+      }
+    },
     "jsx-ast-utils": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@@ -19319,6 +19885,12 @@
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
       "dev": true
     },
+    "modern-normalize": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
+      "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==",
+      "dev": true
+    },
     "moment": {
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
@@ -19368,6 +19940,15 @@
       "integrity": "sha512-ipTD+u64LXa03wDf1v0EawdsFC6vtS4xzzXknRd50BBtckDYzZAendkE+4VjSLrwQcTpk0XphWxFk4ORIDdrOg==",
       "requires": {}
     },
+    "node-emoji": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
+      "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.21"
+      }
+    },
     "node-int64": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
@@ -19703,6 +20284,37 @@
         "source-map-js": "^1.0.2"
       }
     },
+    "postcss-functions": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
+      "integrity": "sha512-N5yWXWKA+uhpLQ9ZhBRl2bIAdM6oVJYpDojuI1nF2SzXBimJcdjFwiAouBVbO5VuOF3qA6BSFWFc3wXbbj72XQ==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.2",
+        "object-assign": "^4.1.1",
+        "postcss": "^6.0.9",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
     "postcss-import": {
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
@@ -19819,6 +20431,12 @@
         }
       }
     },
+    "pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==",
+      "dev": true
+    },
     "prompts": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -19856,6 +20474,26 @@
       "integrity": "sha512-t+x1zEHDjBwkDGY5v5ApnZ/utcd4XYDiJsaQQoptTXgUXX95sDg1elCdJghzicm7n2mbCBJ3uYWr6M22SO19rg==",
       "dev": true
     },
+    "purgecss": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-3.1.3.tgz",
+      "integrity": "sha512-hRSLN9mguJ2lzlIQtW4qmPS2kh6oMnA9RxdIYK8sz18QYqd6ePp4GNDl18oWHA1f2v2NEQIh51CO8s/E3YGckQ==",
+      "dev": true,
+      "requires": {
+        "commander": "^6.0.0",
+        "glob": "^7.0.0",
+        "postcss": "^8.2.1",
+        "postcss-selector-parser": "^6.0.2"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+          "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+          "dev": true
+        }
+      }
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -19971,6 +20609,24 @@
         "picomatch": "^2.2.1"
       }
     },
+    "reduce-css-calc": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
+      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
+      "dev": true,
+      "requires": {
+        "css-unit-converter": "^1.1.1",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
     "redux": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
@@ -20200,6 +20856,23 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      },
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+          "dev": true
+        }
+      }
+    },
     "sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -20477,6 +21150,119 @@
         "sucrase": "^3.32.0"
       }
     },
+    "tailwindcss-bg-patterns": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss-bg-patterns/-/tailwindcss-bg-patterns-0.2.0.tgz",
+      "integrity": "sha512-g5A+J/r0C5jcRkpAOoRetit60LmSpBId+WP2fyUdnp7iJnGonFggsFkvEhMfddzsosYisrnuYwfCb3IHjQ2NxQ==",
+      "dev": true,
+      "requires": {
+        "tailwindcss": "2.0.3"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "object-hash": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
+          "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
+          "dev": true
+        },
+        "postcss-js": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
+          "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
+          "dev": true,
+          "requires": {
+            "camelcase-css": "^2.0.1",
+            "postcss": "^8.1.6"
+          }
+        },
+        "postcss-nested": {
+          "version": "5.0.6",
+          "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+          "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+          "dev": true,
+          "requires": {
+            "postcss-selector-parser": "^6.0.6"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "tailwindcss": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.0.3.tgz",
+          "integrity": "sha512-s8NEqdLBiVbbdL0a5XwTb8jKmIonOuI4RMENEcKLR61jw6SdKvBss7NWZzwCaD+ZIjlgmesv8tmrjXEp7C0eAQ==",
+          "dev": true,
+          "requires": {
+            "@fullhuman/postcss-purgecss": "^3.1.3",
+            "bytes": "^3.0.0",
+            "chalk": "^4.1.0",
+            "color": "^3.1.3",
+            "detective": "^5.2.0",
+            "didyoumean": "^1.2.1",
+            "fs-extra": "^9.1.0",
+            "html-tags": "^3.1.0",
+            "lodash": "^4.17.20",
+            "modern-normalize": "^1.0.0",
+            "node-emoji": "^1.8.1",
+            "object-hash": "^2.1.1",
+            "postcss-functions": "^3",
+            "postcss-js": "^3.0.3",
+            "postcss-nested": "^5.0.1",
+            "postcss-selector-parser": "^6.0.4",
+            "postcss-value-parser": "^4.1.0",
+            "pretty-hrtime": "^1.0.3",
+            "reduce-css-calc": "^2.1.8",
+            "resolve": "^1.19.0"
+          }
+        }
+      }
+    },
     "tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -20761,6 +21547,12 @@
       "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
       "dev": true
     },
+    "universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "dev": true
+    },
     "update-browserslist-db": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
@@ -20940,6 +21732,12 @@
         "signal-exit": "^3.0.7"
       }
     },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true
+    },
     "y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
diff --git a/ui/package.json b/ui/package.json
index ea0af4e078..a28a101ab4 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -81,6 +81,7 @@
     "prettier-plugin-organize-imports": "^3.2.2",
     "prettier-plugin-tailwindcss": "^0.3.0",
     "tailwindcss": "^3.3.2",
+    "tailwindcss-bg-patterns": "^0.2.0",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5",
diff --git a/ui/src/app/flags/Evaluation.tsx b/ui/src/app/flags/Evaluation.tsx
index b128f33781..fd40aee3c2 100644
--- a/ui/src/app/flags/Evaluation.tsx
+++ b/ui/src/app/flags/Evaluation.tsx
@@ -259,7 +259,10 @@ export default function Evaluation() {
                   them into place.
                 </p>
               </div>
-              <div className="w-full rounded-md p-6 lg:w-3/4">
+              <div
+                className="pattern-boxes w-full border p-6 pattern-bg-gray-50 pattern-gray-100 pattern-opacity-100 pattern-size-2 dark:pattern-bg-black  
+  dark:pattern-gray-900 lg:w-3/4"
+              >
                 <DndContext
                   sensors={sensors}
                   collisionDetection={closestCenter}
diff --git a/ui/src/components/rules/NewRule.tsx b/ui/src/components/rules/NewRule.tsx
index b662a2e97e..ca0f4ee126 100644
--- a/ui/src/components/rules/NewRule.tsx
+++ b/ui/src/components/rules/NewRule.tsx
@@ -4,12 +4,11 @@ import {
   ArrowsUpDownIcon,
   ArrowUpIcon,
   CheckIcon,
-  ChevronRightIcon,
   EllipsisVerticalIcon,
-  UsersIcon,
   VariableIcon
 } from '@heroicons/react/24/outline';
 import { Fragment } from 'react';
+import { Link } from 'react-router-dom';
 import { IEvaluatable } from '~/types/Evaluatable';
 import { INamespace } from '~/types/Namespace';
 import { classNames } from '~/utils/helpers';
@@ -38,64 +37,63 @@ export default function NewRule(props: NewRuleProps) {
     ...rest
   } = props;
   return (
-    <li className="w-full items-center divide-y divide-dotted divide-violet-200 rounded-md border px-6 py-2 shadow-sm shadow-violet-100 bg-white border-violet-300 sm:flex sm:flex-col">
+    <li className="w-full items-center space-y-2 rounded-md border px-6 py-2 shadow-md shadow-violet-100 bg-white border-violet-300 hover:shadow-violet-200 sm:flex sm:flex-col">
       <div className="flex w-full flex-1 items-center text-xs">
-        <span className="ml-2 hidden h-6 w-6 justify-start text-gray-300 sm:flex">
+        <span className="ml-2 hidden h-4 w-4 justify-start text-gray-300 hover:text-violet-300 sm:flex">
           {rule.rank === 1 && <ArrowDownIcon />}
           {rule.rank === totalRules && <ArrowUpIcon />}
           {rule.rank !== 1 && rule.rank !== totalRules && <ArrowsUpDownIcon />}
         </span>
-        <div className="ml-2 flex grow items-center justify-evenly">
-          <a href="#" className="group flex">
+        <div className="ml-2 flex grow items-center justify-around">
+          <span className="flex items-center px-6 py-4 text-xs font-light text-gray-600">
+            IF
+          </span>
+          <Link
+            to={`/namespaces/${namespace.key}/segments/${rule.segment.key}`}
+          >
             <span className="flex items-center px-6 py-4 font-medium">
-              <UsersIcon
-                className="h-6 w-6 text-violet-400"
-                aria-hidden="true"
-              />
-              <div className="ml-6 min-w-0 flex-auto text-center">
-                <p className="mt-1 flex whitespace-nowrap text-gray-500">
+              <div className="ml-6 min-w-0 flex-auto space-y-1 text-center">
+                <p className="flex whitespace-nowrap text-gray-500">
                   Matches Segment
                 </p>
-                <p className="truncate font-semibold text-gray-900">
+                <p className="truncate bg-violet-50/80 px-3 py-1 font-semibold text-gray-900 hover:underline hover:underline-offset-2">
                   {rule.segment.name}
                 </p>
               </div>
             </span>
-          </a>
-          <ChevronRightIcon className="h-6 w-6 text-gray-300" />
+          </Link>
+          <span className="flex items-center px-6 py-4 text-xs font-light text-gray-600">
+            THEN
+          </span>
           {rule.rollouts.length === 0 && (
-            <a href="#" className="group flex">
-              <span className="flex items-center font-medium">
-                <CheckIcon className="h-6 w-6 text-violet-400" />
-                <div className="ml-6 min-w-0 flex-auto text-center">
-                  <p className="mt-1 flex text-gray-500">Return Match</p>
-                  <p className="font-semibold text-gray-900">true</p>
-                </div>
-              </span>
-            </a>
+            <span className="flex items-center font-medium">
+              <CheckIcon className="h-6 w-6 text-violet-400" />
+              <div className="ml-6 min-w-0 flex-auto space-y-1 text-center">
+                <p className="mt-1 flex text-gray-500">Return Match</p>
+                <p className="bg-violet-50/80 px-3 py-1 font-semibold text-gray-900">
+                  true
+                </p>
+              </div>
+            </span>
           )}
           {rule.rollouts.length === 1 && (
-            <a href="#" className="group flex">
-              <span className="flex items-center font-medium">
-                <VariableIcon className="h-6 w-6 text-violet-400" />
-                <div className="ml-6 min-w-0 flex-auto text-center">
-                  <p className="mt-1 flex text-gray-500">Return Variant</p>
-                  <p className="font-semibold text-gray-900">abc</p>
-                </div>
-              </span>
-            </a>
+            <span className="flex items-center font-medium">
+              <VariableIcon className="h-6 w-6 text-violet-400" />
+              <div className="ml-6 min-w-0 flex-auto space-y-1 text-center">
+                <p className="mt-1 flex text-gray-500">Return Variant</p>
+                <p className="bg-violet-50/80 px-3 py-1 font-semibold text-gray-900">
+                  abc
+                </p>
+              </div>
+            </span>
           )}
           {rule.rollouts.length > 1 && (
-            <a href="#" className="group flex">
-              <span className="flex items-center font-medium">
-                <VariableIcon className="h-6 w-6 text-violet-400" />
-                <div className="ml-6 min-w-0 flex-auto text-center">
-                  <p className="mt-1 flex text-gray-500">
-                    Return a Distribution
-                  </p>
-                </div>
-              </span>
-            </a>
+            <span className="flex items-center font-medium">
+              <VariableIcon className="h-6 w-6 text-violet-400" />
+              <div className="ml-6 min-w-0 flex-auto space-y-1 text-center">
+                <p className="mt-1 flex text-gray-500">Return a Distribution</p>
+              </div>
+            </span>
           )}
         </div>
         <Menu as="div" className="hidden sm:flex">
@@ -143,10 +141,10 @@ export default function NewRule(props: NewRuleProps) {
         </Menu>
       </div>
       {rule.rollouts.length > 1 && (
-        <div className="flex w-full items-center justify-center px-6 py-2 pt-4 text-xs">
+        <div className="flex w-full items-center justify-center px-6 py-2 text-xs">
           <div className="flex w-fit space-x-6 px-2 text-xs">
             {rule.rollouts.map((rollout) => (
-              <span className="inline-flex items-center gap-x-1.5 rounded-full px-3 py-1 text-xs font-medium text-gray-700 bg-violet-100">
+              <span className="inline-flex items-center gap-x-1.5 bg-violet-50/60 px-3 py-1 text-xs font-medium text-gray-700">
                 <div className="truncate text-gray-900">
                   {rollout.variant.key}
                 </div>
diff --git a/ui/tailwind.config.cjs b/ui/tailwind.config.cjs
index bb4ec073fb..a0d688d01e 100644
--- a/ui/tailwind.config.cjs
+++ b/ui/tailwind.config.cjs
@@ -19,5 +19,9 @@ module.exports = {
     extend: {}
   },
   darkMode: 'class',
-  plugins: [require('@tailwindcss/forms'), require('nightwind')]
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('nightwind'),
+    require('tailwindcss-bg-patterns')
+  ]
 };

From 7d7987450be82cdd47d737613b59eaeb12a63cb8 Mon Sep 17 00:00:00 2001
From: Mark Phelps <209477+markphelps@users.noreply.github.com>
Date: Tue, 11 Jul 2023 11:03:32 -0400
Subject: [PATCH 3/5] chore: drag drop

---
 ui/src/app/flags/Evaluation.tsx     |   8 +-
 ui/src/components/rules/NewRule.tsx | 144 +++++++++++++++++-----------
 2 files changed, 94 insertions(+), 58 deletions(-)

diff --git a/ui/src/app/flags/Evaluation.tsx b/ui/src/app/flags/Evaluation.tsx
index fd40aee3c2..b4d24fff16 100644
--- a/ui/src/app/flags/Evaluation.tsx
+++ b/ui/src/app/flags/Evaluation.tsx
@@ -24,7 +24,7 @@ import Button from '~/components/forms/buttons/Button';
 import Modal from '~/components/Modal';
 import DeletePanel from '~/components/panels/DeletePanel';
 import EditRuleForm from '~/components/rules/EditRuleForm';
-import Rule from '~/components/rules/Rule';
+import NewRule from '~/components/rules/NewRule';
 import RuleForm from '~/components/rules/RuleForm';
 import SortableRule from '~/components/rules/SortableRule';
 import Slideover from '~/components/Slideover';
@@ -297,7 +297,11 @@ export default function Evaluation() {
                   </SortableContext>
                   <DragOverlay>
                     {activeRule ? (
-                      <Rule namespace={namespace} rule={activeRule} />
+                      <NewRule
+                        namespace={namespace}
+                        totalRules={rules.length}
+                        rule={activeRule}
+                      />
                     ) : null}
                   </DragOverlay>
                 </DndContext>
diff --git a/ui/src/components/rules/NewRule.tsx b/ui/src/components/rules/NewRule.tsx
index ca0f4ee126..01e004306d 100644
--- a/ui/src/components/rules/NewRule.tsx
+++ b/ui/src/components/rules/NewRule.tsx
@@ -7,7 +7,7 @@ import {
   EllipsisVerticalIcon,
   VariableIcon
 } from '@heroicons/react/24/outline';
-import { Fragment } from 'react';
+import { forwardRef, Fragment, Ref } from 'react';
 import { Link } from 'react-router-dom';
 import { IEvaluatable } from '~/types/Evaluatable';
 import { INamespace } from '~/types/Namespace';
@@ -24,22 +24,36 @@ type NewRuleProps = {
   readOnly?: boolean;
 };
 
-export default function NewRule(props: NewRuleProps) {
-  const {
-    namespace,
-    totalRules,
-    rule,
-    onEdit,
-    onDelete,
-    style,
-    className,
-    readOnly,
-    ...rest
-  } = props;
-  return (
-    <li className="w-full items-center space-y-2 rounded-md border px-6 py-2 shadow-md shadow-violet-100 bg-white border-violet-300 hover:shadow-violet-200 sm:flex sm:flex-col">
+const NewRule = forwardRef(
+  (
+    {
+      namespace,
+      totalRules,
+      rule,
+      onEdit,
+      onDelete,
+      style,
+      className,
+      readOnly,
+      ...rest
+    }: NewRuleProps,
+    ref: Ref<HTMLLIElement>
+  ) => (
+    <li
+      key={rule.id}
+      ref={ref}
+      style={style}
+      className={`${className} w-full items-center space-y-2 rounded-md border px-6 py-2 shadow-md shadow-violet-100 bg-white border-violet-300 hover:shadow-violet-200 sm:flex sm:flex-col`}
+    >
       <div className="flex w-full flex-1 items-center text-xs">
-        <span className="ml-2 hidden h-4 w-4 justify-start text-gray-300 hover:text-violet-300 sm:flex">
+        <span
+          key={rule.id}
+          className={classNames(
+            readOnly ? 'hover:cursor-not-allowed' : 'hover:cursor-move',
+            'ml-2 hidden h-4 w-4 justify-start text-gray-300 hover:text-violet-300 sm:flex'
+          )}
+          {...rest}
+        >
           {rule.rank === 1 && <ArrowDownIcon />}
           {rule.rank === totalRules && <ArrowUpIcon />}
           {rule.rank !== 1 && rule.rank !== totalRules && <ArrowsUpDownIcon />}
@@ -100,62 +114,80 @@ export default function NewRule(props: NewRuleProps) {
           <Menu.Button className="-m-2.5 block p-2.5 text-gray-500 hover:text-gray-900">
             <EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
           </Menu.Button>
-          <Transition
-            as={Fragment}
-            enter="transition ease-out duration-100"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
-          >
-            <Menu.Items className="absolute right-0 z-10 mt-2 w-32 origin-top-right rounded-md py-2 shadow-lg ring-1 ring-gray-900/5 bg-white focus:outline-none">
-              <Menu.Item>
-                {({ active }) => (
-                  <a
-                    href="#"
-                    className={classNames(
-                      active ? 'bg-gray-50' : '',
-                      'block px-3 py-1 leading-6 text-gray-900'
-                    )}
-                  >
-                    Edit
-                  </a>
-                )}
-              </Menu.Item>
-              <Menu.Item>
-                {({ active }) => (
-                  <a
-                    href="#"
-                    className={classNames(
-                      active ? 'bg-gray-50' : '',
-                      'block px-3 py-1 leading-6 text-gray-900'
+          {!readOnly && (
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-100"
+              enterFrom="transform opacity-0 scale-95"
+              enterTo="transform opacity-100 scale-100"
+              leave="transition ease-in duration-75"
+              leaveFrom="transform opacity-100 scale-100"
+              leaveTo="transform opacity-0 scale-95"
+            >
+              <Menu.Items className="absolute right-0 z-10 mt-2 w-32 origin-top-right rounded-md py-2 shadow-lg ring-1 ring-gray-900/5 bg-white focus:outline-none">
+                {rule.rollouts.length > 1 && (
+                  <Menu.Item>
+                    {({ active }) => (
+                      <a
+                        href="#"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          onEdit && onEdit();
+                        }}
+                        className={classNames(
+                          active ? 'bg-gray-50' : '',
+                          'block px-3 py-1 leading-6 text-gray-900'
+                        )}
+                      >
+                        Edit
+                      </a>
                     )}
-                  >
-                    Delete
-                  </a>
+                  </Menu.Item>
                 )}
-              </Menu.Item>
-            </Menu.Items>
-          </Transition>
+                <Menu.Item>
+                  {({ active }) => (
+                    <a
+                      href="#"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        onDelete && onDelete();
+                      }}
+                      className={classNames(
+                        active ? 'bg-gray-50' : '',
+                        'block px-3 py-1 leading-6 text-gray-900'
+                      )}
+                    >
+                      Delete
+                    </a>
+                  )}
+                </Menu.Item>
+              </Menu.Items>
+            </Transition>
+          )}
         </Menu>
       </div>
       {rule.rollouts.length > 1 && (
         <div className="flex w-full items-center justify-center px-6 py-2 text-xs">
           <div className="flex w-fit space-x-6 px-2 text-xs">
             {rule.rollouts.map((rollout) => (
-              <span className="inline-flex items-center gap-x-1.5 bg-violet-50/60 px-3 py-1 text-xs font-medium text-gray-700">
+              <div
+                key={rollout.variant.key}
+                className="inline-flex items-center gap-x-1.5 bg-violet-50/60 px-3 py-1 text-xs font-medium text-gray-700"
+              >
                 <div className="truncate text-gray-900">
                   {rollout.variant.key}
                 </div>
                 <div className="m-auto whitespace-nowrap text-gray-600">
                   {rollout.distribution.rollout} %
                 </div>
-              </span>
+              </div>
             ))}
           </div>
         </div>
       )}
     </li>
-  );
-}
+  )
+);
+
+NewRule.displayName = 'NewRule';
+export default NewRule;

From 838a5d1c1566195eb2e4ef7f905546bcc3d3db9e Mon Sep 17 00:00:00 2001
From: Mark Phelps <209477+markphelps@users.noreply.github.com>
Date: Tue, 11 Jul 2023 11:10:21 -0400
Subject: [PATCH 4/5] chore: show actual variant key; fix border color on drag

---
 ui/src/components/rules/NewRule.tsx      | 2 +-
 ui/src/components/rules/SortableRule.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/rules/NewRule.tsx b/ui/src/components/rules/NewRule.tsx
index 01e004306d..db731993aa 100644
--- a/ui/src/components/rules/NewRule.tsx
+++ b/ui/src/components/rules/NewRule.tsx
@@ -96,7 +96,7 @@ const NewRule = forwardRef(
               <div className="ml-6 min-w-0 flex-auto space-y-1 text-center">
                 <p className="mt-1 flex text-gray-500">Return Variant</p>
                 <p className="bg-violet-50/80 px-3 py-1 font-semibold text-gray-900">
-                  abc
+                  {rule.rollouts[0].variant.key}
                 </p>
               </div>
             </span>
diff --git a/ui/src/components/rules/SortableRule.tsx b/ui/src/components/rules/SortableRule.tsx
index 1704f5413b..1a66f7034d 100644
--- a/ui/src/components/rules/SortableRule.tsx
+++ b/ui/src/components/rules/SortableRule.tsx
@@ -33,7 +33,7 @@ export default function SortableRule(props: SortableRuleProps) {
       }
     : undefined;
 
-  const className = isDragging ? 'border-violet-200 cursor-move' : '';
+  const className = isDragging ? 'border-violet-500 cursor-move' : '';
 
   return (
     <NewRule

From 0bfd8ec86e880db5599fcc86ac70bec013d5ebc8 Mon Sep 17 00:00:00 2001
From: Mark Phelps <209477+markphelps@users.noreply.github.com>
Date: Tue, 11 Jul 2023 11:45:05 -0400
Subject: [PATCH 5/5] chore: make responsive

---
 ui/src/app/flags/Evaluation.tsx     |  4 +--
 ui/src/components/rules/NewRule.tsx | 50 ++++++++++++++---------------
 2 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/ui/src/app/flags/Evaluation.tsx b/ui/src/app/flags/Evaluation.tsx
index b4d24fff16..ab411a810f 100644
--- a/ui/src/app/flags/Evaluation.tsx
+++ b/ui/src/app/flags/Evaluation.tsx
@@ -260,8 +260,8 @@ export default function Evaluation() {
                 </p>
               </div>
               <div
-                className="pattern-boxes w-full border p-6 pattern-bg-gray-50 pattern-gray-100 pattern-opacity-100 pattern-size-2 dark:pattern-bg-black  
-  dark:pattern-gray-900 lg:w-3/4"
+                className="pattern-boxes w-full border p-2 pattern-bg-gray-50 pattern-gray-100 pattern-opacity-100 pattern-size-2 dark:pattern-bg-black dark:pattern-gray-900  
+  lg:w-3/4 lg:p-6"
               >
                 <DndContext
                   sensors={sensors}
diff --git a/ui/src/components/rules/NewRule.tsx b/ui/src/components/rules/NewRule.tsx
index db731993aa..b2f6e86b0b 100644
--- a/ui/src/components/rules/NewRule.tsx
+++ b/ui/src/components/rules/NewRule.tsx
@@ -43,14 +43,14 @@ const NewRule = forwardRef(
       key={rule.id}
       ref={ref}
       style={style}
-      className={`${className} w-full items-center space-y-2 rounded-md border px-6 py-2 shadow-md shadow-violet-100 bg-white border-violet-300 hover:shadow-violet-200 sm:flex sm:flex-col`}
+      className={`${className} w-full items-center space-y-2 rounded-md border shadow-md shadow-violet-100 bg-white border-violet-300 hover:shadow-violet-200 sm:flex sm:flex-col lg:px-6 lg:py-2`}
     >
-      <div className="flex w-full flex-1 items-center text-xs">
+      <div className="flex w-full flex-1 items-center p-4 text-xs lg:p-0">
         <span
           key={rule.id}
           className={classNames(
             readOnly ? 'hover:cursor-not-allowed' : 'hover:cursor-move',
-            'ml-2 hidden h-4 w-4 justify-start text-gray-300 hover:text-violet-300 sm:flex'
+            'ml-2 hidden h-4 w-4 justify-start text-gray-400 hover:text-violet-300 sm:flex'
           )}
           {...rest}
         >
@@ -58,19 +58,19 @@ const NewRule = forwardRef(
           {rule.rank === totalRules && <ArrowUpIcon />}
           {rule.rank !== 1 && rule.rank !== totalRules && <ArrowsUpDownIcon />}
         </span>
-        <div className="ml-2 flex grow items-center justify-around">
-          <span className="flex items-center px-6 py-4 text-xs font-light text-gray-600">
+        <div className="flex grow flex-col items-center justify-center sm:ml-2 md:flex-row md:justify-between">
+          <span className="flex items-center text-xs font-light text-gray-600 lg:px-6 lg:py-4">
             IF
           </span>
           <Link
             to={`/namespaces/${namespace.key}/segments/${rule.segment.key}`}
           >
-            <span className="flex items-center px-6 py-4 font-medium">
-              <div className="ml-6 min-w-0 flex-auto space-y-1 text-center">
-                <p className="flex whitespace-nowrap text-gray-500">
-                  Matches Segment
+            <span className="flex items-center px-6 py-4">
+              <div className="min-w-0 flex-auto space-y-2 text-center">
+                <p className="flex whitespace-nowrap text-gray-600">
+                  Matches Segment:
                 </p>
-                <p className="truncate bg-violet-50/80 px-3 py-1 font-semibold text-gray-900 hover:underline hover:underline-offset-2">
+                <p className="truncate bg-violet-50/80 px-3 py-1 font-medium text-gray-900 hover:underline hover:underline-offset-2">
                   {rule.segment.name}
                 </p>
               </div>
@@ -80,38 +80,38 @@ const NewRule = forwardRef(
             THEN
           </span>
           {rule.rollouts.length === 0 && (
-            <span className="flex items-center font-medium">
-              <CheckIcon className="h-6 w-6 text-violet-400" />
-              <div className="ml-6 min-w-0 flex-auto space-y-1 text-center">
-                <p className="mt-1 flex text-gray-500">Return Match</p>
-                <p className="bg-violet-50/80 px-3 py-1 font-semibold text-gray-900">
+            <span className="flex items-center">
+              <CheckIcon className="hidden h-6 w-6 text-violet-400 lg:mr-4 lg:block" />
+              <div className="min-w-0 flex-auto space-y-2 text-center">
+                <p className="mt-1 flex text-gray-600">Return Match:</p>
+                <p className="bg-violet-50/80 px-3 py-1 font-medium text-gray-900">
                   true
                 </p>
               </div>
             </span>
           )}
           {rule.rollouts.length === 1 && (
-            <span className="flex items-center font-medium">
-              <VariableIcon className="h-6 w-6 text-violet-400" />
-              <div className="ml-6 min-w-0 flex-auto space-y-1 text-center">
-                <p className="mt-1 flex text-gray-500">Return Variant</p>
-                <p className="bg-violet-50/80 px-3 py-1 font-semibold text-gray-900">
+            <span className="flex items-center">
+              <VariableIcon className="hidden h-6 w-6 text-violet-400 lg:mr-4 lg:block" />
+              <div className="min-w-0 flex-auto space-y-2 text-center">
+                <p className="mt-1 flex text-gray-600">Return Variant:</p>
+                <p className="bg-violet-50/80 px-3 py-1 font-medium text-gray-900">
                   {rule.rollouts[0].variant.key}
                 </p>
               </div>
             </span>
           )}
           {rule.rollouts.length > 1 && (
-            <span className="flex items-center font-medium">
-              <VariableIcon className="h-6 w-6 text-violet-400" />
-              <div className="ml-6 min-w-0 flex-auto space-y-1 text-center">
-                <p className="mt-1 flex text-gray-500">Return a Distribution</p>
+            <span className="flex items-center">
+              <VariableIcon className="hidden h-6 w-6 text-violet-400 lg:mr-4 lg:block" />
+              <div className="min-w-0 flex-auto space-y-2 text-center">
+                <p className="mt-1 flex text-gray-600">Return a Distribution</p>
               </div>
             </span>
           )}
         </div>
         <Menu as="div" className="hidden sm:flex">
-          <Menu.Button className="-m-2.5 block p-2.5 text-gray-500 hover:text-gray-900">
+          <Menu.Button className="ml-4 block text-gray-600 hover:text-gray-900">
             <EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
           </Menu.Button>
           {!readOnly && (