ui(web): improve dashboard ui

web/components/dashboard/APIKeyAndDevices.tsx

@@ -0,0 +1,29 @@
+import { Box, SimpleGrid } from '@chakra-ui/react'
+
+import React from 'react'
+import ErrorBoundary from '../ErrorBoundary'
+import ApiKeyList from './ApiKeyList'
+import DeviceList from './DeviceList'
+import GenerateApiKey from './GenerateApiKey'
+
+export default function APIKeyAndDevices() {
+  return (
+    <Box backdropBlur='2xl' borderWidth='0px' borderRadius='lg'>
+      <Box maxW='xl' mx={'auto'} pt={5} px={{ base: 2, sm: 12, md: 17 }}>
+        <GenerateApiKey />
+      </Box>
+      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: 5, lg: 8 }}>
+        <Box backdropBlur='2xl' borderWidth='0px' borderRadius='lg'>
+          <ErrorBoundary>
+            <ApiKeyList />
+          </ErrorBoundary>
+        </Box>
+        <Box backdropBlur='2xl' borderWidth='0px' borderRadius='lg'>
+          <ErrorBoundary>
+            <DeviceList />
+          </ErrorBoundary>
+        </Box>
+      </SimpleGrid>
+    </Box>
+  )
+}

web/components/dashboard/ApiKeyList.tsx

@@ -57,7 +57,7 @@ const ApiKeyList = () => {
 
   return (
     <TableContainer>
-      <Table variant='simple'>
+      <Table variant='striped'>
         <Thead>
           <Tr>
             <Th>Your API Keys</Th>

web/components/dashboard/DeviceList.tsx

@@ -76,7 +76,7 @@ const DeviceList = () => {
 
   return (
     <TableContainer>
-      <Table variant='simple'>
+      <Table variant='striped'>
         <Thead>
           <Tr>
             <Th>Your Devices</Th>

web/components/dashboard/SendSMS.tsx

@@ -4,6 +4,7 @@ import {
   FormLabel,
   Input,
   Select,
+  SimpleGrid,
   Spinner,
   Textarea,
   useToast,
@@ -113,23 +114,26 @@ export default function SendSMS() {
 
   return (
     <>
-      <Box maxW='xl' mx={'auto'} pt={5} px={{ base: 2, sm: 12, md: 17 }}>
-        <SendSMSForm
-          deviceList={deviceList}
-          formData={formData}
-          handleChange={handleChange}
-        />
+      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: 5, lg: 8 }}>
+        <Box backdropBlur='2xl' borderWidth='0px' borderRadius='lg'>
+          <SendSMSForm
+            deviceList={deviceList}
+            formData={formData}
+            handleChange={handleChange}
+          />
 
-        <Button
-          variant='outline'
-          colorScheme='blue'
-          onClick={handSend}
-          disabled={sendingSMS}
-          marginTop={3}
-        >
-          {sendingSMS ? <Spinner size='md' /> : 'Send'}
-        </Button>
-      </Box>
+          <Button
+            variant='outline'
+            colorScheme='blue'
+            onClick={handSend}
+            disabled={sendingSMS}
+            marginTop={3}
+          >
+            {sendingSMS ? <Spinner size='md' /> : 'Send'}
+          </Button>
+        </Box>
+        <Box backdropBlur='2xl' borderWidth='0px' borderRadius='lg'></Box>
+      </SimpleGrid>
     </>
   )
 }

web/pages/dashboard.tsx

@@ -1,6 +1,5 @@
 import {
   Box,
-  SimpleGrid,
   Tab,
   TabList,
   TabPanel,
@@ -8,17 +7,15 @@ import {
   Tabs,
   useToast,
 } from '@chakra-ui/react'
-import ApiKeyList from '../components/dashboard/ApiKeyList'
 import UserStats from '../components/dashboard/UserStats'
-import GenerateApiKey from '../components/dashboard/GenerateApiKey'
-import DeviceList from '../components/dashboard/DeviceList'
 import { useSelector } from 'react-redux'
 import { selectAuthUser } from '../store/authSlice'
 import Router from 'next/router'
 import { useEffect, useState } from 'react'
 import SendSMS from '../components/dashboard/SendSMS'
-import ErrorBoundary from '../components/ErrorBoundary'
 import dynamic from 'next/dynamic'
+import ReceiveSMS from '../components/dashboard/ReceiveSMS'
+import APIKeyAndDevices from '../components/dashboard/APIKeyAndDevices'
 
 export default function Dashboard() {
   const NoSSRAnimatedWrapper = dynamic(
@@ -52,7 +49,7 @@ export default function Dashboard() {
 }
 
 const DashboardTabView = () => {
-  const [tabIndex, setTabIndex] = useState(1)
+  const [tabIndex, setTabIndex] = useState(0)
   return (
     <Box maxW='7xl' mx={'auto'} pt={5} px={{ base: 2, sm: 12, md: 17 }}>
       <Tabs isLazy={false} index={tabIndex} onChange={setTabIndex}>
@@ -63,41 +60,18 @@ const DashboardTabView = () => {
           <Tab>Receive SMS</Tab>
         </TabList>
         <TabPanels>
-          {/* <TabPanel>
-      Get Started
-    </TabPanel> */}
+          {/* <TabPanel>Get Started</TabPanel> */}
           <TabPanel>
             <APIKeyAndDevices />
           </TabPanel>
           <TabPanel>
             <SendSMS />
           </TabPanel>
-          <TabPanel>Receive SMS</TabPanel>
+          <TabPanel>
+            <ReceiveSMS />
+          </TabPanel>
         </TabPanels>
       </Tabs>
     </Box>
   )
 }
-
-const APIKeyAndDevices = () => {
-  return (
-    <Box maxW='7xl' mx={'auto'} pt={5} px={{ base: 2, sm: 12, md: 17 }}>
-      <Box maxW='xl' mx={'auto'} pt={5} px={{ base: 2, sm: 12, md: 17 }}>
-        <GenerateApiKey />
-      </Box>
-      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: 5, lg: 8 }}>
-        <Box backdropBlur='2xl' borderWidth='0px' borderRadius='lg'>
-          <ErrorBoundary>
-            <ApiKeyList />
-          </ErrorBoundary>
-        </Box>
-        <Box backdropBlur='2xl' borderWidth='0px' borderRadius='lg'>
-          {/* <SendSMS /> */}
-          <ErrorBoundary>
-            <DeviceList />
-          </ErrorBoundary>
-        </Box>
-      </SimpleGrid>
-    </Box>
-  )
-}