fix: discussions redesign

community/public/css/style.css

@@ -143,12 +143,12 @@ input[type=checkbox] {
 }
 
 .card-divider {
-  border: 1px solid #F4F5F6;
+  border: 1px solid #EEF0F2;
   margin-bottom: 1rem;
 }
 
 .card-divider-dark {
-  border: 1px solid #E2E6E9;
+  border: 1px solid #C8CFD5;
   margin-bottom: 16px;
 }
 
@@ -221,6 +221,7 @@ input[type=checkbox] {
     padding-right: 1rem;
   }
 }
+
 .button-links {
   color: #4C5A67;
 }
@@ -1284,18 +1285,74 @@ pre {
   padding: 1rem;
 }
 
-textarea.form-control {
-  height: 300px;
-}
-
-.discussion-on-page .form-control {
+.discussions-parent .form-control {
   background-color: #FFFFFF;
   font-size: inherit;
   color: inherit;
+  padding: 0.75rem 1rem;
 }
 
-.discussion-on-page textarea {
-  height: 160px;
+.discussion-on-page .comment-field {
+  height: 48px;
+  box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}
+
+.modal .comment-field {
+  height: 300px;
+}
+
+.no-discussions {
+  width: 250px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.no-discussions .button {
+  margin: auto;
+}
+
+.discussions-header {
+  margin: 2.5rem 0 1.25rem;
+}
+
+.discussions-header .button {
+  float: right;
+}
+
+.discussions-parent .search-field {
+  background-color: #E2E6E9;
+  background-image: url(/assets/community/icons/search.svg);
+  background-repeat: no-repeat;
+  text-indent: 1.5rem;
+  background-position: 1rem 0.7rem;
+  height: 36px;
+  font-size: 12px;
+  padding: 0.65rem 0.9rem;
+}
+
+.discussions-sidebar {
+  background-color: #F4F5F6;
+  padding: 0.75rem;
+  border-radius: 4px;
+  max-height: 700px;
+  overflow-y: auto;
+}
+
+#discussion-group {
+  max-height: 700px;
+  overflow-y: auto;
+}
+
+.sidebar-topic {
+  padding: 0.75rem;
+  margin: 0.75rem 0;
+  cursor: pointer;
+}
+
+.sidebar-topic[aria-expanded="true"] {
+  background: #FFFFFF;
+  border-radius: 4px;
 }
 
 .comment-footer {
@@ -1315,6 +1372,14 @@ textarea.form-control {
   color: var(--text-color);
 }
 
+.discussion-on-page .topic-title {
+  display: none;
+}
+
+.discussions-sidebar .sidebar-parent:last-child .card-divider {
+  display: none;
+}
+
 .certificate-page .common-card-style {
   color: black;
   font-size: 1.25rem;

community/public/icons/message.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 14.6667C4 15.1382 4.1873 15.5903 4.5207 15.9237C4.8541 16.2571 5.30628 16.4444 5.77778 16.4444H16.4444L20 20V5.77778C20 5.30628 19.8127 4.8541 19.4793 4.5207C19.1459 4.1873 18.6937 4 18.2222 4H5.77778C5.30628 4 4.8541 4.1873 4.5207 4.5207C4.1873 4.8541 4 5.30628 4 5.77778V14.6667Z" stroke="#4C5A67" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.66659 9.77761C2.66659 10.0919 2.79145 10.3934 3.01372 10.6157C3.23598 10.8379 3.53744 10.9628 3.85177 10.9628H10.9629L13.3333 13.3332V3.85169C13.3333 3.53736 13.2084 3.2359 12.9861 3.01364C12.7639 2.79137 12.4624 2.6665 12.1481 2.6665H3.85177C3.53744 2.6665 3.23598 2.79137 3.01372 3.01364C2.79145 3.2359 2.66659 3.53736 2.66659 3.85169V9.77761Z" stroke="#4C5A67" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

community/public/icons/search.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7.44462C3.5 5.26607 5.26607 3.5 7.44462 3.5C9.62318 3.5 11.3892 5.26607 11.3892 7.44462C11.3892 8.50829 10.9683 9.47362 10.2838 10.1831C10.265 10.1972 10.247 10.2128 10.2299 10.2299C10.2128 10.247 10.1972 10.265 10.1831 10.2838C9.47362 10.9683 8.50829 11.3892 7.44462 11.3892C5.26607 11.3892 3.5 9.62318 3.5 7.44462ZM10.5696 11.2767C9.71788 11.9722 8.62996 12.3892 7.44462 12.3892C4.71378 12.3892 2.5 10.1755 2.5 7.44462C2.5 4.71378 4.71378 2.5 7.44462 2.5C10.1755 2.5 12.3892 4.71378 12.3892 7.44462C12.3892 8.62996 11.9722 9.71788 11.2767 10.5696L13.3538 12.6467C13.549 12.8419 13.549 13.1585 13.3538 13.3538C13.1585 13.549 12.8419 13.549 12.6467 13.3538L10.5696 11.2767Z" fill="#4C5A67"/>
+</svg>