Cognition UI Facelift

components/KernDropdown.tsx

@@ -197,7 +197,7 @@ export default function KernDropdown(props: KernDropdownProps) {
                         disabled={isDisabled && !props.ignoreDisabledForSearch}
                         placeholder="Type to search..." />
                     <MemoIconChevronDown
-                        className={`h-5 w-5 absolute right-0 mr-3 -mt-7 ${isDisabled && !props.ignoreDisabledForSearch ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+                        className={`h-5 w-5 absolute right-0 mr-3 -mt-7 ${isDisabled && !props.ignoreDisabledForSearch ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'} ${props.buttonIconClasses}`}
                         aria-hidden="true"
                     />
                 </div> : <>
@@ -212,14 +212,17 @@ export default function KernDropdown(props: KernDropdownProps) {
                     ) : (<Menu.Button onClick={toggleDropdown} className={`inline-flex w-full justify-between items-center rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 shadow-sm  focus:outline-none focus:ring-2
             focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-gray-100 disabled:opacity-50 disabled:cursor-not-allowed ${props.buttonClasses ?? ''} ${props.buttonCaptionBgColor ?? 'bg-white hover:bg-gray-50'}`}
                         disabled={isDisabled && !props.hasCheckboxes}>
-                        {!props.hasCheckboxesThreeStates && props.buttonName}
+                        <div className='flex items-center gap-x-1'>
+                            {props.buttonPrefixIcon}
+                            {!props.hasCheckboxesThreeStates && props.buttonName}
+                        </div>
                         {props.hasCheckboxesThreeStates && <label
                             className="truncate cursor-pointer text-sm">{getDropdownDisplayText(props.options, "EMPTY")}
                             <span style={{ color: '#4e46e5' }}>{getDropdownDisplayText(props.options, "NOT_NEGATED")}</span>
                             <span style={{ color: '#ef4444' }}>{getDropdownDisplayText(props.options, "NEGATED")}</span>
                         </label>}
                         <MemoIconChevronDown
-                            className="-mr-1 ml-2 h-5 w-5"
+                            className={`-mr-1 ml-2 h-5 w-5 ${props.buttonIconClasses}`}
                             aria-hidden="true"
                         />
                     </Menu.Button>)}

components/SVGIcon.tsx

@@ -1,7 +1,10 @@
-import { MemoIconBolt, MemoIconChevronDown, MemoIconCode, MemoIconDotsVertical, MemoIconEdit, MemoIconExternalLink, MemoIconFileInfo, MemoIconFilePencil, MemoIconLoader, MemoIconPlayerPlayFilled, MemoIconShieldCheckFilled, MemoIconShieldFilled, MemoIconSquare, MemoIconSquareCheck, MemoIconTrash } from './kern-icons/icons';
+import { IconHammer, IconSettingsFilled, IconZoomIn, IconZoomOut } from '@tabler/icons-react';
+import { MemoIconBolt, MemoIconChevronDown, MemoIconCode, MemoIconDotsVertical, MemoIconEdit, MemoIconExternalLink, MemoIconFileInfo, MemoIconFilePencil, MemoIconLoader, MemoIconPlayerPlayFilled, MemoIconPlus, MemoIconSettings, MemoIconShieldCheckFilled, MemoIconShieldFilled, MemoIconSquare, MemoIconSquareCheck, MemoIconTrash } from './kern-icons/icons';
 
 export const SUPPORTED_ICONS = ['IconCode', 'IconBolt', 'IconSquareCheck', 'IconSquare', 'IconPlayerPlayFilled', 'IconTrash', 'IconExternalLink',
-    'IconLoader', 'IconFilePencil', 'IconFileInfo', 'IconEdit', 'IconShieldFilled', 'IconShieldCheckFilled'
+    'IconLoader', 'IconFilePencil', 'IconFileInfo', 'IconEdit', 'IconShieldFilled', 'IconShieldCheckFilled', 'IconPlus', 'IconSettings', 'IconSettingsFilled',
+    'IconHammer', 'IconZoomIn', 'IconZoomOut'
+
 ]
 
 type SVGIconProps = {
@@ -43,6 +46,18 @@ export default function SVGIcon(props: SVGIconProps) {
             return <MemoIconShieldFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconShieldCheckFilled':
             return <MemoIconShieldCheckFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        case 'IconPlus':
+            return <MemoIconPlus size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        case 'IconSettings':
+            return <MemoIconSettings size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        case 'IconSettingsFilled':
+            return <IconSettingsFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        case 'IconHammer':
+            return <IconHammer size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        case 'IconZoomIn':
+            return <IconZoomIn size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        case 'IconZoomOut':
+            return <IconZoomOut size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         default: return <MemoIconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
     }
 

types/dropdown.ts

@@ -1,3 +1,5 @@
+import React from "react";
+
 /**
  * Optionset for kern dropdown
  * @buttonName {string} - The name of the button
@@ -12,6 +14,7 @@
  * @doNotUseTextArray {boolean} - If the dropdown should not use the text array
  * @disabledOptions {boolean[], optional} - disables the dropdown option (needs to be the exact same length as the optionArray)
  * @buttonClasses {string} - The classes that will be applied to the button
+ * @buttonIconClasses {string} - The classes that will be applied to the chevron down icon of the button
  * @tooltipsArray {string[]} - The array of tooltips that will be applied to the dropdown items (needs to be the exact same length as the optionArray)
  * @tooltipArrayPlacement {string} - The placement of the tooltips in the dropdown items
  * @hasSearchBar {boolean} - If the dropdown has a search bar
@@ -55,6 +58,8 @@ export type KernDropdownProps = {
     doNotUseTextArray?: boolean;
     disabledOptions?: boolean[];
     buttonClasses?: string;
+    buttonIconClasses?: string;
+    buttonPrefixIcon?: React.ReactNode;
     tooltipsArray?: string[];
     tooltipArrayPlacement?: "bottom" | "left" | "right" | "top" | "topStart" | "topEnd" | "leftStart" | "leftEnd" | "bottomStart" | "bottomEnd" | "rightStart" | "rightEnd";
     hasSearchBar?: boolean;