feat(web): ability to align icon at the top for notifs/text ui

package/client/resource/interface/notify.ts

@@ -22,6 +22,7 @@ interface NotifyProps {
   style?: Sx;
   icon?: IconName | [IconPrefix, IconName];
   iconColor?: string;
+  alignIcon?: 'top' | 'center';
 }
 
 export const notify = (data: NotifyProps): void => exports.ox_lib.notify(data);

package/client/resource/interface/textui.ts

@@ -6,7 +6,9 @@ interface OptionsProps {
   icon?: IconName | [IconPrefix, IconName];
   iconColor?: string;
   style?: CSSProperties;
+  alignIcon?: 'top' | 'center';
 }
+
 export const showTextUI = (text: string, options?: OptionsProps): void => exports.ox_lib.showTextUI(text, options);
 
 export const hideTextUI = (): void => exports.ox_lib.hideTextUI();

resource/interface/client/notify.lua

@@ -11,6 +11,7 @@
 ---@field style? { [string]: any }
 ---@field icon? string | {[1]: IconProp, [2]: string};
 ---@field iconColor? string;
+---@field alignIcon? 'top' | 'center';
 
 ---`client`
 ---@param data NotifyProps

resource/interface/client/textui.lua

@@ -3,6 +3,7 @@
 ---@field icon? string | {[1]: IconProp, [2]: string};
 ---@field iconColor? string;
 ---@field style? string | table;
+---@field alignIcon? 'top' | 'center';
 
 local isOpen = false
 local currentText

web/src/features/notifications/NotificationWrapper.tsx

@@ -169,13 +169,22 @@ const Notifications: React.FC = () => {
                         ? 'yellow'
                         : 'blue'
                     }
+                    style={{ alignSelf: !data.alignIcon || data.alignIcon === 'center' ? 'center' : 'start' }}
                     radius="xl"
                     size={32}
                   >
                     <FontAwesomeIcon icon={data.icon} fixedWidth size="lg" />
                   </Avatar>
                 ) : (
-                  <FontAwesomeIcon icon={data.icon} style={{ color: data.iconColor }} fixedWidth size="lg" />
+                  <FontAwesomeIcon
+                    icon={data.icon}
+                    style={{
+                      color: data.iconColor,
+                      alignSelf: !data.alignIcon || data.alignIcon === 'center' ? 'center' : 'start',
+                    }}
+                    fixedWidth
+                    size="lg"
+                  />
                 )}
               </>
             )}

web/src/features/textui/TextUI.tsx

@@ -52,7 +52,17 @@ const TextUI: React.FC = () => {
         <ScaleFade visible={visible}>
           <Box style={data.style} className={classes.container}>
             <Group spacing={12}>
-              {data.icon && <FontAwesomeIcon icon={data.icon} fixedWidth size="lg" style={{ color: data.iconColor }} />}
+              {data.icon && (
+                <FontAwesomeIcon
+                  icon={data.icon}
+                  fixedWidth
+                  size="lg"
+                  style={{
+                    color: data.iconColor,
+                    alignSelf: !data.alignIcon || data.alignIcon === 'center' ? 'center' : 'start',
+                  }}
+                />
+              )}
               <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm]}>
                 {data.text}
               </ReactMarkdown>

web/src/typings/notifications.ts

@@ -12,4 +12,5 @@ export interface NotificationProps {
   position?: ToastPosition | 'top' | 'bottom';
   id?: number | string;
   type?: string;
+  alignIcon?: 'top' | 'center';
 }

web/src/typings/textui.ts

@@ -9,4 +9,5 @@ export interface TextUiProps {
   icon?: IconProp;
   iconColor?: string;
   style?: React.CSSProperties;
+  alignIcon?: 'top' | 'center';
 }