move around stories

web/src/components/ui/card/StatusCard.stories.tsx

@@ -4,7 +4,7 @@ import { Button } from '../buttons';
 import { fn } from '@storybook/test';
 
 const meta: Meta<typeof StatusCard> = {
-  title: 'UI/Card/StatusCard',
+  title: 'UI/Cards/StatusCard',
   component: StatusCard,
   tags: ['autodocs'],
   argTypes: {

web/src/components/ui/card/SuccessCard.stories.tsx

@@ -4,7 +4,7 @@ import { Button } from '../buttons/Button';
 import { fn } from '@storybook/test';
 
 const meta: Meta<typeof SuccessCard> = {
-  title: 'UI/card/SuccessCard',
+  title: 'UI/Cards/SuccessCard',
   component: SuccessCard,
   parameters: {
     layout: 'centered'

web/src/components/ui/indicators/StatusIndicator.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { StatusIndicator } from './StatusIndicator';
 
 const meta = {
-  title: 'UI/StatusIndicator',
+  title: 'UI/Icons/StatusIndicator',
   component: StatusIndicator,
   parameters: {
     layout: 'centered'

web/src/components/ui/indicators/StatusIndicator.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { RadioChecked, Radio, CircleWarning } from '../icons';
+import { RadioChecked, CircleWarning } from '../icons';
 import { cn } from '@/lib/classMerge';
 
 const animationConfig = {

web/src/controllers/AppPasswordAccess.tsx

@@ -2,14 +2,12 @@
 
 import { BusterLogo } from '@/assets/svg/BusterLogo';
 import React, { useRef } from 'react';
-import { Title } from '@/components/ui/typography';
+import type { ShareAssetType } from '@/api/asset_interfaces';
-import { Button, Input, InputRef, Typography } from 'antd';
-import { LoginConfigProvider } from '@/app/auth/_LoginComponents/LoginConfigProvider';
-import { ShareAssetType } from '@/api/asset_interfaces';
 import { useBusterAssetsContextSelector } from '@/context/Assets/BusterAssetsProvider';
 import { useMemoizedFn } from 'ahooks';
-
+import { Title, Text } from '@/components/ui/typography';
-const { Text } = Typography;
+import { Button } from '@/components/ui/buttons';
+import { Input } from '@/components/ui/inputs';
 
 export const AppPasswordAccess: React.FC<{
   metricId?: string;
@@ -43,7 +41,7 @@ const AppPasswordInputComponent: React.FC<{
   dashboardId?: string;
 }> = ({ password, error, metricId, dashboardId }) => {
   const setAssetPassword = useBusterAssetsContextSelector((state) => state.setAssetPassword);
-  const inputRef = useRef<InputRef>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const onEnterPassword = useMemoizedFn((v: string) => {
     setAssetPassword(metricId || dashboardId!, v);
@@ -54,50 +52,48 @@ const AppPasswordInputComponent: React.FC<{
   });
 
   const onEnterButtonPress = useMemoizedFn(() => {
-    const value = inputRef.current?.input?.value;
+    const value = inputRef.current?.value;
     if (!value) return;
     onEnterPassword(value || '');
   });
 
   return (
-    <LoginConfigProvider>
+    <div
-      <div
+      className="flex h-full min-h-[100vh] w-full justify-center"
-        className="flex h-full min-h-[100vh] w-full justify-center"
+      style={{
-        style={{
+        marginTop: '25vh'
-          marginTop: '25vh'
+      }}>
-        }}>
+      <div className="flex max-w-[340px] flex-col items-center space-y-6">
-        <div className="flex max-w-[340px] flex-col items-center space-y-6">
+        <BusterLogo className="h-16 w-16" />
-          <BusterLogo className="h-16 w-16" />
 
-          <div className="text-center">
+        <div className="text-center">
-            <Title
+          <Title
-              as="h2"
+            as="h2"
-              className="text-center">{`To access this page, enter the password below`}</Title>
+            className="text-center">{`To access this page, enter the password below`}</Title>
+        </div>
+
+        <div className="flex w-full flex-col space-y-2 space-x-0">
+          <div className="flex flex-col space-y-1">
+            <Input
+              ref={inputRef}
+              defaultValue={password}
+              onPressEnter={onPressEnter}
+              className="w-full"
+              placeholder="Enter password"
+              type="password"
+            />
+            {error ? (
+              <Text className="mb-1!" variant="danger">
+                {error}
+              </Text>
+            ) : null}
           </div>
 
-          <div className="flex w-full flex-col space-y-2 space-x-0">
+          <Button block variant="black" onClick={onEnterButtonPress}>
-            <div className="flex flex-col space-y-1">
+            Submit
-              <Input
+          </Button>
-                ref={inputRef}
-                defaultValue={password}
-                onPressEnter={onPressEnter}
-                className="w-full"
-                placeholder="Enter password"
-                type="password"
-              />
-              {error ? (
-                <Text className="mb-1!" type="danger">
-                  {error}
-                </Text>
-              ) : null}
-            </div>
-
-            <Button block type="primary" onClick={onEnterButtonPress}>
-              Submit
-            </Button>
-          </div>
         </div>
       </div>
-    </LoginConfigProvider>
+    </div>
   );
 };