From 72c9bb66463371834a1a79dec0400a042e7a2605 Mon Sep 17 00:00:00 2001
From: Amogh-Bharadwaj <amogh@peerdb.io>
Date: Mon, 4 Mar 2024 22:22:32 +0530
Subject: [PATCH] fixes

---
 ui/app/mirrors/create/mirrorcards.tsx   | 11 +++++---
 ui/app/page.tsx                         |  2 +-
 ui/app/peers/[peerName]/page.tsx        |  9 ++++++-
 ui/app/peers/create/[peerType]/page.tsx | 20 +++++++-------
 ui/app/peers/create/page.tsx            | 35 +++++++++++++++++--------
 ui/components/ReloadButton.tsx          |  2 +-
 6 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/ui/app/mirrors/create/mirrorcards.tsx b/ui/app/mirrors/create/mirrorcards.tsx
index 31466cf9ee..6cf2dcd348 100644
--- a/ui/app/mirrors/create/mirrorcards.tsx
+++ b/ui/app/mirrors/create/mirrorcards.tsx
@@ -70,14 +70,17 @@ const MirrorCards = ({
                   <div style={{ fontSize: 14 }}>{card.description}</div>
                 </Label>
               </div>
-              <Label
-                as={Link}
+              <Link
                 target='_blank'
-                style={{ color: 'teal', cursor: 'pointer' }}
+                style={{
+                  color: 'teal',
+                  cursor: 'pointer',
+                  width: 'fit-content',
+                }}
                 href={card.link}
               >
                 Learn more
-              </Label>
+              </Link>
             </label>
           );
         })}
diff --git a/ui/app/page.tsx b/ui/app/page.tsx
index 4e84221bb7..83a0f1ccd6 100644
--- a/ui/app/page.tsx
+++ b/ui/app/page.tsx
@@ -5,7 +5,7 @@ import { Layout, LayoutMain } from '@/lib/Layout';
 export default function Home() {
   return (
     <Layout sidebar={<SidebarComponent />}>
-      <LayoutMain alignSelf='center' justifySelf='center' width='xxLarge'>
+      <LayoutMain alignSelf='center' justifySelf='center' width='full'>
         <Header variant='largeTitle'>PeerDB Home Page</Header>
       </LayoutMain>
     </Layout>
diff --git a/ui/app/peers/[peerName]/page.tsx b/ui/app/peers/[peerName]/page.tsx
index 364c425dca..fadb1731d4 100644
--- a/ui/app/peers/[peerName]/page.tsx
+++ b/ui/app/peers/[peerName]/page.tsx
@@ -57,7 +57,14 @@ const PeerData = async ({ params: { peerName } }: DataConfigProps) => {
   const stats = await getStatData();
 
   return (
-    <div style={{ padding: '2rem', display: 'flex', flexDirection: 'column' }}>
+    <div
+      style={{
+        padding: '2rem',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+      }}
+    >
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
         <div
           style={{
diff --git a/ui/app/peers/create/[peerType]/page.tsx b/ui/app/peers/create/[peerType]/page.tsx
index cc814f5bfa..b0693075b8 100644
--- a/ui/app/peers/create/[peerType]/page.tsx
+++ b/ui/app/peers/create/[peerType]/page.tsx
@@ -68,19 +68,20 @@ export default function CreateConfig({
       style={{
         display: 'flex',
         flexDirection: 'column',
-        alignSelf: 'center',
-        justifySelf: 'center',
-        width: '45%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        height: '100%',
       }}
     >
-      <Panel>
-        <Label variant='title3'>
+      <Panel style={{ rowGap: '0.5rem' }}>
+        <Label variant='title3' as='label' style={{ marginBottom: '2rem' }}>
           Setup a new{' '}
           {dbType.charAt(0).toUpperCase() + dbType.slice(1).toLowerCase()} peer
         </Label>
-      </Panel>
-      <GuideForDestinationSetup dstPeerType={peerType} />
-      <Panel>
+
+        <GuideForDestinationSetup dstPeerType={peerType} />
+
         <RowWithTextField
           label={
             <Label>
@@ -111,8 +112,7 @@ export default function CreateConfig({
           Configuration
         </Label>
         {configComponentMap(dbType)}
-      </Panel>
-      <Panel>
+
         <ButtonGroup>
           <Button as={Link} href='/peers/create'>
             Back
diff --git a/ui/app/peers/create/page.tsx b/ui/app/peers/create/page.tsx
index 8297a9c7b5..fe14d2fcf0 100644
--- a/ui/app/peers/create/page.tsx
+++ b/ui/app/peers/create/page.tsx
@@ -5,16 +5,31 @@ import { Button } from '@/lib/Button';
 import { ButtonGroup } from '@/lib/ButtonGroup';
 import { Icon } from '@/lib/Icon';
 import { Label } from '@/lib/Label';
-import { LayoutMain, RowWithSelect } from '@/lib/Layout';
-import { Panel } from '@/lib/Panel';
+import { RowWithSelect } from '@/lib/Layout';
 import Link from 'next/link';
 import { useState } from 'react';
 
 export default function CreatePeer() {
   const [peerType, setPeerType] = useState<string>('');
   return (
-    <LayoutMain alignSelf='center' justifySelf='center' width='xxLarge'>
-      <Panel>
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        rowGap: '1rem',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          rowGap: '1rem',
+        }}
+      >
         <Label variant='title3'>Select source</Label>
         <Label colorName='lowContrast'>
           Start by selecting the data source for your new peer.
@@ -26,8 +41,7 @@ export default function CreatePeer() {
         >
           Learn about peers
         </Action>
-      </Panel>
-      <Panel>
+
         <RowWithSelect
           label={
             <Label as='label' htmlFor='source'>
@@ -38,9 +52,8 @@ export default function CreatePeer() {
             <SelectSource peerType={peerType} setPeerType={setPeerType} />
           }
         />
-      </Panel>
-      <Panel>
-        <ButtonGroup>
+
+        <ButtonGroup style={{ marginTop: '2rem' }}>
           <Button as={Link} href='/peers'>
             Cancel
           </Button>
@@ -50,7 +63,7 @@ export default function CreatePeer() {
             </Button>
           </Link>
         </ButtonGroup>
-      </Panel>
-    </LayoutMain>
+      </div>
+    </div>
   );
 }
diff --git a/ui/components/ReloadButton.tsx b/ui/components/ReloadButton.tsx
index 8c2f2e46e8..d844cd1f1e 100644
--- a/ui/components/ReloadButton.tsx
+++ b/ui/components/ReloadButton.tsx
@@ -2,7 +2,7 @@
 import { Button } from '@/lib/Button';
 import { Icon } from '@/lib/Icon';
 
-const ReloadButton = ({ reloadFunction }: { reloadFunction: () => void }) => {
+const ReloadButton = () => {
   return (
     <Button
       style={{ backgroundColor: '#30A46C', color: 'white', fontSize: 14 }}