Новый стиль

client-web/src/modules/chats/presentation/components/MessageInput.tsx

@@ -589,11 +589,11 @@ export default function MessageInput({ chatId }: MessageInputProps) {
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            className="absolute inset-0 z-50 rounded-[2rem] mx-6 mb-6 mt-2 bg-knot-500/10 border-2 border-dashed border-knot-400 backdrop-blur-sm flex items-center justify-center pointer-events-none"
+            className="absolute inset-0 z-50 rounded-3xl mx-6 mb-6 mt-2 bg-primary/10 border-2 border-dashed border-primary/40 backdrop-blur-sm flex items-center justify-center pointer-events-none"
           >
-            <div className="flex flex-col items-center gap-2 text-knot-300">
-              <FileText size={32} className="animate-bounce" />
-              <p className="font-semibold">{t('dropFileHere')}</p>
+            <div className="flex flex-col items-center gap-4 text-primary">
+              <span className="material-symbols-outlined text-5xl animate-bounce">upload_file</span>
+              <p className="font-bold text-lg font-headline uppercase tracking-widest">{t('dropFileHere')}</p>
             </div>
           </motion.div>
         )}
@@ -603,27 +603,25 @@ export default function MessageInput({ chatId }: MessageInputProps) {
       <AnimatePresence>
         {(replyTo || editingMessage) && (
           <motion.div
-            initial={{ height: 0, opacity: 0, y: 10, scale: 0.95 }}
-            animate={{ height: 'auto', opacity: 1, y: 0, scale: 1 }}
-            exit={{ height: 0, opacity: 0, y: 10, scale: 0.95 }}
-            className="mb-2 max-w-3xl mx-auto overflow-hidden px-1.5"
+            initial={{ height: 0, opacity: 0, scale: 0.98 }}
+            animate={{ height: 'auto', opacity: 1, scale: 1 }}
+            exit={{ height: 0, opacity: 0, scale: 0.98 }}
+            className="mb-2 max-w-4xl mx-auto overflow-hidden"
           >
-            <div className="flex items-center gap-3 px-4 py-2.5 bg-white/[0.04] backdrop-blur-2xl border border-white/10 rounded-2xl relative shadow-xl">
-              <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-3/5 bg-gradient-to-b from-knot-400 to-purple-500 rounded-r-md" />
-              <div className="w-6 h-6 rounded-full bg-white/5 flex items-center justify-center flex-shrink-0">
-                {editingMessage ? (
-                  <Pencil size={12} className="text-knot-400" />
-                ) : (
-                  <Reply size={12} className="text-knot-400" />
-                )}
+            <div className="flex items-center gap-4 px-5 py-3 bg-surface-container-high/80 backdrop-blur-2xl border-none rounded-2xl relative shadow-xl slide-on-ice">
+              <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1.5 h-3/5 bg-primary rounded-r-full" />
+              <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
+                <span className="material-symbols-outlined text-primary text-[20px]">
+                  {editingMessage ? 'edit' : 'reply'}
+                </span>
               </div>
               <div className="flex-1 min-w-0 flex flex-col justify-center">
-                <p className="text-xs font-semibold text-knot-400 mb-0.5">
+                <p className="text-[11px] font-black tracking-widest uppercase text-primary mb-0.5">
                   {editingMessage
                     ? t('editing')
                     : `${t('replyTo')} ${replyTo?.sender?.displayName || replyTo?.sender?.userName || replyTo?.sender?.username || ''}`}
                 </p>
-                <div className="text-xs text-zinc-300 truncate opacity-80 border-l border-white/20 pl-2 ml-1">
+                <div className="text-[13px] text-on-surface-variant truncate opacity-80 pl-1 border-l border-on-surface-variant/10 ml-0.5">
                   {replyTo?.quote ? `«${replyTo.quote}»` : (editingMessage || replyTo)?.content || t('media') || 'Медиа'}
                 </div>
               </div>
@@ -634,9 +632,9 @@ export default function MessageInput({ chatId }: MessageInputProps) {
                   setAttachments([]);
                   setText('');
                 }}
-                className="w-7 h-7 rounded-full flex items-center justify-center text-white/40 hover:text-white hover:bg-white/10 transition-colors"
+                className="w-8 h-8 rounded-full flex items-center justify-center text-on-surface-variant/40 hover:text-primary hover:bg-primary/10 transition-all slide-on-ice"
               >
-                <X size={14} />
+                <span className="material-symbols-outlined text-[20px]">close</span>
               </button>
             </div>
           </motion.div>
@@ -711,21 +709,23 @@ export default function MessageInput({ chatId }: MessageInputProps) {
 
       {/* Recording UI */}
       {isRecording ? (
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-4 bg-surface-container-high rounded-[2rem] px-6 py-4 w-full max-w-4xl mx-auto shadow-2xl animate-in slide-in-from-bottom-4 slide-on-ice">
           <button
             onClick={cancelRecording}
-            className="p-2 rounded-lg text-red-400 hover:bg-red-500/10 transition-colors flex-shrink-0"
+            className="w-10 h-10 rounded-full flex items-center justify-center text-error hover:bg-error/10 transition-all slide-on-ice"
           >
-            <X size={20} />
+            <span className="material-symbols-outlined">delete</span>
           </button>
-          <div className="flex-1 flex items-center gap-3">
-            <span className="w-2.5 h-2.5 rounded-full bg-red-500 animate-pulse" />
-            <span className="text-sm text-zinc-300 font-mono">{formatTime(recordingTime)}</span>
-            <div className="flex-1 flex items-center gap-0.5 h-6">
+          <div className="flex-1 flex items-center gap-4">
+            <div className="flex items-center gap-2">
+              <span className="w-3 h-3 rounded-full bg-error animate-pulse shadow-[0_0_8px_rgba(244,67,54,0.5)]" />
+              <span className="text-sm font-bold font-mono text-on-surface tracking-tighter w-12">{formatTime(recordingTime)}</span>
+            </div>
+            <div className="flex-1 flex items-center gap-[3px] h-8 items-center">
               {liveBars.map((h, i) => (
                 <div
                   key={i}
-                  className="flex-1 bg-knot-400/60 rounded-full transition-all duration-100"
+                  className="flex-1 bg-primary/40 rounded-full transition-all duration-100"
                   style={{ height: `${h}%` }}
                 />
               ))}
@@ -733,20 +733,20 @@ export default function MessageInput({ chatId }: MessageInputProps) {
           </div>
           <button
             onClick={stopRecording}
-            className="p-3 rounded-full bg-accent hover:bg-accent-hover transition-colors text-white flex-shrink-0"
+            className="w-12 h-12 rounded-2xl bg-primary text-on-primary flex items-center justify-center hover:scale-105 active:scale-95 transition-all shadow-lg shadow-primary/20 slide-on-ice"
           >
-            <Send size={18} />
+            <span className="material-symbols-outlined">send</span>
           </button>
         </div>
       ) : (
-        <div className="flex items-end gap-1.5 bg-surface-secondary rounded-2xl border border-border/40 px-2 py-1.5 w-full max-w-4xl mx-auto transition-all duration-200 focus-within:border-border/80">
+        <div className="flex items-end gap-2 bg-surface-container-high rounded-[2rem] px-4 py-2 w-full max-w-4xl mx-auto shadow-sm transition-all duration-500 focus-within:shadow-xl focus-within:bg-surface-container-highest slide-on-ice">
           {/* Attach */}
           <div className="relative mb-0 flex-shrink-0 self-center">
             <button
               onClick={() => setShowAttachMenu(!showAttachMenu)}
-              className="p-2 rounded-full text-zinc-400 hover:text-accent hover:bg-surface-hover transition-colors"
+              className="w-10 h-10 rounded-full text-on-surface-variant hover:text-primary hover:bg-primary/10 transition-all slide-on-ice flex items-center justify-center"
             >
-              <Paperclip size={22} strokeWidth={1.5} />
+              <span className="material-symbols-outlined text-[24px]">add</span>
             </button>
             <AnimatePresence>
               {showAttachMenu && (
@@ -887,14 +887,13 @@ export default function MessageInput({ chatId }: MessageInputProps) {
               }}
               onKeyDown={handleKeyDown}
               onContextMenu={handleInputContextMenu}
+              className="w-full bg-transparent border-none focus:ring-0 text-on-surface placeholder-on-surface-variant/30 text-[15px] leading-relaxed resize-none max-h-[150px] custom-scrollbar scroll-smooth outline-none py-1"
               placeholder={attachments.length > 0 ? t('addCaption') : t('message')}
-              rows={1}
-              className="w-full resize-none bg-transparent text-[15px] text-white placeholder-zinc-500 leading-[22px] py-[10px] px-2 border-none focus:ring-0 max-h-[150px] outline-none"
             />
           </div>
 
-          {/* Emoji */}
-          <div className="relative mb-0 flex-shrink-0 self-center">
+          {/* Action Buttons */}
+          <div className="flex items-center gap-1 self-center pb-2 flex-shrink-0">
             <button
               onClick={() => setShowEmoji(!showEmoji)}
               className="p-2 rounded-full text-zinc-400 hover:text-accent hover:bg-surface-hover transition-colors"