issue 1170 fix

Author: Gauravseta

src/components/ChallengeEditor/ChallengeView/index.js

@@ -89,7 +89,7 @@ const ChallengeView = ({
       <Helmet title='View Details' />
       {!isTask && (
         <div className={cn(styles.actionButtons, styles.button, styles.actionButtonsLeft)}>
-          <LegacyLinks challenge={challenge} />
+          <LegacyLinks challenge={challenge} challengeView />
         </div>
       )}
       <div className={styles.title}>View Details</div>
@@ -230,15 +230,6 @@ const ChallengeView = ({
                 readOnly
               />
             )}
-            <div>
-              { challenge.discussions && challenge.discussions.map(d => (
-                <div key={d.id} className={cn(styles.row, styles.topRow)}>
-                  <div className={styles.col}>
-                    <span><span className={styles.fieldTitle}>Forum:</span> <a href={d.url} target='_blank' rel='noopener noreferrer'>{d.name}</a></span>
-                  </div>
-                </div>
-              ))}
-            </div>
           </div>
           <div className={styles.group}>
             <div className={styles.title}>Public specification <span>*</span></div>

src/components/LegacyLinks/LegacyLinks.module.scss

@@ -2,6 +2,7 @@
 .container {
   display: flex;
   margin-top: auto;
+  align-items: center;
 
   button:not(:first-child),
   a:not(:first-child) {
@@ -13,4 +14,28 @@
     outline: none;
     white-space: nowrap;
   }
+
+  .row {
+    margin-bottom: 0;
+
+    &.topRow {
+      flex-wrap: wrap;
+    }
+  }
+
+  .col {
+    margin-right: 20px;
+    display: flex;
+    align-items: center;
+
+    .fieldTitle {
+      @include roboto-bold();
+
+      font-size: 16px;
+      line-height: 19px;
+      font-weight: 500;
+      color: $tc-gray-80;
+      margin-right: 10px;
+    }
+  }
 }

src/components/LegacyLinks/index.js

@@ -3,12 +3,13 @@
  */
 import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
+import cn from 'classnames'
 import styles from './LegacyLinks.module.scss'
 import { DIRECT_PROJECT_URL, MESSAGE, ONLINE_REVIEW_URL } from '../../config/constants'
 import PrimaryButton from '../Buttons/PrimaryButton'
 import Tooltip from '../Tooltip'
 
-const LegacyLinks = ({ challenge }) => {
+const LegacyLinks = ({ challenge, challengeView }) => {
   const onClick = useCallback((e) => {
     e.stopPropagation()
   }, [])
@@ -38,12 +39,22 @@ const LegacyLinks = ({ challenge }) => {
           </Tooltip>
         </>
       )}
+      <div>
+        { challengeView && challenge.discussions && challenge.discussions.map(d => (
+          <div key={d.id} className={cn(styles.row, styles.topRow)}>
+            <div className={styles.col} >
+              <span><span className={styles.fieldTitle}>Forum:</span> <a href={d.url} target='_blank' rel='noopener noreferrer'>{d.name}</a></span>
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
   )
 }
 
 LegacyLinks.propTypes = {
-  challenge: PropTypes.object
+  challenge: PropTypes.object,
+  challengeView: PropTypes.bool
 }
 
 export default LegacyLinks