Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor version management: replace crypto.randomUUID with generateUniqueId, add new icons, and enhance version editing features

This commit is contained in:
Nalvazhuthi 2025-05-20 09:40:52 +05:30
parent da7ad17a84
commit 634acdd2cc
8 changed files with 215 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
app/src/components/icons/ExportCommonIcons.tsx
View File

@ -1058,9 +1058,6 @@ export const SaveIcon = () => {
); );
}; };
export const SaveVersionIcon = () => { export const SaveVersionIcon = () => {
return ( return (
<svg <svg
@ -1070,10 +1067,12 @@ export const SaveVersionIcon = () => {
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<foreignObject x="-38.7816" y="-60.596" width="261.775" height="235.114"> <foreignObject
x="-38.7816"
y="-60.596"
</foreignObject> width="261.775"
height="235.114"
></foreignObject>
<rect <rect
data-figma-bg-blur-radius="60.596" data-figma-bg-blur-radius="60.596"
x="22.4204" x="22.4204"
@ -1226,3 +1225,57 @@ export const SaveVersionIcon = () => {
</svg> </svg>
); );
}; };
export const RenameVersionIcon = () => {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.7995 4.19826L18.9416 7.44492C19.8527 7.92654 19.8527 9.23161 18.9416 9.71322L17.8513 10.2896L18.9416 10.8658C19.8527 11.3475 19.8527 12.6526 18.9416 13.1342L17.8513 13.7105L18.9416 14.2868C19.8527 14.7684 19.8527 16.0735 18.9416 16.5551L12.7995 19.8017C12.2995 20.0661 11.701 20.0661 11.2008 19.8017L5.05883 16.5551C4.1477 16.0735 4.14771 14.7684 5.05883 14.2868L6.14911 13.7105L5.05883 13.1342C4.1477 12.6526 4.14771 11.3475 5.05883 10.8658L6.14911 10.2896L5.05883 9.71322C4.14771 9.2316 4.14771 7.92654 5.05883 7.44492L11.2008 4.19826C11.701 3.93391 12.2995 3.93391 12.7995 4.19826ZM16.0212 14.6779L12.7995 16.3808C12.2995 16.6452 11.701 16.6452 11.2008 16.3808L7.97918 14.6779L6.57338 15.421L12.0002 18.2895L17.427 15.421L16.0212 14.6779ZM16.0212 11.2569L12.7995 12.9599C12.3449 13.2002 11.809 13.222 11.3395 13.0254L11.2008 12.9599L7.97918 11.2569L6.57338 12L12.0002 14.8686L17.427 12L16.0212 11.2569ZM12.0002 5.71047L6.57338 8.57907L12.0002 11.4476L17.427 8.57907L12.0002 5.71047Z"
fill="var(--text-color)"
/>
</svg>
);
};
export const FinishEditIcon = () => {
return (
<svg
width="61"
height="60"
viewBox="0 0 61 60"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M30.5 52C18.3688 52 8.5 42.1307 8.5 30C8.5 17.8693 18.3688 8 30.5 8C42.6312 8 52.5 17.8693 52.5 30C52.5 42.1307 42.6312 52 30.5 52Z"
fill="#D7EBFF"
/>
<path
d="M52.5 30C52.5 17.8693 42.6312 8 30.5 8V52C42.6312 52 52.5 42.1307 52.5 30Z"
fill="#C4E2FF"
/>
<path
d="M30.4996 49.1281C19.9508 49.1281 11.3691 40.5461 11.3691 29.9977C11.3691 19.4493 19.9508 10.8672 30.4996 10.8672C41.0484 10.8672 49.6301 19.4493 49.6301 29.9977C49.6301 40.546 41.0484 49.1281 30.4996 49.1281Z"
fill="#88CC2A"
/>
<path
d="M49.6305 29.9977C49.6305 19.4493 41.0488 10.8672 30.5 10.8672V49.128C41.0488 49.1281 49.6305 40.546 49.6305 29.9977Z"
fill="#7FB335"
/>
<path
d="M28.5872 38.605C27.8529 38.605 27.1187 38.3247 26.5583 37.7642L20.6454 31.8514C19.5244 30.7309 19.5244 28.9141 20.6454 27.7936C21.7664 26.6726 23.5822 26.6726 24.7032 27.7936L28.5872 31.6771L36.7755 23.4892C37.8964 22.3682 39.7123 22.3682 40.8333 23.4892C41.9542 24.6096 41.9542 26.4264 40.8333 27.547L30.6161 37.7642C30.0557 38.3247 29.3214 38.605 28.5872 38.605Z"
fill="white"
/>
<path
d="M36.7752 23.497L30.5 29.7719V37.8665C30.5374 37.8327 30.5797 37.808 30.6158 37.7719L40.833 27.5547C41.954 26.4342 41.954 24.6174 40.833 23.4969C39.7122 22.376 37.8962 22.376 36.7752 23.497Z"
fill="#EDF0F2"
/>
</svg>
);
};

49
app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx
View File

@ -8,18 +8,19 @@ import {
} from "../../../icons/ExportCommonIcons"; } from "../../../icons/ExportCommonIcons";
import RenameInput from "../../../ui/inputs/RenameInput"; import RenameInput from "../../../ui/inputs/RenameInput";
import { useVersionStore } from "../../../../store/builder/store"; import { useVersionStore } from "../../../../store/builder/store";
import { generateUniqueId } from "../../../../functions/generateUniqueId";
const VersionHistory = () => { const VersionHistory = () => {
const userName = localStorage.getItem("userName") ?? "Anonymous"; const userName = localStorage.getItem("userName") ?? "Anonymous";
const { versions, addVersion, setVersions, updateVersion } =
const { versions, addVersion, setVersions } = useVersionStore(); useVersionStore();
const [selectedVersion, setSelectedVersion] = useState( const [selectedVersion, setSelectedVersion] = useState(
versions.length > 0 ? versions[0] : null versions.length > 0 ? versions[0] : null
); );
const addNewVersion = () => { const addNewVersion = () => {
const newVersion = { const newVersion = {
id: crypto.randomUUID(), id: generateUniqueId(),
versionLabel: `v${versions.length + 1}.0`, versionLabel: `v${versions.length + 1}.0`,
versionName: "", versionName: "",
timestamp: new Date().toLocaleDateString("en-US", { timestamp: new Date().toLocaleDateString("en-US", {
@ -33,23 +34,21 @@ const VersionHistory = () => {
const newVersions = [newVersion, ...versions]; const newVersions = [newVersion, ...versions];
addVersion(newVersion); addVersion(newVersion);
setSelectedVersion(newVersion); setSelectedVersion(newVersion);
setVersions(newVersions); // bring new one to top setVersions(newVersions);
}; };
const handleSelectVersion = (version: any) => { const handleSelectVersion = (version: any) => {
setSelectedVersion(version); setSelectedVersion(version);
// Move selected version to top, keep others in same order
const reordered = [version, ...versions.filter((v) => v.id !== version.id)]; const reordered = [version, ...versions.filter((v) => v.id !== version.id)];
setVersions(reordered); setVersions(reordered);
}; };
const handleTimestampChange = (newTimestamp: string, index: number) => { const handleVersionNameChange = (newName: string, versionId: string) => {
const updated = [...versions]; const updated = versions.map((v) =>
updated[index].timestamp = newTimestamp; v.id === versionId ? { ...v, versionName: newName } : v
);
console.warn("Timestamp updated locally but not persisted in store."); setVersions(updated);
setVersions(updated); // Optional: persist timestamp change updateVersion(versionId, { versionName: newName });
}; };
return ( return (
@ -99,28 +98,36 @@ const VersionHistory = () => {
</div> </div>
)} )}
{/* Versions List or No Versions Message */} {/* Versions List */}
<div className="saved-versions-list"> <div className="saved-versions-list">
{versions.length === 0 ? ( {versions.length === 0 ? (
<div className="no-versions-message">No saved versions</div> <div className="no-versions-message">No saved versions</div>
) : ( ) : (
versions.map((version, index) => ( versions.map((version) => (
<button <button
key={version.id} key={version.id}
className="saved-version" className="saved-version"
id={`${version.versionName}-${index}`}
onClick={() => handleSelectVersion(version)} onClick={() => handleSelectVersion(version)}
> >
<div className="version-name">{version.versionLabel}</div> <div className="version-name">{version.versionLabel}</div>
<div className="version-details"> <div className="version-details">
<div className="details"> <div className="details">
<span className="timestamp"> <span className="timestamp">
<RenameInput {version.versionName ? (
value={version.timestamp} <RenameInput
onRename={(newTimestamp) => value={version.versionName}
handleTimestampChange(newTimestamp, index) onRename={(newName) =>
} handleVersionNameChange(newName, version.id)
/> }
/>
) : (
<RenameInput
value={version.timestamp}
onRename={(newName) =>
handleVersionNameChange(newName, version.id)
}
/>
)}
</span> </span>
<span className="saved-by"> <span className="saved-by">
<div className="user-profile">{version.savedBy[0]}</div> <div className="user-profile">{version.savedBy[0]}</div>

121
app/src/components/layout/sidebarRight/versionHisory/VersionSaved.tsx
View File

@ -2,10 +2,11 @@ import React, { useState, useEffect, useRef } from "react";
import { useVersionStore } from "../../../../store/builder/store"; import { useVersionStore } from "../../../../store/builder/store";
import { import {
CloseIcon, CloseIcon,
FinishEditIcon,
RenameVersionIcon,
SaveIcon, SaveIcon,
SaveVersionIcon, SaveVersionIcon,
} from "../../../icons/ExportCommonIcons"; } from "../../../icons/ExportCommonIcons";
import { RenameIcon } from "../../../icons/ContextMenuIcons";
import RenderOverlay from "../../../templates/Overlay"; import RenderOverlay from "../../../templates/Overlay";
const VersionSaved = () => { const VersionSaved = () => {
@ -15,28 +16,28 @@ const VersionSaved = () => {
const [showNotification, setShowNotification] = useState(false); const [showNotification, setShowNotification] = useState(false);
const [newName, setNewName] = useState(""); const [newName, setNewName] = useState("");
const [description, setDescription] = useState(""); const [description, setDescription] = useState("");
const [showEditedFinish, setShowEditedFinish] = useState(false);
const [editedVersionName, setEditedVersionName] = useState("");
const prevVersionCount = useRef(versions.length); const prevVersionCount = useRef(versions.length);
const dismissTimerRef = useRef<NodeJS.Timeout | null>(null); const dismissTimerRef = useRef<NodeJS.Timeout | null>(null);
const latestVersion = versions?.[0]; const latestVersion = versions?.[0];
// Clear dismiss timer when component unmounts
useEffect(() => { useEffect(() => {
return () => { return () => {
if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current); if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
}; };
}, []); }, []);
// Handle new version notification and setup dismiss timer
useEffect(() => { useEffect(() => {
if (versions.length > prevVersionCount.current) { if (versions.length > prevVersionCount.current && latestVersion) {
setShowNotification(true); setShowNotification(true);
setShouldDismiss(false); setShouldDismiss(false);
setIsEditing(false); setIsEditing(false);
setNewName(versions[0].versionName ?? ""); setNewName(latestVersion.versionName ?? "");
setDescription(versions[0]?.description ?? ""); setDescription(latestVersion.description ?? "");
setEditedVersionName(latestVersion.versionName ?? ""); // Initialize editedVersionName
// Only start dismiss timer if not in edit mode
if (!isEditing) { if (!isEditing) {
startDismissTimer(); startDismissTimer();
} }
@ -45,18 +46,15 @@ const VersionSaved = () => {
} else if (versions.length < prevVersionCount.current) { } else if (versions.length < prevVersionCount.current) {
prevVersionCount.current = versions.length; prevVersionCount.current = versions.length;
} }
}, [versions, isEditing]); }, [versions, isEditing, latestVersion]);
// Start or restart the dismiss timer
const startDismissTimer = (delay = 5000) => { const startDismissTimer = (delay = 5000) => {
if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current); if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
dismissTimerRef.current = setTimeout(() => { dismissTimerRef.current = setTimeout(() => {
console.log("isEditing: ", isEditing);
setShouldDismiss(true); setShouldDismiss(true);
}, delay); }, delay);
}; };
// Hide notification after dismiss animation delay
useEffect(() => { useEffect(() => {
if (shouldDismiss) { if (shouldDismiss) {
const timer = setTimeout(() => setShowNotification(false), 200); const timer = setTimeout(() => setShowNotification(false), 200);
@ -65,11 +63,11 @@ const VersionSaved = () => {
}, [shouldDismiss]); }, [shouldDismiss]);
const handleEditName = () => { const handleEditName = () => {
setIsEditing(true); if (!latestVersion) return;
setNewName(latestVersion?.versionName ?? "");
setDescription(latestVersion?.description ?? "");
// Clear any existing dismiss timer when editing starts setIsEditing(true);
setNewName(latestVersion.versionName ?? "");
setDescription(latestVersion.description ?? "");
if (dismissTimerRef.current) { if (dismissTimerRef.current) {
clearTimeout(dismissTimerRef.current); clearTimeout(dismissTimerRef.current);
dismissTimerRef.current = null; dismissTimerRef.current = null;
@ -77,21 +75,29 @@ const VersionSaved = () => {
}; };
const handleFinishEdit = () => { const handleFinishEdit = () => {
if (latestVersion) { if (!latestVersion) return;
updateVersion(latestVersion.id, {
versionName: newName, const updatedName =
description, (newName.trim() || latestVersion.versionName) ?? latestVersion.timestamp;
}); updateVersion(latestVersion.id, {
console.log("saved"); versionName: updatedName,
startDismissTimer(); // Restart 5s timer after save description,
} });
startDismissTimer(); // Restart 5s timer after save
setEditedVersionName(updatedName);
setIsEditing(false); setIsEditing(false);
setShowEditedFinish(true);
setTimeout(() => {
setShowEditedFinish(false);
}, 5000);
startDismissTimer();
}; };
const handleCancel = () => { const handleCancel = () => {
setIsEditing(false); setIsEditing(false);
startDismissTimer(); // Restart 5s timer after cancel startDismissTimer();
}; };
const handleClose = () => { const handleClose = () => {
@ -103,35 +109,39 @@ const VersionSaved = () => {
return ( return (
<div className={`versionSaved ${shouldDismiss ? "dismissing" : ""}`}> <div className={`versionSaved ${shouldDismiss ? "dismissing" : ""}`}>
<div className="version-header"> {!isEditing && !showEditedFinish && (
<div className="header-wrapper"> <div className="versionSaved-wrapper">
<div className="icon"> <div className="version-header">
<SaveIcon /> <div className="header-wrapper">
<div className="icon">
<SaveIcon />
</div>
<span>Saved New Version</span>
</div>
<button className="close-btn" onClick={handleClose}>
<CloseIcon />
</button>
</div> </div>
<span>Saved New Version</span>
</div>
<button className="close-btn" onClick={handleClose}>
<CloseIcon />
</button>
</div>
<div className="version-details"> <div className="version-details">
<SaveVersionIcon /> <SaveVersionIcon />
<div className="details"> <div className="details">
<div className="details-wrapper"> <div className="details-wrapper">
New Version Created {latestVersion.versionLabel}{" "} New Version Created {latestVersion.versionLabel}{" "}
{latestVersion.timestamp.toUpperCase()} {latestVersion.timestamp.toUpperCase()}
</div>
<button onClick={handleEditName}>Edit name</button>
</div>
</div> </div>
<button onClick={handleEditName}>Edit name</button>
</div> </div>
</div> )}
{isEditing && ( {isEditing && (
<RenderOverlay> <RenderOverlay>
<div className="edit-version-popup-wrapper"> <div className="edit-version-popup-wrapper">
<div className="details-wrapper-popup-container"> <div className="details-wrapper-popup-container">
<div className="header-wrapper"> <div className="header-wrapper">
<RenameIcon /> <RenameVersionIcon />
<div className="label">Rename Version</div> <div className="label">Rename Version</div>
</div> </div>
<div className="details-wrapper"> <div className="details-wrapper">
@ -154,16 +164,11 @@ const VersionSaved = () => {
</div> </div>
</div> </div>
<div className="version-description"> <div className="version-description">
{/* <input
type="text"
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Add description"
/> */}
<textarea <textarea
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
placeholder="Add description" placeholder="Add description"
style={{ resize: "none" }}
/> />
</div> </div>
</div> </div>
@ -179,6 +184,22 @@ const VersionSaved = () => {
</div> </div>
</RenderOverlay> </RenderOverlay>
)} )}
{showEditedFinish && (
<RenderOverlay>
<div className="finishEdit-version-popup-wrapper">
<div className="finishEdit-wrapper-popup-container">
<div className="icon">
<FinishEditIcon />
</div>
<div className="versionname">
{editedVersionName || latestVersion.versionName}
</div>
<div className="success-message">Saved Successfully!</div>
</div>
</div>
</RenderOverlay>
)}
</div> </div>
); );
}; };

13
app/src/components/ui/compareVersion/CompareLayOut.tsx
View File

@ -8,6 +8,7 @@ import { useSaveVersion } from "../../../store/builder/store";
import Search from "../inputs/Search"; import Search from "../inputs/Search";
import OuterClick from "../../../utils/outerClick"; import OuterClick from "../../../utils/outerClick";
import RegularDropDown from "../inputs/RegularDropDown"; import RegularDropDown from "../inputs/RegularDropDown";
import { useProductStore } from "../../../store/simulation/useProductStore";
interface Layout { interface Layout {
id: number; id: number;
@ -18,6 +19,8 @@ interface CompareLayoutProps {
} }
const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => { const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => {
const { products } = useProductStore();
console.log('products: ', products);
const [width, setWidth] = useState("50vw"); const [width, setWidth] = useState("50vw");
const [isResizing, setIsResizing] = useState(false); const [isResizing, setIsResizing] = useState(false);
const [showLayoutDropdown, setShowLayoutDropdown] = useState(false); const [showLayoutDropdown, setShowLayoutDropdown] = useState(false);
@ -141,17 +144,17 @@ const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => {
<div className="header">Layouts</div> <div className="header">Layouts</div>
<Search onChange={() => {}} /> <Search onChange={() => {}} />
<div className="layouts-container"> <div className="layouts-container">
{dummyLayouts.map((layout) => ( {products.map((layout) => (
<button <button
key={layout.id} key={layout.productId}
className="layout-wrapper" className="layout-wrapper"
onClick={() => { onClick={() => {
handleSelectLayout(layout.name); handleSelectLayout(layout.productName);
setShowLayoutDropdown(false); setShowLayoutDropdown(false);
}} }}
> >
<LayoutIcon /> <LayoutIcon />
<div className="layout">{layout.name}</div> <div className="layout">{layout.productName}</div>
</button> </button>
))} ))}
</div> </div>
@ -165,7 +168,7 @@ const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => {
<div className="selectLayout-wrapper"> <div className="selectLayout-wrapper">
<RegularDropDown <RegularDropDown
header={selectedLayout} header={selectedLayout}
options={dummyLayouts.map((l) => l.name)} // Pass layout names as options options={products.map((l) => l.productName)} // Pass layout names as options
onSelect={handleSelectLayout} onSelect={handleSelectLayout}
search={false} search={false}
/> />

3
app/src/components/ui/menu/menu.tsx
View File

@ -7,6 +7,7 @@ import useVersionHistoryStore, {
useVersionStore, useVersionStore,
} from "../../../store/builder/store"; } from "../../../store/builder/store";
import { useSubModuleStore } from "../../../store/useModuleStore"; import { useSubModuleStore } from "../../../store/useModuleStore";
import { generateUniqueId } from "../../../functions/generateUniqueId";
interface MenuBarProps { interface MenuBarProps {
setOpenMenu: (isOpen: boolean) => void; setOpenMenu: (isOpen: boolean) => void;
@ -69,7 +70,7 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
const versionCount = versionStore.versions.length; const versionCount = versionStore.versions.length;
const newVersion = { const newVersion = {
id: crypto.randomUUID(), id: generateUniqueId(),
versionLabel: `v${versionCount + 1}.0`, versionLabel: `v${versionCount + 1}.0`,
timestamp: `${new Date().toLocaleTimeString("en-US", { timestamp: `${new Date().toLocaleTimeString("en-US", {
hour: "numeric", hour: "numeric",

6
app/src/pages/Project.tsx
View File

@ -37,7 +37,8 @@ import CompareLayOut from "../components/ui/compareVersion/CompareLayOut";
import useToggleStore from "../store/useUIToggleStore"; import useToggleStore from "../store/useUIToggleStore";
import RegularDropDown from "../components/ui/inputs/RegularDropDown"; import RegularDropDown from "../components/ui/inputs/RegularDropDown";
import VersionSaved from "../components/layout/sidebarRight/versionHisory/VersionSaved"; import VersionSaved from "../components/layout/sidebarRight/versionHisory/VersionSaved";
import SimulationPlayer from "../components/ui/simulation/simulationPlayer"; import SimulationPlayer from "../components/ui/simulation/SimulationPlayer";
import { useProductStore } from "../store/simulation/useProductStore";
const Project: React.FC = () => { const Project: React.FC = () => {
let navigate = useNavigate(); let navigate = useNavigate();
@ -52,6 +53,7 @@ const Project: React.FC = () => {
const { setWallItems } = useWallItems(); const { setWallItems } = useWallItems();
const { setZones } = useZones(); const { setZones } = useZones();
const { isVersionSaved } = useSaveVersion(); const { isVersionSaved } = useSaveVersion();
const { products } = useProductStore();
useEffect(() => { useEffect(() => {
if (!isVersionSaved) { if (!isVersionSaved) {
@ -171,7 +173,7 @@ const Project: React.FC = () => {
<div className="initial-selectLayout-wrapper"> <div className="initial-selectLayout-wrapper">
<RegularDropDown <RegularDropDown
header={selectedLayout ?? "Layout 1"} header={selectedLayout ?? "Layout 1"}
options={dummyLayouts.map((l) => l.name)} // Pass layout names as options options={products.map((l) => l.productName)} // Pass layout names as options
onSelect={handleSelectLayout} onSelect={handleSelectLayout}
search={false} search={false}
/> />

15
app/src/styles/layout/compareLayout.scss
View File

@ -6,6 +6,10 @@
top: 100px; top: 100px;
left: 40px; left: 40px;
z-index: 10; z-index: 10;
.regularDropdown-container {
background: var(--background-color);
}
} }
.compareLayOut-wrapper { .compareLayOut-wrapper {
@ -28,6 +32,10 @@
position: absolute; position: absolute;
top: 100px; top: 100px;
right: 40px; right: 40px;
.regularDropdown-container {
background: var(--background-color);
}
} }
.chooseLayout-container { .chooseLayout-container {
@ -158,11 +166,16 @@
background-color: var(--highlight-text-color) !important; background-color: var(--highlight-text-color) !important;
border-radius: 4px; border-radius: 4px;
.layout {
color: var(--text-button-color) !important;
}
svg { svg {
path { path {
fill: var(--background-color-accent); fill: var(--text-button-color) !important;
} }
} }

35
app/src/styles/layout/sidebar.scss
View File

@ -1749,14 +1749,18 @@
bottom: 45px; bottom: 45px;
right: 10px; right: 10px;
z-index: 10; z-index: 10;
background: var(--background-color);
backdrop-filter: blur(20px);
border-radius: 20px;
padding: 8px 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 18px; gap: 18px;
.versionSaved-wrapper {
border-radius: 20px;
padding: 8px 10px;
background: var(--background-color);
backdrop-filter: blur(20px);
}
.version-header { .version-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -1820,7 +1824,8 @@
display: none; display: none;
} }
.edit-version-popup-wrapper { .edit-version-popup-wrapper,
.finishEdit-version-popup-wrapper {
height: 100vh; height: 100vh;
@ -1828,14 +1833,14 @@
background: var(--background-color-secondary); background: var(--background-color-secondary);
@include flex-center; @include flex-center;
.details-wrapper-popup-container { .details-wrapper-popup-container,
.finishEdit-wrapper-popup-container {
min-width: 535px; min-width: 535px;
width: 520px; width: 520px;
background: var(--background-color); background: var(--background-color);
border-radius: #{$border-radius-large}; border-radius: #{$border-radius-large};
backdrop-filter: blur(15px); backdrop-filter: blur(15px);
outline: 1px solid var(--border-color); outline: 1px solid var(--border-color);
padding: 6px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -1844,6 +1849,7 @@
.header-wrapper { .header-wrapper {
display: flex; display: flex;
align-items: center;
gap: 6px; gap: 6px;
} }
@ -1912,4 +1918,19 @@
} }
} }
} }
.finishEdit-wrapper-popup-container {
min-height: 250px;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
.versionname {
font-size: var(--font-size-large);
color: var(--background-color-accent);
color: #CCACFF;
text-transform: capitalize;
}
}
} }