🆙 small fix loading screen & orde css files

src/components/loading/LoadingView.tsx

@@ -1,33 +1,29 @@
 import { FC } from 'react';
 import { Base, Column, Text } from '../../common';
 
-interface LoadingViewProps
+interface LoadingViewProps {
-{
     isError: boolean;
     message: string;
 }
 
-export const LoadingView: FC<LoadingViewProps> = props =>
+export const LoadingView: FC<LoadingViewProps> = props => {
-{
     const { isError = false, message = '' } = props;
     
     return (
         <Column fullHeight position="relative" className="nitro-loading">
             <Base fullHeight className="container h-100">
-                <Column fullHeight alignItems="center" justifyContent="end">
+                <Column fullHeight alignItems="center" justifyContent="center">
                     <Base className="nitro-loading_animation" />
-					<Base className="nitro-loading_logo" /> 
+                    <Base className="nitro-loading_logo" />
-                    <Column size={ 6 } className="text-center py-4">
+                    { isError && (message && message.length) ?
-                        { isError && (message && message.length) ?
+                        <Base className="fs-4 nitro-loading_text">{ message }</Base>
-                            <Base className="fs-4 text-shadow">{ message }</Base>
+                        :
-                            :
+                        <Text fontSizeCustom={32} variant="white" className="nitro-loading_text">
-                            <>
+                            The hotel is loading ...
-                                <Text fontSizeCustom={ 36 } variant="white" className="text-shadow">The hotel is loading ...</Text>
+                        </Text>
-                            </>
+                    }
-                        }
-                    </Column>
                 </Column>
             </Base>
         </Column>
     );
-}
+};

src/css/CameraWidgetView.css

@@ -1,133 +0,0 @@
-.nitro-camera-capture {
-    position: relative;
-
-    .header-close {
-        top: 8px;
-        right: 8px;
-        border-radius: $border-radius;
-        box-shadow: 0 0 0 1.5px $white;
-        border: 2px solid #921911;
-        background: repeating-linear-gradient(
-            rgba(245, 80, 65, 1),
-            rgba(245, 80, 65, 1) 50%,
-            rgba(194, 48, 39, 1) 50%,
-            rgba(194, 48, 39, 1) 100%
-        );
-        cursor: pointer;
-        line-height: 1;
-        padding: 1px 3px;
-
-        &:hover {
-            filter: brightness(1.2);
-        }
-
-        &:active {
-            filter: brightness(0.8);
-        }
-    }
-
-    .camera-area {
-        position: absolute;
-        top: 37px;
-        left: 10px;
-        width: 320px;
-        height: 320px;
-    }
-
-    .camera-canvas {
-        position: relative;
-        width: 340px;
-        height: 462px;
-        background-image: url('@/assets/images/room-widgets/camera-widget/camera-spritesheet.png');
-        background-position: -1px -1px;
-        z-index: 2;
-
-        .camera-button {
-            width: 94px;
-            height: 94px;
-            cursor: pointer;
-            margin-top: 362px;
-
-            background-image: url('@/assets/images/room-widgets/camera-widget/camera-spritesheet.png');
-            background-position: -343px -321px;
-
-            &:hover {
-                background-position: -535px -321px;
-            }
-
-            &:active {
-                background-position: -439px -321px;
-            }
-        }
-
-        .camera-view-finder {
-            background-image: url('@/assets/images/room-widgets/camera-widget/camera-spritesheet.png');
-            background-position: -343px -1px;
-        }
-
-        .camera-frame {
-            .camera-frame-preview-actions {
-                background: rgba(0, 0, 0, 0.5);
-            }
-        }
-    }
-
-    .camera-roll {
-        width: 330px;
-        background: #bab8b4;
-        border-bottom-left-radius: 10px;
-        border-bottom-right-radius: 10px;
-        border: 1px solid black;
-        box-shadow: inset 1px 0px white, inset -1px -1px white;
-
-        img {
-            width: 56px;
-            height: 56px;
-            border: 1px solid black;
-            object-fit: contain;
-            image-rendering: initial;
-        }
-    }
-}
-
-.nitro-camera-editor {
-    width: $camera-editor-width;
-    height: $camera-editor-height;
-
-    .picture-preview {
-        width: 320px;
-        height: 320px;
-    }
-
-    .layout-grid-item {
-        height: 60px !important;
-        max-height: 60px !important;
-    }
-
-    .effect-thumbnail-image {
-        img {
-            width: 50px;
-            height: 50px;
-            image-rendering: auto;
-            object-fit: contain;
-        }
-    }
-
-    .remove-effect {
-        position: absolute;
-        top: 1px;
-        right: 1px;
-        padding: 2px;
-        font-size: 10px;
-        min-height: unset;
-    }
-}
-
-.nitro-camera-checkout {
-    width: $camera-checkout-width;
-
-    .picture-preview {
-        width: 320px;
-        height: 320px;
-    }
-}

src/css/loading/loading.css

@@ -25,8 +25,14 @@
     background: url('@/assets/images/notifications/coolui.png') no-repeat top left;
     width: 150px;
     height: 100px;
+	z-index: 2;
 }
 
-.text-shadow {
+.nitro-loading_text {
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    z-index: 3;
 }

src/index.tsx

@@ -1,12 +1,16 @@
 import { createRoot } from 'react-dom/client';
 import { App } from './App';
-import './css/chats.css';
+
 import './css/index.css';
-import './css/loading.css';
 import './css/NitroCardView.css';
-import './css/NotificationCenterView.css';
 import './css/PurseView.css';
 
+import './css/chat/chats.css';
+
+import './css/loading/loading.css';
+
+import './css/notification/NotificationCenterView.css';
+
 import './css/room/ChatHistoryView.css';
 import './css/room/RoomWidgets.css';