[APP SEPERATION]-Rupato/bot 1858/fix dashboard tab issues

package.json

@@ -8,7 +8,7 @@
     },
     "scripts": {
         "start": "vite",
-        "start:dev": "vite-live-preview --reload --port=8443",
+        "start:dev": "vite-live-preview --reload --port=8444",
         "build": "vite build",
         "preview": "vite preview",
         "test:lint": "prettier --log-level silent --write . && eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",

src/components/load-modal/load-modal.tsx

@@ -6,7 +6,7 @@ import { tabs_title } from '@/constants/load-modal';
 import { useStore } from '@/hooks/useStore';
 import { localize } from '@/utils/tmp/dummy';
 
-import GoogleDrive from '../../pages/dashboard/load-bot-preview/google-drive';
+import GoogleDrive from '../../pages/dashboard/common/google-dialog/google-drive';
 import MobileFullPageModal from '../shared_ui/mobile-full-page-modal';
 
 import Local from './local';

src/components/shared_ui/dialog/dialog.scss

@@ -0,0 +1,137 @@
+/** @define dc-dialog */
+
+.dc-dialog {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    flex-direction: column;
+    z-index: 999;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    &__wrapper {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 999;
+        transition: opacity 0.25s cubic-bezier(0.25, 0.1, 0.1, 0.25);
+        background-color: var(--overlay-outside-dialog);
+
+        &--enter,
+        &--exit {
+            opacity: 0;
+
+            .dc-dialog__dialog {
+                transform: translate3d(0, 50px, 0);
+                opacity: 0;
+            }
+        }
+        &--enter-done {
+            opacity: 1;
+
+            .dc-dialog__dialog {
+                transform: translate3d(0, 0, 0);
+                opacity: 1;
+            }
+        }
+        &--has-portal {
+            background-color: transparent;
+        }
+    }
+    &__dialog {
+        max-width: 560px;
+        max-height: 338px;
+        min-width: 440px;
+        min-height: 176px;
+        margin-top: -#{$HEADER_HEIGHT};
+        padding: 2.4rem;
+        border-radius: 8px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-around;
+        flex-direction: column;
+        align-items: center;
+        box-shadow: 0 2px 8px 0 var(--shadow-menu);
+        background-color: var(--general-main-2);
+        transition:
+            transform 0.25s cubic-bezier(0.25, 0.1, 0.1, 0.25),
+            opacity 0.25s cubic-bezier(0.25, 0.1, 0.1, 0.25);
+    }
+    &__header {
+        &-wrapper {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+            &--end {
+                justify-content: flex-end;
+            }
+        }
+        &--title {
+            align-self: flex-start;
+        }
+        &--close {
+            cursor: pointer;
+        }
+    }
+    &__content {
+        align-self: flex-start;
+        margin-bottom: 2.4rem;
+        max-width: calc(440px - 4.8rem);
+        width: 100%;
+
+        /* postcss-bem-linter: ignore */
+        .dc-input__label {
+            background-color: var(--general-main-2);
+        }
+        &--centered {
+            align-self: center;
+        }
+    }
+    &__footer {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        width: 100%;
+        @include mobile {
+            flex-wrap: wrap;
+            align-items: flex-start;
+        }
+    }
+    &__button {
+        margin-left: 0.8rem;
+        height: 4rem;
+        min-width: 6.4rem;
+        border-width: 2px;
+        @include mobile {
+            &:not(:last-child) {
+                margin-bottom: 1rem;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 560px) {
+    .dc-dialog {
+        &__dialog {
+            min-width: auto;
+
+            &--has-margin {
+                min-width: unset;
+                width: calc(100vw - 4.8rem);
+            }
+        }
+    }
+}