feat: implement new design

.cache/storybook/default/dev-server/storybook-0c9aba2732f8798ca2ae104c09855acc

@@ -0,0 +1 @@
+{"key":"lastEvents","content":{"boot":{"body":{"eventType":"boot","eventId":"4LiRtstbPChRr1fJawaEb","sessionId":"zbIONEreAT2wfu8aWk11H","payload":{"eventType":"init"},"context":{"inCI":false,"isTTY":true,"platform":"macOS","nodeVersion":"20.18.0","cliVersion":"8.4.2"}},"timestamp":1731416420676},"init":{"body":{"eventType":"init","eventId":"XfncviUUJA0EqC3_eWHyA","sessionId":"zbIONEreAT2wfu8aWk11H","metadata":{"generatedAt":1731416583635,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"testPackages":{},"packageManager":{"type":"npm","version":"10.8.2"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":0,"storybookVersion":"8.4.2","storybookVersionSpecifier":"^8.4.2","language":"javascript","storybookPackages":{"@storybook/blocks":{"version":"8.4.2"},"@storybook/react":{"version":"8.4.2"},"@storybook/react-vite":{"version":"8.4.2"},"@storybook/test":{"version":"8.4.2"},"storybook":{"version":"8.4.2"}},"addons":{"@storybook/addon-onboarding":{"version":"8.4.2"},"@storybook/addon-essentials":{"version":"8.4.2"},"@chromatic-com/storybook":{"version":"3.2.2"},"@storybook/addon-interactions":{"version":"8.4.2"}}},"payload":{"projectType":"UNDETECTED"},"context":{"inCI":false,"isTTY":true,"platform":"macOS","nodeVersion":"20.18.0","cliVersion":"8.4.2","anonymousId":"01d00e58d87504f29e362d76a86895f5425132c0946b9cf957c93eff24ffb6df"}},"timestamp":1731416584954}}}

.cache/storybook/default/dev-server/storybook-21d6f40cfb511982e4424e0e250a9557

@@ -0,0 +1 @@
+{"key":"session","content":{"id":"zbIONEreAT2wfu8aWk11H","lastUsed":1731416584951}}

.cache/storybook/default/dev-server/storybook-e35710dcf9c6d4f837d5dae15e56122e

@@ -0,0 +1 @@
+{"key":"telemetry-notification-date","content":1731416583567}

.gitignore

@@ -34,4 +34,5 @@ account*
 # TypeScript files to be ignored
 *.tsbuildinfo  # TypeScript build information files
 dist/           # Common directory for compiled JavaScript files
-build/          # Alternative directory for compiled files
+build/          # Alternative directory for compiled files
+*storybook.log

frontend/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+*storybook.log

frontend/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  staticDirs: ["../public"],
+};
+export default config;

frontend/.storybook/preview.tsx

@@ -0,0 +1,59 @@
+import type { Preview } from "@storybook/react";
+import { argent, braavos, jsonRpcProvider, StarknetConfig, useInjectedConnectors } from "@starknet-react/core";
+import { sepolia, Chain } from "@starknet-react/chains";
+import React from "react";
+import "../src/globals.css"
+
+
+const preview: Preview = {
+  parameters: {
+    backgrounds: {
+      default: 'light',
+    },
+    options: {
+      storySort: {
+        order: ['Button', 'Dailog', 'ConnectModal', 'Header', 'Proposal', 'Comments']
+      }
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+
+    },
+
+  },
+  decorators: [
+    (Story) => {
+      const chains = [sepolia];
+      function rpc(chain: Chain) {
+        return {
+          nodeUrl: `https://starknet-${chain.network}.public.blastapi.io/rpc/v0_7`
+        }
+      }
+      const provider = jsonRpcProvider({ rpc });
+      const { connectors } = useInjectedConnectors({
+        recommended: [argent(), braavos()],
+        order: "random",
+      });
+      return (
+
+        <StarknetConfig
+          autoConnect
+          chains={chains}
+          provider={provider}
+          connectors={connectors}
+        >
+          <div className="h-[100vh] mt-10 flex flex-col items-center justify-center">
+            {Story()}
+          </div>
+
+        </StarknetConfig>
+
+      )
+    }
+  ],
+};
+
+export default preview;