From ba5d2697c5c6a6aceaac17ac3e80f20e6135260c Mon Sep 17 00:00:00 2001
From: Djalim Simaila <djalim.simaila@etu.univ-amu.fr>
Date: Wed, 3 Apr 2024 14:31:44 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(App.tsx,=20SignIn.tsx,=20S?=
 =?UTF-8?q?ignUp.tsx,=20ClipElementLocal.tsx,=20ClipElementRemote.tsx,=20C?=
 =?UTF-8?q?lipList.tsx,=20ClipView.tsx,=20ClipViewLocal.tsx,=20ClipViewRem?=
 =?UTF-8?q?ote.tsx,=20Auth.tsx,=20Clips.tsx,=20Intro.tsx,=20Settings.tsx):?=
 =?UTF-8?q?=20Improve=20UI/UX=20by=20adding=20responsive=20design=20and=20?=
 =?UTF-8?q?theme=20support=20=F0=9F=94=A7=20refactor(App.tsx,=20SignIn.tsx?=
 =?UTF-8?q?,=20SignUp.tsx,=20ClipElementLocal.tsx,=20ClipElementRemote.tsx?=
 =?UTF-8?q?,=20ClipList.tsx,=20ClipView.tsx,=20ClipViewLocal.tsx,=20ClipVi?=
 =?UTF-8?q?ewRemote.tsx,=20Auth.tsx,=20Clips.tsx,=20Intro.tsx,=20Settings.?=
 =?UTF-8?q?tsx):=20Refactor=20code=20for=20better=20readability=20and=20ma?=
 =?UTF-8?q?intainability=20=F0=9F=94=A5=20remove(ClipElementLocal.tsx,=20C?=
 =?UTF-8?q?lipElementRemote.tsx,=20ClipList.tsx):=20Remove=20unused=20impo?=
 =?UTF-8?q?rts=20and=20props=20=E2=9C=A8=20feat(App.tsx,=20SignIn.tsx,=20S?=
 =?UTF-8?q?ignUp.tsx,=20ClipElementLocal.tsx,=20ClipElementRemote.tsx,=20C?=
 =?UTF-8?q?lipList.tsx,=20ClipView.tsx,=20ClipViewLocal.tsx,=20ClipViewRem?=
 =?UTF-8?q?ote.tsx,=20Auth.tsx,=20Clips.tsx,=20Intro.tsx,=20Settings.tsx,?=
 =?UTF-8?q?=20themes.ts,=20utils.ts):=20Add=20new=20features=20such=20as?=
 =?UTF-8?q?=20theme=20support,=20responsive=20design,=20and=20utility=20fu?=
 =?UTF-8?q?nctions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.tsx                                   |  21 ++-
 src/components/auth/SignIn.tsx            |  27 ++-
 src/components/auth/SignUp.tsx            |  36 ++--
 src/components/clip/ClipElementLocal.tsx  |   3 +-
 src/components/clip/ClipElementRemote.tsx |  15 +-
 src/components/clip/ClipList.tsx          |   3 +-
 src/components/clip/ClipView.tsx          |  51 ++++++
 src/components/clip/ClipViewLocal.tsx     |  17 +-
 src/components/clip/ClipViewRemote.tsx    |  39 +++--
 src/pages/Auth.tsx                        |  13 ++
 src/pages/Clips.tsx                       | 194 ++++++++++++++--------
 src/pages/Intro.tsx                       |  18 +-
 src/pages/Settings.tsx                    |  26 +++
 src/themes.ts                             |  28 ++++
 src/utils.ts                              |  11 ++
 15 files changed, 364 insertions(+), 138 deletions(-)
 create mode 100644 src/components/clip/ClipView.tsx
 create mode 100644 src/themes.ts
 create mode 100644 src/utils.ts

diff --git a/App.tsx b/App.tsx
index 2355343..a6c4a21 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,7 +1,7 @@
 import 'react-native-gesture-handler';
 // ^ le bouge pas ca casse tout ^
 import { useState } from "react";
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { Provider } from 'react-redux';
 import { store } from './src/redux/store';
