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

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';
 }