chore: Small visual tweaks

ui/src/components/flags/FlagForm.tsx

@@ -21,11 +21,15 @@ import { classNames, copyTextToClipboard, stringAsKey } from '~/utils/helpers';
 const flagTypes = [
   {
     id: FlagType.VARIANT,
-    name: 'Variant'
+    name: 'Variant',
+    description:
+      "Can have multiple string values or 'variants'. Rules can be used to determine which variant is returned."
   },
   {
     id: FlagType.BOOLEAN,
-    name: 'Boolean'
+    name: 'Boolean',
+    description:
+      "Can be either 'true' or 'false'. Rollouts can be used to determine which value is returned."
   }
 ];
 
@@ -209,33 +213,40 @@ export default function FlagForm(props: { flag?: IFlag }) {
                   </label>
                   <fieldset className="mt-2">
                     <legend className="sr-only">Type</legend>
-                    <div className="flex flex-row space-x-5">
-                      {flagTypes.map((type) => (
+                    <div className="space-y-5">
+                      {flagTypes.map((flagType) => (
                         <div
-                          key={type.id}
+                          key={flagType.id}
                           className="relative flex items-start"
                         >
                           <div className="flex h-5 items-center">
                             <input
-                              id={type.id}
+                              id={flagType.id}
+                              aria-describedby={`${flagType.id}-description`}
                               name="type"
                               type="radio"
                               disabled={!isNew || readOnly}
                               className="text-violet-400 border-gray-300 h-4 w-4 focus:ring-violet-400"
                               onChange={() => {
-                                formik.setFieldValue('type', type.id);
+                                formik.setFieldValue('type', flagType.id);
                               }}
-                              checked={type.id === formik.values.type}
-                              value={type.id}
+                              checked={flagType.id === formik.values.type}
+                              value={flagType.id}
                             />
                           </div>
                           <div className="ml-3 text-sm">
                             <label
-                              htmlFor={type.id}
+                              htmlFor={flagType.id}
                               className="text-gray-700 font-medium"
                             >
-                              {type.name}
+                              {flagType.name}
                             </label>
+                            <p
+                              id={`${flagType.id}-description`}
+                              className="text-gray-500"
+                            >
+                              {flagType.description}
+                            </p>
                           </div>
                         </div>
                       ))}

ui/src/components/tokens/ShowTokenPanel.tsx

@@ -1,5 +1,9 @@
 import { Dialog } from '@headlessui/react';
-import { CheckIcon, ClipboardDocumentIcon } from '@heroicons/react/24/outline';
+import {
+  CheckIcon,
+  ClipboardDocumentIcon,
+  LockClosedIcon
+} from '@heroicons/react/24/outline';
 import hljs from 'highlight.js';
 import text from 'highlight.js/lib/languages/plaintext';
 import 'highlight.js/styles/tokyo-night-dark.css';
@@ -28,7 +32,10 @@ export default function ShowTokenPanel(props: ShowTokenPanelProps) {
     <>
       <div>
         <div className="bg-green-100 mx-auto flex h-12 w-12 items-center justify-center rounded-full">
-          <CheckIcon className="text-green-600 h-6 w-6" aria-hidden="true" />
+          <LockClosedIcon
+            className="text-green-600 h-6 w-6"
+            aria-hidden="true"
+          />
         </div>
         <div className="mt-3 text-center sm:mt-5">
           <Dialog.Title
@@ -42,7 +49,8 @@ export default function ShowTokenPanel(props: ShowTokenPanelProps) {
               Please copy the token below and store it in a secure location.
             </p>
             <p className="text-gray-700 mt-2 text-sm">
-              You will not be able to view it again
+              You will <span className="font-extrabold">not</span>&nbsp;be able
+              to view it again
             </p>
           </div>
           <div className="m-auto mt-4 flex content-center bg-[#1a1b26]">