Use buttons in edit collections article actions (mdn#5642)

dipikabh · Mar 16, 2022 · 04258e6 · 04258e6
1 parent 2d319e5
commit 04258e6
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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 {