📝: Updated the Privacy Policy of StreamETH (#816)

I will need to send this to our lawyer to double check and change the
email of contact.

- [x] Add new `data-request` page

packages/app/app/(legal)/data-request/components/createRequest.tsx

@@ -0,0 +1,58 @@
+'use client';
+import { CardContent } from '@/components/ui/card';
+import { useAccount } from 'wagmi';
+import { Button } from '@/components/ui/button';
+import { LuMail } from 'react-icons/lu';
+
+const CreateRequest = () => {
+  const { address } = useAccount();
+
+  const handleEmailClick = () => {
+    const subject = encodeURIComponent('Request for Personal Data');
+    const body = encodeURIComponent(`Dear StreamETH Support,
+
+I would like to request all my personal data saved by StreamETH.
+
+My login address is: ${address || 'Unknown'}
+
+Please provide me with the following information:
+
+[Please specify what personal data you are requesting]
+
+Thank you for your assistance.
+
+Best regards,
+[Your Name]`);
+
+    window.location.href = `mailto:[email protected]?subject=${subject}&body=${body}`;
+  };
+
+  return (
+    <CardContent className="space-y-4">
+      <h2 className="text-2xl font-bold">Request Your Personal Data</h2>
+      <p className="text-sm text-gray-600">
+        Please click the button below to email [email protected] with your
+        request:
+      </p>
+      <ul className="space-y-2 text-sm list-disc list-inside text-gray-600">
+        <li>
+          Your login address:{' '}
+          <span className="font-mono">{address || 'Not connected'}</span>
+        </li>
+        <li>Specify what personal data you are requesting</li>
+      </ul>
+      <p className="text-sm text-gray-600">
+        We will send an email confirmation that we received your request. We
+        will then follow up with a zip file containing all your personal data
+        saved on StreamETH.
+      </p>
+
+      <Button onClick={handleEmailClick} variant={'primary'} className="w-full">
+        <LuMail size={20} className="mr-2" />
+        Compose Email
+      </Button>
+    </CardContent>
+  );
+};
+
+export default CreateRequest;

packages/app/app/(legal)/data-request/page.tsx

@@ -0,0 +1,38 @@
+'use server';
+
+import { Card, CardTitle, CardFooter } from '@/components/ui/card';
+import Image from 'next/image';
+import Footer from '@/components/Layout/Footer';
+import AuthorizationMessage from '@/components/authorization/AuthorizationMessage';
+import CheckAuthorization from '@/components/authorization/CheckAuthorization';
+import CreateRequest from './components/createRequest';
+
+const DataRequest = async () => {
+  const year = new Date().getFullYear();
+
+  const isAuthorized = await CheckAuthorization();
+  if (!isAuthorized) {
+    return <AuthorizationMessage />;
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <div className="flex flex-grow justify-center items-center">
+        <Card className="flex flex-col justify-between p-5 my-5 w-full max-w-4xl bg-gray-100">
+          <CardTitle className="mb-6 ml-4">
+            <Image
+              src={'/logo.png'}
+              alt={'StreamETH logo'}
+              width={50}
+              height={50}
+            />
+          </CardTitle>
+          <CreateRequest />
+        </Card>
+      </div>
+      <Footer active={'data_request'} />
+    </div>
+  );
+};
+
+export default DataRequest;

packages/app/app/(legal)/privacy/page.tsx

@@ -5,7 +5,7 @@ import Footer from '@/components/Layout/Footer';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
-const Terms = async () => {
+const Privacy = async () => {
   const year = new Date().getFullYear();
   const file = await fs.readFile(
     process.cwd() + '/public/legal/privacy.md',
@@ -40,4 +40,4 @@ const Terms = async () => {
   );
 };
 
-export default Terms;
+export default Privacy;

packages/app/components/Layout/Footer.tsx

@@ -11,10 +11,10 @@ const items = {
   //   item: 'Contact',
   //   href: 'https://info.streameth.org/#team',
   // },
-  // docs: {
-  //   item: 'Docs',
-  //   href: 'https://streameth.notion.site/a473a629420b4942904c851155a18c9b?v=4a29b97e7fd94bbbb38269cb808d3ac4',
-  // },
+  data_request: {
+    item: 'Data Request',
+    href: '/data-request',
+  },
   privacy: {
     item: 'Privacy',
     href: '/privacy',

packages/app/components/ui/Player.tsx

@@ -111,7 +111,7 @@ export function PlayerWithControls(props: {
 
         <Player.ErrorIndicator
           matcher="offline"
-          className="absolute inset-0 flex select-none flex-col items-center justify-center gap-4 bg-black/40 text-center backdrop-blur-lg animate-in fade-in-0 duration-1000 data-[visible=true]:animate-in data-[visible=false]:animate-out data-[visible=false]:fade-out-0 data-[visible=true]:fade-in-0"
+          className="absolute inset-0 flex select-none flex-col items-center justify-center gap-4 bg-black/40 text-center backdrop-blur-lg duration-1000 animate-in fade-in-0 data-[visible=true]:animate-in data-[visible=false]:animate-out data-[visible=false]:fade-out-0 data-[visible=true]:fade-in-0"
         >
           <div className="flex flex-col gap-5">
             <div className="flex flex-col gap-1">