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

merge fix

This commit is contained in:
Vishnu 2025-03-27 09:06:26 +05:30
parent cc4d9d069b
commit 38ab556d17
11 changed files with 459 additions and 406 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/src/components/layout/sidebarLeft/Outline.tsx
View File

@ -30,6 +30,7 @@ const Outline: React.FC = () => {
defaultOpen={true}
showKebabMenu={false}
showFocusIcon={true}
remove
/>
<DropDownList
value="Scene"

15
app/src/components/layout/sidebarRight/SideBarRight.tsx
View File

@ -12,16 +12,15 @@ import {
import useToggleStore from "../../../store/useUIToggleStore";
import MachineMechanics from "./mechanics/MachineMechanics";
import Visualization from "./visualization/Visualization";
import GlobalProperties from "./properties/GlobalProperties";
import AsstePropertiies from "./properties/AssetProperties";
import Analysis from "./analysis/Analysis";
import Simulations from "./simulation/Simulations";
import { useSelectedActionSphere } from "../../../store/store";
import GlobalProperties from "./properties/GlobalProperties";
import AsstePropertiies from "./properties/AssetProperties";
import ZoneProperties from "./properties/ZoneProperties";
const SideBarRight: React.FC = () => {
const { activeModule } = useModuleStore();
const [activeList] = useState("properties");
const { toggleUI } = useToggleStore();
const { selectedActionSphere } = useSelectedActionSphere();
const { subModule, setSubModule } = useSubModuleStore();
@ -54,7 +53,7 @@ const SideBarRight: React.FC = () => {
}`}
onClick={() => setSubModule("mechanics")}
>
<MechanicsIcon isActive={activeList === "mechanics"} />
<MechanicsIcon isActive={subModule === "mechanics"} />
</div>
<div
className={`sidebar-action-list ${
@ -62,7 +61,7 @@ const SideBarRight: React.FC = () => {
}`}
onClick={() => setSubModule("simulations")}
>
<SimulationIcon isActive={activeList === "simulations"} />
<SimulationIcon isActive={subModule === "simulations"} />
</div>
<div
className={`sidebar-action-list ${
@ -70,7 +69,7 @@ const SideBarRight: React.FC = () => {
}`}
onClick={() => setSubModule("analysis")}
>
<AnalysisIcon isActive={activeList === "analysis"} />
<AnalysisIcon isActive={subModule === "analysis"} />
</div>
</>
)}
@ -78,7 +77,7 @@ const SideBarRight: React.FC = () => {
)}
{/* process builder */}
{toggleUI &&
activeList === "properties" &&
subModule === "properties" &&
activeModule !== "visualization" && (
<div className="sidebar-right-container">
<div className="sidebar-right-content-container">
@ -114,7 +113,7 @@ const SideBarRight: React.FC = () => {
</div>
</div>
)}
{activeList === "simulations" && (
{subModule === "simulations" && (
<div className="sidebar-right-container">
<div className="sidebar-right-content-container">
<Simulations />

31
app/src/components/ui/componets/AddButtons.tsx
View File

@ -4,6 +4,7 @@ import {
EyeIcon,
LockIcon,
} from "../../icons/RealTimeVisulationIcons";
import { AddIcon } from "../../icons/ExportCommonIcons";
// Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right";
@ -109,7 +110,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
};
// Update the selectedZone state
console.log('updatedZone: ', updatedZone);
console.log("updatedZone: ", updatedZone);
setSelectedZone(updatedZone);
} else {
// If the panel is not active, activate it
@ -122,7 +123,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
};
// Update the selectedZone state
console.log('updatedZone: ', updatedZone);
console.log("updatedZone: ", updatedZone);
setSelectedZone(updatedZone);
}
};
@ -132,7 +133,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
{(["top", "right", "bottom", "left"] as Side[]).map((side) => (
<div key={side} className={`side-button-container ${side}`}>
<button
className={`side-button ${side}`}
className={`side-button ${side}${
selectedZone.activeSides.includes(side) ? " active" : ""
}`}
onClick={() => handlePlusButtonClick(side)}
title={
selectedZone.activeSides.includes(side)
@ -140,7 +143,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
: `Activate ${side} panel`
}
>
+
<div className="add-icon">
<AddIcon />
</div>
</button>
{/* Extra Buttons */}
@ -148,8 +153,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
<div className="extra-Bs">
{/* Hide Panel */}
<div
className={`icon ${hiddenPanels.includes(side) ? "active" : ""
}`}
className={`icon ${
hiddenPanels.includes(side) ? "active" : ""
}`}
title={
hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
}
@ -171,8 +177,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
{/* Lock/Unlock Panel */}
<div
className={`icon ${selectedZone.lockedPanels.includes(side) ? "active" : ""
}`}
className={`icon ${
selectedZone.lockedPanels.includes(side) ? "active" : ""
}`}
title={
selectedZone.lockedPanels.includes(side)
? "Unlock Panel"
@ -180,7 +187,13 @@ const AddButtons: React.FC<ButtonsProps> = ({
}
onClick={() => toggleLockPanel(side)}
>
<LockIcon fill={selectedZone.lockedPanels.includes(side) ? "#ffffff" : "#1D1E21"} />
<LockIcon
fill={
selectedZone.lockedPanels.includes(side)
? "#ffffff"
: "#1D1E21"
}
/>
</div>
</div>
)}

54
app/src/components/ui/componets/RealTimeVisulization.tsx
View File

@ -44,34 +44,34 @@ const RealTimeVisulization: React.FC = () => {
const [zonesData, setZonesData] = useState<FormattedZoneData>({});
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
// useEffect(() => {
// async function GetZoneData() {
// try {
// const response: { data: Zone[] } | undefined = await getZonesApi(
// "hexrfactory"
// );
useEffect(() => {
async function GetZoneData() {
try {
const response: { data: Zone[] } | undefined = await getZonesApi(
"hexrfactory"
);
// if (!response || !response.data) {
// return;
// }
// const formattedData = response?.data?.reduce<FormattedZoneData>(
// (acc, zone) => {
// acc[zone.zoneName] = {
// activeSides: [],
// panelOrder: [],
// lockedPanels: [],
// zoneCentrePoint: [],
// widgets: [],
// };
// return acc;
// },
// {}
// );
// setZonesData(formattedData);
// } catch (error) { }
// }
// GetZoneData();
// }, []);
if (!response || !response.data) {
return;
}
const formattedData = response?.data?.reduce<FormattedZoneData>(
(acc, zone) => {
acc[zone.zoneName] = {
activeSides: [],
panelOrder: [],
lockedPanels: [],
zoneCentrePoint: [],
widgets: [],
};
return acc;
},
{}
);
setZonesData(formattedData);
} catch (error) { }
}
GetZoneData();
}, []);
useEffect(() => {

2
app/src/components/ui/inputs/Search.tsx
View File

@ -36,7 +36,7 @@ const Search: React.FC<SearchProps> = ({
};
return (
<div className="asset-search-wrapper">
<div className="search-wrapper">
<div
className={`search-container ${
isFocused || inputValue ? "active" : ""

23
app/src/components/ui/list/DropDownList.tsx
View File

@ -13,6 +13,7 @@ interface DropDownListProps {
kebabMenuItems?: { id: string; name: string }[]; // Items for the KebabMenuList
defaultOpen?: boolean; // Determines if the dropdown list should be open by default
listType?: string; // Type of list to display
remove?: boolean;
}
const DropDownList: React.FC<DropDownListProps> = ({
@ -28,25 +29,29 @@ const DropDownList: React.FC<DropDownListProps> = ({
],
defaultOpen = false,
listType = "default",
remove,
}) => {
const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
const handleToggle = () => {
setIsOpen((prev) => !prev); // Toggle the state
};
const [zoneDataList, setZoneDataList] = useState<{ id: string; name: string }[]>([]);
const [zoneDataList, setZoneDataList] = useState<
{ id: string; name: string }[]
>([]);
useEffect(() => {
async function GetZoneData() {
const response = await getZonesApi("hexrfactory")
console.log('response: ', response.data);
setZoneDataList([{ id: "1", name: "zone1" },
{ id: "2", name: "Zone 2" },])
const response = await getZonesApi("hexrfactory");
console.log("response: ", response.data);
setZoneDataList([
{ id: "1", name: "zone1" },
{ id: "2", name: "Zone 2" },
]);
}
GetZoneData()
}, [])
GetZoneData();
}, []);
return (
<div className="dropdown-list-container">
@ -81,7 +86,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
</div>
{isOpen && (
<div className="lists-container">
{listType === "default" && <List items={items} />}
{listType === "default" && <List items={items} remove={remove} />}
{listType === "outline" && (
<>
<DropDownList

13
app/src/components/ui/list/List.tsx
View File

@ -5,10 +5,11 @@ import { EyeIcon, LockIcon, RmoveIcon } from "../../icons/ExportCommonIcons";
interface ListProps {
items?: { id: string; name: string }[]; // Optional array of items to render
placeholder?: string; // Optional placeholder text
remove?: boolean;
}
const List: React.FC<ListProps> = ({ items = [] }) => {
console.log('items: ', items);
const List: React.FC<ListProps> = ({ items = [], remove }) => {
console.log("items: ", items);
return (
<>
{items.length > 0 ? (
@ -26,9 +27,11 @@ const List: React.FC<ListProps> = ({ items = [] }) => {
<div className="visibe option">
<EyeIcon isClosed />
</div>
<div className="remove option">
<RmoveIcon />
</div>
{remove && (
<div className="remove option">
<RmoveIcon />
</div>
)}
</div>
</div>
</li>

4
app/src/modules/market/FilterSearch.tsx
View File

@ -13,7 +13,9 @@ const FilterSearch: React.FC = () => {
};
return (
<div className="filter-search-container">
<Search onChange={() => {}} />
<div className="asset-search-wrapper">
<Search onChange={() => {}} />
</div>
<RegularDropDown
header={activeOption}
options={["Alphabet ascending", "Alphabet descending"]}

643
app/src/styles/components/marketPlace/marketPlace.scss
View File

@ -2,381 +2,370 @@
@use "../../abstracts/mixins.scss" as *;
.marketplace-wrapper {
height: 100vh;
width: 100vw;
z-index: #{$z-index-marketplace};
background-color: var(--background-color-secondary);
position: absolute;
left: 0;
padding: 95px 8px;
padding-bottom: 32px;
height: 100vh;
width: 100vw;
z-index: #{$z-index-marketplace};
background-color: var(--background-color-secondary);
position: absolute;
left: 0;
padding: 95px 8px;
padding-bottom: 32px;
.marketplace-container {
padding: 20px 2px;
// height: calc(100vh - 120px);
height: 100%;
background-color: var(--background-color);
box-shadow: #{$box-shadow-medium};
border-radius: #{$border-radius-extra-large};
position: relative;
.marketplace-container {
padding: 20px 2px;
// height: calc(100vh - 120px);
height: 100%;
background-color: var(--background-color);
box-shadow: #{$box-shadow-medium};
border-radius: #{$border-radius-extra-large};
position: relative;
}
}
.marketPlace {
width: 100%;
height: 100%;
overflow: auto;
left: calc(120px / 2);
top: 100px;
padding: 14px;
padding-bottom: 60px;
display: flex;
flex-direction: column;
gap: 24px;
.marketPlace {
width: 100%;
height: 100%;
overflow: auto;
left: calc(120px / 2);
top: 100px;
padding: 14px;
padding-bottom: 60px;
display: flex;
flex-direction: column;
gap: 24px;
.filter-search-container {
width: 100%;
display: flex;
align-items: center;
gap: 20px;
.filter-search-container {
width: 100%;
.asset-search-wrapper {
min-width: 60%;
max-width: 684px;
padding: 0;
border-radius: $border-radius-large;
.search-wrapper {
padding: 0 12px;
.search-container {
display: flex;
align-items: center;
gap: 20px;
width: 100%;
border: none !important;
border-radius: $border-radius-large;
overflow: hidden;
padding: 6px 12px;
outline: 1px solid var(--border-color);
.asset-search-wrapper {
min-width: 60%;
max-width: 684px;
padding: 0;
border-radius: $border-radius-large ;
.search-container {
display: flex;
align-items: center;
width: 100%;
border: none !important;
box-shadow: $box-shadow-medium;
border-radius: $border-radius-large;
overflow: hidden;
padding: 4px 12px;
input {
border: none !important;
outline: none;
}
}
input {
border: none !important;
outline: none;
}
}
}
}
.regularDropdown-container {
max-width: 159px;
height: 100%;
.regularDropdown-container {
max-width: 159px;
max-height: 30px;
height: 100%;
.dropdown-header {
align-items: center;
}
}
.dropdown-header {
align-items: center;
}
}
.button {
padding: 5px 20px;
border: 1px solid var(--accent-color);
border-radius: 14px;
color: var(--accent-color);
}
.button {
padding: 5px 20px;
border: 1px solid var(--accent-color);
border-radius: 14px;
.rating-container {
display: flex;
align-items: center;
gap: 6px;
.stars {
display: flex;
align-items: center;
}
}
}
.cards-container-container {
padding: 0px 20px;
display: flex;
flex-direction: column;
gap: 6px;
.header {
color: var(--text-color);
font-weight: $medium-weight;
font-size: $xlarge;
margin: 10px 0;
}
.cards-wrapper-container {
display: flex;
flex-wrap: wrap;
gap: 28px;
.card-container {
width: calc(25% - 23px);
border-radius: 18px;
padding: 12px;
box-shadow: 0px 2px 10.5px 0px #0000000d;
border: 1px solid var(--background-accent-transparent, #e0dfff80);
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
.icon {
position: absolute;
top: 12px;
left: 12px;
width: 30px;
height: 30px;
border-radius: 10px;
padding: 5px;
background-color: var(--accent-color);
cursor: pointer;
}
.image-container {
width: 100%;
display: flex;
justify-content: center;
}
.assets-container {
display: flex;
justify-content: space-between;
.name-container {
display: flex;
flex-direction: column;
gap: 3px;
.asstes-container {
font-weight: #{$bold-weight};
font-size: $regular;
}
.assets-date {
color: var(--accent-color);
font-size: $small;
}
}
.rating-container {
.details {
display: flex;
align-items: center;
gap: 10px;
.content {
display: flex;
align-items: center;
gap: 6px;
.stars {
display: flex;
align-items: center;
}
}
}
}
}
.cards-container-container {
padding: 0px 20px;
.vendor-icon {
font-weight: #{$bold-weight};
font-size: $regular;
}
.stars-container {
display: flex;
flex-direction: column;
gap: 6px;
justify-content: space-between;
}
.header {
color: var(--text-color);
font-weight: $medium-weight;
font-size: $xlarge;
margin: 10px 0;
}
.cards-wrapper-container {
display: flex;
flex-wrap: wrap;
gap: 28px;
.card-container {
width: calc(25% - 23px);
border-radius: 18px;
padding: 12px;
box-shadow: 0px 2px 10.5px 0px #0000000D;
border: 1px solid var(--background-accent-transparent, #E0DFFF80);
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
.icon {
position: absolute;
top: 12px;
left: 12px;
width: 30px;
height: 30px;
border-radius: 10px;
padding: 5px;
background-color: var(--accent-color);
cursor: pointer;
}
.image-container {
width: 100%;
display: flex;
justify-content: center;
}
.assets-container {
display: flex;
justify-content: space-between;
.name-container {
display: flex;
flex-direction: column;
gap: 3px;
.asstes-container {
font-weight: #{$bold-weight};
font-size: $regular ;
}
.assets-date {
color: var(--accent-color);
font-size: $small;
}
}
.details {
display: flex;
align-items: center;
gap: 10px;
.content {
display: flex;
align-items: center;
gap: 6px;
}
}
}
.vendor-icon {
font-weight: #{$bold-weight};
font-size: $regular ;
}
.stars-container {
display: flex;
justify-content: space-between;
}
.buy-now-button {
width: 100%;
background-color: var(--background-color-secondary);
border-radius: $border-radius-extra-large ;
padding: 8px 0;
@include flex-center;
color: var(--accent-color);
&:hover {
cursor: pointer;
}
}
}
.buy-now-button {
width: 100%;
background-color: var(--background-color-secondary);
border-radius: $border-radius-extra-large;
padding: 8px 0;
@include flex-center;
color: var(--accent-color);
&:hover {
cursor: pointer;
}
}
}
}
}
}
}
.assetPreview-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
.assetPreview {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: var(--background-color);
display: flex;
gap: 12px;
z-index: 100;
border-radius: 20px;
}
.assetPreview {
width: 100%;
height: 100%;
background-color: var(--background-color);
display: flex;
gap: 12px;
z-index: 100;
border-radius: 20px;
// Image Preview Section
.image-preview {
width: 50%;
height: 100%;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
// Asset Details Section
.asset-details-preview {
width: 50%;
padding: 50px 20px;
overflow-y: auto;
}
// Organization Section (Top part with image and details)
.organization {
display: flex;
align-items: center;
margin-bottom: 20px;
gap: 10px;
.image {
@include flex-center;
height: 30px;
width: 30px;
min-height: 26px;
min-width: 26px;
border-radius: 50%;
font-weight: var(--font-weight-bold);
color: var(--background-color);
background-color: var(--accent-color);
}
// Image Preview Section
.image-preview {
width: 50%;
height: 100%;
.organization-details {
display: flex;
flex-direction: column;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
.organization-name {
font-weight: bold;
margin-bottom: 5px;
font-weight: #{$bold-weight};
font-size: $regular;
}
.follow {
color: var(--accent-color);
cursor: pointer;
}
}
}
// Asset Details
.asset-details {
margin-top: 20px;
.asset-name {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
font-weight: #{$bold-weight};
font-size: $large;
}
// Asset Details Section
.asset-details-preview {
width: 50%;
padding: 50px 20px;
overflow-y: auto;
.asset-description {
margin-bottom: 20px;
color: #666;
}
// Organization Section (Top part with image and details)
.organization {
.asset-review {
width: fit-content;
padding: 5px 10px;
display: flex;
align-items: center;
margin-bottom: 20px;
outline: 1px solid #909090cc;
border-radius: 6px;
.asset-rating {
display: flex;
align-items: center;
margin-bottom: 20px;
gap: 10px;
gap: 4px;
margin-right: 10px;
font-weight: bold;
position: relative;
.image {
@include flex-center;
height: 30px;
width: 30px;
min-height: 26px;
min-width: 26px;
border-radius: 50%;
font-weight: var(--font-weight-bold);
color: var(--background-color);
background-color: var(--accent-color);
font-weight: #{$bold-weight};
font-size: $regular;
&::after {
margin-left: 5px;
content: "";
display: block;
width: 2px;
height: 12px;
background-color: #ccc;
}
}
.organization-details {
display: flex;
flex-direction: column;
.organization-name {
font-weight: bold;
margin-bottom: 5px;
font-weight: #{$bold-weight};
font-size: $regular ;
}
.follow {
color: var(--accent-color);
cursor: pointer;
}
}
.asset-view {
font-weight: #{$bold-weight};
font-size: $regular;
}
}
// Asset Details
.asset-details {
margin-top: 20px;
.asset-price {
font-size: $xxlarge;
font-weight: bold;
margin-bottom: 20px;
}
}
.asset-name {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
font-weight: #{$bold-weight};
font-size: $large;
}
// Button Container and Button Styles
.button-container {
display: flex;
gap: 10px;
}
.asset-description {
margin-bottom: 20px;
color: #666;
}
.button {
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
text-align: center;
.asset-review {
width: fit-content;
padding: 5px 10px;
display: flex;
align-items: center;
margin-bottom: 20px;
outline: 1px solid #909090CC;
border-radius: 6px;
.asset-rating {
display: flex;
align-items: center;
gap: 4px;
margin-right: 10px;
font-weight: bold;
position: relative;
font-weight: #{$bold-weight};
font-size: $regular ;
&::after {
margin-left: 5px;
content: "";
display: block;
width: 2px;
height: 12px;
background-color: #ccc;
}
}
.asset-view {
font-weight: #{$bold-weight};
font-size: $regular ;
}
}
.asset-price {
font-size: $xxlarge;
font-weight: bold;
margin-bottom: 20px;
}
&:first-child {
outline: 1px solid var(--accent-color);
color: var(--accent-color);
}
// Button Container and Button Styles
.button-container {
display: flex;
gap: 10px;
&:last-child {
background-color: var(--accent-color);
color: var(--background-color);
}
}
.button {
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
text-align: center;
&:first-child {
outline: 1px solid var(--accent-color);
color: var(--accent-color);
}
&:last-child {
background-color: var(--accent-color);
color: var(--background-color);
}
}
.closeButton {
color: var(--accent-color);
position: absolute;
top: 18px;
left: 18px;
@include flex-center;
cursor: pointer;
font-size: var(--font-size-large);
}
}
.closeButton {
color: var(--accent-color);
position: absolute;
top: 18px;
left: 18px;
@include flex-center;
cursor: pointer;
font-size: var(--font-size-large);
}
}

38
app/src/styles/components/tools.scss
View File

@ -161,25 +161,49 @@
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--accent-color);
background-color: var(--highlight-accent-color);
cursor: pointer;
@include flex-center;
position: fixed;
bottom: 60px;
left: 50%;
transform: translate(-50%, 0);
transition: background-color 0.3s, transform 0.3s;
color: var(--background-color);
// transform: none;
color: var(--accent-color);
z-index: 100;
isolation: isolate;
font-weight: 700;
&:hover {
font-weight: 500;
background-color: var(--accent-color);
color: var(--highlight-accent-color);
&::after{
animation: pulse 1s ease-out infinite;
}
}
&::after{
content: "";
position: absolute;
height: 100%;
width: 100%;
background: var(--background-color-secondary);
border-radius: #{$border-radius-circle};
z-index: -1;
}
}
@keyframes pulse {
0%{
opacity: 0;
scale: .5;
}
50%{
opacity: 1;
}
100%{
opacity: 0;
scale: 2;
}
}
@keyframes expandWidth {
from {

41
app/src/styles/pages/realTimeViz.scss
View File

@ -1,4 +1,5 @@
@use "../abstracts/variables.scss" as *;
@use "../abstracts/mixins" as *;
// Main Container
.realTime-viz {
@ -148,9 +149,8 @@
background: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border-radius: 6px;
overflow: visible !important;
.panel-content {
position: relative;
height: 100%;
@ -160,6 +160,7 @@
flex-direction: column;
gap: 10px;
background-color: var(--background-color);
border-radius: #{$border-radius-small};
&::-webkit-scrollbar {
display: none;
@ -194,8 +195,6 @@
left: 0;
right: 0;
.panel-content {
display: flex;
flex-direction: row;
@ -236,9 +235,9 @@
}
}
.playingFlase{
.zoon-wrapper{
bottom: 300px !important;
.playingFlase {
.zoon-wrapper.bottom {
bottom: 300px;
}
}
// Side Buttons
@ -246,9 +245,11 @@
position: absolute;
display: flex;
background-color: var(--background-color);
padding: 5px;
border-radius: 8px;
padding: 2px;
border-radius: 2px;
transition: transform 0.3s ease;
box-shadow: #{$box-shadow-medium};
// outline: 1px solid var(--border-color);
.extra-Bs {
display: flex;
@ -278,13 +279,29 @@
transition: background-color 0.3s ease;
width: 18px;
height: 18px;
display: flex;
justify-content: center;
// align-items: center;
@include flex-center;
background-color: var(--accent-color);
border: none;
color: var(--background-color);
border-radius: 4px;
.add-icon {
@include flex-center;
transition: rotate 0.2s;
}
path {
stroke: var(--primary-color);
stroke-width: 2;
}
}
.active {
background: #ffe3e0;
.add-icon {
rotate: 45deg;
path {
stroke: #f65648;
stroke-width: 2;
}
}
}
&.top {