- modified 404 chat styling

  - added auto scroll disable

src/components/404internal/Chat404.tsx

@@ -51,6 +51,8 @@ type ChatMessage = ConversationUserEntered | ConversationMessage
 interface State {
   // tslint:disable-next-line
   readonly currentConversation: ChatMessage[]
+
+  readonly isAutoScrollBotEnabled: boolean
 }
 
 const chatWrapperId = 'chat-window-wrapper'
@@ -75,6 +77,7 @@ class Chat404 extends React.Component<Props, State> {
 
     this.state = {
       currentConversation: [],
+      isAutoScrollBotEnabled: true,
     }
   }
 
@@ -148,7 +151,10 @@ class Chat404 extends React.Component<Props, State> {
         } as ChatMessage
 
 
-        this.scrollToBottom()
+        if (this.state.isAutoScrollBotEnabled) {
+          this.scrollToBottom()
+        }
+
         await wait(this.getTypingTimeInMsFromMsg(message.message))
 
         //remove old message and insert new with changed props
@@ -170,7 +176,10 @@ class Chat404 extends React.Component<Props, State> {
         } as State
       })
 
-      this.scrollToBottom()
+      if (this.state.isAutoScrollBotEnabled) {
+        this.scrollToBottom()
+      }
+
       await wait(this.getReadTimeInMsFromMsg(message.message))
 
     }
@@ -192,7 +201,11 @@ class Chat404 extends React.Component<Props, State> {
           404
         </div>
 
-        <div className="down-button clickable" onClick={() => {
+        <div className={`down-button clickable${this.state.isAutoScrollBotEnabled ? ' is-enabled' : ''}`} onClick={() => {
+          this.setState((prevState, props) => ({
+            ...prevState,
+            isAutoScrollBotEnabled: !prevState.isAutoScrollBotEnabled
+          }))
           this.scrollToBottom()
         }}>
           <Icon name="chevron down"/>
@@ -228,7 +241,9 @@ class Chat404 extends React.Component<Props, State> {
                     }
 
                     if (value.withLoading) {
-                      return (<div key={key} className="chat-entry foreign-message is-typing">
+                      return (<div key={key} className={`chat-entry foreign-message is-typing${value.name === 'Janis'
+                                                                                               ? ' alternate'
+                                                                                               : ''}`}>
                         <div className={`user-name${value.name === 'Janis'
                                                     ? ' alternate'
                                                     : ''}`}>{value.name}</div>
@@ -240,7 +255,9 @@ class Chat404 extends React.Component<Props, State> {
                       </div>)
                     }
 
-                    return (<div key={key} className="chat-entry foreign-message">
+                    return (<div key={key} className={`chat-entry foreign-message${value.name === 'Janis'
+                                                                                   ? ' alternate'
+                                                                                   : ''}`}>
                       <div className={`user-name${value.name === 'Janis'
                                                   ? ' alternate'
                                                   : ''}`}>{value.name}</div>
@@ -272,11 +289,11 @@ const conversion: ReadonlyArray<ChatMessage> = [
     kind: 'user-entered',
     message: 'Janis hat den Chat betreten'
   },
-  {
-    kind: 'message',
-    message: '???',
-    withLoading: false
-  },
+  // {
+  //   kind: 'message',
+  //   message: '???',
+  //   withLoading: false
+  // },
   {
     kind: 'message',
     name: 'Steffen',

src/components/404internal/style.styl

@@ -18,12 +18,20 @@
     justify-content: center;
     align-items: center;
     z-index 2
+    box-shadow: 0 3px 2px -2px #c3c3c3
 
     .icon {
       margin 0
     }
+
+    &.is-enabled {
+      opacity 1 !important
+      border 1px solid #099eff
+      border-radius 50%
+    }
   }
 
+
   .watermark {
     pointer-events none
     position absolute
@@ -42,6 +50,7 @@
     background-clip: text;
     color: transparent;
     text-shadow: rgba(255, 255, 255, 0.5) 0px 3px 3px;
+    opacity 0.2
   }
 }
 
@@ -52,7 +61,7 @@
 }
 
 .chat-window {
-  width 100%
+  width calc(100% - 3em)
   display flex
   flex-direction column
   padding 1em
@@ -67,7 +76,7 @@
   margin-bottom 1em
   max-width 90%
   padding 0.3em
-  box-shadow: 0px 3px 2px -2px #c3c3c3
+  box-shadow: 0 3px 2px -2px #c3c3c3
 
   &.user-entered {
     padding: 0.3em 7px;
@@ -89,6 +98,10 @@
     }
   }
 
+  &.foreign-message.alternate {
+    align-self flex-end
+  }
+
 
   &.own-message {
     background-color rgb(232, 253, 203)