diff --git a/app/src/components/footer/Footer.tsx b/app/src/components/footer/Footer.tsx index 697c182..39b1df0 100644 --- a/app/src/components/footer/Footer.tsx +++ b/app/src/components/footer/Footer.tsx @@ -2,6 +2,11 @@ import React from "react"; import { HelpIcon } from "../icons/DashboardIcon"; import { useLogger } from "../ui/log/LoggerContext"; import { GetLogIcon } from "./getLogIcons"; +import { + CurserLeftIcon, + CurserMiddleIcon, + CurserRightIcon, +} from "../icons/LogIcons"; const Footer: React.FC = () => { const { logs, setIsLogListVisible } = useLogger(); @@ -11,15 +16,21 @@ const Footer: React.FC = () => {
-
+
+ +
Selection
-
+
+ +
Rotate/Zoom
-
+
+ +
Pan/Context Menu
diff --git a/app/src/components/icons/LogIcons.tsx b/app/src/components/icons/LogIcons.tsx index abee971..c66f9b8 100644 --- a/app/src/components/icons/LogIcons.tsx +++ b/app/src/components/icons/LogIcons.tsx @@ -96,3 +96,54 @@ export const LogIcon = () => { ); }; + +export const CurserLeftIcon = () => { + return ( + + + + + ); +}; + +export const CurserMiddleIcon = () => { + return ( + + + + + ); +}; + +export const CurserRightIcon = () => { + return ( + + + + + ); +}; diff --git a/app/src/components/templates/SkeletonUI.tsx b/app/src/components/templates/SkeletonUI.tsx new file mode 100644 index 0000000..30716b4 --- /dev/null +++ b/app/src/components/templates/SkeletonUI.tsx @@ -0,0 +1,21 @@ +import React from "react"; + + +const SkeletonUI = () => { + return ( +
+
+
+
+
+ +
+
+
+
+ +
+ ); +}; + +export default SkeletonUI; \ No newline at end of file diff --git a/app/src/components/ui/analysis/ProductionCapacity.tsx b/app/src/components/ui/analysis/ProductionCapacity.tsx index 1cdf105..bf86603 100644 --- a/app/src/components/ui/analysis/ProductionCapacity.tsx +++ b/app/src/components/ui/analysis/ProductionCapacity.tsx @@ -8,6 +8,7 @@ import { PointElement, } from "chart.js"; import { PowerIcon, ProductionCapacityIcon } from "../../icons/analysis"; +import SkeletonUI from "../../templates/SkeletonUI"; ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement); @@ -71,7 +72,8 @@ const ThroughputSummary = () => { }, }, }; - + + const isLoading = true; return (
@@ -88,72 +90,78 @@ const ThroughputSummary = () => {
-
-
- {throughputData.totalThroughput}{" "} - Units/hour -
-
-
-
Asset usage
-
{throughputData.assetUsage}%
-
- -
-
- -
-
-
Energy Consumption
-
-
- + {isLoading ? ( + <> +
+
+ {throughputData.totalThroughput}{" "} + Units/hour
-
-
{energyConsumption.energyConsumed}
-
{energyConsumption.unit}
+
+
+
Asset usage
+
{throughputData.assetUsage}%
+
+
-
-
-
Shift Utilization
-
-
{throughputData.assetUsage}%
-
- {/* Dynamically create progress bars based on shiftUtilization array */} - {shiftUtilization.map((shift, index) => ( -
- ))} -
- -
- {/* Dynamically create shift indicators with random colors */} - {shiftUtilization.map((shift, index) => ( -
- - +
+
+
Energy Consumption
+
+
+
- ))} +
+
+ {energyConsumption.energyConsumed} +
+
{energyConsumption.unit}
+
+
+
+
+
Shift Utilization
+
+
{throughputData.assetUsage}%
+ +
+ {/* Dynamically create progress bars based on shiftUtilization array */} + {shiftUtilization.map((shift, index) => ( +
+ ))} +
+ +
+ {/* Dynamically create shift indicators with random colors */} + {shiftUtilization.map((shift, index) => ( +
+ + +
+ ))} +
+
-
-
+ + ) : ( + + )}
); }; export default ThroughputSummary; - -// Can we add dot pattern to background of lineChart and remove axis diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx index 2d9d4e3..3906c47 100644 --- a/app/src/components/ui/simulation/simulationPlayer.tsx +++ b/app/src/components/ui/simulation/simulationPlayer.tsx @@ -332,7 +332,7 @@ const SimulationPlayer: React.FC = () => { className="slider-input" />
-
4x
+
8x
diff --git a/app/src/modules/visualization/RealTimeVisulization.tsx b/app/src/modules/visualization/RealTimeVisulization.tsx index a8f44b4..ad70de2 100644 --- a/app/src/modules/visualization/RealTimeVisulization.tsx +++ b/app/src/modules/visualization/RealTimeVisulization.tsx @@ -4,17 +4,8 @@ import Panel from "./widgets/panel/Panel"; import AddButtons from "./widgets/panel/AddButtons"; import { useSelectedZoneStore } from "../../store/visualization/useZoneStore"; import DisplayZone from "./zone/DisplayZone"; -import Scene from "../scene/scene"; import useModuleStore from "../../store/useModuleStore"; - -import { - useDroppedObjectsStore, - useFloatingWidget, -} from "../../store/visualization/useDroppedObjectsStore"; -import { useSocketStore, useWidgetSubOption } from "../../store/store"; import { getZone2dData } from "../../services/visulization/zone/getZoneData"; -import { generateUniqueId } from "../../functions/generateUniqueId"; -import { determinePosition } from "./functions/determinePosition"; import SocketRealTimeViz from "./socket/realTimeVizSocket.dev"; import RenderOverlay from "../../components/templates/Overlay"; import ConfirmationPopup from "../../components/layout/confirmationPopup/ConfirmationPopup"; @@ -27,7 +18,6 @@ import { } from "../../store/visualization/useZone3DWidgetStore"; import OuterClick from "../../utils/outerClick"; import { useWidgetStore } from "../../store/useWidgetStore"; -import { getActiveProperties } from "./functions/getActiveProperties"; type Side = "top" | "bottom" | "left" | "right"; @@ -66,12 +56,10 @@ const RealTimeVisulization: React.FC = () => { const { selectedZone, setSelectedZone } = useSelectedZoneStore(); const { setRightSelect } = useRightSelected(); - const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore(); + const { editWidgetOptions, setEditWidgetOptions } = + useEditWidgetOptionsStore(); const { rightClickSelected, setRightClickSelected } = useRightClickSelected(); const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false); - const { setFloatingWidget } = useFloatingWidget(); - const { widgetSubOption } = useWidgetSubOption(); - const { visualizationSocket } = useSocketStore(); const { setSelectedChartId } = useWidgetStore(); const [waitingPanels, setWaitingPanels] = useState(null); @@ -142,109 +130,6 @@ const RealTimeVisulization: React.FC = () => { }); }, [selectedZone]); - // const handleDrop = async (event: React.DragEvent) => { - // event.preventDefault(); - // try { - // const email = localStorage.getItem("email") ?? ""; - // const organization = email?.split("@")[1]?.split(".")[0]; - - // const data = event.dataTransfer.getData("text/plain"); - // if (widgetSubOption === "3D") return; - // if (!data || selectedZone.zoneName === "") return; - - // const droppedData = JSON.parse(data); - // const canvasElement = document.getElementById("real-time-vis-canvas"); - // if (!canvasElement) throw new Error("Canvas element not found"); - - // const rect = canvasElement.getBoundingClientRect(); - // const relativeX = event.clientX - rect.left; - // const relativeY = event.clientY - rect.top; - - // // Widget dimensions - // const widgetWidth = droppedData.width ?? 125; - // const widgetHeight = droppedData.height ?? 100; - - // // Center the widget at cursor - // const centerOffsetX = widgetWidth / 2; - // const centerOffsetY = widgetHeight / 2; - - // const adjustedX = relativeX - centerOffsetX; - // const adjustedY = relativeY - centerOffsetY; - - // const finalPosition = determinePosition(rect, adjustedX, adjustedY); - // const [activeProp1, activeProp2] = getActiveProperties(finalPosition); - - // let finalY = 0; - // let finalX = 0; - - // if (activeProp1 === "top") { - // finalY = adjustedY; - // } else { - // finalY = rect.height - (adjustedY + widgetHeight); - // } - - // if (activeProp2 === "left") { - // finalX = adjustedX; - // } else { - // finalX = rect.width - (adjustedX + widgetWidth); - // } - - // // Clamp to boundaries - // finalX = Math.max(0, Math.min(rect.width - widgetWidth, finalX)); - // finalY = Math.max(0, Math.min(rect.height - widgetHeight, finalY)); - - // const boundedPosition = { - // ...finalPosition, - // [activeProp1]: finalY, - // [activeProp2]: finalX, - // [activeProp1 === "top" ? "bottom" : "top"]: "auto", - // [activeProp2 === "left" ? "right" : "left"]: "auto", - // }; - - // const newObject = { - // ...droppedData, - // id: generateUniqueId(), - // position: boundedPosition, - // }; - - // const existingZone = - // useDroppedObjectsStore.getState().zones[selectedZone.zoneName]; - // if (!existingZone) { - // useDroppedObjectsStore - // .getState() - // .setZone(selectedZone.zoneName, selectedZone.zoneId); - // } - - // const addFloatingWidget = { - // organization, - // widget: newObject, - // zoneId: selectedZone.zoneId, - // }; - - // if (visualizationSocket) { - // visualizationSocket.emit("v2:viz-float:add", addFloatingWidget); - // } - - // useDroppedObjectsStore - // .getState() - // .addObject(selectedZone.zoneName, newObject); - - // const droppedObjectsStore = useDroppedObjectsStore.getState(); - // const currentZone = droppedObjectsStore.zones[selectedZone.zoneName]; - - // if (currentZone && currentZone.zoneId === selectedZone.zoneId) { - // console.log( - // `Objects for Zone ${selectedZone.zoneId}:`, - // currentZone.objects - // ); - // setFloatingWidget(currentZone.objects); - // } else { - // console.warn("Zone not found or zoneId mismatch"); - // } - // } catch (error) { - // console.error("Error in handleDrop:", error); - // } - // }; useEffect(() => { const handleClickOutside = (event: MouseEvent) => { @@ -295,9 +180,7 @@ const RealTimeVisulization: React.FC = () => { {` :root { --realTimeViz-container-width: ${canvasDimensions.width}px; - --realTimeViz-container-height: ${canvasDimensions.height}px; - } `} diff --git a/app/src/modules/visualization/template/Templates.tsx b/app/src/modules/visualization/template/Templates.tsx index e0ece1c..21433aa 100644 --- a/app/src/modules/visualization/template/Templates.tsx +++ b/app/src/modules/visualization/template/Templates.tsx @@ -6,8 +6,6 @@ import { getTemplateData } from "../../../services/visulization/zone/getTemplate import { useDroppedObjectsStore } from "../../../store/visualization/useDroppedObjectsStore"; import RenameInput from "../../../components/ui/inputs/RenameInput"; - - const Templates = () => { const { templates, removeTemplate, setTemplates } = useTemplateStore(); const { setSelectedZone, selectedZone } = useSelectedZoneStore(); @@ -94,13 +92,12 @@ const Templates = () => { return (
{templates.map((template, index) => ( -
+
{template?.snapshot && ( -
handleLoadTemplate(template)}> +
handleLoadTemplate(template)} + > {`${template.name} { ))} {templates.length === 0 && (
- No saved templates yet. Create one in the visualization view! +

No saved templates yet.

+
Create one in the visualization view!
)}
diff --git a/app/src/styles/abstracts/variables.scss b/app/src/styles/abstracts/variables.scss index 3545151..0d50177 100644 --- a/app/src/styles/abstracts/variables.scss +++ b/app/src/styles/abstracts/variables.scss @@ -190,5 +190,6 @@ $border-radius-small: 4px; $border-radius-medium: 6px; $border-radius-large: 12px; $border-radius-circle: 50%; +$border-radius-xlarge: 16px; $border-radius-extra-large: 20px; $border-radius-xxx: 30px; diff --git a/app/src/styles/base/base.scss b/app/src/styles/base/base.scss index 8843bfe..594391e 100644 --- a/app/src/styles/base/base.scss +++ b/app/src/styles/base/base.scss @@ -165,12 +165,12 @@ body { ::-webkit-scrollbar-track { background: transparent; - border-radius: 4px; + border-radius: #{$border-radius-small}; } ::-webkit-scrollbar-thumb { background: var(--background-color-button); - border-radius: 4px; + border-radius: #{$border-radius-small}; } ::-webkit-scrollbar-thumb:hover { @@ -179,4 +179,4 @@ body { ::-webkit-scrollbar-corner { background: transparent; -} +} \ No newline at end of file diff --git a/app/src/styles/components/confirmationPopUp.scss b/app/src/styles/components/confirmationPopUp.scss index e955a79..6f775aa 100644 --- a/app/src/styles/components/confirmationPopUp.scss +++ b/app/src/styles/components/confirmationPopUp.scss @@ -1,3 +1,5 @@ +@use "../abstracts/variables.scss" as *; + .confirmation-overlay { width: 100vw; height: 100vh; @@ -13,7 +15,7 @@ z-index: 5; background: var(--background-color); padding: 14px 12px; - border-radius: 6px; + border-radius: #{$border-radius-medium}; .buttton-wrapper { padding-top: 12px; @@ -24,7 +26,7 @@ .confirmation-button { padding: 6px 10px; - border-radius: 6px; + border-radius: #{$border-radius-medium}; cursor: pointer; &:first-child { diff --git a/app/src/styles/components/footer/footer.scss b/app/src/styles/components/footer/footer.scss index a457557..c7f999b 100644 --- a/app/src/styles/components/footer/footer.scss +++ b/app/src/styles/components/footer/footer.scss @@ -21,12 +21,17 @@ align-items: center; background: var(--background-color); padding: 3px 6px; - border-radius: 12px; + border-radius: #{$border-radius-large}; color: var(--text-color); backdrop-filter: blur(14px); .selector { color: var(--text-color); + font-size: var(--font-size-small) + } + + .icon { + height: 17px; } } } @@ -37,37 +42,40 @@ position: relative; // dummy - .bg-dummy{ + .bg-dummy { background: var(--background-color-solid); position: absolute; z-index: -1; } - .bg-dummy.left-top{ + + .bg-dummy.left-top { top: 1px; left: 4px; width: 60%; height: 16px; - border-radius: 20px; + border-radius: #{$border-radius-extra-large}; } - .bg-dummy.right-bottom{ + + .bg-dummy.right-bottom { right: 68px; bottom: 0; width: 20%; height: 100%; - border-radius: 50%; + border-radius: #{$border-radius-circle}; } .log-container { background: var(--background-color); backdrop-filter: blur(20px); - border-radius: 12px; + border-radius: #{$border-radius-large}; @include flex-center; overflow: hidden; } + .logs-detail, .version { @include flex-center; - border-radius: 12px; + border-radius: #{$border-radius-extra-large}; padding: 3px 6px; height: 100%; color: var(--text-color); @@ -79,6 +87,7 @@ cursor: pointer; outline: 0 solid var(--border-color); outline-offset: -1px; + .log-icon { @include flex-center; } @@ -103,6 +112,7 @@ .log { background: var(--log-default-background-color); outline-color: var(--default-text-color); + .log-message { color: var(--default-text-color); } @@ -111,6 +121,7 @@ .info { background: var(--log-info-background-color); outline-color: var(--log-info-text-color); + .log-message { color: var(--log-info-text-color); } @@ -119,6 +130,7 @@ .error { background: var(--log-error-background-color); outline-color: var(--log-error-text-color); + .log-message { color: var(--log-error-text-color); } @@ -127,6 +139,7 @@ .warning { background: var(--log-warn-background-color); outline-color: var(--log-warn-text-color); + .log-message { color: var(--log-warn-text-color); } @@ -134,9 +147,10 @@ .success { background: var(--log-success-background-color); + .log-message { color: var(--log-success-text-color); } } } -} +} \ No newline at end of file diff --git a/app/src/styles/components/input.scss b/app/src/styles/components/input.scss index d4c6544..5277b7f 100644 --- a/app/src/styles/components/input.scss +++ b/app/src/styles/components/input.scss @@ -390,7 +390,7 @@ input[type="number"] { width: 50%; background: linear-gradient(to right, var(--accent-color), transparent); animation: loadingAnimation 1.2s linear infinite; - border-radius: 4px; + border-radius: #{$border-radius-small}; } @keyframes loadingAnimation { diff --git a/app/src/styles/components/logs/logs.scss b/app/src/styles/components/logs/logs.scss index b7c1363..69d6e44 100644 --- a/app/src/styles/components/logs/logs.scss +++ b/app/src/styles/components/logs/logs.scss @@ -1,5 +1,5 @@ -@use "../../abstracts/variables" as *; -@use "../../abstracts/mixins" as *; +@use "../../abstracts/variables.scss" as *; +@use "../../abstracts/mixins.scss" as *; .log-list-container { width: 100vw; @@ -13,7 +13,7 @@ z-index: 5; background: var(--background-color); padding: 14px 12px; - border-radius: 15px; + border-radius: #{$border-radius-xlarge}; display: flex; flex-direction: column; gap: 12px; @@ -57,7 +57,7 @@ .log-nav { padding: 8px 16px; - border-radius: 19px; + border-radius: #{$border-radius-extra-large}; } .log-nav.active { @@ -85,14 +85,14 @@ gap: 4px; background: var(--background-color); padding: 10px; - border-radius: 16px; + border-radius: #{$border-radius-xlarge}; outline: 1px solid var(--border-color); outline-offset: -1px; overflow: auto; .log-entry { padding: 4px; - border-radius: 4px; + border-radius: #{$border-radius-small}; font-size: var(--font-size-small); display: flex; @@ -110,7 +110,7 @@ font-weight: 300; opacity: 0.8; text-wrap: nowrap; - height: 100%; + // height: 100%; } .log-entry-message { width: 100%; diff --git a/app/src/styles/components/marketPlace/marketPlace.scss b/app/src/styles/components/marketPlace/marketPlace.scss index 23b14b7..4caf82c 100644 --- a/app/src/styles/components/marketPlace/marketPlace.scss +++ b/app/src/styles/components/marketPlace/marketPlace.scss @@ -11,7 +11,7 @@ top: 0; padding: 10px; padding-top: 100px; - + .marketplace-container { position: relative; padding: 20px 2px; @@ -49,6 +49,7 @@ border-radius: $border-radius-large; outline: 1px solid var(--border-color); border: none; + input { border: none !important; outline: none; @@ -62,6 +63,7 @@ border-radius: #{$border-radius-extra-large}; border: 1px solid var(--border-color); padding: 0 10px; + .dropdown-header { align-items: center; } @@ -69,7 +71,7 @@ .button { padding: 5px 20px; - border-radius: 14px; + border-radius: #{$border-radius-large}; background: var(--background-color-button); color: var(--text-button-color); } @@ -85,11 +87,13 @@ } } } - .cards-container-wrapper{ + + .cards-container-wrapper { position: relative; height: calc(100% - 60px); padding: 0px 10px; } + .cards-container-container { display: flex; padding: 0 10px; @@ -112,7 +116,7 @@ .card-container { width: calc(25% - 14px); - border-radius: 18px; + border-radius: #{$border-radius-xlarge}; padding: 12px; box-shadow: 0px 2px 10.5px 0px #0000000d; background: var(--background-color-solid-gradient); @@ -122,16 +126,18 @@ flex-direction: column; justify-content: center; gap: 6px; + .assets-container { height: auto; } + .icon { position: absolute; top: 12px; left: 12px; width: 30px; height: 30px; - border-radius: 10px; + border-radius: #{$border-radius-large}; padding: 5px; background: var(--accent-color); } @@ -143,6 +149,7 @@ justify-content: center; border-radius: #{$border-radius-medium}; overflow: hidden; + img { height: inherit; width: 100%; @@ -159,6 +166,7 @@ display: flex; flex-direction: column; gap: 3px; + .assets-name { text-transform: capitalize; } @@ -233,7 +241,7 @@ display: flex; gap: 12px; overflow: hidden; - border-radius: 20px; + border-radius: #{$border-radius-extra-large}; } // Image Preview Section @@ -268,7 +276,7 @@ width: 30px; min-height: 26px; min-width: 26px; - border-radius: 50%; + border-radius: #{$border-radius-circle}; font-weight: var(--font-weight-bold); color: var(--background-color); background: var(--accent-color); @@ -317,7 +325,7 @@ align-items: center; margin-bottom: 20px; outline: 1px solid #909090cc; - border-radius: 6px; + border-radius: #{$border-radius-small}; .asset-rating { display: flex; @@ -362,7 +370,7 @@ .button { color: white; padding: 10px 20px; - border-radius: 5px; + border-radius: #{$border-radius-small}; cursor: pointer; text-align: center; @@ -386,4 +394,4 @@ cursor: pointer; font-size: var(--font-size-large); } -} +} \ No newline at end of file diff --git a/app/src/styles/components/menu/menu.scss b/app/src/styles/components/menu/menu.scss index dffc6a4..ef7c3c6 100644 --- a/app/src/styles/components/menu/menu.scss +++ b/app/src/styles/components/menu/menu.scss @@ -56,7 +56,7 @@ background: var(--background-color-solid); color: var(--text-color); box-shadow: var(--box-shadow-light); - border-radius: 8px; + border-radius: #{$border-radius-medium}; border: 1px solid var(--border-color); backdrop-filter: blur(10px); .menu-buttons { diff --git a/app/src/styles/components/simulation/analysis.scss b/app/src/styles/components/simulation/analysis.scss index b838b0b..1967540 100644 --- a/app/src/styles/components/simulation/analysis.scss +++ b/app/src/styles/components/simulation/analysis.scss @@ -15,14 +15,14 @@ .analysis-card { min-width: 333px; - border-radius: 20px; + border-radius: #{$border-radius-extra-large}; margin: 8px; pointer-events: all; .analysis-card-wrapper { width: 100%; background: var(--background-color); - border-radius: 14px; + border-radius: #{$border-radius-large}; padding: 16px; display: flex; flex-direction: column; @@ -73,7 +73,7 @@ position: relative; width: 100%; height: 4px; - border-radius: 13px; + border-radius: #{$border-radius-large}; overflow: hidden; background: #fbebd7; @@ -83,7 +83,7 @@ top: 0; left: 0; background: #fc9d2f; - border-radius: 13px; + border-radius: #{$border-radius-large}; } .bar-fill.full { @@ -147,7 +147,7 @@ position: relative; background-image: radial-gradient(#8d8d8da4 1px, transparent 1px); background-size: 10px 10px; - border-radius: 8px; + border-radius: #{$border-radius-medium}; .assetUsage { text-align: right; @@ -215,7 +215,7 @@ gap: 6px; .progress { - border-radius: 6px; + border-radius: #{$border-radius-medium}; height: 5px; &:nth-child(1) { @@ -238,6 +238,7 @@ width: 100%; gap: 6px; padding-top: 3px; + .shift-wrapper { display: flex; align-items: center; @@ -272,7 +273,7 @@ display: inline-block; width: 5px; height: 5px; - border-radius: 50%; + border-radius: #{$border-radius-circle}; } } } @@ -442,7 +443,7 @@ .breakdown-table { width: 100%; border-collapse: collapse; - border-radius: 8px; + border-radius: #{$border-radius-medium}; overflow: hidden; outline: 1px solid var(--border-color); outline-offset: -1px; @@ -475,9 +476,11 @@ display: flex; align-items: center; gap: 4px; - .lightbulb-icon{ + + .lightbulb-icon { @include flex-center; } + .tip-title { color: var(--text-color); font-weight: 600; @@ -502,7 +505,7 @@ .get-tips-button { border: none; - border-radius: 5px; + border-radius: #{$border-radius-small}; cursor: pointer; font-size: 14px; margin-top: 8px; @@ -564,4 +567,4 @@ } } -// Breakdown Table Open/Close Logic +// Breakdown Table Open/Close Logic \ No newline at end of file diff --git a/app/src/styles/components/simulation/simulation.scss b/app/src/styles/components/simulation/simulation.scss index 37a87a8..fb9b6ad 100644 --- a/app/src/styles/components/simulation/simulation.scss +++ b/app/src/styles/components/simulation/simulation.scss @@ -12,7 +12,7 @@ .simulation-player-container { background: var(--background-color); padding: 7px; - border-radius: 15px; + border-radius: #{$border-radius-xlarge}; display: flex; flex-direction: column; gap: 8px; @@ -22,7 +22,7 @@ .progresser-wrapper { outline: 1px solid var(--border-color); background: var(--background-color); - border-radius: 12px; + border-radius: #{$border-radius-large}; display: flex; flex-direction: column; gap: 12px; @@ -35,14 +35,17 @@ @include flex-space-between; gap: 12px; justify-content: space-between; + .header { @include flex-center; gap: 6px; padding: 0 8px; + svg { scale: 1.3; } } + .production-details, .controls-wrapper { @include flex-center; @@ -65,11 +68,11 @@ .progress-wrapper { width: 164px; height: 8px; - border-radius: 5px; + border-radius: #{$border-radius-small}; background: var(--background-color-solid); .progress { - border-radius: 5px; + border-radius: #{$border-radius-small}; height: 100%; background-color: var(--background-color-accent); } @@ -152,6 +155,7 @@ width: 100%; height: 3px; } + .custom-slider-wrapper { height: 100%; width: 100%; @@ -159,6 +163,7 @@ background: transparent; border-radius: #{$border-radius-large}; } + .custom-slider { height: 100%; width: 100%; @@ -196,7 +201,6 @@ opacity: 0.6; width: 2px; height: 12px; - border-radius: 1px; top: 8px; z-index: 1; } @@ -250,6 +254,7 @@ .end-time-wrappper { @include flex-center; gap: 4px; + .icon { @include flex-center; } @@ -262,7 +267,7 @@ padding: 16px; outline: 1px solid var(--border-color); background: var(--background-color); - border-radius: 30px; + border-radius: #{$border-radius-xxx}; display: flex; align-items: center; width: 100%; @@ -284,7 +289,7 @@ .dot { width: 14px; height: 14px; - border-radius: 50%; + border-radius: #{$border-radius-circle}; background-color: #d3d3e2; &.filled { @@ -310,6 +315,7 @@ } .open { + .start-displayer, .end-displayer { display: none; @@ -318,6 +324,7 @@ .timmer { display: none; } + .progresser-wrapper { padding-top: 4px; } @@ -347,6 +354,7 @@ background: var(--background-color); padding: 20px 6px; position: relative; + .timmer { width: auto; position: absolute; @@ -364,6 +372,7 @@ width: auto; right: 16px; } + .process-player { position: absolute; top: 50%; @@ -371,10 +380,11 @@ width: 3.946108102798462px; height: 26px; left: 86.81px; - border-radius: 14px; + border-radius: #{$border-radius-large}; border-width: 1px; background: var(--background-color-accent, #6f42c1); } + .process-wrapper { .process-container { position: relative; @@ -383,7 +393,7 @@ .process { height: 5px; - border-radius: 4px; + border-radius: #{$border-radius-small}; color: white; text-align: center; line-height: 30px; @@ -391,4 +401,4 @@ } } } -} +} \ No newline at end of file diff --git a/app/src/styles/components/templates.scss b/app/src/styles/components/templates.scss index a2a3da5..a71354c 100644 --- a/app/src/styles/components/templates.scss +++ b/app/src/styles/components/templates.scss @@ -1,4 +1,6 @@ -.follow-person-container{ +@use "../abstracts/variables.scss" as *; + +.follow-person-container { height: 100vh; width: 100vw; position: fixed; @@ -6,8 +8,9 @@ left: 0; outline: 8px solid var(--user-color); outline-offset: -3px; - border-radius: 16px; - .follower-name{ + border-radius: #{$border-radius-xlarge}; + + .follower-name { background: var(--user-color); color: #FFFFFF; padding: 4px 8px; @@ -17,6 +20,6 @@ top: -10px; left: 50%; transform: translate(-50%, 0); - border-radius: 8px; + border-radius: #{$border-radius-medium}; } -} +} \ No newline at end of file diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss index 03813a4..3249b1a 100644 --- a/app/src/styles/components/tools.scss +++ b/app/src/styles/components/tools.scss @@ -22,7 +22,7 @@ .split { height: 20px; width: 2px; - border-radius: 2px; + border-radius: #{$border-radius-small}; background: var(--text-disabled); } @@ -169,7 +169,7 @@ .exitPlay { width: 30px; height: 30px; - border-radius: 50%; + border-radius: #{$border-radius-circle}; background: var(--highlight-accent-color); cursor: pointer; @include flex-center; diff --git a/app/src/styles/components/visualization/floating/common.scss b/app/src/styles/components/visualization/floating/common.scss index ee8adf2..101d8cd 100644 --- a/app/src/styles/components/visualization/floating/common.scss +++ b/app/src/styles/components/visualization/floating/common.scss @@ -8,7 +8,7 @@ @include flex-center; flex-direction: column; gap: 6px; - border-radius: 17.22px; + border-radius: #{$border-radius-xlarge}; max-width: 341px; padding: 14px; @@ -31,7 +31,8 @@ width: 27px !important; height: 27px !important; background: var(--background-color); - border-radius: 50%; + border-radius: #{$border-radius-circle}; + @include flex-center; } @@ -61,7 +62,7 @@ .percent-increase { width: 80px; height: 24px; - border-radius: 7.75px; + border-radius: #{$border-radius-medium}; background: var(--background-color); color: #34c759; @include flex-center; @@ -111,7 +112,7 @@ gap: 6px; width: 313px; padding: 4.5px; - border-radius: 9.74px; + border-radius: #{$border-radius-medium}; .headeproductionCapacityr-wrapper, .bar-chart { @@ -120,7 +121,7 @@ display: flex; flex-direction: column; gap: 6px; - border-radius: 5.2px; + border-radius: #{$border-radius-medium}; width: 100%; height: 150px; justify-content: center; @@ -152,7 +153,7 @@ .value { background: var(--background-color-secondary); color: #5783f2; - border-radius: 12.99px; + border-radius: #{$border-radius-large}; padding: 3px 4px; } } @@ -161,7 +162,7 @@ .value { background: var(--background-color-secondary); color: #9641a7; - border-radius: 12.99px; + border-radius: #{$border-radius-large}; padding: 3px 4px; } } @@ -178,7 +179,7 @@ font-size: var(--font-size-small); backdrop-filter: blur(40px); background: var(--background-color-secondary); - border-radius: 20px; + border-radius: #{$border-radius-extra-large}; color: var(--text-color); .header-wrapper { @@ -204,10 +205,10 @@ } .img { - border-radius: 4px; + border-radius: #{$border-radius-small}; img { - border-radius: 4px; + border-radius: #{$border-radius-small}; } } } @@ -278,7 +279,7 @@ display: flex; justify-content: center; align-items: center; - border-radius: 12px; + border-radius: #{$border-radius-large}; } } @@ -308,7 +309,8 @@ background: var(--background-color); color: white; padding: 20px; - border-radius: 8px; + border-radius: #{$border-radius-medium}; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); header { @@ -328,7 +330,8 @@ display: flex; justify-content: center; align-items: center; - border-radius: 4px; + border-radius: #{$border-radius-small}; + cursor: pointer; &:hover { @@ -350,7 +353,8 @@ .metric { background: #2c3e50; padding: 15px; - border-radius: 4px; + border-radius: #{$border-radius-small}; + .label { font-size: var(--font-size-regular); @@ -415,7 +419,8 @@ min-height: 240px !important; padding: 20px; background: var(--background-color); - border-radius: 8px; + border-radius: #{$border-radius-medium}; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); font-family: Arial, sans-serif; width: 240px; @@ -468,7 +473,8 @@ left: 0; width: 100%; height: 200px; - border-radius: 50%; + border-radius: #{$border-radius-circle}; + box-sizing: border-box; border: 25px solid #eee; border-bottom-color: var(--accent-color); @@ -476,7 +482,4 @@ transition: transform 0.5s ease; } -// progress should be progress {progress} - - - +// progress should be progress {progress} \ No newline at end of file diff --git a/app/src/styles/components/visualization/floating/energyConsumed.scss b/app/src/styles/components/visualization/floating/energyConsumed.scss index 28f0861..4a2d7ae 100644 --- a/app/src/styles/components/visualization/floating/energyConsumed.scss +++ b/app/src/styles/components/visualization/floating/energyConsumed.scss @@ -32,7 +32,7 @@ width: 100%; height: 283px; background: #f5f5f5; - border-radius: 8px; + border-radius: #{$border-radius-medium}; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 20px; box-sizing: border-box; @@ -67,13 +67,13 @@ width: 10px; height: 10px; background: #4CAF50; - border-radius: 50%; + border-radius: #{$border-radius-circle}; } .img img { width: 150px; height: 100px; - border-radius: 4px; + border-radius: #{$border-radius-small}; object-fit: cover; } diff --git a/app/src/styles/components/visualization/ui/styledWidgets.scss b/app/src/styles/components/visualization/ui/styledWidgets.scss index 8262bb3..cf7eb55 100644 --- a/app/src/styles/components/visualization/ui/styledWidgets.scss +++ b/app/src/styles/components/visualization/ui/styledWidgets.scss @@ -8,6 +8,7 @@ flex-direction: column; gap: 6px; width: 100%; + // min-width: 1450px; .header { display: flex; @@ -15,38 +16,41 @@ align-items: center; border-bottom: none; } + .stock { padding: 13px 5px; - border-radius: 6.33px; + border-radius: #{$border-radius-medium}; display: flex; justify-content: space-between; - background: color-mix( - in srgb, - var(--highlight-accent-color) 60%, - transparent - ); + background: color-mix(in srgb, + var(--highlight-accent-color) 60%, + transparent); font-size: var(--font-size-large); align-items: center; } + .stock-item { .stockValues { display: flex; gap: 3px; + .value { color: var(--accent-color); } + .stock-description { font-size: var(--font-size-small); } } } + .icon { width: 16.95305824279785px; height: 16.95305824279785px; background: var(--accent-color); - border-radius: 50%; + border-radius: #{$border-radius-circle}; display: flex; justify-content: center; align-items: center; } -} +} \ No newline at end of file diff --git a/app/src/styles/layout/loading.scss b/app/src/styles/layout/loading.scss index 59354ff..57473c2 100644 --- a/app/src/styles/layout/loading.scss +++ b/app/src/styles/layout/loading.scss @@ -5,6 +5,7 @@ height: 100vh; width: 100vw; background: var(--background-color-solid); + .loading-container { position: relative; height: 100%; @@ -15,6 +16,7 @@ justify-content: space-between; padding: 28px; z-index: 5; + &::after { content: ""; position: absolute; @@ -26,22 +28,26 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - border-radius: 50%; + border-radius: #{$border-radius-circle}; filter: blur(200px); z-index: -1; } + .project-name { font-size: var(--font-size-regular); } + .loading-hero-container { .logo { @include flex-center; width: 100%; margin-bottom: 35px; + circle { fill: transparent; } } + .content { font-family: #{$font-josefin-sans}; font-size: #{$xxlarge}; @@ -51,6 +57,7 @@ line-height: 2rem; } } + .progress-container { .progress-value { font-family: #{$font-josefin-sans}; @@ -59,12 +66,14 @@ margin-bottom: 22px; text-align: center; } + .progress-indicator-container { height: 6px; width: 60vw; background: var(--highlight-accent-color); border-radius: #{$border-radius-small}; position: relative; + .progress-bar { height: 6px; background: var(--accent-color); @@ -74,4 +83,4 @@ } } } -} +} \ No newline at end of file diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index cffee1e..9fc9990 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -51,12 +51,15 @@ .active { background: var(--background-color-accent); + rect { stroke: var(--icon-default-color-active); } + circle { fill: var(--icon-default-color-active); } + &:hover { filter: saturate(0.8); background: var(--background-color-accent); @@ -85,7 +88,8 @@ .template-item { border: 1px solid #e0e0e0; - border-radius: 8px; + border-radius: #{$border-radius-medium}; + padding: 1rem; transition: box-shadow 0.3s ease; } @@ -100,7 +104,8 @@ width: 100%; height: 100%; object-fit: contain; - border-radius: 4px; + border-radius: #{$border-radius-small}; + cursor: pointer; transition: transform 0.3s ease; } @@ -122,7 +127,8 @@ background: #ff4444; color: white; border: none; - border-radius: 4px; + border-radius: #{$border-radius-small}; + cursor: pointer; transition: opacity 0.3s ease; } @@ -130,8 +136,15 @@ .no-templates { text-align: center; color: #666; - padding: 2rem; grid-column: 1 / -1; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 6px; + + h2 { + font-weight: 600; + } } .widgets-wrapper { @@ -178,7 +191,8 @@ .stock { padding: 13px 5px; background: var(--background-color-secondary); - border-radius: 6.33px; + border-radius: #{$border-radius-medium}; + display: flex; justify-content: space-between; @@ -230,10 +244,12 @@ .outline-container { height: 100%; + .outline-content-container { position: relative; height: 100%; padding: 8px; + .overflow { height: calc(100% - 16px); max-height: 46vh; @@ -298,7 +314,8 @@ width: 26px; min-height: 26px; min-width: 26px; - border-radius: 50%; + border-radius: #{$border-radius-circle}; + font-weight: var(--font-weight-bold); color: white; text-transform: capitalize; @@ -315,7 +332,8 @@ width: 26px; min-height: 26px; min-width: 26px; - border-radius: 50%; + border-radius: #{$border-radius-circle}; + background: var(--highlight-accent-color); font-weight: var(--font-weight-bold); color: var(--accent-color); @@ -336,7 +354,8 @@ height: 26px; width: 52px; max-width: 52px; - border-radius: 20px; + border-radius: #{$border-radius-extra-large}; + overflow: hidden; margin-left: 2px; @@ -391,8 +410,10 @@ color: #666; padding: 16px; grid-column: 1 / -1; + .products-list { padding-top: 1rem; + .product-item { text-align: start; margin-top: 8px; @@ -401,6 +422,7 @@ display: flex; flex-wrap: wrap; gap: 6px; + button { width: fit-content; position: relative; @@ -410,10 +432,12 @@ padding: 8px 12px; border-radius: #{$border-radius-extra-large}; outline: 1px solid var(--border-color); + &:hover { background: var(--background-color-accent); color: var(--text-button-color); outline: none; + path { stroke: var(--text-button-color); strokeWidth: 1.3; @@ -421,6 +445,7 @@ } } } + .products-list-title { text-align: start; color: var(--accent-color); @@ -441,6 +466,7 @@ display: flex; flex-direction: column; gap: 6px; + .datas { .input-value { padding: 5px 10px; @@ -482,6 +508,7 @@ justify-content: space-between; gap: 6px; } + .disable { cursor: not-allowed; pointer-events: none; @@ -555,12 +582,13 @@ align-items: flex-start; gap: 6px; color: #444; - border-radius: 6px; + border-radius: #{$border-radius-medium}; font-size: var(--font-weight-regular); .infoIcon { padding: 0px 7px; - border-radius: 50%; + border-radius: #{$border-radius-circle}; + border: 1px solid gray; } @@ -640,7 +668,7 @@ background: none; width: 24px; height: 26px; - border-radius: 3.2px; + border-radius: #{$border-radius-small}; } } } @@ -703,6 +731,7 @@ max-height: calc(60vh - (47px - 35px)); width: calc(100% - 4px); overflow-x: hidden; + .header { @include flex-space-between; padding: 6px 12px; @@ -717,9 +746,11 @@ cursor: pointer; outline: none; border: none; + path { stroke: var(--text-button-color); } + &:disabled { background: var(--text-disabled); } @@ -731,9 +762,11 @@ .property-item { .value-field-container { margin: 0; + input { padding: 5px 10px; } + .dropdown { top: 4px; right: 4px; @@ -748,10 +781,13 @@ padding: 8px 12px; color: var(--accent-color); } + .selected-actions-list { margin-bottom: 8px; + .eye-dropper-input-container { padding: 6px 12px; + .regularDropdown-container { padding: 5px 8px; outline: 1px solid var(--border-color); @@ -759,11 +795,14 @@ border: none; } } + .value-field-container { margin: 0; + input { padding: 5px 4px; } + .dropdown { top: 4px; right: 4px; @@ -776,7 +815,8 @@ margin: 2px; width: calc(100% - 4px); background: var(--background-color-gray); - border-radius: 8px; + border-radius: #{$border-radius-medium}; + min-height: 120px; .list-container { @@ -789,12 +829,14 @@ padding: 4px 12px; width: 100%; border-radius: #{$border-radius-medium}; + .value { display: flex; justify-content: flex-start; align-items: center; min-width: 80%; gap: 6px; + .input-value { text-align: start; } @@ -926,6 +968,7 @@ padding: 8px; margin-top: 4px; } + .value-field-container { margin: 0; } @@ -984,6 +1027,7 @@ @include flex-space-between; padding: 10px 12px; color: var(--text-color); + .input-value { color: inherit; } @@ -991,6 +1035,7 @@ .input-container { @include flex-center; + .remove-button { @include flex-center; height: 18px; @@ -1025,12 +1070,14 @@ .custom-input-container { @include flex-space-between; + .split { height: 20px; width: 2px; border-radius: 2px; background: var(--text-disabled); } + .header { @include flex-space-between; border: none; @@ -1063,13 +1110,16 @@ .dropdown-content-container { padding: 6px 12px; } + .value-field-container { padding: 6px; + .dropdown { min-width: 44px; text-align: center; } } + .input-range-container { .input-container { width: 75%; @@ -1155,10 +1205,12 @@ .assets-result { width: 100%; + .assets-wrapper { margin: 0; } } + .assets-list-section { width: 100%; padding: 4px; @@ -1175,6 +1227,7 @@ font-weight: $bold-weight; padding: 8px; @include flex-space-between; + .back-button { cursor: pointer; } @@ -1212,7 +1265,8 @@ content: ""; width: 60px; height: 60px; - border-radius: 50%; + border-radius: #{$border-radius-circle}; + background: var(--circle-color, #000); position: absolute; top: 60%; @@ -1314,11 +1368,9 @@ 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; @@ -1340,4 +1392,4 @@ } } } -} +} \ No newline at end of file diff --git a/app/src/styles/layout/skeleton.scss b/app/src/styles/layout/skeleton.scss new file mode 100644 index 0000000..977beda --- /dev/null +++ b/app/src/styles/layout/skeleton.scss @@ -0,0 +1,61 @@ +.skeleton-wrapper { + max-width: 600px; + margin: 0 auto; + width: 100%; + + .skeleton { + background: var(--background-color-gray); + + border-radius: 8px; + position: relative; + overflow: hidden; + + &::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: linear-gradient(90deg, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 0.2) 20%, + rgba(255, 255, 255, 0.5) 60%, + rgba(255, 255, 255, 0) 100%); + transform: translateX(-100%); + animation: shimmer 1.5s infinite; + } + } + + .skeleton-header { + margin-bottom: 20px; + + .skeleton-title { + width: 100%; + height: 25px; + margin-bottom: 12px; + } + + .skeleton-subtitle { + width: 100%; + height: 4px; + } + } + + .skeleton-content { + display: flex; + flex-direction: column; + gap: 16px; + + .skeleton-card { + width: 100%; + height: 15px; + } + } +} + +@keyframes shimmer { + 100% { + transform: translateX(100%); + } +} \ No newline at end of file diff --git a/app/src/styles/layout/toast.scss b/app/src/styles/layout/toast.scss index eb51c5a..1e5c9ba 100644 --- a/app/src/styles/layout/toast.scss +++ b/app/src/styles/layout/toast.scss @@ -44,7 +44,7 @@ .toast { padding: 10px 20px; - border-radius: 5px; + border-radius: #{$border-radius-medium}; color: var(--primary-color); cursor: pointer; animation: fadeIn 0.3s, fadeOut 0.5s 2.5s; @@ -71,6 +71,7 @@ opacity: 0; transform: translateY(-10px); } + to { opacity: 1; transform: translateY(0); @@ -81,7 +82,8 @@ from { opacity: 1; } + to { opacity: 0; } -} +} \ No newline at end of file diff --git a/app/src/styles/main.scss b/app/src/styles/main.scss index 3adfc0f..6c25a3e 100644 --- a/app/src/styles/main.scss +++ b/app/src/styles/main.scss @@ -33,6 +33,7 @@ @use 'layout/sidebar'; @use 'layout/popup'; @use 'layout/toast'; +@use 'layout/skeleton.scss'; // pages @use 'pages/dashboard'; diff --git a/app/src/styles/pages/dashboard.scss b/app/src/styles/pages/dashboard.scss index a41dc50..38ac24a 100644 --- a/app/src/styles/pages/dashboard.scss +++ b/app/src/styles/pages/dashboard.scss @@ -144,7 +144,7 @@ width: 100%; padding: 8px 16px; background: var(--primary-color); - border-radius: 10px; + border-radius: #{$border-radius-large}; .project-details { .project-name { margin-bottom: 2px; @@ -179,7 +179,7 @@ height: 100%; width: 100%; object-fit: cover; - border-radius: 30px; + border-radius: #{$border-radius-xxx}; } .hero-text { position: absolute; diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index 09b73a9..b34054b 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -61,10 +61,11 @@ bottom: 0px; left: 50%; gap: 6px; - border-radius: 8px; + border-radius: #{$border-radius-medium}; + overflow: auto; max-width: calc(100% - 500px); - min-width: 150px; + // min-width: 150px; z-index: 3; transform: translate(-50%, -10%); pointer-events: all; @@ -101,7 +102,8 @@ .zone { width: auto; background: var(--background-color); - border-radius: 6px; + border-radius: #{$border-radius-medium}; + padding: 4px 8px; white-space: nowrap; font-size: $small; @@ -141,7 +143,8 @@ transform: translate(-50%, 0); gap: 6px; padding: 4px; - border-radius: 8px; + border-radius: #{$border-radius-medium}; + max-width: 80%; overflow: auto; transition: transform 0.3s ease; @@ -153,7 +156,8 @@ .zone { width: auto; background: $background-color; - border-radius: 6px; + border-radius: #{$border-radius-medium}; + padding: 4px 8px; white-space: nowrap; cursor: pointer; @@ -174,7 +178,8 @@ .panel { position: absolute; transition: all 0.3s ease; - border-radius: 6px; + border-radius: #{$border-radius-medium}; + overflow: auto; z-index: $z-index-tools; @@ -201,7 +206,8 @@ width: 100%; max-height: 100%; border: 1px dashed var(--background-color-gray); - border-radius: 8px; + border-radius: #{$border-radius-medium}; + box-shadow: var(--box-shadow-medium); background: var(--background-color); position: relative; @@ -229,7 +235,8 @@ display: flex; flex-direction: column; gap: 6px; - border-radius: 4px; + border-radius: #{$border-radius-small}; + box-shadow: var(--box-shadow-medium); @@ -333,7 +340,8 @@ width: 100%; min-height: 150px; max-height: 100%; - border-radius: 8px; + border-radius: #{$border-radius-medium}; + box-shadow: var(--box-shadow-medium); padding: 6px 0; background: var(--background-color); @@ -381,7 +389,8 @@ justify-content: center; width: 18px; height: 18px; - border-radius: 4px; + border-radius: #{$border-radius-small}; + } .active { @@ -403,7 +412,8 @@ background: var(--background-color-accent); border: none; color: var(--background-color); - border-radius: 4px; + border-radius: #{$border-radius-small}; + .add-icon { @include flex-center; @@ -479,7 +489,8 @@ width: 250px; padding: 12px; box-shadow: 1px -3px 4px 0px rgba(0, 0, 0, 0.11); - border-radius: 8px; + border-radius: #{$border-radius-medium}; + background: white; position: absolute; top: 20px; @@ -503,7 +514,8 @@ margin-bottom: 10px; border: 1px solid $border-color; padding: 5px 10px; - border-radius: 4px; + border-radius: #{$border-radius-small}; + transition: border 0.3s ease; &.active { @@ -517,7 +529,8 @@ width: 10px; height: 10px; background: var(--primary-color); - border-radius: 50%; + border-radius: #{$border-radius-circle}; + } } } @@ -532,13 +545,15 @@ gap: 5px; align-items: center; border: 1px solid var(--accent-color); - border-radius: 4px; + border-radius: #{$border-radius-small}; + padding: 0 5px; input { border: none; outline: none; - border-radius: 50%; + border-radius: #{$border-radius-circle}; + } } } @@ -565,7 +580,7 @@ .zone { padding: 10px; border: 1px solid var(--highlight-accent-color); - border-radius: 5px; + border-radius: #{$border-radius-small}; cursor: pointer; } @@ -598,7 +613,8 @@ display: flex; flex-direction: column; gap: 6px; - border-radius: 4px; + border-radius: #{$border-radius-small}; + box-shadow: var(--box-shadow-medium); @@ -655,7 +671,7 @@ color: var(--text-button-color); font-size: 12px; padding: 2px 6px; - border-radius: 3px; + border-radius: #{$border-radius-small}; white-space: nowrap; transform: translate(-50%, -50%); /* Center the label */ @@ -747,7 +763,8 @@ z-index: 3; display: flex; flex-direction: column; - border-radius: 6px; + border-radius: #{$border-radius-medium}; + overflow: hidden; padding: 4px; min-width: 150px; diff --git a/app/src/styles/pages/userAuth.scss b/app/src/styles/pages/userAuth.scss index cb45c13..6e09d51 100644 --- a/app/src/styles/pages/userAuth.scss +++ b/app/src/styles/pages/userAuth.scss @@ -12,6 +12,7 @@ background: var(--background-color); position: relative; z-index: 1; + .logo-icon { width: 80px; height: 80px; @@ -34,6 +35,7 @@ .link { color: var(--accent-color); text-decoration: none; + &:hover { text-decoration: underline; } @@ -89,7 +91,7 @@ border-radius: #{$border-radius-extra-large}; background: var(--background-color); font-size: 14px; - color: var(--text-button-color); + color: var(--text-color); &:focus { border-color: var(--accent-color); @@ -133,6 +135,7 @@ } } } + .policy-checkbox { @include flex-center; gap: 6px; @@ -141,6 +144,7 @@ justify-content: flex-start; width: 100%; padding: 0 6px; + input { width: 15px; height: 15px; @@ -160,25 +164,25 @@ .link { color: var(--highlight-text-color); text-decoration: none; + &:hover { text-decoration: underline; } } + &::after { content: ""; position: absolute; background: var(--faint-gradient-color); height: 50vh; width: 50vw; - top: 0; - left: 0; top: 50%; left: 50%; opacity: 0.5; transform: translate(-50%, -50%); - border-radius: 50%; + border-radius: #{$border-radius-circle}; filter: blur(200px); z-index: -1; } } -} +} \ No newline at end of file