fix: fixed save-button position when share is disabled

newsuk · Dec 5, 2019 · 9b93f40 · 9b93f40
1 parent 5d58e54
commit 9b93f40
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/packages/save-and-share-bar/__tests__/web/__snapshots__/save-and-share-bar.test.js.snap b/packages/save-and-share-bar/__tests__/web/__snapshots__/save-and-share-bar.test.js.snap
@@ -187,6 +187,7 @@ exports[`save and share bar component save and share bar renders correctly when
         "alignItems": "center",
         "flexDirection": "row",
         "height": "40px",
+        "marginLeft": "auto",
         "msFlexAlign": "center",
         "msFlexDirection": "row",
       }

diff --git a/packages/save-and-share-bar/src/save-and-share-bar.js b/packages/save-and-share-bar/src/save-and-share-bar.js
@@ -105,7 +105,7 @@ class SaveAndShareBar extends Component {
         )}
         {savingEnabled ? (
           <UserState state={UserState.loggedIn} serverRender={false}>
-            <View style={styles.rowItem} data-testid="save-star">
+            <View style={styles.rowItemRight} data-testid="save-star">
               <SaveStar
                 colour={styles.svgIcon.save.strokeColour}
                 hoverColor={styles.svgIcon.hoverFillColour}

diff --git a/packages/save-and-share-bar/src/styles/index.js b/packages/save-and-share-bar/src/styles/index.js
@@ -31,7 +31,7 @@ const styles = {
       margin-left: ${spacing(1)};
       cursor: pointer;
       border-radius: ${ICON_SIZE}px;
-      
+
       &, > * {
         display: flex;
         align-items: center;
@@ -53,6 +53,12 @@ const styles = {
     flexDirection: "row",
     height: ICON_SIZE
   },
+  rowItemRight: {
+    alignItems: "center",
+    flexDirection: "row",
+    height: ICON_SIZE,
+    marginLeft: "auto"
+  },
   svgIcon: {
     fb: {
       height: 18