TogetherCrew · mehdi-torabiv · Dec 3, 2024 · Dec 3, 2024 · Dec 3, 2024 · Dec 3, 2024
diff --git a/index.html b/index.html
@@ -2,9 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>LogID</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.tsx b/src/App.tsx
@@ -2,16 +2,18 @@ import './App.css';
 import '@rainbow-me/rainbowkit/styles.css';
 
 import React from 'react';
-import CssBaseline from '@mui/material/CssBaseline';
-import { ThemeProvider } from '@mui/material/styles';
+import { useMediaQuery } from '@mui/material';
 import {
+  lightTheme,
   RainbowKitAuthenticationProvider,
   RainbowKitProvider,
 } from '@rainbow-me/rainbowkit';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Navigate, Route, Routes } from 'react-router-dom';
-import { sepolia } from 'wagmi/chains';
+import { baseSepolia } from 'viem/chains';
+import { useAccount } from 'wagmi';
 
+import MobileScreensContainer from './components/layouts/MobileScreensContainer';
 import { CustomSnackbar } from './components/shared/CustomSnackbar';
 import useSiweAuth from './hooks/useSiweAuth';
 import DefaultLayout from './layouts/DefaultLayout';
@@ -34,50 +36,62 @@ const queryClient = new QueryClient({
 });
 
 const App: React.FC = () => {
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
+
   const { authStatus, authenticationAdapter } = useSiweAuth();
+  const { chainId } = useAccount();
 
   globalThis.Buffer = Buffer;
 
+  if (isSmallScreen) {
+    return <MobileScreensContainer />;
+  }
+
   return (
     <QueryClientProvider client={queryClient}>
       <RainbowKitAuthenticationProvider
         adapter={authenticationAdapter}
         status={authStatus}
       >
-        <RainbowKitProvider initialChain={sepolia}>
-          <ThemeProvider theme={theme}>
-            <CssBaseline />
-            <Routes>
+        <RainbowKitProvider
+          initialChain={chainId ?? baseSepolia}
+          theme={lightTheme({
+            accentColor: '#4200FF',
+          })}
+          appInfo={{
+            appName: 'LogID',
+          }}
+        >
+          <Routes>
+            <Route
+              path="/auth/login"
+              element={
+                authStatus === 'authenticated' ? (
+                  <Navigate to="/" replace />
+                ) : (
+                  <Login />
+                )
+              }
+            />
+            <Route
+              element={
+                <ProtectedRoute>
+                  <DefaultLayout />
+                </ProtectedRoute>
+              }
+            >
+              <Route path="/" element={<Navigate to="/identifiers" />} />
+              <Route path="/identifiers" element={<Identifiers />} />
               <Route
-                path="/auth/login"
-                element={
-                  authStatus === 'authenticated' ? (
-                    <Navigate to="/" replace />
-                  ) : (
-                    <Login />
-                  )
-                }
+                path="identifiers/:provider/attestation"
+                element={<Attestation />}
               />
-              <Route
-                element={
-                  <ProtectedRoute>
-                    <DefaultLayout />
-                  </ProtectedRoute>
-                }
-              >
-                <Route path="/" element={<Navigate to="/identifiers" />} />
-                <Route path="/identifiers" element={<Identifiers />} />
-                <Route
-                  path="identifiers/:provider/attestation"
-                  element={<Attestation />}
-                />
-                <Route path="/permissions" element={<Permissions />} />
-              </Route>
-              <Route path="/callback" element={<Callback />} />
-              <Route path="*" element={<div>Not found</div>} />
-            </Routes>
-            <CustomSnackbar />
-          </ThemeProvider>
+              <Route path="/permissions" element={<Permissions />} />
+            </Route>
+            <Route path="/callback" element={<Callback />} />
+            <Route path="*" element={<div>Not found</div>} />
+          </Routes>
+          <CustomSnackbar />
         </RainbowKitProvider>
       </RainbowKitAuthenticationProvider>
     </QueryClientProvider>

diff --git a/src/components/layouts/MobileScreensContainer.tsx b/src/components/layouts/MobileScreensContainer.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+
+const MobileScreensContainer: React.FC = () => {
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        color: 'white',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 9999,
+        textAlign: 'center',
+        padding: '20px',
+      }}
+    >
+      <Typography variant="subtitle1" color="primary">
+        We are currently not optimized for mobile devices. Please check back on
+        a desktop or larger screen.
+      </Typography>
+    </Box>
+  );
+};
+
+export default MobileScreensContainer;
diff --git a/src/components/layouts/SidebarApp.spec.tsx b/src/components/layouts/SidebarApp.spec.tsx
@@ -34,7 +34,7 @@ describe('SidebarApp', () => {
     const drawer = screen.getByTestId('drawer_app');
     expect(drawer).toBeInTheDocument();
 
-    const logo = screen.getByText('LOGO');
+    const logo = screen.getByText('LogID');
     expect(logo).toBeInTheDocument();
 
     SIDEBAR_MENU.forEach((item) => {

diff --git a/src/components/layouts/SidebarApp.tsx b/src/components/layouts/SidebarApp.tsx
@@ -12,6 +12,7 @@ import {
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { DRAWER_WIDTH, SIDEBAR_MENU } from '../../libs/constants';
+import theme from '../../libs/theme';
 
 function SidebarApp() {
   const navigate = useNavigate();
@@ -41,23 +42,64 @@ function SidebarApp() {
             }}
           >
             <Typography variant="h6" fontWeight="bold">
-              LOGO
+              LogID
             </Typography>
           </Box>
         </Toolbar>
         <Divider />
-        <List>
+        <List sx={{ padding: 2 }}>
+          {' '}
           {SIDEBAR_MENU.map((item) => (
             <ListItemButton
               key={item.title}
-              sx={{ display: 'flex', justifyContent: 'center', gap: 1 }}
-              selected={item.path === pathname}
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                gap: 1,
+                mt: 1,
+                padding: '8px 16px',
+                borderRadius: 2,
+                backgroundColor:
+                  item.path === pathname
+                    ? theme.palette.primary.main
+                    : 'transparent',
+                color:
+                  item.path === pathname
+                    ? theme.palette.primary.contrastText
+                    : theme.palette.text.primary,
+                '&:hover': {
+                  backgroundColor:
+                    item.path === pathname
+                      ? theme.palette.primary.main // Keep the same background for selected item
+                      : theme.palette.action.hover,
+                },
+                '&.Mui-selected': {
+                  backgroundColor: `${theme.palette.primary.main} !important`,
+                  color: theme.palette.primary.contrastText,
+                  '&:hover': {
+                    backgroundColor: `${theme.palette.primary.main} !important`, // Prevent hover effect from altering the background
+                  },
+                },
+              }}
               onClick={() => navigate(item.path)}
             >
-              <ListItemIcon sx={{ minWidth: 'auto' }}>
+              <ListItemIcon
+                sx={{
+                  minWidth: 'auto',
+                  color:
+                    item.path === pathname
+                      ? theme.palette.primary.contrastText
+                      : theme.palette.text.primary,
+                }}
+              >
                 <item.icon />
               </ListItemIcon>
-              <ListItemText>{item.title}</ListItemText>
+              <ListItemText
+                primary={item.title}
+                sx={{
+                  color: 'inherit',
+                }}
+              />
             </ListItemButton>
           ))}
         </List>

diff --git a/src/components/shared/CustomTable.tsx b/src/components/shared/CustomTable.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/no-array-index-key */
 import {
   Avatar,
   Card,
@@ -85,9 +86,9 @@ const CustomTable: React.FC<CustomTableProps<AccessData>> = ({
             ([applicationName, applications], rowIndex) => (
               <TableRow component={Card} key={rowIndex}>
                 <TableCell align="center" sx={{ padding: 1 }}>
-                  <div className="flex flex-col items-center justify-center text-center mx-auto space-y-2">
+                  <div className="flex flex-row items-center justify-center text-center mx-auto space-x-3">
                     <Avatar />
-                    <Typography>{applicationName}</Typography>
+                    <Typography>{capitalize(applicationName)}</Typography>
                   </div>
                 </TableCell>
                 {xcolumns.map((platform, colIndex) => {

diff --git a/src/index.css b/src/index.css
@@ -46,5 +46,7 @@
 
 *,
 body {
-  font-family: Inter;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
 }
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,13 +1,16 @@
 import './index.css';
 
 import React from 'react';
+import { ThemeProvider } from '@emotion/react';
+import { CssBaseline } from '@mui/material';
 import { getDefaultConfig } from '@rainbow-me/rainbowkit';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { baseSepolia, optimismSepolia } from 'viem/chains';
 import { http, WagmiProvider } from 'wagmi';
 
 import App from './App';
+import theme from './libs/theme';
 
 if (!import.meta.env.VITE_PROJECT_ID) {
   throw new Error('VITE_PROJECT_ID environment variable is required');
@@ -31,7 +34,10 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <BrowserRouter>
       <WagmiProvider config={config}>
-        <App />
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <App />
+        </ThemeProvider>
       </WagmiProvider>
     </BrowserRouter>
   </React.StrictMode>

diff --git a/src/pages/Auth/Login/Login.tsx b/src/pages/Auth/Login/Login.tsx
@@ -5,8 +5,8 @@ export function Login() {
   return (
     <div className="h-screen w-full flex">
       <Box className="w-1/4 p-8 flex flex-col justify-center items-center shadow-2xl">
-        <Typography variant="h6" fontWeight="bold" gutterBottom>
-          Welcome to OnChain
+        <Typography variant="h6" fontWeight="bold" gutterBottom color="primary">
+          Welcome to LogID
         </Typography>
         <Typography variant="body1" gutterBottom>
           Please connect your wallet to continue.

diff --git a/src/pages/Identifiers/Attestation/Attestation.tsx b/src/pages/Identifiers/Attestation/Attestation.tsx
@@ -13,7 +13,7 @@ import { AttestPayload } from '../../../interfaces';
 const steps = [
   { label: 'Authenticate' },
   { label: 'Attest' },
-  { label: 'Transact' },
+  { label: 'Complete' },
 ];
 
 export default function Attestation() {
@@ -53,8 +53,8 @@ export default function Attestation() {
       >
         <Alert severity="info" sx={{ mb: 4 }}>
           <AlertTitle>Link Your Social Media Accounts</AlertTitle>
-          Attest your social media accounts by linking them to your wallet
-          address. This allows you to prove ownership over these accounts.
+          Attest the social media accounts you own by linking them to your
+          wallet address. This allows you to prove ownership.
         </Alert>
         <CustomStepper steps={steps} activeStep={activeStep} />
 

diff --git a/src/pages/Permissions/Permissions.tsx b/src/pages/Permissions/Permissions.tsx
@@ -288,7 +288,7 @@ export function Permissions() {
           </Typography>
           <Alert severity="info" sx={{ mb: 2 }}>
             <b>Note</b>: The process of revoking or granting access to
-            applications may take some time.
+            applications may take 1-2 minutes to process.
           </Alert>
           <CustomTable
             xcolumns={providers}