improvement(reskin): mm swap toggle view

Author: dedywahyudi

src/shared/components/challenge-detail/Submissions/SubmissionRow/style.scss

@@ -94,9 +94,9 @@
       flex-direction: column;
       border-top: 1px solid #e9e9e9;
       border-bottom: 0;
-      margin-left: 16px;
+      margin-left: 0;
       margin-top: 25px;
-      margin-right: 34px;
+      margin-right: 15px;
     }
 
     &.no-border {

src/shared/components/challenge-detail/Submissions/index.jsx

@@ -445,22 +445,26 @@ class SubmissionsComponent extends React.Component {
 
     return (
       <div styleName={`container dev ${isMM ? 'mm' : 'non-mm'}`}>
-        <div styleName="view-as">
-          <span styleName="title">View as</span>
-          {
-            viewAsTable ? (
-              <React.Fragment>
-                <ViewAsTableActive styleName="table-icon" onClick={() => setViewAsTable(true)} />
-                <ViewAsListInactive styleName="list-icon" onClick={() => setViewAsTable(false)} />
-              </React.Fragment>
-            ) : (
-              <React.Fragment>
-                <ViewAsTableInactive styleName="table-icon" onClick={() => setViewAsTable(true)} />
-                <ViewAsListActive styleName="list-icon" onClick={() => setViewAsTable(false)} />
-              </React.Fragment>
-            )
-          }
-        </div>
+        {
+          isMM ? (
+            <div styleName="view-as">
+              <span styleName="title">View as</span>
+              {
+                viewAsTable ? (
+                  <React.Fragment>
+                    <ViewAsListInactive styleName="list-icon" onClick={() => setViewAsTable(false)} />
+                    <ViewAsTableActive styleName="table-icon" onClick={() => setViewAsTable(true)} />
+                  </React.Fragment>
+                ) : (
+                  <React.Fragment>
+                    <ViewAsListActive styleName="list-icon" onClick={() => setViewAsTable(false)} />
+                    <ViewAsTableInactive styleName="table-icon" onClick={() => setViewAsTable(true)} />
+                  </React.Fragment>
+                )
+              }
+            </div>
+          ) : null
+        }
         <div styleName={`${viewAsTable ? 'view-as-table' : ''}`}>
           {
             !isMM && (

src/shared/components/challenge-detail/Submissions/style.scss

@@ -348,7 +348,7 @@
 
       @include xs-to-sm {
         flex-direction: column;
-        margin: 0 16px;
+        margin: 0 16px 0 0;
         border-top: 1px solid #e9e9e9;
       }
     }
@@ -600,15 +600,16 @@
   }
 
   .table-icon {
-    margin-right: 10px;
+    margin-right: 15px;
   }
 
   .list-icon {
-    margin-right: 15px;
+    margin-right: 10px;
   }
 }
 
 .view-as-table {
   overflow-y: scroll;
   margin-top: 20px;
+  margin-right: 15px;
 }

src/shared/containers/challenge-detail/index.jsx

@@ -483,7 +483,7 @@ class ChallengeDetailPageContainer extends React.Component {
               submissionEnded={submissionEnded}
               mySubmissions={challenge.isRegistered ? mySubmissions : []}
               openForRegistrationChallenges={openForRegistrationChallenges}
-              viewAsTable={viewAsTable}
+              viewAsTable={viewAsTable && isMM}
               onSort={(currenctSelected, sort) => {
                 if (currenctSelected === 'submissions') {
                   this.setState({ submissionsSort: sort });
@@ -571,7 +571,7 @@ class ChallengeDetailPageContainer extends React.Component {
                 isLegacyMM={isLegacyMM}
                 submissionEnded={submissionEnded}
                 challengesUrl={challengesUrl}
-                viewAsTable={viewAsTable}
+                viewAsTable={viewAsTable && isMM}
                 setViewAsTable={value => this.setState({ viewAsTable: value })}
               />
             )