minor improvements to ui component docs (#2805)

* minor improvements to ui component docs

* polish queue.mdx, remove duplicate icon

docs/docs/contributor/server/basics/queue.mdx

@@ -2,21 +2,22 @@
 title: Message Queue
 sidebar_position: 5
 sidebar_custom_props:
-  icon: TbTopologyStar
+  icon: TbSchema
 ---
 
-Queues facilitate async operations to be performed.It could be used for performing background tasks such as sending a welcome email on register.
+Queues facilitate async operations to be performed. They can be used for performing background tasks such as sending a welcome email on register.
 Each use case will have its own queue class extended from `MessageQueueServiceBase`.
 
-Currently queue supports 2 drivers which can be configurred by env variable `MESSAGE_QUEUE_TYPE`
-1. `pg-boss` this is the default driver, uses [pg-boss](https://github.com/timgit/pg-boss) under the hood.
-2. `bull-mq` it uses [bull-mq](https://bullmq.io/) under the hood.
+Currently, queue supports two drivers which can be configurred by env variable `MESSAGE_QUEUE_TYPE`.
+1. `pg-boss`: this is the default driver, which uses [pg-boss](https://github.com/timgit/pg-boss) under the hood.
+2. `bull-mq`: this uses [bull-mq](https://bullmq.io/) under the hood.
 
-Steps to create and use a new queue
-1. add a queue name for your new queue under enum `MESSAGE_QUEUES`.
-2. provide factory implementation of the queue with queue name as dependency token.
-3. inject the queue that you created in the required module/service with queue name as dependency token.
-4. add worker class with token based injection just like producer.
+## Steps to create and use a new queue
+
+1. Add a queue name for your new queue under enum `MESSAGE_QUEUES`.
+2. Provide the factory implementation of the queue with the queue name as the dependency token.
+3. Inject the queue that you created in the required module/service with the queue name as the dependency token.
+4. Add worker class with token based injection just like producer.
 
 ### Example usage
 ```ts

docs/src/theme/icons.js

@@ -57,5 +57,6 @@ export {
   TbColorPicker,
   TbCircleDot,
   TbUpload,
-  TbVariable
+  TbVariable,
+  TbSchema,
 } from "react-icons/tb";

docs/src/ui/generated/index.d.ts

@@ -676,4 +676,4 @@ declare module '@emotion/react' {
     }
 }
 
-export { AnimatedCheckmark, type AnimatedCheckmarkProps, AppTooltip, type AppTooltipProps, AutosizeTextInput, AutosizeTextInputVariant, Button, type ButtonAccent, ButtonGroup, type ButtonGroupProps, type ButtonPosition, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, CheckboxShape, CheckboxSize, CheckboxVariant, Checkmark, type CheckmarkProps, Chip, ChipAccent, ChipSize, ChipVariant, CircularProgressBar, ColorSchemeCard, type ColorSchemeCardProps, ColorSchemePicker, type ColorSchemePickerProps, type ColorSchemeSegmentProps, EntityChip, type EntityChipProps, EntityChipVariant, EntityTitleDoubleTextInput, type EntityTitleDoubleTextInputProps, FloatingButton, FloatingButtonGroup, type FloatingButtonGroupProps, type FloatingButtonPosition, type FloatingButtonProps, type FloatingButtonSize, FloatingIconButton, FloatingIconButtonGroup, type FloatingIconButtonGroupProps, type FloatingIconButtonPosition, type FloatingIconButtonProps, type FloatingIconButtonSize, IconAddressBook, IconPicker, ImageInput, LabelPosition, LightButton, type LightButtonAccent, type LightButtonProps, LightIconButton, type LightIconButtonAccent, type LightIconButtonProps, type LightIconButtonSize, MainButton, OverflowingTextWithTooltip, ProgressBar, type ProgressBarControls, type ProgressBarProps, Radio, RadioGroup, type RadioProps, RadioSize, RoundedIconButton, SoonPill, Tag, type TagColor, type TagProps, TooltipPosition, castToTagColor, darkTheme, lightTheme };
+export { AnimatedCheckmark, AnimatedCheckmarkProps, AppTooltip, AppTooltipProps, AutosizeTextInput, AutosizeTextInputVariant, Button, ButtonAccent, ButtonGroup, ButtonGroupProps, ButtonPosition, ButtonProps, ButtonSize, ButtonVariant, Checkbox, CheckboxShape, CheckboxSize, CheckboxVariant, Checkmark, CheckmarkProps, Chip, ChipAccent, ChipSize, ChipVariant, CircularProgressBar, ColorSchemeCard, ColorSchemeCardProps, ColorSchemePicker, ColorSchemePickerProps, ColorSchemeSegmentProps, EntityChip, EntityChipProps, EntityChipVariant, EntityTitleDoubleTextInput, EntityTitleDoubleTextInputProps, FloatingButton, FloatingButtonGroup, FloatingButtonGroupProps, FloatingButtonPosition, FloatingButtonProps, FloatingButtonSize, FloatingIconButton, FloatingIconButtonGroup, FloatingIconButtonGroupProps, FloatingIconButtonPosition, FloatingIconButtonProps, FloatingIconButtonSize, IconAddressBook, IconPicker, ImageInput, LabelPosition, LightButton, LightButtonAccent, LightButtonProps, LightIconButton, LightIconButtonAccent, LightIconButtonProps, LightIconButtonSize, MainButton, OverflowingTextWithTooltip, ProgressBar, ProgressBarControls, ProgressBarProps, Radio, RadioGroup, RadioProps, RadioSize, RoundedIconButton, SoonPill, Tag, TagColor, TagProps, TooltipPosition, castToTagColor, darkTheme, lightTheme };

docs/src/ui/input/button/buttonGroupCode.js

@@ -15,7 +15,7 @@ export const MyComponent = () => {
         accent="blue"
         soon={false}
         disabled={false}
-        focus={true}
+        focus={false}
         onClick={() => console.log("click")}
       />
       <Button
@@ -29,7 +29,7 @@ export const MyComponent = () => {
         accent="blue"
         soon={false}
         disabled={false}
-        focus={true}
+        focus={false}
         onClick={() => console.log("click")}
       />
       <Button
@@ -43,7 +43,7 @@ export const MyComponent = () => {
         accent="blue"
         soon={false}
         disabled={false}
-        focus={true}
+        focus={false}
         onClick={() => console.log("click")}
       />
     </ButtonGroup>

docs/src/ui/input/color-scheme/colorSchemePickerCode.js

@@ -2,7 +2,7 @@ import { ColorSchemePicker } from "@/ui/input/color-scheme/components/ColorSchem
 
 export const MyComponent = () => {
   return <ColorSchemePicker
-  value
+  value="Dark"
   onChange
   />;
 };

front/src/modules/ui/display/tag/components/Tag.tsx

@@ -27,7 +27,7 @@ const StyledTag = styled.h3<{
   background: ${({ color, theme }) => theme.tag.background[color]};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   color: ${({ color, theme }) => theme.tag.text[color]};
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
   font-size: ${({ theme }) => theme.font.size.md};
   font-style: normal;