awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-07 01:27:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: updated lotties for the products

Browse Source
This commit is contained in:
=
2025-07-02 01:16:50 +05:30
parent fa7318eeb1
commit 74067751a6
12 changed files with 932 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/public/lotties/infisical_loading.json
+1
View File
File diff suppressed because one or more lines are too long
frontend/public/lotties/infisical_loading_bw.json
+1
View File
File diff suppressed because one or more lines are too long
frontend/public/lotties/terminal.json
+365
View File
@@ -0,0 +1,365 @@
{
"v": "5.7.5",
"fr": 100,
"ip": 0,
"op": 100,
"w": 22,
"h": 20,
"nm": "Comp 1",
"ddd": 0,
"metadata": {},
"assets": [
{
"id": "0",
"layers": [
{
"ddd": 0,
"ind": 1,
"ty": 4,
"nm": "Path 1",
"sr": 1,
"ks": {
"p": { "a": 0, "k": [-6, -6], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [100, 100], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"nm": "Path 1",
"it": [
{
"ty": "sh",
"d": 1,
"ks": {
"a": 0,
"k": {
"c": false,
"v": [
[9.25, 9.25],
[12.25, 9.25]
],
"i": [
[0, 0],
[0, 0]
],
"o": [
[0, 0],
[0, 0]
]
}
}
},
{
"ty": "st",
"c": { "a": 0, "k": [1, 1, 1], "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"w": { "a": 0, "k": 1.5, "ix": 2 },
"lc": 2,
"lj": 2,
"ml": 4
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [100, 100], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
}
]
}
],
"ip": 0,
"op": 101,
"st": 0,
"bm": 0
}
]
}
],
"layers": [
{
"ddd": 0,
"ind": 2,
"ty": 3,
"nm": "",
"sr": 1,
"ks": {
"p": { "a": 0, "k": [0.7886505126953125, 0.7357635498046875], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [100, 100], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
},
"ao": 0,
"ip": 0,
"op": 101,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"refId": "0",
"w": 10,
"h": 7,
"ind": 3,
"ty": 0,
"nm": "10 Outlines 2",
"sr": 1,
"ks": {
"p": { "a": 0, "k": [6, 6], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [100, 100], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": {
"a": 1,
"k": [
{ "t": 0, "s": [100], "i": { "x": [0.667], "y": [1] }, "o": { "x": [1], "y": [0] } },
{ "t": 50, "s": [0], "i": { "x": [0.667], "y": [1] }, "o": { "x": [1], "y": [0] } },
{
"t": 100,
"s": [100],
"i": { "x": [0.75], "y": [0.75] },
"o": { "x": [0.25], "y": [0.25] }
}
],
"ix": 2
},
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
},
"ao": 0,
"ip": 0,
"op": 101,
"st": 0,
"bm": 0,
"parent": 2
},
{
"ddd": 0,
"ind": 4,
"ty": 4,
"nm": "10 Outlines",
"sr": 1,
"ks": {
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [100, 100], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ty": "gr",
"it": [
{
"ty": "gr",
"nm": "Path 1",
"it": [
{
"ty": "sh",
"d": 1,
"ks": {
"a": 0,
"k": {
"c": false,
"v": [
[4.75, 4.75],
[7.75, 7],
[4.75, 9.25]
],
"i": [
[0, 0],
[0, 0],
[0, 0]
],
"o": [
[0, 0],
[0, 0],
[0, 0]
]
}
}
},
{
"ty": "st",
"c": { "a": 0, "k": [1, 1, 1], "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"w": { "a": 0, "k": 1, "ix": 2 },
"lc": 2,
"lj": 2,
"ml": 4
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [100, 100], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
}
]
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [100, 100], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
}
]
},
{
"ty": "gr",
"it": [
{
"ty": "gr",
"nm": "Group",
"it": [
{
"ty": "gr",
"nm": "Path 2",
"it": [
{
"ty": "sh",
"d": 1,
"ks": {
"a": 0,
"k": {
"c": true,
"v": [
[3.25, 17.5],
[16.75, 17.5],
[18.341, 16.841],
[19, 15.25],
[19, 3.25],
[18.341, 1.659],
[16.75, 1],
[3.25, 1],
[1.659, 1.659],
[1, 3.25],
[1, 15.25],
[1.659, 16.841],
[3.25, 17.5]
],
"i": [
[0, 0],
[0, 0],
[-0.422, 0.422],
[0, 0.597],
[0, 0],
[0.422, 0.422],
[0.597, 0],
[0, 0],
[0.422, -0.422],
[0, -0.597],
[0, 0],
[-0.422, -0.422],
[-0.597, 0]
],
"o": [
[0, 0],
[0.597, 0],
[0.422, -0.422],
[0, 0],
[0, -0.597],
[-0.422, -0.422],
[0, 0],
[-0.597, 0],
[-0.422, 0.422],
[0, 0],
[0, 0.597],
[0.422, 0.422],
[0, 0]
]
}
}
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [100, 100], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
}
]
},
{
"ty": "st",
"c": { "a": 0, "k": [1, 1, 1], "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"w": { "a": 0, "k": 1.5, "ix": 2 },
"lc": 2,
"lj": 2,
"ml": 4
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [100, 100], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
}
]
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [100, 100], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
}
]
},
{
"ty": "tr",
"p": { "a": 0, "k": [0.7886505126953125, 0.7357635498046875], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [100, 100], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
}
]
}
],
"ip": 0,
"op": 101,
"st": 0,
"bm": 0
}
],
"markers": []
}
frontend/public/lotties/vault.json
+535
View File
@@ -0,0 +1,535 @@
{
"v": "5.7.5",
"fr": 100,
"ip": 0,
"op": 200,
"w": 194,
"h": 194,
"nm": "Comp 1",
"ddd": 0,
"metadata": {},
"assets": [],
"layers": [
{
"ddd": 0,
"ind": 1,
"ty": 4,
"nm": "Handle",
"sr": 1,
"ks": {
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [100, 100], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ty": "gr",
"it": [
{
"ty": "gr",
"nm": "Handle",
"it": [
{
"ty": "gr",
"nm": "Path 1",
"it": [
{
"ty": "sh",
"d": 1,
"ks": {
"a": 0,
"k": {
"c": true,
"v": [
[1.5, -7.5],
[0, -9],
[-1.5, -7.5],
[-1.5, -4.244],
[-2.924, -3.42],
[-5.745, -5.049],
[-7.794, -4.5],
[-7.245, -2.451],
[-4.425, -0.823],
[-4.5, 0],
[-4.425, 0.823],
[-7.245, 2.451],
[-7.794, 4.5],
[-5.745, 5.049],
[-2.924, 3.42],
[-1.5, 4.244],
[-1.5, 7.5],
[0, 9],
[1.5, 7.5],
[1.5, 4.244],
[2.924, 3.42],
[5.745, 5.049],
[7.794, 4.5],
[7.245, 2.451],
[4.425, 0.823],
[4.5, 0],
[4.425, -0.823],
[7.245, -2.451],
[7.794, -4.5],
[5.745, -5.049],
[2.924, -3.42],
[1.5, -4.244],
[1.5, -7.5]
],
"i": [
[0, 0],
[0.828, 0],
[0, -0.828],
[0, 0],
[0.416, -0.356],
[0, 0],
[0.414, -0.717],
[-0.717, -0.414],
[0, 0],
[0, -0.281],
[-0.049, -0.267],
[0, 0],
[-0.414, -0.717],
[-0.717, 0.414],
[0, 0],
[-0.527, -0.186],
[0, 0],
[-0.828, 0],
[0, 0.828],
[0, 0],
[-0.416, 0.356],
[0, 0],
[-0.414, 0.717],
[0.717, 0.414],
[0, 0],
[0, 0.281],
[0.049, 0.267],
[0, 0],
[0.414, 0.717],
[0.717, -0.414],
[0, 0],
[0.527, 0.186],
[0, 0]
],
"o": [
[0, -0.828],
[-0.828, 0],
[0, 0],
[-0.527, 0.186],
[0, 0],
[-0.717, -0.414],
[-0.414, 0.717],
[0, 0],
[-0.049, 0.267],
[0, 0.281],
[0, 0],
[-0.717, 0.414],
[0.414, 0.717],
[0, 0],
[0.416, 0.356],
[0, 0],
[0, 0.828],
[0.828, 0],
[0, 0],
[0.527, -0.186],
[0, 0],
[0.717, 0.414],
[0.414, -0.717],
[0, 0],
[0.049, -0.267],
[0, -0.281],
[0, 0],
[0.717, -0.414],
[-0.414, -0.717],
[0, 0],
[-0.416, -0.356],
[0, 0],
[0, 0]
]
}
}
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [100, 100], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
}
]
},
{
"ty": "gr",
"nm": "Path 2",
"it": [
{
"ty": "sh",
"d": 1,
"ks": {
"a": 0,
"k": {
"c": true,
"v": [
[2.25, 0],
[0, 2.25],
[-2.25, 0],
[0, -2.25],
[2.25, 0]
],
"i": [
[0, 0],
[1.243, 0],
[0, 1.243],
[-1.243, 0],
[0, -1.243]
],
"o": [
[0, 1.243],
[-1.243, 0],
[0, -1.243],
[1.243, 0],
[0, 0]
]
}
}
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [100, 100], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
}
]
},
{
"ty": "fl",
"c": { "a": 0, "k": [1, 1, 1], "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"r": 1,
"bm": 0
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [100, 100], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
}
]
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [400, 400], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
}
]
},
{
"ty": "tr",
"p": { "a": 0, "k": [97.08528137207031, 95.40498352050781], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [126.81784100002713, 126.81784100002713], "ix": 2 },
"r": {
"a": 1,
"k": [
{
"t": 0,
"s": [0],
"i": { "x": [0.667], "y": [1] },
"o": { "x": [0.834], "y": [0.007] }
},
{
"t": 87,
"s": [-123.69],
"i": { "x": [0.27], "y": [1.004] },
"o": { "x": [0.333], "y": [0] }
},
{
"t": 175,
"s": [0],
"i": { "x": [0.75], "y": [0.75] },
"o": { "x": [0.25], "y": [0.25] }
}
],
"ix": 2
},
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
}
]
}
],
"ip": 0,
"op": 201,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 2,
"ty": 4,
"nm": "Hinge",
"sr": 1,
"ks": {
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [100, 100], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ty": "gr",
"nm": "Hinge",
"it": [
{
"ty": "gr",
"nm": "Path 1",
"it": [
{
"ty": "sh",
"d": 1,
"ks": {
"a": 0,
"k": {
"c": false,
"v": [
[2.25, -12],
[-2.25, -12]
],
"i": [
[0, 0],
[0, 0]
],
"o": [
[0, 0],
[0, 0]
]
}
}
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [100, 100], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
}
]
},
{
"ty": "gr",
"nm": "Path 2",
"it": [
{
"ty": "sh",
"d": 1,
"ks": {
"a": 0,
"k": {
"c": false,
"v": [
[2.25, 12],
[-2.25, 12]
],
"i": [
[0, 0],
[0, 0]
],
"o": [
[0, 0],
[0, 0]
]
}
}
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [100, 100], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
}
]
},
{
"ty": "st",
"c": { "a": 0, "k": [1, 1, 1], "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"w": { "a": 0, "k": 3, "ix": 2 },
"lc": 2,
"lj": 2,
"ml": 4
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [100, 100], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
}
]
},
{
"ty": "tr",
"p": { "a": 0, "k": [28.08526611328125, 97.08528137207031], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [400, 400], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
}
]
}
],
"ip": 0,
"op": 201,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 3,
"ty": 4,
"nm": "Inner Rectangle",
"sr": 1,
"ks": {
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [100, 100], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"nm": "Inner Rectangle",
"it": [
{
"ty": "sh",
"d": 1,
"ks": {
"a": 0,
"k": {
"c": true,
"v": [
[-19.811, -19.811],
[-20.25, -17.25],
[-20.25, 17.25],
[-19.811, 19.811],
[-17.25, 20.25],
[17.25, 20.25],
[19.811, 19.811],
[20.25, 17.25],
[20.25, -17.25],
[19.811, -19.811],
[17.25, -20.25],
[-17.25, -20.25],
[-19.811, -19.811]
],
"i": [
[0, 0],
[0, -1.414],
[0, 0],
[-0.439, -0.439],
[-1.414, 0],
[0, 0],
[-0.439, 0.439],
[0, 1.414],
[0, 0],
[0.439, 0.439],
[1.414, 0],
[0, 0],
[0.439, -0.439]
],
"o": [
[-0.439, 0.439],
[0, 0],
[0, 1.414],
[0.439, 0.439],
[0, 0],
[1.414, 0],
[0.439, -0.439],
[0, 0],
[0, -1.414],
[-0.439, -0.439],
[0, 0],
[-1.414, 0],
[0, 0]
]
}
}
},
{
"ty": "st",
"c": { "a": 0, "k": [1, 1, 1], "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"w": { "a": 0, "k": 3, "ix": 2 },
"lc": 1,
"lj": 2,
"ml": 4
},
{
"ty": "tr",
"p": { "a": 0, "k": [97.08528137207031, 97.08528137207031], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 2 },
"s": { "a": 0, "k": [400, 400], "ix": 2 },
"r": { "a": 0, "k": 0, "ix": 2 },
"o": { "a": 0, "k": 100, "ix": 2 },
"sk": { "a": 0, "k": 0, "ix": 2 },
"sa": { "a": 0, "k": 0, "ix": 2 }
}
]
}
],
"ip": 0,
"op": 201,
"st": 0,
"bm": 0
}
],
"markers": []
}
frontend/src/components/v2/Button/Button.tsx
+10 -5
View File
@@ -2,6 +2,8 @@ import { ButtonHTMLAttributes, forwardRef, ReactNode } from "react";
import { cva, VariantProps } from "cva"; import { cva, VariantProps } from "cva";
import { twMerge } from "tailwind-merge"; import { twMerge } from "tailwind-merge";
import { Lottie } from "../Lottie";
type Props = { type Props = {
children: ReactNode; children: ReactNode;
isDisabled?: boolean; isDisabled?: boolean;
@@ -189,11 +191,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
{...props} {...props}
> >
{isLoading && ( {isLoading && (
<img <Lottie
src="/images/loading/loading.gif" icon={
width={36} variant === "solid" && colorSchema === "primary"
alt="loading animation" ? "infisical_loading_bw"
className="absolute rounded-xl opacity-80" : "infisical_loading"
}
isAutoPlay
className="absolute w-8 rounded-xl opacity-80 shadow-sm"
/> />
)} )}
{leftIcon && ( {leftIcon && (
frontend/src/components/v2/ContentLoader/ContentLoader.tsx
+3 -8
View File
@@ -5,6 +5,8 @@ import { useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion"; import { AnimatePresence, motion } from "framer-motion";
import { twMerge } from "tailwind-merge"; import { twMerge } from "tailwind-merge";
import { Lottie } from "../Lottie";
type Props = { type Props = {
text?: string | string[]; text?: string | string[];
frequency?: number; frequency?: number;
@@ -31,14 +33,7 @@ export const ContentLoader = ({ text, frequency = 2000, className }: Props) => {
className className
)} )}
> >
<img <Lottie icon="infisical_loading" className="h-32 w-32" />
src="/images/loading/loading.gif"
height={70}
width={120}
alt="loading animation"
decoding="async"
loading="lazy"
/>
{text && isTextArray && ( {text && isTextArray && (
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
<motion.div <motion.div
frontend/src/components/v2/Lottie/Lottie.tsx
+3 -1
View File
@@ -7,10 +7,11 @@ export type LottieProps = {
icon?: string; icon?: string;
iconMode?: Mode; iconMode?: Mode;
className?: string; className?: string;
isAutoPlay?: boolean;
}; };
export const Lottie = forwardRef<HTMLDivElement, LottieProps>( export const Lottie = forwardRef<HTMLDivElement, LottieProps>(
({ children, icon, iconMode, ...props }, ref): JSX.Element => { ({ children, icon, iconMode, isAutoPlay, ...props }, ref): JSX.Element => {
const iconRef = useRef<DotLottie | null>(null); const iconRef = useRef<DotLottie | null>(null);
return ( return (
<div <div
@@ -26,6 +27,7 @@ export const Lottie = forwardRef<HTMLDivElement, LottieProps>(
mode={iconMode} mode={iconMode}
src={`/lotties/${icon}.json`} src={`/lotties/${icon}.json`}
loop loop
autoplay={isAutoPlay}
className="h-full w-full" className="h-full w-full"
/> />
{children} {children}
frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
+4 -5
View File
@@ -1,6 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons"; import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
import { faCircleQuestion } from "@fortawesome/free-regular-svg-icons"; import { faCircleQuestion, faUserCircle } from "@fortawesome/free-regular-svg-icons";
import { import {
faArrowUpRightFromSquare, faArrowUpRightFromSquare,
faBook, faBook,
@@ -28,7 +28,6 @@ import {
DropdownMenuItem, DropdownMenuItem,
DropdownMenuTrigger, DropdownMenuTrigger,
IconButton, IconButton,
Lottie,
Modal, Modal,
ModalContent, ModalContent,
TBreadcrumbFormat TBreadcrumbFormat
@@ -252,8 +251,8 @@ export const Navbar = () => {
onMouseEnter={() => setOpenSupport(true)} onMouseEnter={() => setOpenSupport(true)}
onMouseLeave={() => setOpenSupport(false)} onMouseLeave={() => setOpenSupport(false)}
> >
<div> <div className="mr-2">
<FontAwesomeIcon icon={faCircleQuestion} size="xl" className="text-white" /> <FontAwesomeIcon icon={faCircleQuestion} size="lg" className="text-mineshaft-200" />
</div> </div>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
@@ -311,7 +310,7 @@ export const Navbar = () => {
onMouseLeave={() => setOpenUser(false)} onMouseLeave={() => setOpenUser(false)}
> >
<div> <div>
<Lottie icon="user" className="w-14" /> <FontAwesomeIcon icon={faUserCircle} size="lg" className="text-mineshaft-200" />
</div> </div>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
frontend/src/layouts/ProjectLayout/ProjectLayout.tsx
+3 -22
View File
@@ -1,5 +1,5 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { faDotCircle, faHome, faMobile, faWindowMaximize } from "@fortawesome/free-solid-svg-icons"; import { faDotCircle, faMobile, faWindowMaximize } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Link, Outlet, useLocation } from "@tanstack/react-router"; import { Link, Outlet, useLocation } from "@tanstack/react-router";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
@@ -89,9 +89,7 @@ export const ProjectLayout = () => {
<MenuItem <MenuItem
className="relative flex items-center gap-2 overflow-hidden" className="relative flex items-center gap-2 overflow-hidden"
isSelected={isSecretManager} isSelected={isSecretManager}
leftIcon={ leftIcon={<Lottie className="inline-block h-6 w-6 shrink-0" icon="vault" />}
<Lottie className="inline-block h-6 w-6 shrink-0" icon="sliding-carousel" />
}
> >
{isSecretManager && ( {isSecretManager && (
<div className="absolute left-0 top-0 h-full w-0.5 bg-primary" /> <div className="absolute left-0 top-0 h-full w-0.5 bg-primary" />
@@ -154,7 +152,7 @@ export const ProjectLayout = () => {
className="relative flex items-center gap-2 overflow-hidden" className="relative flex items-center gap-2 overflow-hidden"
isSelected={isSsh} isSelected={isSsh}
leftIcon={ leftIcon={
<Lottie className="inline-block h-6 w-6 shrink-0" icon="verified" /> <Lottie className="inline-block h-6 w-6 shrink-0" icon="terminal" />
} }
> >
{isSsh && <div className="absolute left-0 top-0 h-full w-0.5 bg-primary" />} {isSsh && <div className="absolute left-0 top-0 h-full w-0.5 bg-primary" />}
@@ -244,23 +242,6 @@ export const ProjectLayout = () => {
</Menu> </Menu>
<div className="flex-grow" /> <div className="flex-grow" />
<Menu> <Menu>
<ShouldWrap
wrapper={Tooltip}
isWrapped={sidebarStyle === SidebarStyle.Collapsed}
content="Organization Home"
position="right"
>
<Link to="/organization/projects">
<MenuItem
className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
leftIcon={
<FontAwesomeIcon className="mx-1 inline-block shrink-0" icon={faHome} />
}
>
Organization
</MenuItem>
</Link>
</ShouldWrap>
<DropdownMenu> <DropdownMenu>
<ShouldWrap <ShouldWrap
wrapper={Tooltip} wrapper={Tooltip}
frontend/src/main.tsx
+3 -3
View File
@@ -5,7 +5,7 @@ import lottieWasmUrl from "@lottiefiles/dotlottie-web/dist/dotlottie-player.wasm
import { createRouter, RouterProvider } from "@tanstack/react-router"; import { createRouter, RouterProvider } from "@tanstack/react-router";
import NProgress from "nprogress"; import NProgress from "nprogress";
import { ContentLoader } from "./components/v2"; import { Lottie } from "./components/v2";
import { queryClient } from "./hooks/api/reactQuery"; import { queryClient } from "./hooks/api/reactQuery";
import { ErrorPage } from "./pages/public/ErrorPage/ErrorPage"; import { ErrorPage } from "./pages/public/ErrorPage/ErrorPage";
import { NotFoundPage } from "./pages/public/NotFoundPage/NotFoundPage"; import { NotFoundPage } from "./pages/public/NotFoundPage/NotFoundPage";
@@ -62,8 +62,8 @@ const router = createRouter({
routeTree, routeTree,
context: { serverConfig: null, queryClient }, context: { serverConfig: null, queryClient },
defaultPendingComponent: () => ( defaultPendingComponent: () => (
<div className="bg-bunker-800"> <div className="flex h-screen w-screen items-center justify-center bg-bunker-800">
<ContentLoader /> <Lottie icon="infisical_loading" className="h-32 w-32" />
</div> </div>
), ),
defaultNotFoundComponent: NotFoundPage, defaultNotFoundComponent: NotFoundPage,
frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx
+2 -8
View File
@@ -42,6 +42,7 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
EmptyState, EmptyState,
IconButton, IconButton,
Lottie,
Modal, Modal,
ModalContent, ModalContent,
PageHeader, PageHeader,
@@ -863,14 +864,7 @@ export const OverviewPage = () => {
if (isProjectV3 && visibleEnvs.length > 0 && isOverviewLoading) { if (isProjectV3 && visibleEnvs.length > 0 && isOverviewLoading) {
return ( return (
<div className="container mx-auto flex h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark]"> <div className="container mx-auto flex h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark]">
<img <Lottie icon="infisical_loading" className="h-32 w-32" />
src="/images/loading/loading.gif"
height={70}
width={120}
alt="loading animation"
decoding="async"
loading="lazy"
/>
</div> </div>
); );
} }
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/SecretDropzone.tsx
+2 -9
View File
@@ -10,7 +10,7 @@ import { createNotification } from "@app/components/notifications";
import { ProjectPermissionCan } from "@app/components/permissions"; import { ProjectPermissionCan } from "@app/components/permissions";
// TODO:(akhilmhdh) convert all the util functions like this into a lib folder grouped by functionality // TODO:(akhilmhdh) convert all the util functions like this into a lib folder grouped by functionality
import { parseDotEnv, parseJson } from "@app/components/utilities/parseSecrets"; import { parseDotEnv, parseJson } from "@app/components/utilities/parseSecrets";
import { Button, Modal, ModalContent } from "@app/components/v2"; import { Button, Lottie, Modal, ModalContent } from "@app/components/v2";
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context"; import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { usePopUp, useToggle } from "@app/hooks"; import { usePopUp, useToggle } from "@app/hooks";
import { useCreateSecretBatch, useUpdateSecretBatch } from "@app/hooks/api"; import { useCreateSecretBatch, useUpdateSecretBatch } from "@app/hooks/api";
@@ -253,14 +253,7 @@ export const SecretDropzone = ({
> >
{isLoading ? ( {isLoading ? (
<div className="mb-16 flex items-center justify-center pt-16"> <div className="mb-16 flex items-center justify-center pt-16">
<img <Lottie icon="infisical_loading" className="h-32 w-32" />
src="/images/loading/loading.gif"
height={70}
width={120}
decoding="async"
loading="lazy"
alt="loading animation"
/>
</div> </div>
) : ( ) : (
<div className="flex flex-col items-center justify-center space-y-2"> <div className="flex flex-col items-center justify-center space-y-2">