diff --git a/app/src/components/icons/ContextMenuIcons.tsx b/app/src/components/icons/ContextMenuIcons.tsx index f48cf3b..e249bad 100644 --- a/app/src/components/icons/ContextMenuIcons.tsx +++ b/app/src/components/icons/ContextMenuIcons.tsx @@ -9,31 +9,31 @@ export function FlipXAxisIcon() { > @@ -52,37 +52,38 @@ export function FlipYAxisIcon() { > ); } + export function FlipZAxisIcon() { return ( ); diff --git a/app/src/components/icons/DashboardIcon.tsx b/app/src/components/icons/DashboardIcon.tsx index 314a3c8..f1f4d7d 100644 --- a/app/src/components/icons/DashboardIcon.tsx +++ b/app/src/components/icons/DashboardIcon.tsx @@ -9,13 +9,13 @@ export function NotificationIcon() { > @@ -34,7 +34,7 @@ export function HomeIcon() { > ); @@ -51,7 +51,7 @@ export function ProjectsIcon() { > ); @@ -70,103 +70,103 @@ export function TutorialsIcon() { cx="8.157" cy="8.35866" r="6.17928" - stroke="var(--icon-default-color)" + stroke="var(--text-color)" strokeWidth="0.562865" /> @@ -184,12 +184,12 @@ export function DocumentationIcon() { > @@ -208,7 +208,7 @@ export function HelpIcon() { @@ -236,17 +236,17 @@ export function LogoutIcon() { > diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx index c78261e..9a9d96c 100644 --- a/app/src/components/icons/ExportCommonIcons.tsx +++ b/app/src/components/icons/ExportCommonIcons.tsx @@ -24,7 +24,7 @@ export function ArrowIcon() { fill="none" xmlns="http://www.w3.org/2000/svg" > - + ); } @@ -40,14 +40,14 @@ export function FocusIcon() { > @@ -65,7 +65,7 @@ export function LockIcon({ isLocked }: { isLocked: boolean }) { > @@ -80,7 +80,7 @@ export function LockIcon({ isLocked }: { isLocked: boolean }) { > @@ -100,7 +100,7 @@ export function EyeIcon({ isClosed }: { isClosed: boolean }) { @@ -119,13 +119,13 @@ export function EyeIcon({ isClosed }: { isClosed: boolean }) { > @@ -142,9 +142,9 @@ export function KebebIcon() { fill="none" xmlns="http://www.w3.org/2000/svg" > - - - + + + ); } @@ -160,7 +160,7 @@ export function AddIcon() { > @@ -179,12 +179,12 @@ export function CloseIcon() { > @@ -203,11 +203,11 @@ export function SettingsIcon() { @@ -255,7 +255,7 @@ export function TrashIcon() { @@ -280,32 +280,32 @@ export function FilterIcon() { > @@ -324,7 +324,7 @@ export function EyeDroperIcon({ isActive }: { isActive: boolean }) { @@ -442,7 +442,7 @@ export function RemoveIcon() { fill="none" xmlns="http://www.w3.org/2000/svg" > - + ); } @@ -462,7 +462,7 @@ export function InfoIcon() { /> { cy="1.35112" rx="1.4993" ry="1.27477" - fill="var(--icon-default-color)" + fill="var(--text-color)" /> ); @@ -562,31 +562,31 @@ export const DeleteIcon = () => { > @@ -784,21 +784,4 @@ export const SpeedIcon = () => { ); }; -// export const DublicateIcon = () => { -// return ( -// -// -// -// ); -// }; + diff --git a/app/src/components/icons/ExportModuleIcons.tsx b/app/src/components/icons/ExportModuleIcons.tsx index 1dda323..c1a8432 100644 --- a/app/src/components/icons/ExportModuleIcons.tsx +++ b/app/src/components/icons/ExportModuleIcons.tsx @@ -10,7 +10,7 @@ export function BuilderIcon({ isActive }: { isActive: boolean }) { > @@ -29,41 +29,41 @@ export function SimulationIcon({ isActive }: { isActive: boolean }) { > @@ -81,19 +81,19 @@ export function VisualizationIcon({ isActive }: { isActive: boolean }) { > @@ -112,20 +112,20 @@ export function CartIcon({ isActive }: { isActive: boolean }) { > diff --git a/app/src/components/icons/HeaderIcons.tsx b/app/src/components/icons/HeaderIcons.tsx index ef02f02..c2a0f62 100644 --- a/app/src/components/icons/HeaderIcons.tsx +++ b/app/src/components/icons/HeaderIcons.tsx @@ -9,7 +9,7 @@ export function ProjectIcon() { > @@ -31,26 +31,26 @@ export function ToggleSidebarIcon() { width="17" height="13.7273" rx="3.59091" - stroke="var(--accent-color)" + stroke="var(--text-color)" /> ); diff --git a/app/src/components/icons/RealTimeVisulationIcons.tsx b/app/src/components/icons/RealTimeVisulationIcons.tsx index d418247..84d8cca 100644 --- a/app/src/components/icons/RealTimeVisulationIcons.tsx +++ b/app/src/components/icons/RealTimeVisulationIcons.tsx @@ -10,43 +10,43 @@ export function CleanPannel() { diff --git a/app/src/components/icons/marketPlaceIcons.tsx b/app/src/components/icons/marketPlaceIcons.tsx index 6952ae1..5a9f293 100644 --- a/app/src/components/icons/marketPlaceIcons.tsx +++ b/app/src/components/icons/marketPlaceIcons.tsx @@ -52,13 +52,13 @@ export function EyeIconBig() { > @@ -80,7 +80,7 @@ export function CommentsIcon() { fillRule="evenodd" clipRule="evenodd" d="M8 13C7.416 13 6.852 12.932 6.31 12.8165L3.956 14.2315L3.9875 11.912C2.183 10.827 1 9.033 1 7C1 3.6865 4.134 1 8 1C11.866 1 15 3.6865 15 7C15 10.314 11.866 13 8 13ZM8 0C3.582 0 0 3.1345 0 7C0 9.2095 1.1725 11.177 3 12.4595V16L6.5045 13.8735C6.9895 13.9535 7.4885 14 8 14C12.418 14 16 10.866 16 7C16 3.1345 12.418 0 8 0ZM11.5 5.5H4.5C4.224 5.5 4 5.724 4 6C4 6.2765 4.224 6.5 4.5 6.5H11.5C11.776 6.5 12 6.2765 12 6C12 5.724 11.776 5.5 11.5 5.5ZM10.5 8.5H5.5C5.224 8.5 5 8.7235 5 9C5 9.2765 5.224 9.5 5.5 9.5H10.5C10.776 9.5 11 9.2765 11 9C11 8.7235 10.776 8.5 10.5 8.5Z" - fill="var(--icon-default-color)" + fill="var(--text-color)" /> @@ -131,7 +131,7 @@ export function StarsIconSmall() { ); } -export function FiileedStarsIconSmall() { +export function FilledStarsIconSmall() { return ( { } }; return ( -
+
- {searchValue ? ( -
-
-
-

Results for {searchValue}

+
+
+ {searchValue ? ( +
+
+
+

Results for {searchValue}

+
+
+ {categoryAssets && + categoryAssets?.map((asset: any, index: number) => ( +
+ {asset.filename} + +
+ {asset.filename + .split("_") + .map( + (word: any) => + word.charAt(0).toUpperCase() + word.slice(1) + ) + .join(" ")} +
+
+ ))} +
+
-
-
- {categoryAssets && - categoryAssets?.map((asset: any, index: number) => ( + ) : selectedCategory ? ( +
+

+ {selectedCategory}{" "}
{ + setSelectedCategory(null); + setCategoryAssets([]); + }} > - {asset.filename} + ← Back +
+

+
+ {categoryAssets && + categoryAssets?.map((asset: any, index: number) => ( +
+ {asset.filename} { + setSelectedItem({ + name: asset.filename, + id: asset.AssetID, + type: + asset.type === "undefined" + ? undefined + : asset.type, + }); + }} + /> -
- {asset.filename - .split("_") - .map( - (word: any) => - word.charAt(0).toUpperCase() + word.slice(1) - ) - .join(" ")} -
-
- ))} -
-
- ) : selectedCategory ? ( -
-
{ - setSelectedCategory(null); - setCategoryAssets([]); - }} - > - ← Back -
-

{selectedCategory}

-
- {categoryAssets && - categoryAssets?.map((asset: any, index: number) => ( -
- {asset.filename} { - setSelectedItem({ - name: asset.filename, - id: asset.AssetID, - type: - asset.type === "undefined" ? undefined : asset.type, - }); - }} - /> - -
- {asset.filename - .split("_") - .map( - (word: any) => - word.charAt(0).toUpperCase() + word.slice(1) - ) - .join(" ")} -
-
- ))} -
-
- ) : ( -
-

Categories

-
- {Array.from( - new Set(categoryList.map((asset) => asset.category)) - ).map((category, index) => { - const categoryInfo = categoryList.find( - (asset) => asset.category === category - ); - return ( -
fetchCategoryAssets(category)} - > - {category} -
{category}
-
- ); - })} -
-
- )} +
+ {asset.filename + .split("_") + .map( + (word: any) => + word.charAt(0).toUpperCase() + word.slice(1) + ) + .join(" ")} +
+
+ ))} +
+
+ ) : ( +
+

Categories

+
+ {Array.from( + new Set(categoryList.map((asset) => asset.category)) + ).map((category, index) => { + const categoryInfo = categoryList.find( + (asset) => asset.category === category + ); + return ( +
fetchCategoryAssets(category)} + > + {category} +
{category}
+
+ ); + })} +
+
+ )} + +
); }; diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx index 3b2549a..1434446 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx @@ -91,44 +91,42 @@ const Trigger: React.FC = () => {
{selectedTrigger}
setActiveOption(option)} />
-
- { - const newModel = [...triggeredModel]; - newModel[0] = option; - setTriggeredModel(newModel); - }} - /> -
-
- { - const newPoint = [...triggeredPoint]; - newPoint[0] = option; - setTriggeredPoint(newPoint); - }} - /> -
-
- { - const newAction = [...triggeredAction]; - newAction[0] = option; - setTriggeredAction(newAction); - }} - /> -
+ { + const newModel = [...triggeredModel]; + newModel[0] = option; + setTriggeredModel(newModel); + }} + /> + { + const newPoint = [...triggeredPoint]; + newPoint[0] = option; + setTriggeredPoint(newPoint); + }} + /> + { + const newAction = [...triggeredAction]; + newAction[0] = option; + setTriggeredAction(newAction); + }} + />
diff --git a/app/src/components/ui/menu/menu.tsx b/app/src/components/ui/menu/menu.tsx index a416c2c..39508b6 100644 --- a/app/src/components/ui/menu/menu.tsx +++ b/app/src/components/ui/menu/menu.tsx @@ -28,7 +28,7 @@ const MenuBar: React.FC = ({ setOpenMenu }) => { window.location.reload(); } - const savedTheme: string | null = localStorage.getItem("theme") || "light"; + const savedTheme: string | null = localStorage.getItem("theme") ?? "light"; return (
= ({
- + {selectedCard.rating}
{selectedCard.views} views
diff --git a/app/src/modules/market/Card.tsx b/app/src/modules/market/Card.tsx index ec9db06..a7010cc 100644 --- a/app/src/modules/market/Card.tsx +++ b/app/src/modules/market/Card.tsx @@ -3,6 +3,7 @@ import { CommentsIcon, DownloadIcon, EyeIconBig, + FilledStarsIconSmall, StarsIconSmall, VerifiedIcon, } from "../../components/icons/marketPlaceIcons"; @@ -80,7 +81,13 @@ const Card: React.FC = ({
{[...Array(5)].map((_, index) => ( - + <> + {index < 3 ? ( + + ) : ( + + )} + ))}
diff --git a/app/src/modules/visualization/widgets/panel/AddButtons.tsx b/app/src/modules/visualization/widgets/panel/AddButtons.tsx index 4877824..963f44d 100644 --- a/app/src/modules/visualization/widgets/panel/AddButtons.tsx +++ b/app/src/modules/visualization/widgets/panel/AddButtons.tsx @@ -6,8 +6,6 @@ import { } from "../../../../components/icons/RealTimeVisulationIcons"; import { AddIcon } from "../../../../components/icons/ExportCommonIcons"; import { useSocketStore } from "../../../../store/store"; -import { clearPanel } from "../../../../services/visulization/zone/clearPanel"; -import { lockPanel } from "../../../../services/visulization/zone/lockPanel"; // Define the type for `Side` type Side = "top" | "bottom" | "left" | "right"; @@ -305,7 +303,7 @@ const AddButtons: React.FC = ({ fill={ hiddenPanels[selectedZone.zoneId]?.includes(side) ? "var(--icon-default-color-active)" - : "var(--icon-default-color)" + : "var(--text-color)" } />
@@ -342,7 +340,7 @@ const AddButtons: React.FC = ({ fill={ selectedZone.lockedPanels.includes(side) ? "var(--icon-default-color-active)" - : "var(--icon-default-color)" + : "var(--text-color)" } />
diff --git a/app/src/styles/abstracts/variables.scss b/app/src/styles/abstracts/variables.scss index 37d9971..f4a6495 100644 --- a/app/src/styles/abstracts/variables.scss +++ b/app/src/styles/abstracts/variables.scss @@ -21,7 +21,8 @@ $text-button-color-dark: #f3f3fd; // background colors // ---------- light mode ---------- -$background-color: linear-gradient(-45deg, #fcfdfdcc 0%, #fcfdfd99 100%); +$background-color: linear-gradient(-45deg, #fcfdfd71 0%, #fcfdfd79 100%); +$background-color-solid-gradient: linear-gradient(-45deg, #fcfdfd 0%, #fcfdfd 100%); $background-color-solid: #fcfdfd; $background-color-secondary: #fcfdfd4d; $background-color-accent: #6f42c1; @@ -44,6 +45,7 @@ $background-radial-gray-gradient: radial-gradient( // ---------- dark mode ---------- $background-color-dark: linear-gradient(-45deg, #333333b3 0%, #2d2437b3 100%); +$background-color-solid-gradient-dark: linear-gradient(-45deg, #333333 0%, #2d2437 100%); $background-color-solid-dark: #19191d; $background-color-secondary-dark: #19191d99; $background-color-accent-dark: #6f42c1; @@ -105,19 +107,10 @@ $color5: #c7a8ff; // old variables $accent-color: #6f42c1; $accent-color-dark: #c4abf1; -// $highlight-accent-color: #e0dfff; -// $highlight-accent-color-dark: #403e6a; -// $background-color: #fcfdfd; -// $background-color-dark: #19191d; -// $background-color-secondary: #e1e0ff80; -// $background-color-secondary-dark: #39394f99; $background-color-gray: #f3f3f3; $background-color-gray-dark: #232323; -// $border-color: #e0dfff; -// $border-color-dark: #403e6a; - $shadow-color: #3c3c431a; $shadow-color-dark: #8f8f8f1a; diff --git a/app/src/styles/base/base.scss b/app/src/styles/base/base.scss index 10fb87c..bf53164 100644 --- a/app/src/styles/base/base.scss +++ b/app/src/styles/base/base.scss @@ -11,6 +11,7 @@ // background colors --background-color: #{$background-color}; --background-color-solid: #{$background-color-solid}; + --background-color-solid-gradient: #{$background-color-solid-gradient}; --background-color-secondary: #{$background-color-secondary}; --background-color-accent: #{$background-color-accent}; --background-color-button: #{$background-color-button}; @@ -61,6 +62,7 @@ // background colors --background-color: #{$background-color-dark}; + --background-color-solid-gradient: #{$background-color-solid-gradient-dark}; --background-color-solid: #{$background-color-solid-dark}; --background-color-secondary: #{$background-color-secondary-dark}; --background-color-accent: #{$background-color-accent-dark}; diff --git a/app/src/styles/components/input.scss b/app/src/styles/components/input.scss index b4e7651..e3b9585 100644 --- a/app/src/styles/components/input.scss +++ b/app/src/styles/components/input.scss @@ -51,9 +51,6 @@ input[type="number"] { -webkit-appearance: none; margin: 0; } - - // Firefox - -moz-appearance: textfield; } .input-value { @@ -105,7 +102,7 @@ input[type="number"] { .search-wrapper { position: sticky; top: 0; - padding: 8px 10px; + padding: 0px 10px; width: 100%; z-index: 1; @@ -140,15 +137,16 @@ input[type="number"] { .clear-button { @include flex-center; position: absolute; + top: 4px; right: 4px; - width: 24px; - height: 24px; + width: 21px; + height: 21px; border: none; + border-radius: #{$border-radius-large}; cursor: pointer; background: transparent; - &:hover { - background: var(--highlight-accent-color); + background: var(--background-color-secondary); } } } @@ -219,9 +217,9 @@ input[type="number"] { .regularDropdown-container { width: 100%; min-width: 80px; - padding: 2px 4px; + padding: 4px 8px; border: 1px solid var(--border-color); - border-radius: 6px; + border-radius: #{$border-radius-large}; position: relative; cursor: pointer; @@ -230,7 +228,7 @@ input[type="number"] { display: flex; justify-content: space-between; cursor: pointer; - border-radius: 6px; + border-radius: #{$border-radius-large}; } .dropdown-options { @@ -238,7 +236,7 @@ input[type="number"] { width: 100%; background: var(--background-color); border: 1px solid var(--border-color); - border-radius: #{$border-radius-small}; + border-radius: #{$border-radius-large}; z-index: 10; max-height: 200px; overflow-y: auto; @@ -255,7 +253,7 @@ input[type="number"] { padding: 2px 4px; cursor: pointer; flex-direction: row !important; - border-radius: #{$border-radius-small}; + border-radius: #{$border-radius-medium}; &:hover { color: var(--highlight-text-color); @@ -272,17 +270,19 @@ input[type="number"] { .input.default { width: 100%; position: relative; + @include flex-center; + gap: 6px; .dropdown { - top: 2px; - right: 2px; - position: absolute; - background: var(--highlight-accent-color); - border-radius: #{$border-radius-small}; - padding: 1px 4px; + height: 100%; + background: var(--background-color-drop-down-gradient); + border-radius: #{$border-radius-extra-large}; + padding: 1px 8px; + outline: 1px solid var(--border-color); .active-option { - color: var(--accent-color); + line-height: 22px; + color: var(--text-color); font-size: var(--font-size-small); } } @@ -304,10 +304,10 @@ input[type="number"] { .eye-picker-button { height: 24px; - min-width: 24px; + min-width: 36px; @include flex-center; - border-radius: #{$border-radius-small}; - background: var(--background-color-secondary); + border-radius: #{$border-radius-large}; + background: var(--background-color-drop-down-gradient); cursor: pointer; } @@ -326,6 +326,9 @@ input[type="number"] { background: var(--background-color) !important; border: 1px solid var(--border-color) !important; padding: 5px 10px; + cursor: pointer; + border-radius: #{$border-radius-extra-large}; + transition: background-color 0.3s ease; .label { white-space: nowrap; @@ -333,12 +336,6 @@ input[type="number"] { max-width: 80%; text-overflow: ellipsis; } - - // font-size: 12px; - cursor: pointer; - border-radius: 5px; - transition: background-color 0.3s ease; - &:hover { background: #333333; } @@ -354,7 +351,8 @@ input[type="number"] { right: -16px; background: var(--background-color); border: 1px solid var(--border-color); - border-radius: 5px; + border-radius: #{$border-radius-large}; + backdrop-filter: blur(18px); box-shadow: #{$box-shadow-medium}; z-index: 1000; min-width: 200px; @@ -364,13 +362,11 @@ input[type="number"] { .dropdown-content { display: flex; flex-direction: column; - gap: 6px; + padding: 2px; .nested-dropdown { margin-left: 0; } - - padding: 10px; } .loading { @@ -409,15 +405,16 @@ input[type="number"] { .dropdown-item { display: block; - padding: 5px 10px; + padding: 4px 10px; text-decoration: none; color: var(--text-color); font-size: var(--font-size-regular); cursor: pointer; transition: background-color 0.3s ease; - + border-radius: #{$border-radius-large}; &:hover { - background: var(--background-color); + color: var(--accent-color); + background: var(--highlight-accent-color); } } @@ -428,24 +425,25 @@ input[type="number"] { display: flex; align-items: center; justify-content: space-between; - padding: 5px 10px; + padding: 4px 10px; cursor: pointer; font-size: var(--font-size-regular); color: var(--text-color); transition: background-color 0.3s ease; - border-radius: #{$border-radius-small}; + border-radius: #{$border-radius-large}; .arrow-container { @include flex-center; } &:hover { - background: var(--background-color); + color: var(--accent-color); + background: var(--highlight-accent-color); } &.open { - color: var(--accent-color); - background: var(--highlight-accent-color); + color: var(--text-button-color); + background: var(--background-color-accent); } .icon { @@ -649,7 +647,7 @@ input[type="number"] { padding: 2px 32px; border: none; border-radius: #{$border-radius-large}; - color: var(--text-color); + color: var(--text-button-color); background: var(--background-color-button); transition: all 0.2s; cursor: pointer; diff --git a/app/src/styles/components/marketPlace/marketPlace.scss b/app/src/styles/components/marketPlace/marketPlace.scss index b84a252..23b14b7 100644 --- a/app/src/styles/components/marketPlace/marketPlace.scss +++ b/app/src/styles/components/marketPlace/marketPlace.scss @@ -9,8 +9,8 @@ position: absolute; left: 0; top: 0; - padding: 100px 50px; - padding-bottom: 32px; + padding: 10px; + padding-top: 100px; .marketplace-container { position: relative; @@ -59,8 +59,9 @@ .regularDropdown-container { max-width: 159px; height: 100%; - border-radius: #{$border-radius-large}; + border-radius: #{$border-radius-extra-large}; border: 1px solid var(--border-color); + padding: 0 10px; .dropdown-header { align-items: center; } @@ -68,8 +69,9 @@ .button { padding: 5px 20px; - border: 1px solid var(--accent-color); border-radius: 14px; + background: var(--background-color-button); + color: var(--text-button-color); } .rating-container { @@ -106,14 +108,14 @@ .cards-wrapper-container { display: flex; flex-wrap: wrap; - gap: 28px; + gap: 18px; .card-container { - width: calc(25% - 23px); + width: calc(25% - 14px); border-radius: 18px; padding: 12px; box-shadow: 0px 2px 10.5px 0px #0000000d; - background: var(--background-color); + background: var(--background-color-solid-gradient); border: 1px solid var(--border-color); position: relative; display: flex; diff --git a/app/src/styles/components/menu/menu.scss b/app/src/styles/components/menu/menu.scss index be9e17f..dffc6a4 100644 --- a/app/src/styles/components/menu/menu.scss +++ b/app/src/styles/components/menu/menu.scss @@ -7,7 +7,7 @@ gap: 2px; position: relative; border-radius: #{$border-radius-extra-large}; - background: var(--background-color-drop-down); + background: var(--background-color-drop-down-gradient); padding: 3px 8px; width: fit-content; max-width: 100%; @@ -25,11 +25,12 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + color: var(--text-color); } } .more-options-button { @include flex-center; - border-radius: #{$border-radius-small}; + border-radius: #{$border-radius-medium}; height: 22px; position: relative; &:hover { @@ -52,7 +53,7 @@ top: 32px; left: 0; z-index: 5; - background: var(--background-color); + background: var(--background-color-solid); color: var(--text-color); box-shadow: var(--box-shadow-light); border-radius: 8px; @@ -69,7 +70,7 @@ position: relative; height: 100%; padding: 4px 8px 4px 12px; - border-radius: #{$border-radius-small}; + border-radius: #{$border-radius-medium}; .menu-button { width: 100%; cursor: pointer; @@ -89,19 +90,21 @@ .dropdown-menu { position: absolute; top: 0; - left: 100%; - background: var(--background-color); + left: 103%; + background: var(--background-color-solid); min-width: 220px; - border-radius: 4px; + border-radius: #{$border-radius-medium}; box-shadow: var(--box-shadow-light); - border: 1px solid var(--background-color); + outline: 1px solid var(--border-color); + backdrop-filter: blur(20px); + outline-offset: -1px; z-index: 100; padding: 4px; .menu-item-container { position: relative; .menu-item { padding: 4px 8px 4px 12px; - border-radius: #{$border-radius-small}; + border-radius: #{$border-radius-medium}; display: flex; justify-content: space-between; align-items: center; @@ -138,18 +141,19 @@ .submenu { position: absolute; - left: 100%; + left: 102%; top: 0; - background: var(--background-color); + background: var(--background-color-solid); min-width: 200px; - border-radius: 0 4px 4px 4px; + border-radius: #{$border-radius-medium}; box-shadow: var(--box-shadow-light); - border: 1px solid var(--background-color); + outline: 1px solid var(--border-color); + outline-offset: -1px; z-index: 101; padding: 4px; .submenu-item { padding: 4px 8px 4px 12px; - border-radius: #{$border-radius-small}; + border-radius: #{$border-radius-medium}; display: flex; justify-content: space-between; align-items: center; diff --git a/app/src/styles/components/moduleToggle.scss b/app/src/styles/components/moduleToggle.scss index c864cbf..7e5b727 100644 --- a/app/src/styles/components/moduleToggle.scss +++ b/app/src/styles/components/moduleToggle.scss @@ -38,7 +38,7 @@ left: 0; width: 0%; height: 100%; - background: var(--highlight-accent-color); + background: var(--background-color-solid-gradient); transition: width 0.2s; border-radius: #{$border-radius-extra-large}; } diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss index abea736..54c21e7 100644 --- a/app/src/styles/components/tools.scss +++ b/app/src/styles/components/tools.scss @@ -16,6 +16,8 @@ background: var(--background-color); backdrop-filter: blur(8px); z-index: #{$z-index-default}; + outline: 1px solid var(--border-color); + outline-offset: -1px; .split { height: 20px; @@ -39,7 +41,7 @@ height: 28px; width: 28px; cursor: pointer; - border-radius: #{$border-radius-small}; + border-radius: #{$border-radius-medium}; &:hover { background: color-mix(in srgb, @@ -116,10 +118,10 @@ .toggle-threed-button { @include flex-center; - padding: 3px; - border-radius: #{$border-radius-small}; - background: var(--highlight-accent-color); - gap: 2px; + padding: 4px; + border-radius: #{$border-radius-medium}; + background: var(--background-color); + gap: 5px; position: relative; .toggle-option { @@ -132,30 +134,25 @@ &::after { content: ""; position: absolute; - background: var(--accent-color); - left: 3px; - top: 3px; - height: 18px; - width: 18px; - border-radius: #{$border-radius-small}; + background: var(--background-color-accent); + left: 2px; + top: 2px; + height: 23px; + width: 23px; + border-radius: #{$border-radius-medium}; transition: all 0.2s; } .active { - color: var(--highlight-accent-color); + color: var(--text-button-color); } } .toggled { &::after { - left: 24px; + left: 25px; } } - - - - - } .exitPlay { diff --git a/app/src/styles/components/visualization/floating/common.scss b/app/src/styles/components/visualization/floating/common.scss index 0084e7a..0bbbdc9 100644 --- a/app/src/styles/components/visualization/floating/common.scss +++ b/app/src/styles/components/visualization/floating/common.scss @@ -182,7 +182,6 @@ background: var(--background-color-secondary); border-radius: 20px; color: var(--text-color); - background: #252525cc; .header-wrapper { width: 100%; @@ -276,7 +275,7 @@ .icon { width: 45px; height: 45px; - background: var(--accent-color); + background: var(--background-color-accent); display: flex; justify-content: center; align-items: center; diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index 583dc0a..70d3a5d 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -7,7 +7,7 @@ top: 32px; left: 8px; background: var(--background-color); - backdrop-filter: blur(150px); + backdrop-filter: blur(15px); border-radius: #{$border-radius-extra-large}; outline: 1px solid var(--border-color); box-shadow: #{$box-shadow-medium}; @@ -30,10 +30,6 @@ padding: 0 8px; width: 100%; max-width: calc(100% - 32px); - - .input-value { - color: var(--accent-color); - } } } @@ -235,7 +231,6 @@ .outline-container { height: 100%; - .outline-content-container { position: relative; height: 100%; @@ -256,7 +251,7 @@ top: 32px; right: 8px; background: var(--background-color); - backdrop-filter: blur(150px); + backdrop-filter: blur(15px); border-radius: #{$border-radius-extra-large}; outline: 1px solid var(--border-color); box-shadow: #{$box-shadow-medium}; @@ -276,7 +271,7 @@ .share-button { padding: 4px 12px; - color: var(--text-color); + color: var(--text-button-color); background: var(--background-color-button); font-weight: var(--font-weight-regular); border-radius: #{$border-radius-large}; @@ -750,7 +745,7 @@ .value-field-container { margin: 0; input { - padding: 5px 4px; + padding: 5px 10px; } .dropdown { top: 4px; @@ -772,8 +767,8 @@ padding: 6px 12px; .regularDropdown-container { padding: 5px 8px; - outline: 2px solid var(--border-color); - outline-offset: -2px; + outline: 1px solid var(--border-color); + outline-offset: -1px; border: none; } } @@ -806,7 +801,6 @@ @include flex-space-between; padding: 4px 12px; width: 100%; - margin: 2px 0; border-radius: #{$border-radius-medium}; .value { display: flex; @@ -939,6 +933,18 @@ } } + .trigger-wrapper { + .trigger-item { + .trigger-name { + padding: 8px; + margin-top: 4px; + } + .value-field-container { + margin: 0; + } + } + } + .footer { @include flex-center; justify-content: flex-start; @@ -948,10 +954,9 @@ } .compare-simulations-container { - margin: 6px; background: var(--background-color-gray); padding: 12px; - border-radius: #{$border-radius-medium}; + border-radius: #{$border-radius-large}; .compare-simulations-header { font-weight: var(--font-weight-medium); @@ -973,10 +978,12 @@ input { width: fit-content; - background: var(--accent-color); - color: var(--highlight-accent-color); - padding: 2px 8px; + background: var(--background-color-button); + color: var(--text-button-color); + padding: 3px 10px; cursor: pointer; + border: none; + outline: none; } } } @@ -1084,24 +1091,24 @@ input { border: none; + outline: none; cursor: pointer; - transition: all 0.2s; &:hover { - transform: translateY(-2px); box-shadow: #{$box-shadow-medium}; - outline: 1px solid var(--accent-color); + outline: 1px solid var(--input-border-color); } } .cancel { background: transparent; - color: var(--accent-color); + background: var(--background-color-secondary); + color: var(--text-color); } .submit { - background: var(--accent-color); - color: var(--highlight-accent-color); + background: var(--background-color-button); + color: var(--text-button-color); } } @@ -1109,7 +1116,7 @@ margin: 6px; background: var(--background-color-gray); padding: 12px; - border-radius: #{$border-radius-medium}; + border-radius: #{$border-radius-large}; .custom-analysis-header { font-weight: var(--font-weight-medium); @@ -1131,34 +1138,53 @@ input { width: fit-content; - background: var(--accent-color); - color: var(--highlight-accent-color); - padding: 2px 8px; + background: var(--background-color-button); + color: var(--text-button-color); + padding: 3px 10px; cursor: pointer; + border: none; + outline: none; } } } } } -.assets-container { +.assets-container-main { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; height: 100%; + max-height: 50vh; gap: 3px; - padding: 10px 0; + overflow: auto; + + .assets-result { + width: 100%; + .assets-wrapper { + margin: 0; + } + } + .assets-list-section { + width: 100%; + padding: 4px; + } .assets-wrapper { width: 100%; position: relative; - margin: 8px 10px; - h2 { + h2, + .searched-content { color: var(--text-color); font-family: $large; font-weight: $bold-weight; + padding: 8px; + @include flex-space-between; + .back-button { + cursor: pointer; + } } .categories-container { @@ -1167,8 +1193,8 @@ flex-direction: row; flex-wrap: wrap; height: 100%; - gap: 0px 4px; - padding: 10px 0; + gap: 4px; + padding: 2px; .category { width: 123px; @@ -1267,11 +1293,11 @@ flex-direction: row; flex-wrap: wrap; height: 100%; - gap: 0px 4px; - padding: 10px 0; + gap: 6px; + padding: 2px; .assets { - width: 123px; + width: 122px; height: 95px; border-radius: #{$border-radius-large}; background: var(--background-color); @@ -1295,7 +1321,11 @@ width: 100%; height: 100%; font-size: var(--font-size-regular); - background: linear-gradient(0deg,rgba(37, 24, 51, 0) 0%, rgba(78, 22, 128, 0.4) 100%); + background: linear-gradient( + 0deg, + rgba(37, 24, 51, 0) 0%, + rgba(78, 22, 128, 0.4) 100% + ); pointer-events: none; backdrop-filter: blur(8px); opacity: 0; @@ -1316,23 +1346,5 @@ } } } - - .back-button { - position: absolute; - top: 0; - right: 0; - @include flex-center; - cursor: pointer; - } - } -} - -.assets-result { - width: 100%; - height: 100%; - margin: 8px 10px; - - .assets-wrapper { - margin: 0; } } diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index 3aa1bd5..a9dba89 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -4,7 +4,6 @@ // Main Container .realTime-viz { background: #131313; - border-radius: 20px; box-shadow: $box-shadow-medium; width: calc(100% - (320px + 270px + 90px)); height: calc(100% - (250px)); @@ -24,19 +23,15 @@ } .floating { - - width: calc(var(--realTimeViz-container-width) * 0.2); height: calc(var(--realTimeViz-container-width) * 0.05); min-width: 250px; max-width: 300px; - // min-height: 83px !important; - // max-height: 100px !important; - background: var(--background-color); - border: 1.23px solid var(--border-color); + backdrop-filter: blur(10px); + border: 1px solid var(--border-color); box-shadow: 0px 4.91px 4.91px 0px #0000001c; border-radius: $border-radius-medium; padding: 18px; @@ -67,12 +62,12 @@ .zone-wrapper { display: flex; background: var(--background-color); + backdrop-filter: blur(10px); position: absolute; bottom: 0px; left: 50%; gap: 6px; border-radius: 8px; - max-width: 80%; overflow: auto; max-width: calc(100% - 500px); min-width: 150px; @@ -117,15 +112,13 @@ } .active { - background: var(--accent-color); + background: var(--background-color-accent); color: var(--background-color); - // color: #FCFDFD !important; } } .zone-wrapper.bottom { bottom: var(--bottomWidth); - // bottom: 200px; } .content-container { @@ -146,7 +139,6 @@ display: flex; background: rgba(224, 223, 255, 0.5); position: absolute; - // bottom: 10px; left: 50%; transform: translate(-50%, 0); gap: 6px; @@ -189,7 +181,6 @@ border-radius: 6px; overflow: auto; z-index: $z-index-tools; - overflow: auto; &::-webkit-scrollbar { display: none; @@ -204,6 +195,7 @@ flex-direction: column; gap: 6px; background: var(--background-color); + backdrop-filter: blur(10px); &::-webkit-scrollbar { display: none; @@ -211,12 +203,10 @@ .chart-container { width: 100%; - max-height: 100%; border: 1px dashed var(--background-color-gray); border-radius: 8px; box-shadow: var(--box-shadow-medium); - padding: 6px 0; background: var(--background-color); position: relative; padding: 0 10px; @@ -255,14 +245,11 @@ color: var(--text-color); &:hover { + background: var(--highlight-accent-color); + width: 100%; .label { color: var(--accent-color); } - } - - &:hover { - background: var(--highlight-accent-color); - width: 100%; svg { &:first-child { @@ -285,7 +272,6 @@ } } - .close-btn { position: absolute; top: 5px; @@ -369,7 +355,6 @@ .playingFlase { .zone-wrapper.bottom { bottom: var(--bottomWidth); - // bottom: 210px; } } @@ -398,7 +383,7 @@ } .active { - background: var(--accent-color); + background: var(--background-color-accent); } &:hover { @@ -413,8 +398,7 @@ height: 18px; display: flex; justify-content: center; - // align-items: center; - background: var(--accent-color); + background: var(--background-color-accent); border: none; color: var(--background-color); border-radius: 4px; @@ -425,20 +409,20 @@ } path { - stroke: var(--primary-color); + stroke: var(--text-color); stroke-width: 2; } } .active { - background: #ffe3e0; + background: #f657482f; .add-icon { rotate: 45deg; path { stroke: #f65648; - stroke-width: 2; + stroke-width: 1.3; } } } @@ -589,12 +573,6 @@ } .floating-wrapper { - .icon { - // width: 25px !important; - // height: 25px !important; - // background: transparent; - } - .kebab { width: 25px; height: 25px; @@ -640,9 +618,6 @@ .label { color: var(--accent-color); } - } - - &:hover { background: var(--highlight-accent-color); width: 100%; @@ -662,22 +637,19 @@ } .distance-line { - position: absolute; border-style: dashed; - border-color: var(--accent-color); - /* Green color for visibility */ + border-color: var(--background-color-accent); border-width: 1px; pointer-events: none; - /* Ensure lins don't interfere with dragging */ z-index: 10000; } /* Label styles for displaying distance values */ .distance-label { position: absolute; - background: var(--accent-color); - color: white; + background: var(--background-color-accent); + color: var(--text-button-color); font-size: 12px; padding: 2px 6px; border-radius: 3px; @@ -749,15 +721,12 @@ } .activeChart { - outline: 2px solid var(--accent-color); + outline: 1px solid var(--highlight-secondary-color); z-index: 2 !important; } .chart-container.notLinked { - outline: 1px solid red; - - } .connectionSuccess { @@ -801,4 +770,4 @@ } } } -} \ No newline at end of file +}