brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

created animated tabs component, it has some errors tho and messes with the themeing of the given tabs

Browse source
This commit is contained in:
Carter 2025-03-26 16:28:28 -06:00
parent 0a62a3a879
commit f15f753b90
5 changed files with 77 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/bin/BinYards.tsx
View file

@ -44,7 +44,7 @@ import { openSnackbar } from "providers/Snackbar";
import { binScope, binYardScope } from "models/Scope";
import ShareObject from "user/ShareObject";
import { Bin, Team, User } from "models";
import { Dictionary } from "lodash";
import { Dictionary, transform } from "lodash";
import ObjectUsers from "user/ObjectUsers";
import ObjectTeams from "teams/ObjectTeams";
import { GrainBag } from "models/GrainBag";
@ -57,6 +57,8 @@ const parentTab = {
marginTop: "4px",
marginLeft: "4px",
animationDuration: "10s",
transform: "0.3s ease-in-out",
// transition: transform 0.3s ease-in-out,
// background: "rgba(150, 150, 150, 0)",
borderRadius: "-5px",
@ -112,12 +114,14 @@ const useStyles = makeStyles((theme: Theme) => {
},
tab: {
...parentTab,
color: theme.palette.text.primary
color: theme.palette.text.primary,
transform: "0.3s ease-in-out",
},
smallTab: {
...parentTab,
width: theme.spacing(8),
minWidth: theme.spacing(8),
transform: "0.3s ease-in-out",
// background: theme.palette.background.paper
},
selectedTab: {
@ -125,6 +129,7 @@ const useStyles = makeStyles((theme: Theme) => {
borderTopLeftRadius: "6px",
borderTopRightRadius: "6px",
background: theme.palette.background.default,
transform: "0.3s ease-in-out",
// "linear-gradient(rgba(150, 150, 150, 0.3),"
// + theme.palette.background.default + " 80%)"
"&:hover": {