From 5b67d9de245cfc2b398e536cb986cfc5532c65fb Mon Sep 17 00:00:00 2001
From: MerlinScheurer <merlin.scheurer@Yahoo.de>
Date: Sun, 12 Jan 2025 15:39:21 +0100
Subject: [PATCH] Refac delete buttons order to be in a row

---
 frontend/src/pages/ChannelAbout.tsx | 6 ++++--
 frontend/src/pages/Channels.tsx     | 3 +++
 frontend/src/pages/Playlist.tsx     | 3 +--
 frontend/src/pages/Video.tsx        | 6 ++++--
 frontend/src/style.css              | 1 +
 5 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/ChannelAbout.tsx b/frontend/src/pages/ChannelAbout.tsx
index edd9c61a..75a66cac 100644
--- a/frontend/src/pages/ChannelAbout.tsx
+++ b/frontend/src/pages/ChannelAbout.tsx
@@ -152,8 +152,9 @@ const ChannelAbout = () => {
                     )}
 
                     {showDeleteConfirm && (
-                      <div className="delete-confirm" id="delete-button">
+                      <div className="delete-confirm">
                         <span>Delete {channel.channel_name} including all videos? </span>
+
                         <Button
                           label="Delete"
                           className="danger-button"
@@ -161,7 +162,8 @@ const ChannelAbout = () => {
                             await deleteChannel(channelId);
                             navigate(Routes.Channels);
                           }}
-                        />{' '}
+                        />
+
                         <Button
                           label="Cancel"
                           onClick={() => setShowDeleteConfirm(!showDeleteConfirm)}
diff --git a/frontend/src/pages/Channels.tsx b/frontend/src/pages/Channels.tsx
index e8d74c03..9cd0dc6f 100644
--- a/frontend/src/pages/Channels.tsx
+++ b/frontend/src/pages/Channels.tsx
@@ -68,6 +68,7 @@ const Channels = () => {
         currentPage,
         userConfig.config.show_subed_only,
       );
+
       setChannelListResponse(channelListResponse);
     })();
   }, [refresh, userConfig.config.show_subed_only, currentPage, pagination?.current_page]);
@@ -92,10 +93,12 @@ const Channels = () => {
                 alt="add-icon"
                 title="Subscribe to Channels"
               />
+
               {showAddForm && (
                 <div className="show-form">
                   <div>
                     <label>Subscribe to channels:</label>
+
                     <textarea
                       value={channelsToSubscribeTo}
                       onChange={e => {
diff --git a/frontend/src/pages/Playlist.tsx b/frontend/src/pages/Playlist.tsx
index d9b9e817..6f6e0470 100644
--- a/frontend/src/pages/Playlist.tsx
+++ b/frontend/src/pages/Playlist.tsx
@@ -206,7 +206,7 @@ const Playlist = () => {
               )}
 
               {showDeleteConfirm && (
-                <div className="delete-confirm" id="delete-button">
+                <div className="delete-confirm">
                   <span>Delete {playlist.playlist_name}?</span>
 
                   <Button
@@ -226,7 +226,6 @@ const Playlist = () => {
                     }}
                   />
 
-                  <br />
                   <Button label="Cancel" onClick={() => setShowDeleteConfirm(!showDeleteConfirm)} />
                 </div>
               )}
diff --git a/frontend/src/pages/Video.tsx b/frontend/src/pages/Video.tsx
index 19425015..09dca1eb 100644
--- a/frontend/src/pages/Video.tsx
+++ b/frontend/src/pages/Video.tsx
@@ -349,8 +349,9 @@ const Video = () => {
                   )}
 
                   {showDeleteConfirm && (
-                    <div className="delete-confirm" id="delete-button">
+                    <div className="delete-confirm">
                       <span>Are you sure? </span>
+
                       <Button
                         label="Delete"
                         className="danger-button"
@@ -358,7 +359,8 @@ const Video = () => {
                           await deleteVideo(videoId);
                           navigate(Routes.Channel(video.channel.channel_id));
                         }}
-                      />{' '}
+                      />
+
                       <Button
                         label="Cancel"
                         onClick={() => setShowDeleteConfirm(!showDeleteConfirm)}
diff --git a/frontend/src/style.css b/frontend/src/style.css
index cdf105d8..0f05e638 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -268,6 +268,7 @@ button:hover {
 
 /* delete button */
 .delete-confirm button {
+  display: flex;
   margin: 3px 0;
 }