style: carousel like animation on welcome

src/features/welcome/Welcome.jsx

@@ -1,4 +1,3 @@
-// Importing necessary libraries and components
 import { useState, useEffect } from 'react';
 import variables from 'config/variables';
 import { MdArrowBackIosNew, MdArrowForwardIos, MdOutlinePreview } from 'react-icons/md';
@@ -24,22 +23,18 @@ import {
   Final,
 } from './components/Sections';
 
-// WelcomeModal component
 function WelcomeModal() {
-  // State variables
   const [currentTab, setCurrentTab] = useState(0);
   const [buttonText, setButtonText] = useState(variables.getMessage('modals.welcome.buttons.next'));
   const [importedSettings, setImportedSettings] = useState([]);
-  const [image, setImage] = useState(null); // New state variable for the image
-  const [credit, setCredit] = useState(''); // New state variable for the credit
+  const [image, setImage] = useState(null);
+  const [credit, setCredit] = useState('');
   const finalTab = 6;
-  const [direction, setDirection] = useState(1); // New state variable for the direction
-  const [firstRender, setFirstRender] = useState(true); // New state variable for the first render
-  const [quote, setQuote] = useState(''); // New state variable for the quote
+  const [direction, setDirection] = useState(1);
+  const [firstRender, setFirstRender] = useState(true);
+  const [quote, setQuote] = useState('');
 
-  // useEffect hook to handle tab changes and event bus listener
   useEffect(() => {
-    // Get the current welcome tab from local storage
     setFirstRender(false);
     const welcomeTab = localStorage.getItem('welcomeTab');
     const randomQuote = offline_quotes[Math.floor(Math.random() * offline_quotes.length)].quote;
@@ -55,14 +50,12 @@ function WelcomeModal() {
     }
 
     let offlineImage = null;
-    // Fetch the offline image if the current tab is 0
     if (offlineImage === null) {
       offlineImage = getOfflineImage('background');
       setImage(offlineImage.url);
       setCredit(offlineImage.photoInfo.credit);
     }
 
-    // Listener for the 'refresh' event
     const refreshListener = (data) => {
       if (data === 'welcomeLanguage') {
         localStorage.setItem('welcomeTab', currentTab);
@@ -71,16 +64,13 @@ function WelcomeModal() {
       }
     };
 
-    // Subscribe to the 'refresh' event
     EventBus.on('refresh', refreshListener);
 
-    // Cleanup function to unsubscribe from the 'refresh' event
     return () => {
       EventBus.off('refresh', refreshListener);
     };
   }, [currentTab, finalTab]);
 
-  // Function to update the current tab and button text
   const updateTabAndButtonText = (newTab) => {
     setCurrentTab(newTab);
     setButtonText(
@@ -93,9 +83,8 @@ function WelcomeModal() {
     localStorage.removeItem('welcomeTab');
   };
 
-  // Functions to navigate to the previous and next tabs
   const prevTab = () => {
-    setDirection(-1); // Update the direction
+    setDirection(-1);
     updateTabAndButtonText(currentTab - 1);
   };
 
@@ -108,12 +97,11 @@ function WelcomeModal() {
     updateTabAndButtonText(currentTab + 1);
   };
 
-  // Function to switch to a specific tab
   const switchToTab = (tab) => {
+    setDirection(tab > currentTab ? 1 : -1);
     updateTabAndButtonText(tab);
   };
 
-  // Navigation component
   const Navigation = () => {
     return (
       <div className="welcomeButtons">
@@ -143,23 +131,40 @@ function WelcomeModal() {
     );
   };
 
-  // Mapping of tab numbers to components
-  const tabComponents = {
-    0: <Intro />,
-    1: <ChooseLanguage />,
-    2: <ImportSettings setImportedSettings={setImportedSettings} switchTab={switchToTab} />,
-    3: <ThemeSelection />,
-    4: <StyleSelection />,
-    5: <PrivacyOptions />,
-    6: (
-      <Final currentTab={currentTab} switchTab={switchToTab} importedSettings={importedSettings} />
-    ),
+  const tabs = [
+    <Intro key="intro" />,
+    <ChooseLanguage key="chooseLanguage" />,
+    <ImportSettings
+      key="importSettings"
+      setImportedSettings={setImportedSettings}
+      switchTab={switchToTab}
+    />,
+    <ThemeSelection key="themeSelection" />,
+    <StyleSelection key="styleSelection" />,
+    <PrivacyOptions key="privacyOptions" />,
+    <Final
+      key="final"
+      currentTab={currentTab}
+      switchTab={switchToTab}
+      importedSettings={importedSettings}
+    />,
+  ];
+
+  const variants = {
+    enter: (direction) => ({
+      x: direction > 0 ? 1000 : -1000,
+      opacity: 0,
+    }),
+    center: {
+      x: 0,
+      opacity: 1,
+    },
+    exit: (direction) => ({
+      x: direction < 0 ? 1000 : -1000,
+      opacity: 0,
+    }),
   };
 
-  // Current tab component
-  let CurrentTab = tabComponents[currentTab] || <Intro />;
-
-  // Render the WelcomeModal component
   return (
     <Wrapper>
       <Panel type="aside">
@@ -168,15 +173,15 @@ function WelcomeModal() {
             backgroundImage: `url(${image})`,
             backgroundSize: 'cover',
             backgroundPosition: 'center',
-            height: '100%', // adjust as needed
-            width: '100%', // adjust as needed
+            height: '100%',
+            width: '100%',
           }}
           className="grid place-items-center text-center"
           key={currentTab}
           initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
+          animate={{ opacity: 0.8 }}
           exit={{ opacity: 0 }}
-          transition={{ type: 'spring', duration: 2 }}
+          transition={{ type: 'spring', duration: 3 }}
         >
           <motion.span
             className="text-[40px] font-bold max-w-[50%]"
@@ -201,27 +206,26 @@ function WelcomeModal() {
             {credit}
           </motion.span>
         </div>
-        {/*<AsideImage currentTab={currentTab} />
-        <ProgressBar numberOfTabs={finalTab + 1} currentTab={currentTab} switchTab={switchToTab} />*/}
       </Panel>
-      <Panel type="content" key={currentTab}>
-        <motion.div
-          initial={{ opacity: 0, x: firstRender ? 0 : 100 * direction }}
-          animate={{ opacity: 1, x: 0 }}
-          exit={{ opacity: 0, x: 100 * direction }}
-        >
-          {CurrentTab}
-        </motion.div>
-        <Navigation
-          currentTab={currentTab}
-          changeTab={switchToTab}
-          buttonText={buttonText}
-          //modalSkip={modalSkip}
-        />
+      <Panel type="content" style={{ position: 'relative', overflow: 'hidden' }}>
+        <AnimatePresence initial={false} custom={direction}>
+          <motion.div
+            key={currentTab}
+            custom={direction}
+            variants={variants}
+            initial="enter"
+            animate="center"
+            exit="exit"
+            transition={{ type: 'tween', duration: 1 }}
+            style={{ position: 'absolute', oveflow: 'auto' }}
+          >
+            {tabs[currentTab]}
+          </motion.div>
+        </AnimatePresence>
+        <Navigation />
       </Panel>
     </Wrapper>
   );
 }
 
-// Export the WelcomeModal component
 export default WelcomeModal;

src/features/welcome/welcome.scss

@@ -42,6 +42,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    z-index: 999;
 
     @include themed {
       background-color: t($modal-sidebar);
@@ -59,7 +60,6 @@
     flex-flow: column;
     justify-content: space-between;
     overflow-y: auto;
-    overflow-x: hidden;
 
     .content {
       display: flex;
@@ -340,6 +340,9 @@ a.privacy {
   display: flex;
   justify-content: flex-end;
   gap: 20px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
 
   button {
     @include modal-button(standard);