💄 style: Update Mobile Compinents

Author: canisminor1990

src/ChatInputArea/mobile/ChatInputArea.tsx

@@ -17,13 +17,13 @@ import {
 import { Flexbox } from 'react-layout-kit';
 
 import ActionIcon from '@/ActionIcon';
-import MobileSafeArea from '@/MobileSafeArea';
 
 import ChatInputAreaInner, { type ChatInputAreaInnerProps } from '../ChatInputAreaInner';
 
 const useStyles = createStyles(({ css, token }) => {
   return {
     container: css`
+      flex: none;
       padding-block: 12px 12px;
       background: ${token.colorFillQuaternary};
       border-block-start: 1px solid ${rgba(token.colorBorder, 0.25)};
@@ -51,7 +51,6 @@ const useStyles = createStyles(({ css, token }) => {
 export interface MobileChatInputAreaProps extends ChatInputAreaInnerProps {
   bottomAddons?: ReactNode;
   expand?: boolean;
-  safeArea?: boolean;
   setExpand?: (expand: boolean) => void;
   style?: CSSProperties;
   textAreaLeftAddons?: ReactNode;
@@ -74,7 +73,6 @@ const MobileChatInputArea = forwardRef<TextAreaRef, MobileChatInputAreaProps>(
       onInput,
       loading,
       value,
-      safeArea,
     },
     ref,
   ) => {
@@ -114,51 +112,46 @@ const MobileChatInputArea = forwardRef<TextAreaRef, MobileChatInputAreaProps>(
     const showAddons = !expand && !isFocused;
 
     return (
-      <Flexbox>
+      <Flexbox
+        className={cx(styles.container, expand && styles.expand, className)}
+        gap={12}
+        style={style}
+      >
+        {topAddons && <Flexbox style={showAddons ? {} : { display: 'none' }}>{topAddons}</Flexbox>}
         <Flexbox
-          className={cx(styles.container, expand && styles.expand, className)}
-          gap={12}
-          style={style}
+          className={cx(expand && styles.expand)}
+          ref={containerRef}
+          style={{ position: 'relative' }}
         >
-          {topAddons && (
-            <Flexbox style={showAddons ? {} : { display: 'none' }}>{topAddons}</Flexbox>
-          )}
-          <Flexbox
-            className={cx(expand && styles.expand)}
-            ref={containerRef}
-            style={{ position: 'relative' }}
-          >
-            {showFullscreen && (
-              <ActionIcon
-                active
-                className={styles.expandButton}
-                icon={expand ? ChevronDown : ChevronUp}
-                onClick={() => setExpand?.(!expand)}
-                size={{ blockSize: 24, borderRadius: '50%', fontSize: 14 }}
-                style={expand ? { top: 6 } : {}}
-              />
-            )}
-            <InnerContainer>
-              <ChatInputAreaInner
-                autoSize={expand ? false : { maxRows: 6, minRows: 0 }}
-                className={cx(expand && styles.expandTextArea)}
-                loading={loading}
-                onBlur={() => setIsFocused(false)}
-                onFocus={() => setIsFocused(true)}
-                onInput={onInput}
-                onSend={onSend}
-                ref={ref}
-                style={{ height: 36, paddingBlock: 6 }}
-                type={expand ? 'pure' : 'block'}
-                value={value}
-              />
-            </InnerContainer>
-          </Flexbox>
-          {bottomAddons && (
-            <Flexbox style={showAddons ? {} : { display: 'none' }}>{bottomAddons}</Flexbox>
+          {showFullscreen && (
+            <ActionIcon
+              active
+              className={styles.expandButton}
+              icon={expand ? ChevronDown : ChevronUp}
+              onClick={() => setExpand?.(!expand)}
+              size={{ blockSize: 24, borderRadius: '50%', fontSize: 14 }}
+              style={expand ? { top: 6 } : {}}
+            />
           )}
+          <InnerContainer>
+            <ChatInputAreaInner
+              autoSize={expand ? false : { maxRows: 6, minRows: 0 }}
+              className={cx(expand && styles.expandTextArea)}
+              loading={loading}
+              onBlur={() => setIsFocused(false)}
+              onFocus={() => setIsFocused(true)}
+              onInput={onInput}
+              onSend={onSend}
+              ref={ref}
+              style={{ height: 36, paddingBlock: 6 }}
+              type={expand ? 'pure' : 'block'}
+              value={value}
+            />
+          </InnerContainer>
         </Flexbox>
-        {safeArea && !isFocused && <MobileSafeArea position={'bottom'} />}
+        {bottomAddons && (
+          <Flexbox style={showAddons ? {} : { display: 'none' }}>{bottomAddons}</Flexbox>
+        )}
       </Flexbox>
     );
   },

src/MobileTabBar/style.ts

@@ -7,9 +7,10 @@ export const useStyles = createStyles(({ css, token }) => {
       color: ${token.colorPrimary};
     `,
     container: css`
+      user-select: none;
+
       overflow: hidden;
       flex: none;
-      user-select: none;
 
       width: 100vw;
 
@@ -31,16 +32,16 @@ export const useStyles = createStyles(({ css, token }) => {
       cursor: pointer;
       width: 48px;
       height: 48px;
-      color: ${token.colorTextSecondary};
+      color: ${token.colorTextDescription};
     `,
     title: css`
       overflow: hidden;
 
       width: 100%;
+      margin-block-start: -0.125em;
 
       font-size: 12px;
       line-height: 1.125em;
-      margin-top: -0.125em;
       text-align: center;
       text-overflow: ellipsis;
       white-space: nowrap;