From 04258e60bae867d91c2770ae4919b96a2d203c70 Mon Sep 17 00:00:00 2001
From: Guy Sleigh <gsleigh@mozilla.com>
Date: Wed, 16 Mar 2022 18:27:05 +0100
Subject: [PATCH] Use buttons in edit collections article actions (#5642)

---
 client/src/ui/molecules/collection/menu.tsx   | 20 ------------------
 .../notifications-watch-menu/index.scss       | 21 +++++--------------
 .../ui/organisms/article-actions/index.scss   | 13 +++++++-----
 3 files changed, 13 insertions(+), 41 deletions(-)

diff --git a/client/src/ui/molecules/collection/menu.tsx b/client/src/ui/molecules/collection/menu.tsx
index 6761a39cd02e..173e1b98de66 100644
--- a/client/src/ui/molecules/collection/menu.tsx
+++ b/client/src/ui/molecules/collection/menu.tsx
@@ -166,26 +166,6 @@ export function BookmarkMenu({
                 {bookmarked ? "Edit Collection" : "Add Collection"}
               </h2>
 
-              <div className="watch-submenu-mobile-buttons">
-                {doc && data?.bookmarked ? (
-                  <Button
-                    type="action"
-                    buttonType="submit"
-                    name="delete"
-                    value="true"
-                    icon="trash"
-                    isDisabled={isValidating}
-                  />
-                ) : null}
-                <Button
-                  buttonType="submit"
-                  type="action"
-                  icon="checkmark"
-                  isDisabled={isValidating}
-                  name="save"
-                />
-              </div>
-
               <div className="watch-submenu-item pad-y">
                 <label htmlFor="bookmark-name">Name:</label>
                 <input
diff --git a/client/src/ui/molecules/notifications-watch-menu/index.scss b/client/src/ui/molecules/notifications-watch-menu/index.scss
index 21a32b82b465..03b91f0a3772 100644
--- a/client/src/ui/molecules/notifications-watch-menu/index.scss
+++ b/client/src/ui/molecules/notifications-watch-menu/index.scss
@@ -151,15 +151,14 @@
   padding: 1rem;
 
   &.is-button-row {
-    display: none;
+    display: flex;
+    justify-content: flex-end;
+    padding-top: 1rem;
 
-    &.is-always-visible {
-      display: flex;
-      justify-content: flex-end;
-      padding-bottom: 0.25rem;
+    .button {
+      width: auto;
     }
   }
-
   &.has-dropdown {
     padding: 0 1rem 0.25rem;
   }
@@ -185,16 +184,6 @@
   @media screen and (min-width: $screen-md) {
     padding: 0 0.5rem 0 1rem;
 
-    &.is-button-row {
-      display: flex;
-      justify-content: flex-end;
-      padding-top: 1rem;
-
-      .button {
-        width: auto;
-      }
-    }
-
     &.pad-y {
       padding-top: 1rem;
       padding-bottom: 1rem;
diff --git a/client/src/ui/organisms/article-actions/index.scss b/client/src/ui/organisms/article-actions/index.scss
index bbc1ab674e03..bd3d14e8ff0a 100644
--- a/client/src/ui/organisms/article-actions/index.scss
+++ b/client/src/ui/organisms/article-actions/index.scss
@@ -22,11 +22,6 @@
   margin: 0;
   padding: 0;
 
-  .button {
-    white-space: nowrap;
-    width: 100%;
-  }
-
   @media screen and (min-width: $screen-md) {
     display: flex;
     gap: 0.5rem;
@@ -69,6 +64,14 @@
           padding: 1.5rem 1rem;
         }
       }
+      .watch-submenu-item {
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+
+        .button {
+          width: auto;
+        }
+      }
 
       .article-actions-entries > li > .button,
       .article-actions-entries > li > div > .button {