refactor: redesign discover customization buttons (#3224)

src/components/Discover/index.tsx

@@ -17,6 +17,7 @@ import MediaSlider from '@app/components/MediaSlider';
 import { encodeURIExtraParams } from '@app/hooks/useSearchInput';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
+import { Transition } from '@headlessui/react';
 import {
   ArrowDownOnSquareIcon,
   ArrowPathIcon,
@@ -117,12 +118,59 @@ const Discover = () => {
       <PageTitle title={intl.formatMessage(messages.discover)} />
       {hasPermission(Permission.ADMIN) && (
         <>
-          {isEditing ? (
+          {isEditing && (
-            <>
+            <div className="my-6 rounded-lg bg-gray-800">
-              <div className="my-6 flex flex-col justify-end space-y-2 md:flex-row md:space-y-0 md:space-x-3">
+              <div className="flex items-center space-x-2 rounded-t-lg border-t border-l border-r border-gray-800 bg-gray-900 p-4 text-lg font-semibold text-gray-400">
+                <PlusIcon className="w-6" />
+                <span data-testid="create-slider-header">
+                  {intl.formatMessage(messages.createnewslider)}
+                </span>
+              </div>
+              <div className="p-4">
+                <CreateSlider
+                  onCreate={async () => {
+                    const newSliders = await mutate();
+
+                    if (newSliders) {
+                      setSliders(newSliders);
+                    }
+                  }}
+                />
+              </div>
+            </div>
+          )}
+          <Transition
+            show={!isEditing}
+            enter="transition-opacity duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="transition-opacity duration-300"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+            className="fixed bottom-8 right-8 z-50 flex items-center"
+          >
+            <button
+              onClick={() => setIsEditing(true)}
+              data-testid="discover-start-editing"
+              className="h-12 w-12 rounded-full border border-gray-600 bg-gray-700 bg-opacity-80 p-3 text-gray-400 shadow transition-all hover:bg-opacity-100"
+            >
+              <PencilIcon className="h-full w-full" />
+            </button>
+          </Transition>
+          <Transition
+            show={isEditing}
+            enter="transition transform duration-300"
+            enterFrom="opacity-0 translate-y-6"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition duration-300 transform"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-6"
+            className="fixed bottom-0 right-0 left-0 z-50 flex flex-col items-center justify-end space-x-0 space-y-2 border-t border-gray-700 bg-gray-800 bg-opacity-80 p-4 backdrop-blur sm:flex-row sm:space-y-0 sm:space-x-3"
+          >
             <Button
               buttonType="default"
               onClick={() => setIsEditing(false)}
+              className="w-full sm:w-auto"
             >
               <ArrowUturnLeftIcon />
               <span>{intl.formatMessage(messages.stopediting)}</span>
@@ -131,6 +179,7 @@ const Discover = () => {
               <ConfirmButton
                 onClick={() => resetSliders()}
                 confirmText={intl.formatMessage(globalMessages.areyousure)}
+                className="w-full sm:w-auto"
               >
                 <ArrowPathIcon />
                 <span>{intl.formatMessage(messages.resettodefault)}</span>
@@ -142,45 +191,12 @@ const Discover = () => {
               disabled={!hasChanged()}
               onClick={() => updateSliders()}
               data-testid="discover-customize-submit"
+              className="w-full sm:w-auto"
             >
               <ArrowDownOnSquareIcon />
               <span>{intl.formatMessage(globalMessages.save)}</span>
             </Button>
-              </div>
+          </Transition>
-              <div className="mb-6 rounded-lg bg-gray-800">
-                <div className="flex items-center space-x-2 rounded-t-lg border-t border-l border-r border-gray-800 bg-gray-900 p-4 text-lg font-semibold text-gray-400">
-                  <PlusIcon className="w-6" />
-                  <span data-testid="create-slider-header">
-                    {intl.formatMessage(messages.createnewslider)}
-                  </span>
-                </div>
-                <div className="p-4">
-                  <CreateSlider
-                    onCreate={async () => {
-                      const newSliders = await mutate();
-
-                      if (newSliders) {
-                        setSliders(newSliders);
-                      }
-                    }}
-                  />
-                </div>
-              </div>
-            </>
-          ) : (
-            <div className="my-6 flex justify-end">
-              <span className="ml-3 inline-flex rounded-md shadow-sm">
-                <Button
-                  buttonType="default"
-                  onClick={() => setIsEditing(true)}
-                  data-testid="discover-start-editing"
-                >
-                  <PencilIcon />
-                  <span>{intl.formatMessage(messages.customizediscover)}</span>
-                </Button>
-              </span>
-            </div>
-          )}
         </>
       )}
       {(isEditing ? sliders : discoverData)?.map((slider, index) => {