Fix ordering and sizing of loves, extensions and mod info

src/views/preview/mod-info.jsx

@@ -9,43 +9,47 @@ const FlexRow = require('../../components/flex-row/flex-row.jsx');
 require('./mod-info.scss');
 
 const ModInfo = props => (
-    <FlexRow className="mod-info">
-            
-        {/*  eslint-disable react/jsx-sort-props */}
-        {props.revisedDate &&
-            <div className="mod-date">
-                <FormattedDate
-                    value={Date.parse(props.revisedDate)}
-                    day="2-digit"
-                    month="short"
-                    year="numeric"
+    <FlexRow className="mod-info-container">
+        <div className="project-textlabel">
+            <FormattedMessage id="project.moderationInfoLabel" />
+        </div>
+        <FlexRow className="mod-info">
+            {/*  eslint-disable react/jsx-sort-props */}
+            {props.revisedDate &&
+                <div className="mod-date">
+                    <FormattedDate
+                        value={Date.parse(props.revisedDate)}
+                        day="2-digit"
+                        month="short"
+                        year="numeric"
+                    />
+                    {' - '}
+                    <FormattedTime
+                        value={Date.parse(props.revisedDate)}
+                        hour="numeric"
+                        minute="numeric"
+                        timeZoneName="short"
+                    />
+                </div>
+            }
+            {/*  eslint-enable react/jsx-sort-props */}
+            <div className="mod-sprites">
+                <FormattedMessage
+                    id="project.numSprites"
+                    values={{
+                        number: props.sprites
+                    }}
                 />
-                {' - '}
-                <FormattedTime
-                    value={Date.parse(props.revisedDate)}
-                    hour="numeric"
-                    minute="numeric"
-                    timeZoneName="short"
+            </div>
+            <div className="mod-scripts">
+                <FormattedMessage
+                    id="project.numScripts"
+                    values={{
+                        number: props.scripts
+                    }}
                 />
             </div>
-        }
-        {/*  eslint-enable react/jsx-sort-props */}
-        <div className="mod-sprites">
-            <FormattedMessage
-                id="project.numSprites"
-                values={{
-                    number: props.sprites
-                }}
-            />
-        </div>
-        <div className="mod-scripts">
-            <FormattedMessage
-                id="project.numScripts"
-                values={{
-                    number: props.scripts
-                }}
-            />
-        </div>
+        </FlexRow>
     </FlexRow>
 );
 

src/views/preview/mod-info.scss

 @import "../../frameless";
 
+.mod-info-container {
+    margin-bottom: .625rem; /* Match the extra padding below extension chips */
+    flex-direction: column;
+    align-items: flex-start;
+}
+
 .mod-info {
     line-height: 2rem;
     justify-content: flex-start;

src/views/preview/stats.scss

@@ -32,10 +32,11 @@
 .project-remixes,
 .project-views {
 
-    display: inline;
+    display: flex;
     padding-right: 2rem;
     font-size: 1rem;
     font-weight: bold;
+    align-items: center;
 
     &:before {
         display: inline-block;
@@ -43,9 +44,8 @@
         background-repeat: no-repeat;
         background-position: center center;
         background-size: contain;
-        width: 1.5rem;
-        height: 1.5rem;
-        vertical-align: -.25rem;
+        width: 1.75rem;
+        height: 1.75rem;
         content: "";
     }
 }

src/views/preview/subactions.scss

@@ -39,6 +39,7 @@
     .action-buttons {
         display: flex;
         margin-top: 0;
+        margin-bottom: 0;
         color: $type-white;
         font-size: .8rem;
         font-weight: 500;