From 421881a633b4f992303ffd7e6997a0c3f84595ec Mon Sep 17 00:00:00 2001
From: Dani <dani@code.org>
Date: Mon, 24 May 2021 17:18:30 -0400
Subject: [PATCH 1/3] Make sure that the assign text and buttons show in the
 right spot

---
 .../components/progress/ScriptOverviewTopRow.jsx      |  9 +++++++--
 apps/src/templates/AssignButton.jsx                   |  8 ++++++--
 apps/src/templates/Assigned.jsx                       | 11 +++++++++--
 apps/src/templates/UnassignButton.jsx                 |  8 ++++++--
 apps/src/templates/courseOverview/CourseScript.js     |  3 ++-
 5 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/apps/src/code-studio/components/progress/ScriptOverviewTopRow.jsx b/apps/src/code-studio/components/progress/ScriptOverviewTopRow.jsx
index 486fc99f54abd..95e7e5f0790e3 100644
--- a/apps/src/code-studio/components/progress/ScriptOverviewTopRow.jsx
+++ b/apps/src/code-studio/components/progress/ScriptOverviewTopRow.jsx
@@ -127,7 +127,7 @@ class ScriptOverviewTopRow extends React.Component {
     return (
       <div style={styles.buttonRow} className="script-overview-top-row">
         {!professionalLearningCourse && viewAs === ViewType.Student && (
-          <div>
+          <div style={styles.buttonsInRow}>
             <Button
               __useDeprecatedTag
               href={`/s/${scriptName}/next`}
@@ -220,7 +220,12 @@ const styles = {
   buttonRow: {
     // ensure we have height when we only have our toggle (which is floated)
     minHeight: 50,
-    position: 'relative'
+    position: 'relative',
+    display: 'flex'
+  },
+  buttonsInRow: {
+    display: 'flex',
+    alignItems: 'center'
   },
   right: {
     position: 'absolute',
diff --git a/apps/src/templates/AssignButton.jsx b/apps/src/templates/AssignButton.jsx
index a3b27039fb80a..180e39ac15eac 100644
--- a/apps/src/templates/AssignButton.jsx
+++ b/apps/src/templates/AssignButton.jsx
@@ -104,10 +104,14 @@ class AssignButton extends React.Component {
 
 const styles = {
   buttonMargin: {
-    marginLeft: 10
+    marginLeft: 10,
+    display: 'flex',
+    alignItems: 'center'
   },
   buttonMarginRTL: {
-    marginRight: 10
+    marginRight: 10,
+    display: 'flex',
+    alignItems: 'center'
   }
 };
 
diff --git a/apps/src/templates/Assigned.jsx b/apps/src/templates/Assigned.jsx
index 651ca3545829d..1efcd71e5dc03 100644
--- a/apps/src/templates/Assigned.jsx
+++ b/apps/src/templates/Assigned.jsx
@@ -7,7 +7,9 @@ export default class Assigned extends Component {
   render() {
     return (
       <span style={styles.assigned} className={'uitest-assigned'}>
-        <FontAwesome icon="check" />
+        <span style={styles.checkmark}>
+          <FontAwesome icon="check" />
+        </span>
         {i18n.assigned()}
       </span>
     );
@@ -15,12 +17,17 @@ export default class Assigned extends Component {
 }
 
 const styles = {
+  checkmark: {
+    padding: 5
+  },
   assigned: {
     color: color.level_perfect,
     fontSize: 16,
     fontFamily: '"Gotham 5r", sans-serif',
     lineHeight: '36px',
     marginLeft: 10,
-    verticalAlign: 'top'
+    verticalAlign: 'top',
+    display: 'flex',
+    alignItems: 'center'
   }
 };
diff --git a/apps/src/templates/UnassignButton.jsx b/apps/src/templates/UnassignButton.jsx
index de088be3ffbe5..423cf8e24f00a 100644
--- a/apps/src/templates/UnassignButton.jsx
+++ b/apps/src/templates/UnassignButton.jsx
@@ -61,10 +61,14 @@ class UnassignButton extends React.Component {
 
 const styles = {
   buttonMargin: {
-    marginLeft: 10
+    marginLeft: 10,
+    display: 'flex',
+    alignItems: 'center'
   },
   buttonMarginRTL: {
-    marginRight: 10
+    marginRight: 10,
+    display: 'flex',
+    alignItems: 'center'
   }
 };
 
diff --git a/apps/src/templates/courseOverview/CourseScript.js b/apps/src/templates/courseOverview/CourseScript.js
index 0985cf0e8cb60..3ed7a5d4778f8 100644
--- a/apps/src/templates/courseOverview/CourseScript.js
+++ b/apps/src/templates/courseOverview/CourseScript.js
@@ -175,7 +175,8 @@ const styles = {
     marginRight: 0
   },
   flex: {
-    display: 'flex'
+    display: 'flex',
+    alignItems: 'center'
   }
 };
 export const UnconnectedCourseScript = CourseScript;

From 2c9f24dfc40a41242aad360e0d730e788b4a4227 Mon Sep 17 00:00:00 2001
From: Dani <dani@code.org>
Date: Tue, 25 May 2021 13:06:31 -0400
Subject: [PATCH 2/3] Make sure section assigner is in right spot

---
 .../code-studio/components/progress/ScriptOverviewTopRow.jsx   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/src/code-studio/components/progress/ScriptOverviewTopRow.jsx b/apps/src/code-studio/components/progress/ScriptOverviewTopRow.jsx
index 95e7e5f0790e3..f8dfa754dbcf4 100644
--- a/apps/src/code-studio/components/progress/ScriptOverviewTopRow.jsx
+++ b/apps/src/code-studio/components/progress/ScriptOverviewTopRow.jsx
@@ -221,7 +221,8 @@ const styles = {
     // ensure we have height when we only have our toggle (which is floated)
     minHeight: 50,
     position: 'relative',
-    display: 'flex'
+    display: 'flex',
+    flexDirection: 'column'
   },
   buttonsInRow: {
     display: 'flex',

From 7618a4fe56519588ae22003a8355d5a392529400 Mon Sep 17 00:00:00 2001
From: Dani <dani@code.org>
Date: Tue, 25 May 2021 14:53:46 -0400
Subject: [PATCH 3/3] Fix assign button not aligned correctly

---
 apps/src/templates/teacherDashboard/SectionAssigner.jsx   | 8 ++++++--
 .../templates/teacherDashboard/TeacherSectionSelector.jsx | 3 ++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/src/templates/teacherDashboard/SectionAssigner.jsx b/apps/src/templates/teacherDashboard/SectionAssigner.jsx
index 7ad014e2e7e9d..e0b6ff70539fa 100644
--- a/apps/src/templates/teacherDashboard/SectionAssigner.jsx
+++ b/apps/src/templates/teacherDashboard/SectionAssigner.jsx
@@ -40,7 +40,7 @@ class SectionAssigner extends Component {
     );
 
     return (
-      <div>
+      <div style={styles.section}>
         <div style={styles.label}>{i18n.currentSection()}</div>
         <div style={styles.content}>
           <TeacherSectionSelector
@@ -72,8 +72,12 @@ class SectionAssigner extends Component {
 }
 
 const styles = {
+  section: {
+    marginBottom: 10
+  },
   content: {
-    display: 'flex'
+    display: 'flex',
+    alignItems: 'center'
   },
   label: {
     width: '100%',
diff --git a/apps/src/templates/teacherDashboard/TeacherSectionSelector.jsx b/apps/src/templates/teacherDashboard/TeacherSectionSelector.jsx
index 66ca8b3cbf470..853df2fd26914 100644
--- a/apps/src/templates/teacherDashboard/TeacherSectionSelector.jsx
+++ b/apps/src/templates/teacherDashboard/TeacherSectionSelector.jsx
@@ -131,7 +131,8 @@ export default class TeacherSectionSelector extends Component {
 const styles = {
   select: {
     height: 34,
-    width: 300
+    width: 300,
+    marginBottom: 0
   },
   addNewSection: {
     borderTop: `1px solid ${color.charcoal}`,