From 26e1b94abd944812838406689548790cceade2d9 Mon Sep 17 00:00:00 2001 From: duckietm Date: Wed, 12 Mar 2025 14:21:38 +0100 Subject: [PATCH] :up: small fix loading screen & orde css files --- src/components/loading/LoadingView.tsx | 28 ++-- src/css/CameraWidgetView.css | 133 ------------------ src/css/{ => chat}/chats.css | 0 src/css/{ => loading}/loading.css | 10 +- .../NotificationCenterView.css | 0 src/index.tsx | 10 +- 6 files changed, 27 insertions(+), 154 deletions(-) delete mode 100644 src/css/CameraWidgetView.css rename src/css/{ => chat}/chats.css (100%) rename src/css/{ => loading}/loading.css (76%) rename src/css/{ => notification}/NotificationCenterView.css (100%) diff --git a/src/components/loading/LoadingView.tsx b/src/components/loading/LoadingView.tsx index 5e1c1f9..4c79812 100644 --- a/src/components/loading/LoadingView.tsx +++ b/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 = props => -{ +export const LoadingView: FC = props => { const { isError = false, message = '' } = props; return ( - + - - - { isError && (message && message.length) ? - { message } - : - <> - The hotel is loading ... - - } - + + { isError && (message && message.length) ? + { message } + : + + The hotel is loading ... + + } ); -} +}; \ No newline at end of file diff --git a/src/css/CameraWidgetView.css b/src/css/CameraWidgetView.css deleted file mode 100644 index aecd0b1..0000000 --- a/src/css/CameraWidgetView.css +++ /dev/null @@ -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; - } -} diff --git a/src/css/chats.css b/src/css/chat/chats.css similarity index 100% rename from src/css/chats.css rename to src/css/chat/chats.css diff --git a/src/css/loading.css b/src/css/loading/loading.css similarity index 76% rename from src/css/loading.css rename to src/css/loading/loading.css index dbf725e..b6aa8cd 100644 --- a/src/css/loading.css +++ b/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 { - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); +.nitro-loading_text { + position: absolute; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + z-index: 3; } \ No newline at end of file diff --git a/src/css/NotificationCenterView.css b/src/css/notification/NotificationCenterView.css similarity index 100% rename from src/css/NotificationCenterView.css rename to src/css/notification/NotificationCenterView.css diff --git a/src/index.tsx b/src/index.tsx index 49f01a4..9a262f7 100644 --- a/src/index.tsx +++ b/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';