@@ -11,25 +11,33 @@ import AuthPage from './src/pages/Auth';
 import ClipPage from './src/pages/Clips';
 import IntroPage from './src/pages/Intro';
 import { StatusBar } from 'expo-status-bar';
+import { Material3Dracula, ReactNavigationDracula } from './src/themes';
+import { PixelRatio, useWindowDimensions } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 const Stack = createNativeStackNavigator();
 
+
+
 function App(){
   const [token,setToken] = useState("");
   const [username,setUsername] = useState(""); 
-
+ 
+  const {height,width} = useWindowDimensions();
+  console.log(width);
+  console.log(PixelRatio.get())
+  
   store.subscribe(()=>{
-    console.log("state Changed .w.");
     let newToken = store.getState().user.token; 
     setToken(newToken);
-    console.log(store.getState());
   })
 
   return (
-    <PaperProvider theme={MD3LightTheme}>
+    <PaperProvider theme={Material3Dracula}>
       <ToastProvider>
         <Provider store={store}>
           <StatusBar style="light"/>
-          <NavigationContainer>
+          <SafeAreaProvider>
+          <NavigationContainer theme={ReactNavigationDracula}>
             <Stack.Navigator>
               {
                 token !== "" ? (
@@ -45,6 +53,7 @@ function App(){
               }
             </Stack.Navigator>
           </NavigationContainer>
+          </SafeAreaProvider>
         </Provider>
       </ToastProvider>
     </PaperProvider>
diff --git a/src/components/auth/SignIn.tsx b/src/components/auth/SignIn.tsx
index 21f5c2f..1d39919 100644
--- a/src/components/auth/SignIn.tsx
+++ b/src/components/auth/SignIn.tsx
@@ -1,10 +1,12 @@
 import axios from 'axios';
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, Platform, useWindowDimensions } from 'react-native';
 import { useToast } from "react-native-toast-notifications";
 import { Button, TextInput } from 'react-native-paper';
 import { login } from '../../redux/reducers';
 import { useDispatch } from 'react-redux';
+import { ReactNavigationDracula as t } from '../../themes';
+import { ps } from '../../utils';
 
 export default function SignIn(){
   const [username, setUsername] = React.useState("");
@@ -12,7 +14,8 @@ export default function SignIn(){
   const [token,setToken] = React.useState("");
   const toast = useToast();
   const dispatch = useDispatch();
-  
+  const {height, width} = useWindowDimensions();
+
 
   async function signInFunction(dispatch) { 
     axios.post("https://notifysync.simailadjalim.fr/user",{
@@ -32,16 +35,22 @@ export default function SignIn(){
       });
   }
 
-  return <View style={{
+  return <View style={[{
+        borderRadius:12,
+        height:"100%"
+    },{
           flex:1,
-          margin:10,
+          margin:ps(8),
+          padding:ps(8),
+          paddingTop:ps(8),
           gap:10,
           flexDirection:'column',
           justifyContent:"center",
-          alignItems:"center"
-      }}>
+          alignItems:"center",
+          backgroundColor: width > 600 ? t.colors.card : t.colors.background,
+      }]}>
 
-        <Text style={{ fontWeight: 'bold', fontSize: 30, color:"black" }}>
+        <Text style={{ fontWeight: 'bold', fontSize: 30, color:t.colors.text }}>
           Connexion
         </Text>
         <TextInput 
@@ -50,7 +59,7 @@ export default function SignIn(){
           value={username}  
           onChangeText={setUsername}
           style={{
-            width:"80%"
+        width: 300 
           }}
         />
         <TextInput 
@@ -59,7 +68,7 @@ export default function SignIn(){
           value={password} 
           onChangeText={setPassword} 
           style={{
-            width:"80%"
+            width: 300
           }}
         />
         <Button 
diff --git a/src/components/auth/SignUp.tsx b/src/components/auth/SignUp.tsx
index b735244..3fdbb0d 100644
--- a/src/components/auth/SignUp.tsx
+++ b/src/components/auth/SignUp.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
-import {View, Text } from 'react-native';
+import {View, Text, Platform, useWindowDimensions } from 'react-native';
 import axios from 'axios';
 import { useToast } from "react-native-toast-notifications";
 import { Button, TextInput } from 'react-native-paper';
 import { useDispatch } from 'react-redux';
 import { login } from '../../redux/reducers';
+import { ReactNavigationDracula as t } from '../../themes';
+import { ps } from '../../utils';
 
 export default function SignUp(){
   const [username, setUsername] = React.useState("");
@@ -12,9 +14,10 @@ export default function SignUp(){
   const [confirm, setConfirm] = React.useState("");
   const toast = useToast();
   const dispatch = useDispatch();
+  const {height, width} = useWindowDimensions();
 
   function signUpFunction(dispatch) {
-    
+
     if (confirm != password){
       toast.show("The password and its confirmation are not the same",{
         type:"warning"
@@ -50,14 +53,21 @@ export default function SignUp(){
   }
 
   return (
-      <View style={{flex:1,
-                    gap:10,
-                    margin:10,
-                    justifyContent:"center",
-                    alignItems:"center",
-                    flexDirection:'column'
-      }}>
-        <Text style={{fontWeight: 'bold', fontSize: 30 ,color:"black"}}>
+      <View style={[{
+        borderRadius:12,
+        height:"100%"
+    },{
+          flex:1,
+          margin:ps(8),
+          padding:ps(8),
+          paddingTop:ps(8),
+          gap:10,
+          flexDirection:'column',
+          justifyContent:"center",
+          alignItems:"center",
+          backgroundColor: width > 600 ? t.colors.card : t.colors.background,
+      }]}>
+        <Text style={{fontWeight: 'bold', fontSize: 30 ,color:t.colors.text}}>
           Créer un compte
         </Text>
         <TextInput
@@ -66,7 +76,7 @@ export default function SignUp(){
           value={username}
           onChangeText={setUsername}
           style={{
-            width:"80%"
+            width:300
           }}
         />
         <TextInput
@@ -75,7 +85,7 @@ export default function SignUp(){
           value={password}
           onChangeText={setPassword}
           style={{
-            width:"80%"
+            width:300
           }}
         />
         <TextInput
@@ -84,7 +94,7 @@ export default function SignUp(){
           value={confirm}
           onChangeText={setConfirm}
           style={{
-            width:"80%"
+            width:300
           }}
         />
         <Button mode="contained" onPress={()=>{dispatch(signUpFunction)}}>
diff --git a/src/components/clip/ClipElementLocal.tsx b/src/components/clip/ClipElementLocal.tsx
index 7b8fba5..a9fe410 100644
--- a/src/components/clip/ClipElementLocal.tsx
+++ b/src/components/clip/ClipElementLocal.tsx
@@ -1,7 +1,6 @@
 import axios from 'axios';
 import {View} from 'react-native';
 import IconVector from 'react-native-vector-icons/FontAwesome5';
-import { Store } from 'redux';
 import { useToast } from "react-native-toast-notifications";
 import * as Clipboard from 'expo-clipboard'; 
 import { Avatar, Card, Text } from 'react-native-paper';
@@ -42,7 +41,7 @@ export default function ClipElementLocal({content}:{content: string}){
       }}>
       <Card style={{width:"100%"}} onPress={onCopy}>
         <Card.Title title={content} right={() => 
-          <Button mode="elevated" onPress={() => sendToRemote()} >
+          <Button mode="contained" onPress={() => sendToRemote()} >
             <IconVector name="paper-plane" size={20} color="black"  />
           </Button>
           }
diff --git a/src/components/clip/ClipElementRemote.tsx b/src/components/clip/ClipElementRemote.tsx
index f7bf90e..990cefb 100644
--- a/src/components/clip/ClipElementRemote.tsx
+++ b/src/components/clip/ClipElementRemote.tsx
@@ -1,11 +1,10 @@
 import { View  } from 'react-native';
 import IconVector from 'react-native-vector-icons/FontAwesome5';
-import { Store } from 'redux';
 import * as Clipboard from 'expo-clipboard';
 import { useToast } from "react-native-toast-notifications";
-import { Avatar, Card, Text } from 'react-native-paper';
+import { Card, Text, Button } from 'react-native-paper';
 
-export default function ClipElementRemote({content,timestamp,deviceName,store}:{content:string;timestamp:number,deviceName:string;store: Store}){
+export default function ClipElementRemote({content,timestamp,deviceName}:{content:string;timestamp:number,deviceName:string}){
   const toast = useToast();
 
   function onCopy() {
@@ -18,19 +17,17 @@ export default function ClipElementRemote({content,timestamp,deviceName,store}:{
   const date= new Date(timestamp*1000);
   return( 
   <View style={{flex:1,
-                margin:10,
+                padding:10,
+                width:"100%",
                 flexDirection:'row',
                 justifyContent:'center',
                 alignItems:'center'}}>
-    <Card>
+    <Card style={{width:"100%"}} onPress={onCopy} >
+        <Card.Title title={content}/>
         <Card.Content>
-          <Text variant="titleLarge">{content.length >28 ?content.slice(0,24)+"...":content } </Text>
           <Text variant="bodyMedium">{date.getHours() + ":" + date.getMinutes() + ", "+ date.toDateString()}</Text>
           <Text variant="bodyMedium">{deviceName}</Text>
         </Card.Content>
-        <Card.Actions>
-          <IconVector name="clipboard" size={40} color="black" onPress={() => onCopy()} />
-        </Card.Actions>
     </Card>
   </View>);
 }
diff --git a/src/components/clip/ClipList.tsx b/src/components/clip/ClipList.tsx
index e949a32..0af4df6 100644
--- a/src/components/clip/ClipList.tsx
+++ b/src/components/clip/ClipList.tsx
@@ -9,7 +9,7 @@ export default class ClipList extends React.Component<any, any> {
   }
 
   createClipElementLocal(content: string): JSX.Element {
-    return <ClipElementLocal store={this.props.store} content={content} />;
+    return <ClipElementLocal content={content} />;
   }
 
   createClipElementRemote(
@@ -19,7 +19,6 @@ export default class ClipList extends React.Component<any, any> {
   ): JSX.Element {
     return (
       <ClipElementRemote
-        store={this.props.store}
         content={content}
         deviceName={deviceName}
         timestamp={timestamp}
diff --git a/src/components/clip/ClipView.tsx b/src/components/clip/ClipView.tsx
new file mode 100644
index 0000000..4074683
--- /dev/null
+++ b/src/components/clip/ClipView.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { useWindowDimensions, ScrollView } from "react-native";
+import { Searchbar } from "react-native-paper"
+import ClipViewLocal from "./ClipViewLocal";
+import ClipViewRemote from "./ClipViewRemote";
+import { ps } from "../../utils";
+import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
+
+export default function ClipView(){
+  
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const {height, width} = useWindowDimensions();
+
+  const Tab = createMaterialTopTabNavigator();
+  let layout = ""
+
+  if (width < 600) layout = "compact";
+  else if (width < 1200 ) layout = "medium";
+  else layout = "expanded";
+  return ( <>
+  
+  <Searchbar
+        placeholder="Clipboards"
+        onChangeText={setSearchQuery}
+        value={searchQuery}
+      />
+      {
+        layout == "compact"? (
+          <Tab.Navigator tabBarPosition="bottom">
+            <Tab.Screen name="Local" options={{title: 'local'}}>
+              {() => (
+                <ClipViewLocal/>
+              )}
+            </Tab.Screen>
+            <Tab.Screen name="Remote" options={{title: 'distant'}}>
+              {()=> (
+                <ClipViewRemote/>
+              )}
+            </Tab.Screen>
+          </Tab.Navigator>
+        ):(
+            <ScrollView contentContainerStyle={{flexDirection:"row",justifyContent:"center",height:"100%",padding:ps(30)}}>
+              <ClipViewLocal/>
+              <ClipViewRemote/>
+            </ScrollView>
+          )
+      }
+  </>
+  
+  )
+}
diff --git a/src/components/clip/ClipViewLocal.tsx b/src/components/clip/ClipViewLocal.tsx
index 5f96732..21a3eaf 100644
--- a/src/components/clip/ClipViewLocal.tsx
+++ b/src/components/clip/ClipViewLocal.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
-import {ScrollView, Text} from 'react-native';
+import {ScrollView, View, Text, useWindowDimensions} from 'react-native';
 import { Button } from 'react-native-paper';
 import ClipList from './ClipList';
 import { useDispatch } from 'react-redux';
 import { localAddToList } from '../../redux/reducers';
 import { useToast } from 'react-native-toast-notifications';
 import * as Clipboard from 'expo-clipboard';
-
-
+import { ps } from '../../utils';
 
 export default function ClipViewLocal({}){
   const [clips, setClips] = React.useState([]);
   const dispatch = useDispatch();
   const toast = useToast();
+  const {height,width} = useWindowDimensions();
 
   
   let title = 'Local Clipboard';
@@ -37,8 +37,13 @@ export default function ClipViewLocal({}){
   }
 
   return (
-      <ScrollView>
-        <Button
+    <View style={{
+        width:"100%",
+        height:"100%",
+        flex:1,
+        margin: width > 600 ? ps(10) : 0 
+    }}>
+      <Button
           mode="elevated"
           onPress={() => {
             dispatch(addToLocal);
@@ -46,11 +51,13 @@ export default function ClipViewLocal({}){
         >
           Coller depuis le presse papier
         </Button>
+      <ScrollView>
         <ClipList
           type={"local"}
           clips={clips}
         />
       </ScrollView>
+      </View>
     );
 }
 
diff --git a/src/components/clip/ClipViewRemote.tsx b/src/components/clip/ClipViewRemote.tsx
index 21f24c2..809b9d0 100644
--- a/src/components/clip/ClipViewRemote.tsx
+++ b/src/components/clip/ClipViewRemote.tsx
@@ -1,24 +1,26 @@
 import React from 'react';
 import axios from 'axios';
-import { ScrollView, Text } from 'react-native';
+import { ScrollView,View, Text, useWindowDimensions } from 'react-native';
 import ClipList from './ClipList';
 import { store } from '../../redux/store';
 import { useToast } from 'react-native-toast-notifications';
 import { Button } from 'react-native-paper';
+import { ps } from '../../utils';
 
-
-export default function ClipViewRemote({type} :{type:string} ){
+export default function ClipViewRemote(){
   const [clips,setClips] = React.useState([]);
   const toast = useToast();
 
+  const {height,width} = useWindowDimensions();
+
   function getClips() {
     axios.get("http://notifysync.simailadjalim.fr/clipboard?token="+store.getState().user.token)
-    .then((response,status) => {
-      console.log(response);
-      setClips(Object.values(response["data"]['clipboard']));
-      toast.show("fetched latest clips from remote");
-    })
-    .catch(response =>{
+      .then((response,status) => {
+        console.log(response);
+        setClips(Object.values(response["data"]['clipboard']));
+        toast.show("fetched latest clips from remote");
+      })
+      .catch(response =>{
         console.log(response);
         toast.show("failed to fetch latest clips");
       });
@@ -29,13 +31,18 @@ export default function ClipViewRemote({type} :{type:string} ){
   }
 
   let title = "Remote Clipboard";
-  return <>
-    <ScrollView>
-      <Button mode="elevated" onPress={getClips}>
-        Refresh 
-      </Button>
-      <ClipList type={type} clips={clips} />
+  return <View style={{
+        width:"100%",
+        height:"100%",
+        flex:1,
+        margin: width > 600 ? ps(10) : 0 
+    }}> 
+    <Button mode="elevated" onPress={getClips}>
+      Refresh 
+    </Button>
+    <ScrollView> 
+      <ClipList type="remote" clips={clips} />
     </ScrollView>
-  </>;
+  </View>;
 }
 
diff --git a/src/pages/Auth.tsx b/src/pages/Auth.tsx
index 524996f..a5625b7 100644
--- a/src/pages/Auth.tsx
+++ b/src/pages/Auth.tsx
@@ -1,10 +1,22 @@
+import { Platform, View, useWindowDimensions } from "react-native";
 import SignIn from "../components/auth/SignIn";
 import SignUp from "../components/auth/SignUp";
 
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+import { ps } from "../utils";
 
 export default function AuthPage(){
+  const {height, width} = useWindowDimensions();
+
   const Tab = createMaterialTopTabNavigator();
+  if (width > 700){
+    return (
+    <View style={{flexDirection:"row",justifyContent:"center",alignItems:"center",height:"100%",padding:ps(30)}}>
+      <SignIn/>
+      <SignUp/>
+    </View>
+    );} 
+  else{
   return(
     <Tab.Navigator>
       <Tab.Screen
@@ -19,4 +31,5 @@ export default function AuthPage(){
       />
     </Tab.Navigator>
   );
+  }
 }
diff --git a/src/pages/Clips.tsx b/src/pages/Clips.tsx
index 4e4c036..3a89ace 100644
--- a/src/pages/Clips.tsx
+++ b/src/pages/Clips.tsx
@@ -1,14 +1,15 @@
 import React from "react";
-import ClipViewLocal from "../components/clip/ClipViewLocal";
-import ClipViewRemote from "../components/clip/ClipViewRemote";
 import { Drawer as DrawerLayout } from 'react-native-drawer-layout';
-import { Button, Drawer } from 'react-native-paper';
-import { store } from "../redux/store";
-import { Platform, View,StyleSheet } from "react-native";
+import { Button, Drawer, Searchbar } from 'react-native-paper';
+import { Platform, View,StyleSheet, useWindowDimensions, ScrollView } from "react-native";
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 import { Appbar, Modal, Text, Portal } from 'react-native-paper';
 import { useDispatch } from 'react-redux';
 import { disconnect } from "../redux/reducers";
+import { ps } from "../utils";
+import { ReactNavigationDracula as t } from "../themes";
+import ClipView from "../components/clip/ClipView";
+import Settings from "./Settings";
 
 const styles = StyleSheet.create({
   modal: {
@@ -24,90 +25,137 @@ const styles = StyleSheet.create({
 export default function ClipPage(){
   const [open, setOpen] = React.useState(false);
   const [visible, setVisible] = React.useState(false);
-  const Tab = createMaterialTopTabNavigator();
   const [active, setActive] = React.useState('clips');
   const dispatch = useDispatch()
-  const showModal = () => setVisible(true);
   const hideModal = () => setVisible(false);
   const containerStyle = {backgroundColor: 'white', padding: 20};
-  function signout(){
-    setVisible(true);
-    //dispatch(disconnect());
+  const {height, width} = useWindowDimensions();
+
+  let layout = ""
+
+  if (width < 600) layout = "compact";
+  else if (width < 1200 ) layout = "medium";
+  else layout = "expanded";
+
+
+  let style = {};
+  if (layout == "medium"){
+    style = StyleSheet.create({
+      drawer: {
+        backgroundColor: t.colors.background,
+        width : 100
+      }
+    })
+  } else {
+    style = StyleSheet.create({
+      drawer : {
+        backgroundColor: t.colors.background
+      }
+    })
   }
 
-  return (<>
+  let page;
+  if (active == "clips") page = <ClipView/>;
+  if (active == "notif") page = <ClipView/>;
+  if (active == "settings") page = <Settings/>;
+
+  return (<View style={{
+    width:"100%",
+    height:"100%",
+    paddingTop: Platform.OS == "android" ? 30 : 0  }}>
     <Portal>
-        <Modal 
-          visible={visible} 
-          onDismiss={hideModal} 
-          contentContainerStyle={containerStyle}
-          style={styles.modal}
+      <Modal 
+        visible={visible} 
+        onDismiss={hideModal} 
+        contentContainerStyle={containerStyle}
+        style={styles.modal}
       >
-          <Text>Do you really want to sign out?</Text>
-          <Button mode="contained" onPress={hideModal}>
-            no
-          </Button>
-          <Button mode="contained-tonal" onPress={()=> dispatch(disconnect())}>
-            yes 
-          </Button>
-        </Modal>
-      </Portal>
+        <Text>Do you really want to sign out?</Text>
+        <Button mode="contained" onPress={hideModal}>
+          no
+        </Button>
+        <Button mode="contained-tonal" onPress={()=> dispatch(disconnect())}>
+          yes 
+        </Button>
+      </Modal>
+    </Portal>
     <DrawerLayout
       swipeEdgeWidth={70}
-      drawerType={(Platform.OS == "android" || Platform.OS == "ios") ? "slide":"permanent"}
+      drawerType={layout == "compact" ? "slide":"permanent"}
       open={open}
       onOpen={() => setOpen(true)}
       onClose={() => setOpen(false)}
+      drawerStyle={style.drawer}
       renderDrawerContent={() => {
-        return  <>
-        <Drawer.Section title="Some title">
-          <Drawer.Item
-            label="Clipboards"
-            active={active === 'clips'}
-            onPress={() => setActive('clips')}
-          />
-          <Drawer.Item
-            label="Settings"
-            active={active === 'second'}
-            onPress={() => setActive('second')}
-          />
-        </Drawer.Section>
-        <Drawer.Section>
-          <Drawer.Item
-            label="Sign out"
-            icon="door"
-            active={active === 'third'}
-            onPress={() => signout()}
-          />
-        </Drawer.Section>
-      </>
+        if (layout != "medium"){
+          return  <>
+            <Drawer.Section title=" ">
+              <Drawer.Item
+                icon="clipboard-arrow-down"
+                label="Clipboards"
+                active={active === 'clips'}
+                onPress={() => {
+                  setActive('clips');
+                  setOpen(false)
+                }}
+              />
+              <Drawer.Item
+                icon="cog"
+                label="Settings"
+                active={active === 'settings'}
+                onPress={() => {
+                  setActive('settings');
+                  setOpen(false)
+                }}
+              />
+            </Drawer.Section>
+            <Drawer.Section>
+              <Drawer.Item
+                icon="door"
+                active={active === 'third'}
+                onPress={() => setVisible(true)}
+                label="Sign out"
+              />
+            </Drawer.Section>
+          </>
+        }else{
+          return  <View style={{alignItems:"center", height:"100%"}}>
+            <Drawer.Section>
+              <Drawer.CollapsedItem
+                focusedIcon="clipboard-arrow-down"
+                unfocusedIcon="clipboard-arrow-down-outline"
+                label="Clipboards"
+                active={active === 'clips'}
+                onPress={() => {
+                  setActive('clips');
+                  setOpen(false)
+                }}
+              />
+              <Drawer.CollapsedItem
+                focusedIcon="cog"
+                unfocusedIcon="cog-outline"
+                label="Settings"
+                active={active === 'settings'}
+                onPress={() => {
+                  setActive('settings');
+                  setOpen(false)
+                }}
+              />
+            </Drawer.Section>
+            <Drawer.Section> 
+              <Drawer.CollapsedItem
+                focusedIcon="door-open"
+                unfocusedIcon="door"
+                label="Sign out"
+                onPress={() => setVisible(true)}
+              />
+            </Drawer.Section>
+          </View>
+        }
       }}
     >
-      <Appbar.Header>
-        <Appbar.BackAction onPress={() => {setOpen(true)}} />
-        <Appbar.Content title="Clipboards" />
-      </Appbar.Header>
-      <Tab.Navigator>
-        <Tab.Screen name="Local" options={{title: 'local'}}>
-          {props => (
-            <ClipViewLocal
-              store={store}
-              navigation={props.navigation}
-              type={'local'}
-            />
-          )}
-        </Tab.Screen>
-        <Tab.Screen name="Remote" options={{title: 'distant'}}>
-          {props => (
-            <ClipViewRemote
-              store={store}
-              navigation={props.navigation}
-              type={'remote'}
-            />
-          )}
-        </Tab.Screen>
-      </Tab.Navigator>
+      {page}
     </DrawerLayout>
-  </>
+  </View>
   );
 }
diff --git a/src/pages/Intro.tsx b/src/pages/Intro.tsx
index fa405ab..ce94751 100644
--- a/src/pages/Intro.tsx
+++ b/src/pages/Intro.tsx
@@ -1,11 +1,23 @@
 import { View, Text } from "react-native";
 import { Button } from 'react-native-paper';
+import { ps } from "../utils";
+import { ReactNavigationDracula as t } from "../themes";
 
 export default function IntroPage({navigation}){
   return(
-  <View style={{alignItems:"center",justifyContent:"center",flex:1,margin:10,flexDirection:'column'}}>
-      <Text style={{fontSize:20,color:"black"}}>
-       Holla Benvenido in l'application du turfu 
+  <View style={{
+        alignItems:"center",
+        justifyContent:"center",
+        gap:ps(6),
+        flex:1,
+        margin:ps(16),
+        flexDirection:'column'}}>
+      <Text style={{
+        fontSize:20,
+        textAlign:"center",
+        color: t.colors.text
+      }}>
+       Salut, bienvenue dans ClipSync :) connecte toi pour commencer
       </Text>
       <Button mode="contained" onPress={() => navigation.navigate('SignIn')}>
         Connecte moi le sang
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index e69de29..ee34e81 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -0,0 +1,26 @@
+import { ScrollView } from "react-native";
+import { View, Text } from "react-native";
+import { Button } from 'react-native-paper';
+import { ps } from "../utils";
+import { ReactNavigationDracula as t } from "../themes";
+
+export default function Settings(){
+ 
+return(
+  <View style={{
+        width: "100%",
+        height: "100%",
+        alignItems:"center",
+        justifyContent:"center",
+        gap:ps(6),
+        flex:1,
+        flexDirection:'column'}}>
+      <Text style={{
+        fontSize:20,
+        textAlign:"center",
+        color: t.colors.text
+      }}>
+      Pas encore pret mais on y travaille .w. 
+      </Text>
+    </View>)
+}
diff --git a/src/themes.ts b/src/themes.ts
new file mode 100644
index 0000000..3edf0b1
--- /dev/null
+++ b/src/themes.ts
@@ -0,0 +1,28 @@
+import { MD3DarkTheme, Surface } from 'react-native-paper';
+
+export const Material3Dracula = {
+  ...MD3DarkTheme,
+  // Specify custom property
+  // Specify custom property in nested object
+  colors: {
+    ...MD3DarkTheme.colors,
+    background: '#44475a',
+    surface: '#44475a',
+    elevation: {
+      ...MD3DarkTheme.colors.elevation,
+      level1: "#44475A"
+    }
+  },
+};
+
+export const ReactNavigationDracula = {
+  dark: true,
+  colors: {
+    primary: '#bd93f9',
+    background: '#282a36',
+    card: '#44475a',
+    text: '#F8F8F2',
+    border: '#44475a',
+    notification: 'rgb(255, 69, 58)',
+  },
+};
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 0000000..3c6694b
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,11 @@
+import { PixelRatio,StyleSheet } from "react-native";
+
+export const ps = (lp:number) => PixelRatio.getPixelSizeForLayoutSize(PixelRatio.roundToNearestPixel(lp));
+
+export const style = StyleSheet.create({
+  default : {
+    margin: PixelRatio.getPixelSizeForLayoutSize(8),
+    marginTop : PixelRatio.getPixelSizeForLayoutSize(8),
+    marginLeft : PixelRatio.getPixelSizeForLayoutSize(8)
+  }
+})