From 2aa2a5ff30b43574e96b4057938a247ea72d446b Mon Sep 17 00:00:00 2001
From: Juan Di Toro <ditorojuanf@gmail.com>
Date: Fri, 20 Oct 2023 12:32:02 +0200
Subject: [PATCH] fix: small ui problems

---
 .../lume/LumeDashboard/LumeDashboard.tsx      | 21 +++++++------------
 .../lume/LumeIdentity/LumeIdentity.tsx        |  2 +-
 stories/LumeDashboard.stories.tsx             |  2 +-
 stories/LumeIdentity.stories.tsx              |  2 +-
 4 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/components/lume/LumeDashboard/LumeDashboard.tsx b/src/components/lume/LumeDashboard/LumeDashboard.tsx
index b8be719..23d85a5 100644
--- a/src/components/lume/LumeDashboard/LumeDashboard.tsx
+++ b/src/components/lume/LumeDashboard/LumeDashboard.tsx
@@ -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)" }}>
diff --git a/src/components/lume/LumeIdentity/LumeIdentity.tsx b/src/components/lume/LumeIdentity/LumeIdentity.tsx
index c908d9d..f13642f 100644
--- a/src/components/lume/LumeIdentity/LumeIdentity.tsx
+++ b/src/components/lume/LumeIdentity/LumeIdentity.tsx
@@ -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 />
diff --git a/stories/LumeDashboard.stories.tsx b/stories/LumeDashboard.stories.tsx
index 6957aad..2f76672 100644
--- a/stories/LumeDashboard.stories.tsx
+++ b/stories/LumeDashboard.stories.tsx
@@ -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",
diff --git a/stories/LumeIdentity.stories.tsx b/stories/LumeIdentity.stories.tsx
index 310c558..33003b9 100644
--- a/stories/LumeIdentity.stories.tsx
+++ b/stories/LumeIdentity.stories.tsx
@@ -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",