diff --git a/src/App.scss b/src/App.scss deleted file mode 100644 index 2000ade..0000000 --- a/src/App.scss +++ /dev/null @@ -1,102 +0,0 @@ -$toolbar-me-zindex: 90; -$chatinput-zindex: 80; -$toolbar-zindex: 70; -$rightside-zindex: 69; -$notification-center-zindex: 68; -$toolbar-memenu-zindex: 60; -$roomtools-zindex: 50; -$context-menu-zindex: 40; -$infostand-zindex: 30; -$quiz-zindex: 21; -$chat-zindex: 20; -$highscore-zindex: 19; - -$grid-bg-color: #cdd3d9; -$grid-border-color: $muted; -$grid-active-bg-color: #ececec; -$grid-active-border-color: $white; - -$toolbar-height: 55px; - -$achievement-width: 375px; -$achievement-height: 405px; - -$avatar-editor-width: 620px; -$avatar-editor-height: 374px; - -$catalog-width: 630px; -$catalog-height: 400px; - -$inventory-width: 528px; -$inventory-height: 320px; - -$navigator-width: 420px; -$navigator-height: 440px; - -$chat-input-style-selector-widget-width: 210px; -$chat-input-style-selector-widget-height: 200px; - -$user-profile-width: 470px; -$user-profile-height: 460px; - -$nitro-widget-custom-stack-height-width: 275px; -$nitro-widget-custom-stack-height-height: 220px; - -$nitro-widget-exchange-credit-width: 375px; -$nitro-widget-exchange-credit-height: 150px; - -$nitro-widget-crafting-width: 500px; -$nitro-widget-crafting-height: 300px; - -$chat-history-width: 300px; -$chat-history-height: 300px; - -$friends-list-width: 250px; -$friends-list-height: 300px; - -$help-width: 450px; -$help-height: 290px; - -$nitropedia-width: 400px; -$nitropedia-height: 400px; - -$messenger-width: 500px; -$messenger-height: 370px; - -$marketplace-post-offer-width: 430px; -$marketplace-post-offer-height: 250px; - -$camera-editor-width: 600px; -$camera-editor-height: 500px; - -$camera-checkout-width: 350px; - -$room-info-width: 325px; - -$nitro-group-creator-width: 383px; -$nitro-mod-tools-width: 175px; - -$nitro-group-manager-width: 390px; -$nitro-group-manager-height: 355px; - -$nitro-chooser-width: 200px; -$nitro-chooser-height: 200px; - -$nitro-doorbell-width: 300px; -$nitro-doorbell-height: 200px; - -$nitro-guide-tool-width: 250px; - -$nitro-floor-editor-width: 760px; -$nitro-floor-editor-height: 500px; - -$nitro-calendar-width: 850px; -$nitro-calendar-height: 400px; - -.nitro-app { - width: 100%; - height: 100%; -} - -@import './common'; -@import './components'; diff --git a/src/common/Button.tsx b/src/common/Button.tsx index bdd3ccd..5caca6c 100644 --- a/src/common/Button.tsx +++ b/src/common/Button.tsx @@ -44,6 +44,9 @@ export const Button: FC = props => if(variant == 'dark') newClassNames.push('text-white bg-dark [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white hover:bg-[#18181bfb] hover:border-[#161619fb]'); + + if(variant == 'gray') + newClassNames.push('text-white bg-[#1e7295] border-[#1e7295] [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white hover:bg-[#1a617f] hover:border-[#185b77]'); } diff --git a/src/common/Text.tsx b/src/common/Text.tsx index 040e453..da5235d 100644 --- a/src/common/Text.tsx +++ b/src/common/Text.tsx @@ -43,7 +43,18 @@ export const Text: FC = props => { const getClassNames = useMemo(() => { const newClassNames: string[] = ['inline']; - if (variant) newClassNames.push('text-' + variant); + if (variant) { + if (variant === 'primary') newClassNames.push('text-[#1e7295]'); + if (variant == 'secondary') newClassNames.push('text-[#185d79]'); + if (variant === 'black') newClassNames.push('text-[#000000]'); + if (variant == 'dark') newClassNames.push('text-[#18181b]'); + if (variant === 'gray') newClassNames.push('text-[#6b7280]'); + if (variant === 'white') newClassNames.push('text-[#ffffff]'); + if (variant == 'success') newClassNames.push('text-[#00800b]'); + if (variant == 'danger') newClassNames.push('text-[#a81a12]'); + if (variant == 'warning') newClassNames.push('text-[#ffc107]'); + } + if (bold) newClassNames.push('font-bold'); if (fontWeight) newClassNames.push('font-' + fontWeight); if (fontSize) newClassNames.push('fs-' + fontSize); diff --git a/src/common/card/NitroCardView.scss b/src/common/card/NitroCardView.scss deleted file mode 100644 index ea56900..0000000 --- a/src/common/card/NitroCardView.scss +++ /dev/null @@ -1,248 +0,0 @@ -$nitro-card-header-height: 133px; -$nitro-card-tabs-height: 133px; - -.nitro-card { - resize: both; - - @include media-breakpoint-down(lg) { - max-width: 100vw !important; - max-height: 100vh !important; - } - - &.theme-primary { - border: $border-width solid $border-color; - - .nitro-card-header { - min-height: 33px; - max-height: 33px; - background: $primary; - - .nitro-card-header-text { - color: $white; - text-shadow: 0px 4px 4px rgba($black, 0.25); - @include font-size($h4-font-size); - } - - .nitro-card-header-close { - cursor: pointer; - padding: 2px 2px; - line-height: 1; - border-radius: $border-radius; - box-shadow: 0 0 0 1.6px $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% - ); - - &:hover { - filter: brightness(1.2); - } - - &:active { - filter: brightness(0.8); - } - } - - .nitro-card-header-report-camera { - cursor: pointer; - padding: 1px 3px; - line-height: 1; - border-radius: $border-radius; - box-shadow: 0 0 0 1.6px $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% - ); - - &:hover { - filter: brightness(1.2); - } - - &:active { - filter: brightness(0.8); - } - } - } - - .nitro-card-tabs { - background-color: #FFFFFF; - - .nav-item { - padding: $nav-link-padding-y $nav-link-padding-x; - background-color: $muted; - color: $black; - z-index: 1; - margin-bottom: -1px; - - &.active { - background-color: $light; - border-color: $border-color $border-color $light !important; - border-bottom: 1px solid black; - - &:before { - background: $white; - } - } - - &:before { - content: ''; - position: absolute; - width: 93%; - height: 3px; - border-radius: 0.25rem; - top: 1.5px; - left: 0; - right: 0; - margin: auto; - background: #c2c9d1; - z-index: 1; - } - } - } - - .content-area { - background-color: $light; - } - } - - &.theme-primary-slim { - border: $border-width solid $border-color; - - .nitro-card-header { - position: relative; - min-height: 28px; - max-height: 28px; - background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%); - border-bottom: 2px solid darken($quaternary, 5); - box-shadow: 0 2px white; - width: 100%; - margin: 0; - padding-top:2px; - - &:before { - position: absolute; - content: ' '; - top: 0; - left: 0; - width: 100%; - height: 2px; - background-color: rgba($white, 0.3); - } - - .nitro-card-header-text { - color: $white; - text-shadow: 0px 4px 4px rgba($black, 0.25); - @include font-size($h5-font-size); - min-height: 21px; - } - - .nitro-card-header-close { - cursor: pointer; - padding: 0px 2px; - line-height: 1; - @include font-size($h7-font-size); - border-radius: $border-radius; - box-shadow: 0 0 0 1.6px $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% - ); - - &:hover { - filter: brightness(1.2); - } - - &:active { - filter: brightness(0.8); - } - } - - .nitro-card-header-report-camera { - cursor: pointer; - padding: 0px 2px; - margin-right: 4px; - line-height: 1; - @include font-size($h7-font-size); - border-radius: $border-radius; - box-shadow: 0 0 0 1.6px $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% - ); - - &:hover { - filter: brightness(1.2); - } - - &:active { - filter: brightness(0.8); - } - } - } - - .nitro-card-tabs { - background-color: $secondary; - } - - .content-area { - background-color: $light; - } - } -} - -.content-area { - height: 100%; - padding-top: $container-padding-x; - padding-bottom: $container-padding-x; - overflow: auto; - - &.theme-dark { - background-color: #1C323F !important; - } -} - -@include media-breakpoint-down(lg) { - .content-area { - height: 100% !important; - min-height: auto !important; - max-height: 100% !important; - } -} - -.nitro-card-header { - position: relative; - height: 100%; -} - -.nitro-card-tabs { - height: 100%; - min-height: $nitro-card-tabs-height; - max-height: $nitro-card-tabs-height; - border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color; -} - -.nitro-card-accordion-set { - - &.active { - height: 100%; - overflow: hidden; - background: rgba($white, 0.5); - border-bottom: 1px solid rgba($black, 0.2); - } - - .nitro-card-accordion-set-header { - border-bottom: 1px solid rgba($black, 0.2); - } -} diff --git a/src/common/card/NitroCardView.tsx b/src/common/card/NitroCardView.tsx index 45d8144..9018cac 100644 --- a/src/common/card/NitroCardView.tsx +++ b/src/common/card/NitroCardView.tsx @@ -20,8 +20,6 @@ export const NitroCardView: FC = props => // Card Theme Changer newClassNames.push('border-[1px] border-[#283F5D]'); - - if(classNames.length) newClassNames.push(...classNames); return newClassNames; diff --git a/src/common/index.scss b/src/common/index.scss deleted file mode 100644 index f1efe5c..0000000 --- a/src/common/index.scss +++ /dev/null @@ -1,562 +0,0 @@ -.layout-grid-item { - height: var(--nitro-grid-column-min-height, unset); - background-position: center; - background-repeat: no-repeat; - background-color: $grid-bg-color; - - &.active { - border-color: $grid-active-border-color !important; - - &:not(.clear-bg) { - background-color: $grid-active-bg-color !important; - } - } - - &.disabled { - cursor: not-allowed; - - img { - opacity: 0.5; - filter: grayscale(1); - } - } - - &.unseen { - background-color: rgba($success, 0.4); - } - - .avatar-image { - background-position-y: -35px; - } - - &.has-highlight { - &:after { - content: ''; - z-index: 2; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 50%; - background-color: $white; - opacity: 0.1; - } - } -} - -.nitro-room-thumbnail-camera { - width: 132px; - height: 192px; - background-image: url('@/assets/images/room-widgets/thumbnail-widget/thumbnail-camera-spritesheet.png'); - - .camera-frame { - position: absolute; - width: 110px; - height: 110px; - margin-top: 30px; - margin-left: 3px; - } -} - -.nitro-layout-trophy { - position: relative; - width: 340px; - height: 173px; - color: black; - pointer-events: all; - - background-position: 0px 0px; - background-image: url('@/assets/images/room-widgets/trophy-widget/trophy-spritesheet.png'); - - &.trophy-2 { - background-position: 0px 173px; - } - - &.trophy-3 { - background-position: 0px 346px; - } - - .trophy-header { - height: 22px; - - .trophy-close { - width: 15px; - height: 15px; - right: 5.5px; - top: 5px; - } - } - - .trophy-content { - width: 297px; - height: 116px; - white-space: pre-wrap; - overflow: auto; - } - - .trophy-footer { - width: 297px; - } -} - -.nitro-gift-card { - width: 306px; - height: 159px; - background: url('@/assets/images/gift/gift_tag.png') center no-repeat; - - .gift-face { - width: 65px; - - .gift-incognito { - width: 37px; - height: 48px; - background: url('@/assets/images/gift/incognito.png') center no-repeat; - } - - .gift-avatar { - position: relative; - overflow: hidden; - width: 40px; - height: 50px; - - .avatar-image { - position: absolute; - left: -25px; - top: -20px; - } - } - } - - .gift-message { - width: 100%; - min-width: 100%; - max-width: 100%; - border: none; - resize: none; - outline: none; - line-height: 17px; - } -} - -.spinner-container { - display: flex; - align-items: center; - justify-content: center; - - .spinner { - margin: 2px; - width: 10px; - height: 10px; - border: $border-width solid $white; - background-color: rgba($white, 0.8); - border-radius: 100%; - display: inline-block; - -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; - animation: sk-bouncedelay 1.4s infinite ease-in-out both; - - &:nth-child(1) { - -webkit-animation-delay: -0.32s; - animation-delay: -0.32s; - } - - &:nth-child(2) { - -webkit-animation-delay: -0.16s; - animation-delay: -0.16s; - } - } -} - -@-webkit-keyframes sk-bouncedelay { - - 0%, - 80%, - 100% { - -webkit-transform: scale(0); - } - - 40% { - -webkit-transform: scale(1); - } -} - -@keyframes sk-bouncedelay { - - 0%, - 80%, - 100% { - -webkit-transform: scale(0); - transform: scale(0); - } - - 40% { - -webkit-transform: scale(1); - transform: scale(1); - } -} - -.room-thumbnail { - position: relative; - width: 110px; - height: 110px; - background: url('@/assets/images/navigator/thumbnail_placeholder.png') no-repeat center; - background-color: rgba($black, 0.125); -} - -#draggable-windows-container { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; - overflow: hidden; - - @include media-breakpoint-down(lg) { - display: flex; - justify-content: center; - align-items: center; - } - - .draggable-window { - display: inline-block; - visibility: hidden; - pointer-events: all; - } -} - -.nitro-currency-icon { - background-position: center; - background-repeat: no-repeat; - width: 15px; - height: 15px; -} - -.nitro-item-count { - top: 2px; - right: 2px; - font-size: 9.5px; - padding: 2px 3px; - z-index: 1; -} - -.relative { - position: relative; - width: 40px; - height: 40px; - background-repeat: no-repeat; - background-position: center; - - .badge-information { - display: none; - } - - &:hover { - .badge-information { - display: block; - } - } - - .badge-information { - position: absolute; - pointer-events: none; - user-select: none; - width: 210px; - border-radius: $border-radius; - background: $white; - left: -220px; - z-index: 100; - - &:before { - position: absolute; - content: ' '; - width: 0; - height: 0; - border-left: 10px solid $white; - border-bottom: 10px solid transparent; - border-top: 10px solid transparent; - top: 10px; - right: -10px; - } - } -} - -.furni-image, -.room-object-image { - position: relative; - width: 100%; - height: 100%; - background-repeat: no-repeat; - background-position: center; -} - -.nitro-rarity-level { - width: 36px; - height: 28px; - background: url('@/assets/images/infostand/rarity-level.png'); - - div { - line-height: 28px; - text-align: center; - color: $black; - font-weight: bold; - } -} - -.nitro-counter-time { - width: 36px; - height: 28px; - background: url('@/assets/images/infostand/countown-timer.png'); - - div { - line-height: 28px; - text-align: center; - color: $white; - font-weight: bold; - } -} - -.avatar-image { - position: relative; - width: 90px; - height: 130px; - background-repeat: no-repeat; - background-position: center -8px; - pointer-events: none; -} - -.pet-image { - position: relative; - width: 100%; - height: 100%; - background-repeat: no-repeat; - background-position: center; -} - -.room-preview-container { - position: relative; - width: 100%; - - .room-preview-image { - position: relative; - top: 0; - left: 0; - height: 100%; - width: 100%; - border-radius: $border-radius; - background-color: $light; - background-repeat: no-repeat; - background-position: center; - overflow: hidden; - - &.border-0 { - &::after { - content: none; - } - } - - &::after { - position: absolute; - content: ''; - top: 0; - bottom: 0; - left: 0; - right: 0; - border-radius: $border-radius; - border-bottom: 2px solid white; - border-right: 2px solid white; - box-shadow: -2px -2px rgba(0, 0, 0, 0.4), - inset 3px 3px rgba(0, 0, 0, 0.2); - } - } -} - -.unique-item { - .unique-bg-override { - background-position: center; - background-repeat: no-repeat; - z-index: 2; - } - - &:before { - position: absolute; - content: ''; - width: 100%; - height: 100%; - background: url('@/assets/images/unique/grid-bg.png') center no-repeat; - z-index: 1; - } - - &:after { - position: absolute; - content: ''; - width: 100%; - height: 100%; - background: url('@/assets/images/unique/grid-bg-glass.png') center no-repeat; - bottom: 0; - z-index: 4; - } - - &.sold-out:after { - background: url('@/assets/images/unique/grid-bg-sold-out.png') center no-repeat, - url('@/assets/images/unique/grid-bg-glass.png') center no-repeat; - } - - .unique-item-counter { - margin: 0 auto; - display: flex; - justify-content: center; - align-items: center; - bottom: 1px; - width: 100%; - height: 9px; - background: url('@/assets/images/unique/grid-count-bg.png') center no-repeat; - z-index: 3; - } -} - -.unique-sold-out-blocker { - width: 364px; - height: 30px; - background: url('@/assets/images/unique/catalog-info-sold-out.png'); - - div { - float: right; - width: 140px; - text-align: center; - font-weight: bold; - margin-top: 5px; - margin-right: 17px; - color: #000; - } -} - -.unique-compact-plate { - display: flex; - flex-direction: column; - justify-content: flex-end; - align-items: center; - right: 16px; - width: 34px; - height: 37px; - background: url('@/assets/images/unique/inventory-info-amount-bg.png'); - - div { - display: flex; - justify-content: center; - align-items: center; - height: 9.5px; - } -} - -.unique-complete-plate { - width: 170px; - height: 29px; - background: url('@/assets/images/unique/catalog-info-amount-bg.png') no-repeat center; - z-index: 1; - padding-top: 3px; - - .plate-container { - margin-left: 45px; - width: 100px; - font-size: 10px; - color: black; - - > :first-child { - margin-bottom: 2px; - } - } -} - -.limited-edition-number { - display: inline-block; - outline: 0; - height: 5px; - margin-right: 1px; - background-image: url('@/assets/images/unique/numbers.png'); - background-repeat: no-repeat; - - &:last-child { - margin-right: 0px; - } - - &.n-0 { - width: 4px; - background-position: -1px 0px; - } - - &.n-1 { - width: 2px; - background-position: -6px 0px; - } - - &.n-2 { - width: 4px; - background-position: -9px 0px; - } - - &.n-3 { - width: 4px; - background-position: -14px 0px; - } - - &.n-4 { - width: 4px; - background-position: -19px 0px; - } - - &.n-5 { - width: 4px; - background-position: -24px 0px; - } - - &.n-6 { - width: 4px; - background-position: -29px 0px; - } - - &.n-7 { - width: 4px; - background-position: -34px 0px; - } - - &.n-8 { - width: 4px; - background-position: -39px 0px; - } - - &.n-9 { - width: 4px; - background-position: -44px 0px; - } -} - -.nitro-progress-bar { - border: 1px solid $white; - padding: 2px; - height: 20px; - border-radius: $border-radius; - overflow: hidden; - background: $primary; - - &.large { - height: 30px; - } - - .nitro-progress-bar-inner { - height: 100%; - z-index: 1; - transition: all 1s; - border-radius: calc(#{$border-radius} / 2); - background: repeating-linear-gradient($tertiary, - $tertiary 50%, - $quaternary 50%, - $quaternary 100%); - } - - .nitro-progress-bar-text { - text-shadow: 0px 4px 4px rgba($black, 0.25); - z-index: 2; - } -} - -@import './card/NitroCardView'; diff --git a/src/common/types/ColorVariantType.ts b/src/common/types/ColorVariantType.ts index 1ff6f60..945b64d 100644 --- a/src/common/types/ColorVariantType.ts +++ b/src/common/types/ColorVariantType.ts @@ -1 +1 @@ -export type ColorVariantType = 'primary' | 'success' | 'danger' | 'secondary' | 'link' | 'black' | 'white' | 'dark' | 'warning' | 'muted' | 'light'; +export type ColorVariantType = 'primary' | 'success' | 'danger' | 'secondary' | 'link' | 'black' | 'white' | 'dark' | 'warning' | 'muted' | 'light' | 'gray'; diff --git a/src/components/chat-history/ChatHistoryView.tsx b/src/components/chat-history/ChatHistoryView.tsx index e236df6..4d1e4eb 100644 --- a/src/components/chat-history/ChatHistoryView.tsx +++ b/src/components/chat-history/ChatHistoryView.tsx @@ -8,7 +8,7 @@ import { NitroInput } from '../../layout'; export const ChatHistoryView: FC<{}> = props => { const [isVisible, setIsVisible] = useState(false); const [searchText, setSearchText] = useState(''); - const { chatHistory = [] } = useChatHistory(); + const {chatHistory = []} = useChatHistory(); const elementRef = useRef(null); const isFirstRender = useRef(true); const prevChatLength = useRef(0); @@ -74,14 +74,14 @@ export const ChatHistoryView: FC<{}> = props => { if (!isVisible) return null; return ( - + setIsVisible(false)} /> setSearchText(event.target.value)} />
{filteredChatHistory.map((row, index) => ( - {row.timestamp} + {row.timestamp} {row.type === ChatEntryType.TYPE_CHAT && (