Update connect chat container (part 2) (#8717) [deploy]

* Update chat container of Connect

- Rename certain class names to improve BEM syntax and naming
- Update typography of message cells
- Update header of message area
- Use new 'info' icon to expand sidebar
- Update form fields for both writing and editing a message
- Implement Crayons styling for 'delete' modal

https://github.com/thepracticaldev/dev.to/issues/8437

* Update some tests aand class names

* Update tests

* Update info icon

* Update reference

app/assets/images/info.svg

@@ -1,5 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490 490">
-    <path d="M245 490C109.9 490 0 380.1 0 245S109.9 0 245 0s245 109.9 245 245-109.9 245-245 245zm0-428C144.1 62 62 144.1 62 245s82.1 183 183 183 183-82.1 183-183S345.9 62 245 62z"/>
-    <circle cx="241.3" cy="159.2" r="29.1"/>
-    <path d="M285.1 359.9h-80.2V321h14.7v-66.2h-14.5v-38.9h65.3V321h14.7z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z"/>
 </svg>

app/assets/javascripts/initializers/initializeBaseUserData.js

@@ -68,7 +68,10 @@ function addRelevantButtonsToComments(user) {
       let butt = settingsButts[i];
       const { action, commentableUserId, userId } = butt.dataset;
       if (parseInt(userId, 10) === user.id && action === 'settings-button') {
-        butt.innerHTML = '<a href="'+butt.dataset.path+'" rel="nofollow" style="color:#0a0a0a;" data-no-instant>Settings</a>'
+        butt.innerHTML =
+          '<a href="' +
+          butt.dataset.path +
+          '" rel="nofollow" style="color:#0a0a0a;" data-no-instant>Settings</a>';
         butt.style.display = 'inline-block';
         butt.classList.remove('hidden');
       }
@@ -87,7 +90,8 @@ function addRelevantButtonsToComments(user) {
       for (let i = 0; i < modButts.length; i += 1) {
         let butt = modButts[i];
         if (butt.classList.contains('mod-actions-comment-button')) {
-          butt.innerHTML = '<a href="'+butt.dataset.path+'" rel="nofollow">Moderate</a>'
+          butt.innerHTML =
+            '<a href="' + butt.dataset.path + '" rel="nofollow">Moderate</a>';
         }
         butt.className = 'mod-actions';
         butt.style.display = 'inline-block';

app/assets/stylesheets/chat.scss

@@ -240,8 +240,6 @@
   }
 }
 
-
-
 .active-channel__header {
   align-items: center;
   box-shadow: 0 0 0 1px var(--card-border);
@@ -259,20 +257,6 @@
   color: var(--body-color);
 }
 
-.active-channel__config-btn {
-  display: flex;
-  align-items: center;
-  border-radius: 100%;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  transition: all var(--transition-props);
-
-  &:hover {
-    background: var(--button-secondary-bg);
-  }
-}
-
 .activechatchannel__messages {
   padding-top: var(--su-2);
   padding-bottom: var(--su-2);
@@ -1068,7 +1052,6 @@
   }
 }
 
-
 .mention__list {
   position: absolute;
   background: var(--card-bg);

app/javascript/chat/chat.jsx

@@ -1654,9 +1654,7 @@ export default class Chat extends Component {
       >
         <div className="crayons-modal__box">
           <div className="crayons-modal__box__body">
-            <h3>
-              Are you sure, you want to delete this message ?
-            </h3>
+            <h3>Are you sure, you want to delete this message ?</h3>
             <div className="delete-actions__container">
               <div
                 role="button"
@@ -1685,7 +1683,7 @@ export default class Chat extends Component {
             </div>
           </div>
         </div>
-        <div className="crayons-modal__overlay"></div>
+        <div className="crayons-modal__overlay" />
       </div>
     );
   };
@@ -1732,7 +1730,7 @@ export default class Chat extends Component {
       return (
         <a
           href={`/${activeChannel.channel_username}`}
-          class="active-channel__title"
+          className="active-channel__title"
           onClick={this.triggerActiveContent}
           data-content="sidecar-user"
         >
@@ -1783,19 +1781,12 @@ export default class Chat extends Component {
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 490 490"
-          className="crayons-icon"
+          viewBox="0 0 24 24"
           width="24"
           height="24"
-          alt="channel config"
-          data-content={dataContent}
+          className="crayons-icon"
         >
-          <path d="M245 490C109.9 490 0 380.1 0 245S109.9 0 245 0s245 109.9 245
-      245-109.9 245-245 245zm0-428C144.1 62 62 144.1 62 245s82.1 183 183 183
-      183-82.1 183-183S345.9 62 245 62z"/>
-          <circle cx="241.3" cy="159.2"
-          r="29.1"/> <path d="M285.1
-          359.9h-80.2V321h14.7v-66.2h-14.5v-38.9h65.3V321h14.7z"/>
+          <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z" />
         </svg>
       </a>
     );

app/views/internal/configs/show.html.erb

@@ -423,7 +423,6 @@
               <div class="alert alert-info"> Special cute mascot image used in the footer. </div>
             </div>
 
-
             <div class="form-group">
               <%= f.label :mascot_image_description %>
               <%= f.text_field :mascot_image_description,