Small fix to the Chatbar, and make it better for small / phone screens

src/common/card/NitroCardView.scss

@@ -84,7 +84,7 @@ $nitro-card-tabs-height: 42px;
             background-color: #ededed;
 
             .nav-item {
-                padding: 0.2rem 0.8rem;
+                padding: 0.2rem 0.4rem;
                 background-color: #dedede;
                 color: #000;
                 z-index: 1;
@@ -95,7 +95,7 @@ $nitro-card-tabs-height: 42px;
                 border-top-right-radius: 0.5rem !important;
 
                 &.active {
-                    background-color: #ededed;
+                    background-color: #e1e5ff;
 
                     &:before {
                         background: $white;

src/components/room/widgets/chat-input/ChatInputColorSelectorView.tsx

@@ -49,7 +49,7 @@ export const ChatInputColorSelectorView: FC<ChatInputColorSelectorViewProps> = p
             </Base>
             <Overlay show={ selectorVisible } target={ iconRef } placement="top">
                 <Popover className="nitro-chat-style-selector-container">
-                    <NitroCardContentView overflow="hidden" className="bg-transparent">
+                    <NitroCardContentView overflow="hidden" className="bg-transparent colour-container image-rendering-pixelated">
                         <AutoGrid gap={ 1 } columnCount={ 6 } columnMinWidth={ 20 } columnMinHeight={ 20 }>
                             { colours && (colours.size > 0) && Array.from(colours).map(([ color, hex ]) =>
                             {

src/components/room/widgets/chat-input/ChatInputEmojiSelectorView.tsx

@@ -51,7 +51,7 @@ export const ChatInputEmojiSelectorView: FC<ChatInputEmojiSelectorViewProps> = p
         <Overlay show={selectorVisible} target={iconRef} placement="top">
             <Popover className="nitro-chat-style-selector-container">
                 <NitroCardContentView overflow="hidden" className="bg-transparent">
-                    <Grid columnCount={4} overflow="auto">
+                    <Grid columnCount={3} overflow="auto">
                         {emojiList && emojiList.length > 0 && emojiList.map((emojiId) => {
                             return (
                                 <Flex center pointer key={emojiId} onClick={(event) => selectEmoji(emojiId)}>

src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx

@@ -44,11 +44,11 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
 
     return (
         <>
-            <Base pointer className="icon chatstyles-icon nitro-chat-style-box" onClick={ toggleSelector } />
+            <Base pointer className="icon chatstyles-icon" onClick={ toggleSelector } />
             <Overlay show={ selectorVisible } target={ target } placement="top">
-                <Popover className="nitro-chat-style-selector-container image-rendering-pixelated">
+                <Popover className="nitro-chat-style-selector-container">
-                    <NitroCardContentView overflow="hidden" className="bg-transparent">
+                    <NitroCardContentView overflow="hidden" className="bg-transparent bubble-window image-rendering-pixelated">
-                        <Grid columnCount={ 3 } overflow="auto">
+                        <Grid gap={ 1 } columnCount={ 3 } overflow="auto">
                             { chatStyleIds && (chatStyleIds.length > 0) && chatStyleIds.map((styleId) =>
                             {
                                 return (

src/components/room/widgets/chat-input/ChatInputView.scss

@@ -1,5 +1,6 @@
 .nitro-chat-input-container {
     display: flex;
+	justify-content: space-between;
     align-items: center;
     position: relative;
     height: 40px;
@@ -11,12 +12,13 @@
     overflow: hidden;
     width: -webkit-fill-available;
 
-    @include media-breakpoint-down(sm) {
+    @include media-breakpoint-down(xxl) {
         display: flex;
         position: absolute;
         bottom: 70px;
-        left: calc(100% / 3);
+        left: 50%;
-        width: 200px!important;
+        transform: translateX(-50%);
+        width: auto;
     }
 
     &:before {
@@ -55,6 +57,11 @@
     
     }
 	
+	.colour-container {
+        visibility: visible;
+        width: 100%;
+    }
+
     .bubble-container {
         visibility: visible;
         width: 75%;
@@ -74,26 +81,8 @@
     width: calc(100% - 80px)!important;
 }
 
-.info-habbopages {
-    cursor: pointer;
-    background-image: url("@/assets/images/boxes/card/questionmark.png");
-    background-size: contain;
-    background-repeat: no-repeat;
-    width: 19px;
-    height: 20px;
-    position: relative;
-
-    &:hover {
-        background-image: url("@/assets/images/boxes/card/questionmark_hover.png");
-    }
-
-    &:active {
-        background-image: url("@/assets/images/boxes/card/questionmark_click.png");
-    }
-}
-
 .nitro-chat-style-selector-container {
-    width: auto;
+    width: $chat-input-style-selector-widget-width;
     max-height: $chat-input-style-selector-widget-height;
 
     .content-area {
@@ -137,3 +126,20 @@
         }
     }
 }
+
+.info-habbopages {
+    cursor: pointer;
+    background-image: url("@/assets/images/boxes/card/questionmark.png");
+    width: 19px;
+    height: 20px;
+    right: -2px;
+    position: relative;
+
+        &:hover {
+            background-image: url("@/assets/images/boxes/card/questionmark_hover.png");
+
+        &:active {
+            background-image: url("@/assets/images/boxes/card/questionmark_click.png");
+        }
+    }
+}

src/components/room/widgets/chat-input/ChatInputView.tsx

@@ -251,12 +251,14 @@ export const ChatInputView: FC<{}> = props =>
                     { floodBlocked &&
                     <Text variant="danger">{ LocalizeText('chat.input.alert.flood', [ 'time' ], [ floodBlockedSeconds.toString() ]) } </Text> }
                 </div>
+				<Flex>
 					<ChatInputEmojiSelectorView addChatEmoji={ addEmojiToChat } />
 					<ChatInputColorSelectorView chatColour={ chatColour } selectColour={ updateChatColour } />
 					<ChatInputStyleSelectorView chatStyleId={ chatStyleId } chatStyleIds={ chatStyleIds } selectChatStyleId={ updateChatStyleId } />
-				{ (showInfoHabboPages) &&
+					{
-                    <Base className="info-habbopages" onClick={ () => CreateLinkEvent('habbopages/chat/chatting') }></Base>
+						(showInfoHabboPages) && <Base className="info-habbopages" onClick={ () => CreateLinkEvent('habbopages/chat/chatting') }></Base>
 					}
+				</Flex>
 				</div>, document.getElementById('toolbar-chat-input-container'))
     );
 }