Don't fade in messages

chat/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "./src/index.tsx",
   "license": "MIT",
   "dependencies": {

chat/src/features/chat/ChatMessage.css

@@ -1,15 +1,5 @@
-@keyframes fading-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
 .ChatMessage {
   position: relative;
-  animation: fading-in 0.3s ease-in-out forwards;
   padding-right: 1.5rem;
   min-height: 28px;
 }
@@ -67,6 +57,20 @@
   background: none !important;
   border: none !important;
   box-shadow: none !important;
+  display: flex;
+  align-items: center;
+}
+
+.ChatMessage-actions-button button {
+  background: none !important;
+  border: none !important;
+  padding: 0 !important;
+}
+
+.ChatMessage-actions-button button i {
+  position: relative;
+  top: 3px;
+  margin-right: 1rem;
 }
 
 .ChatMessage-actions {
@@ -93,7 +97,6 @@
 /* List */
 .ChatMessageList {
   flex: 1;
-  padding-bottom: 2rem;
 }
 
 .ChatMessageList-group {

chat/src/features/chat/ChatMessage.tsx

@@ -23,7 +23,7 @@ export function ChatMessage({
   showUser = true,
   timestampUpdates,
   actionsOpen,
-  onToggleActions
+  onToggleActions,
 }: ChatMessageProps) {
   const {
     id,
@@ -53,7 +53,7 @@ export function ChatMessage({
       setConfirmedDelete(true);
     }
   }, [text, confirmedDelete]);
-  const handleQuoteMessage = useCallback(() => {
+  const handleQuoteMessageAction = useCallback(() => {
     quoteMessage(message);
     onToggleActions(message.id);
   }, [message, onToggleActions]);
@@ -72,18 +72,26 @@ export function ChatMessage({
       id={id}
     >
       {!actionsOpen && (
-        <button
+        <div className="ChatMessage-actions-button">
-          className="btn btn-secondary ChatMessage-actions-button"
+          <button
-          onClick={() => onToggleActions(id)}
+            className="btn btn-secondary"
-        >
+            onClick={() => quoteMessage(message)}
-          ...
+          >
-        </button>
+            <i className="fas fa-reply" />
+          </button>
+          <button
+            className="btn btn-secondary"
+            onClick={() => onToggleActions(id)}
+          >
+            ...
+          </button>
+        </div>
       )}
       {actionsOpen && (
         <div className="ChatMessage-actions">
           <button
             className="btn btn-secondary ChatMessage-button"
-            onClick={handleQuoteMessage}
+            onClick={handleQuoteMessageAction}
           >
             <i className="fas fa-reply" /> Reply
           </button>