feat: redo settings and all org pages. (#601)
* feat: new components, deploy storybook * refactor: simplify component field definitions and enhance button loading state - Removed unnecessary type imports and simplified the FIELDS array definitions across multiple components in Storybook. - Updated button component to use a loading state instead of isLoading, improving clarity and consistency in props. - Adjusted button stories to reflect the new loading prop and enhanced the button's loading visual feedback. - Minor CSS adjustments for better layout and styling consistency. * chore: add field, card, password components * feat: improve page component & update AuthUI path * chore: update bits-ui to version 2.14.4 and all org related UI's - Updated bits-ui dependency in pnpm-lock.yaml and package.json to version 2.14.4. - Refactored imports for RoleBasedSecurity and UpgradeBanner components to use the new ui feature directory. - Removed unused Course components and related files to clean up the codebase. - Enhanced various components to improve consistency and maintainability. * chore: move all setting buttons to the top and update auth ui styles * chore: remove svelte-loading-spinners and replace with @cio/ui/base/spinner - Removed all instances of svelte-loading-spinners from the project. - Updated components to use the new Spinner from @cio/ui/base/spinner. - Cleaned up pnpm-lock.yaml and package.json to reflect the removal of svelte-loading-spinners. - Added new CSS animations for rocket launch effects in app.css. - Enhanced email change flow with updated verification messages in translations. * chore: remove supabase file upload from dashboard and move to r2 * chore: update organization API and UI components - Added new API methods for organization plan operations and team management. - Introduced middleware for API key authentication and organization admin checks. - Refactored organization-related components to utilize the new API structure. - Updated various UI components to improve consistency and maintainability. - Enhanced error handling and validation for organization-related actions. - Removed deprecated services and streamlined the codebase.
This commit is contained in:
Rotimi Best
+191
-11
@@ -1,4 +1,6 @@
|
||||
/*Write your global styles here, in PostCSS syntax */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Geist:[email protected]&display=swap');
|
||||
|
||||
@import 'tailwindcss';
|
||||
|
||||
@import '@cio/ui/output.css';
|
||||
@@ -44,17 +46,6 @@ html .dark {
|
||||
border: 2px solid var(--scrollbarBG);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: revert;
|
||||
font-weight: revert;
|
||||
margin: 0.8em 0;
|
||||
}
|
||||
|
||||
.prose h1,
|
||||
.prose h2,
|
||||
.prose h3,
|
||||
@@ -809,6 +800,7 @@ svg.lucide-icon:not(.custom) {
|
||||
--animate-roll: quizRoll 0.8s ease-in-out;
|
||||
--animate-gather: audienceGather 0.7s ease-in-out;
|
||||
--animate-setup-configure: setupConfigure 1s ease-in-out;
|
||||
--animate-border: border 4s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes shakeAnnouncement {
|
||||
@@ -1152,3 +1144,191 @@ svg.lucide-icon:not(.custom) {
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animated Gradient Border */
|
||||
@property --border-angle {
|
||||
inherits: false;
|
||||
initial-value: 0deg;
|
||||
syntax: '<angle>';
|
||||
}
|
||||
|
||||
@keyframes border {
|
||||
to {
|
||||
--border-angle: 360deg;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animated Gradient Border Class */
|
||||
.animate-gradient-border {
|
||||
border: 1px solid transparent;
|
||||
background:
|
||||
linear-gradient(45deg, white, white) padding-box,
|
||||
conic-gradient(
|
||||
from var(--border-angle),
|
||||
rgb(148 163 184 / 0.3) 75%,
|
||||
rgb(37 99 235) 82%,
|
||||
rgb(96 165 250) 88%,
|
||||
rgb(37 99 235) 92%,
|
||||
rgb(148 163 184 / 0.3) 100%
|
||||
)
|
||||
border-box;
|
||||
transition: --border-angle 3s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-gradient-border:hover {
|
||||
animation: border 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.dark .animate-gradient-border {
|
||||
background:
|
||||
linear-gradient(45deg, rgb(0 0 0), rgb(0 0 0)) padding-box,
|
||||
conic-gradient(
|
||||
from var(--border-angle),
|
||||
rgb(71 85 105 / 0.48) 75%,
|
||||
rgb(37 99 235) 82%,
|
||||
rgb(96 165 250) 88%,
|
||||
rgb(37 99 235) 92%,
|
||||
rgb(71 85 105 / 0.48) 100%
|
||||
)
|
||||
border-box;
|
||||
transition: --border-angle 3s ease-in-out;
|
||||
}
|
||||
|
||||
.dark .animate-gradient-border:hover {
|
||||
animation: border 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/**
|
||||
Rocket launch animation.
|
||||
**/
|
||||
.rocket-launch {
|
||||
transform-origin: center bottom;
|
||||
transform-box: fill-box;
|
||||
}
|
||||
|
||||
/* Full sequence runs once per hover */
|
||||
.animate-icon:hover .rocket-launch {
|
||||
animation: rocket-sequence 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Optional: flame flicker during pre-launch + launch */
|
||||
.animate-icon:hover .rocket-launch path:first-of-type {
|
||||
animation: flame-sequence 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
Rocket:
|
||||
- 0–60% (~3s): jitter/pre-launch, small moves along nose direction
|
||||
- 60–70%: launch along ~60° diagonal (up-right), fade out
|
||||
- 70–80%: invisible pause
|
||||
- 80–100%: re-enter from opposite side (down-left)
|
||||
*/
|
||||
@keyframes rocket-sequence {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: translate(1px, -2px) scale(1.02);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translate(2px, -3px) scale(1.03);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(1px, -2px) scale(1.02);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translate(0, 0) scale(1.05);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Launch along a ~60° diagonal: up (-Y) and to the right (+X) */
|
||||
70% {
|
||||
transform: translate(100%, -173%) scale(1.1);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Off-screen / invisible pause (~1s, 70–80%) */
|
||||
80% {
|
||||
/* Reposition off-screen in the opposite direction: down-left */
|
||||
transform: translate(-100%, 173%) scale(1.1);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Fly back into view from below-left to original position */
|
||||
100% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Flame sequence:
|
||||
- Moves opposite rocket travel (down-left: -X, +Y) to match exhaust
|
||||
- No vertical-only scaling; just uniform scale + diagonal translation
|
||||
- Visible 0–70%, then off
|
||||
*/
|
||||
@keyframes flame-sequence {
|
||||
0% {
|
||||
stroke: var(--main-primary-color);
|
||||
opacity: 1;
|
||||
transform: translate(-0.5px, 0.9px) scale(1.02);
|
||||
}
|
||||
|
||||
10% {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0) scale(1.02);
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 0.8;
|
||||
transform: translate(-0.5px, 0.9px) scale(1);
|
||||
}
|
||||
|
||||
40% {
|
||||
opacity: 0.8;
|
||||
transform: translate(0, 0) scale(1.02);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translate(-0.5px, 0.9px) scale(1);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 0.8;
|
||||
transform: translate(0, 0) scale(1.02);
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 0;
|
||||
transform: translate(-0.5px, 0.9px) scale(1.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-1px, 1.7px) scale(1.12);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user