theme incremental improvement

Digital-Defiance · Nov 27, 2024 · d4a3d98 · d4a3d98
1 parent e3caba4
commit d4a3d98
Show file tree

Hide file tree

Showing 17 changed files with 807 additions and 541 deletions.
diff --git a/chili-and-cilantro-react/src/app/app.tsx b/chili-and-cilantro-react/src/app/app.tsx
@@ -1,5 +1,6 @@
 import { Route, Routes } from 'react-router-dom';
 import '../styles.scss';
+import ApiAccess from './components/api-access';
 import ChangePasswordPage from './components/change-password-page';
 import DashboardPage from './components/dashboard-page';
 import ForgotPasswordPage from './components/forgot-password-page';
@@ -19,6 +20,14 @@ function App() {
         <TopMenu />
         <Routes>
           <Route path="/" element={<SplashPage />} />
+          <Route
+            path="/api-access"
+            element={
+              <PrivateRoute>
+                <ApiAccess />
+              </PrivateRoute>
+            }
+          />
           <Route
             path="/change-password"
             element={

diff --git a/chili-and-cilantro-react/src/app/components/api-access.tsx b/chili-and-cilantro-react/src/app/components/api-access.tsx
@@ -1,19 +1,44 @@
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import { Box, Button, styled, TextField, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
 
+const ApiAccessContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: '100vh',
+  backgroundColor: theme.palette.background.default,
+  padding: theme.spacing(3),
+}));
+
+const ApiAccessContent = styled(Box)(({ theme }) => ({
+  maxWidth: '600px',
+  width: '100%',
+  backgroundColor: theme.palette.background.paper,
+  borderRadius: theme.shape.borderRadius,
+  padding: theme.spacing(4),
+  boxShadow: theme.shadows[3],
+}));
+
+const ApiAccessTitle = styled(Typography)(({ theme }) => ({
+  marginBottom: theme.spacing(3),
+  color: theme.palette.primary.main,
+}));
+
 function ApiAccess() {
-  const isLoading = false;
+  const [isLoading, setIsLoading] = useState(true);
   const [token, setToken] = useState<string | null>(null);
 
   useEffect(() => {
-    if (!isLoading) {
-      const token = localStorage.getItem('authToken');
-      if (token) {
-        setToken(token);
-      } else {
-        console.error('Error getting the access token');
-      }
+    const storedToken = localStorage.getItem('authToken');
+    if (storedToken) {
+      setToken(storedToken);
+    } else {
+      console.error('Error getting the access token');
     }
-  }, [isLoading]);
+    setIsLoading(false);
+  }, []);
 
   const copyToClipboard = async () => {
     if (token) {
@@ -27,23 +52,42 @@ function ApiAccess() {
   };
 
   if (isLoading) {
-    return <div>Loading...</div>;
+    return (
+      <ApiAccessContainer>
+        <Typography>Loading...</Typography>
+      </ApiAccessContainer>
+    );
   }
 
-  // if (error !== null) {
-  //   return <div>Error: {error.message}</div>;
-  // }
-
   return (
-    <div>
-      <h1>Your Access Token:</h1>
-      <textarea
-        readOnly
-        value={token || 'Token not available'}
-        style={{ width: '100%', height: '150px' }}
-      ></textarea>
-      <button onClick={copyToClipboard}>Copy to Clipboard</button>
-    </div>
+    <ApiAccessContainer>
+      <ApiAccessContent>
+        <ApiAccessTitle variant="h4" align="center">
+          Your Access Token
+        </ApiAccessTitle>
+        <TextField
+          fullWidth
+          multiline
+          rows={4}
+          value={token || 'Token not available'}
+          InputProps={{
+            readOnly: true,
+          }}
+          variant="outlined"
+          margin="normal"
+        />
+        <Button
+          variant="contained"
+          color="primary"
+          startIcon={<ContentCopyIcon />}
+          onClick={copyToClipboard}
+          fullWidth
+          style={{ marginTop: '16px' }}
+        >
+          Copy to Clipboard
+        </Button>
+      </ApiAccessContent>
+    </ApiAccessContainer>
   );
 }
 

diff --git a/chili-and-cilantro-react/src/app/components/auth.scss b/chili-and-cilantro-react/src/app/components/auth.scss
@@ -1,18 +1,19 @@
-@import '../../styles.scss';
+@use '../../styles' as *;
 
 // Auth container (for login and registration)
 .auth-container {
   max-width: 400px;
   margin: 2rem auto;
   padding: 2rem;
-  background-color: $light-color;
+  background-color: $new-dark;
   border-radius: 8px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  color: $new-gray;
 
   .auth-title {
     text-align: center;
     margin-bottom: 2rem;
-    color: $primary-color;
+    color: $new-lightGreen;
   }
 
   .auth-form {