fix: small ui problems
This commit is contained in:
parent
8d654cf6b2
commit
2aa2a5ff30
|
@ -2,10 +2,10 @@ import * as Dialog from "@radix-ui/react-dialog";
|
|||
import Logo from "../../../assets/lume-logo.png";
|
||||
import { cva } from "class-variance-authority";
|
||||
import { cn } from "../../utils";
|
||||
import { useState, useEffect } from "react";
|
||||
import React from "react";
|
||||
import camelCase from "camelcase";
|
||||
import { useNetworks, type Network } from "../../NetworksProvider";
|
||||
import { TW_PREFIX } from "../../../../scoped-tailwind-prefix";
|
||||
|
||||
const SYNCSTATE_TO_TEXT: Record<Network["syncState"], string> = {
|
||||
done: "Synced",
|
||||
|
@ -20,13 +20,8 @@ const LumeDashboard = (props: any) => {
|
|||
const { children }: { children: React.PropsWithChildren } = props;
|
||||
const { networks } = useNetworks();
|
||||
|
||||
const [uniqueNetworkTypes, setUniqueNetworkTypes] = useState<string[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const networkTypes = networks.map((network) => network.type);
|
||||
const uniqueTypes = Array.from(new Set(networkTypes));
|
||||
setUniqueNetworkTypes(uniqueTypes);
|
||||
}, [networks]);
|
||||
const networkTypes = networks.map((network) => network.type);
|
||||
const uniqueNetworkTypes = Array.from(new Set(networkTypes));
|
||||
|
||||
const DefaultTrigger = (props: any) => (
|
||||
<LumeDashboardTrigger asChild {...props}>
|
||||
|
@ -124,12 +119,12 @@ const CircularProgress = ({
|
|||
className?: string;
|
||||
}) => {
|
||||
const size = 70;
|
||||
const progressWidth = 2;
|
||||
const circleWidth = 2;
|
||||
const progressWidth = size * 0.03; // based on size
|
||||
const circleWidth = size * 0.03; // based on size
|
||||
const radius = size / 2 - 10;
|
||||
const circumference = 2 * radius * Math.PI;
|
||||
const offset = circumference * ((100 - chain.sync) / 100);
|
||||
const fontSize = 15;
|
||||
const fontSize = size * 0.2; // based on size
|
||||
|
||||
return (
|
||||
<svg
|
||||
|
@ -139,9 +134,7 @@ const CircularProgress = ({
|
|||
])}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={`-${size * 0.125} -${size * 0.125} ${size * 1.25} ${
|
||||
size * 1.25
|
||||
}`}
|
||||
viewBox={`0 0 ${size} ${size}`}
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ transform: "rotate(-90deg)" }}>
|
||||
|
|
|
@ -136,7 +136,7 @@ export default function Wrapped({ children }: React.PropsWithChildren) {
|
|||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed z-40 inset-0 bg-black bg-opacity-50 backdrop-blur-sm" />
|
||||
{/* @ditorodev: `left-[calc(50%-192px)] top-[calc(50vh-174px)]` these two are me being dumb and lazy, would be cool to fix with proper centering */}
|
||||
<Dialog.Content className="absolute left-[calc(50%-192px)] top-[calc(50vh-174px)] mx-auto my-auto w-96 max-w-full h-auto z-40 flex items-center justify-center">
|
||||
<Dialog.Content className="absolute left-[calc(50%-192px)] mx-auto my-auto w-96 max-w-full h-auto z-40 flex items-center justify-center">
|
||||
<SwitchableComponentProvider>
|
||||
<LumeIdentityContext.Provider value={{open, setOpen}}>
|
||||
<LumeIdentity />
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
import { StoryFn, Meta } from "@storybook/react";
|
||||
import LumeDashboard from "../src/components/lume/LumeDashboard/LumeDashboard.js";
|
||||
import NetworksProvider from "src/components/NetworksProvider.js";
|
||||
import NetworksProvider from "../src/components/NetworksProvider.js";
|
||||
|
||||
export default {
|
||||
title: "LumeDashboard",
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
import { StoryFn, Meta } from "@storybook/react";
|
||||
import LumeIdentity from "../src/components/lume/LumeIdentity/LumeIdentity.js";
|
||||
import AuthProvider from "src/components/AuthProvider.js";
|
||||
import AuthProvider from "../src/components/AuthProvider.js";
|
||||
|
||||
export default {
|
||||
title: "LumeIdentity",
|
||||
|
|
Loading…
Reference in New Issue