From bd05d3c66de2ec4db77c1c4eb14c1f6bc546cc17 Mon Sep 17 00:00:00 2001
From: Leangseu Kim <lkim@edx.org>
Date: Wed, 22 Sep 2021 15:06:28 -0400
Subject: [PATCH] update review action styling

---
 src/containers/ReviewModal/ReviewActions.jsx |  9 +++----
 src/containers/ReviewModal/ReviewModal.scss  | 27 +++++++++-----------
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/containers/ReviewModal/ReviewActions.jsx b/src/containers/ReviewModal/ReviewActions.jsx
index 5367bcf..7a23904 100644
--- a/src/containers/ReviewModal/ReviewActions.jsx
+++ b/src/containers/ReviewModal/ReviewActions.jsx
@@ -21,13 +21,12 @@ export const ReviewActions = ({
   showRubric,
   username,
 }) => (
-  <div className="review-actions">
-    <ActionRow>
+  <div>
+    <ActionRow className="review-actions">
       <span className="review-actions-username">
         {username}
-        <StatusBadge className="ml-3 review-actions-status" status={gradeStatus} />
+        <StatusBadge className="review-actions-status" status={gradeStatus} />
       </span>
-      <ActionRow.Spacer />
       <div className="review-actions-group">
         <Button variant="outline-primary" onClick={toggleShowRubric}>
           {showRubric ? 'Hide' : 'Show'} Rubric
@@ -36,7 +35,7 @@ export const ReviewActions = ({
         <SubmissionNavigation />
       </div>
     </ActionRow>
-  </div>
+    </div>
 );
 ReviewActions.propTypes = {
   gradeStatus: PropTypes.string.isRequired,
diff --git a/src/containers/ReviewModal/ReviewModal.scss b/src/containers/ReviewModal/ReviewModal.scss
index 3be45f4..bbacff6 100644
--- a/src/containers/ReviewModal/ReviewModal.scss
+++ b/src/containers/ReviewModal/ReviewModal.scss
@@ -1,17 +1,5 @@
 @import "@edx/paragon/scss/core/core";
 
-
-@include media-breakpoint-down(md) {
-  .review-actions {
-    flex-direction: column;
-    align-items: flex-start !important;
-
-    & > * {
-      margin-bottom: map_get($spacers, 1) !important;
-    }
-  }
-}
-
 // action reviews
 .review-actions {
   padding: map_get($spacers, 3);
@@ -23,12 +11,21 @@
   }
   .review-actions-status {
     margin-left: map_get($spacers, 3);
+    vertical-align: middle;
   }
   .review-actions-group {
     margin-left: 0;
     flex-shrink: 0;
   }
 }
+
+@include media-breakpoint-down(md) {
+  .review-actions {
+    flex-direction: column;
+    align-items: flex-start !important;
+  }
+}
+
 .review-modal-body {
   background-color: $gray-300 !important;
   padding: inherit;
@@ -50,7 +47,7 @@
 
 
 @include media-breakpoint-down(sm) {
-  .review-modal .review-modal-body {
+  .review-modal-body {
     padding: 0 !important;
     overflow-y: hidden !important;
 
@@ -76,7 +73,7 @@
     box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3) !important;
     display: flex;
     justify-content: center;
-    padding: map-get($map: $spacers, $key: 3);
+    padding: map-get($spacers, 3);
   }
 
   .grading-rubric-body {
@@ -87,6 +84,6 @@
     box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3) !important;
     display: flex;
     justify-content: center;
-    padding: map-get($map: $spacers, $key: 3);
+    padding: map-get($spacers, 3);
   }
 }