second flow

src/screens/cover/PhotoCover.js

@@ -1,20 +1,21 @@
-import { ActivityIndicator, Text, View } from "react-native";
-import React from "react";
-import MusicLandHeader from "../../components/MusicLandHeader";
-import { background } from "../../assets";
-import Page from "../../layouts/Page";
-import { goBack, navigate } from "../../navigation/NavigationService";
-import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
-import { gutters, Palette, Style } from "../../styles";
-import BorderGradientButton from "../../components/BorderGradientButton";
-import { Routes } from "../../navigation";
-import GradientButton from "../../components/GradientButton";
-import * as ImagePicker from "expo-image-picker";
-import { uploadFileToFirebase } from "../../helpers/uploadToFirebase";
-import { useUserData } from "../../providers/UserDataProvider";
-import useMinuit from "react-native-minuit/src/hooks/useMinuit";
-import firebase, { tasksRef } from "../../config/firebase";
 import { Image as ExpoImage } from "expo-image";
+import * as ImagePicker from "expo-image-picker";
+import React from "react";
+import { ActivityIndicator, Text, View } from "react-native";
+import useMinuit from "react-native-minuit/src/hooks/useMinuit";
+import { background } from "../../assets";
+import BorderGradientButton from "../../components/BorderGradientButton";
+import GradientButton from "../../components/GradientButton";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import firebase, { tasksRef } from "../../config/firebase";
+import { uploadFileToFirebase } from "../../helpers/uploadToFirebase";
+import { isWeb } from "../../hooks/useLayoutType";
+import Page from "../../layouts/Page";
+import { Routes } from "../../navigation";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import { useUserData } from "../../providers/UserDataProvider";
+import { gutters, Palette, Style } from "../../styles";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 
 const PhotoCover = () => {
   const { selectedProject, selectedProjectId, updateProjectData } =
@@ -81,7 +82,12 @@ const PhotoCover = () => {
                 priority="high"
                 contentFit="cover"
                 transition={120}
-                style={{ width: "100%", height: 300, borderRadius: 20 }}
+                style={{
+                  width: isWeb ? 300 : "100%",
+                  height: 300,
+                  borderRadius: 20,
+                  alignSelf: "center",
+                }}
               />
             ) : (
               <View

src/screens/cover/PouchReady.js

@@ -1,26 +1,20 @@
-import {
-  View,
-  Text,
-  Image,
-  ActivityIndicator,
-  Alert,
-  setTimeout,
-} from "react-native";
+import { useIsFocused } from "@react-navigation/native";
 import { Image as ExpoImage } from "expo-image";
 import React, { useEffect } from "react";
-import { useIsFocused } from "@react-navigation/native";
-import Page from "../../layouts/Page";
-import { background, icons, img } from "../../assets";
-import MusicLandHeader from "../../components/MusicLandHeader";
-import { goBack, navigate } from "../../navigation/NavigationService";
-import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
-import { gutters, Palette, Style } from "../../styles";
+import { ActivityIndicator, Alert, Text, View } from "react-native";
+import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
+import { background, icons } from "../../assets";
 import BorderGradientButton from "../../components/BorderGradientButton";
 import GradientButton from "../../components/GradientButton";
-import { Routes } from "../../navigation";
+import MusicLandHeader from "../../components/MusicLandHeader";
 import firebase, { tasksRef } from "../../config/firebase";
+import { isWeb } from "../../hooks/useLayoutType";
+import Page from "../../layouts/Page";
+import { Routes } from "../../navigation";
+import { goBack, navigate } from "../../navigation/NavigationService";
 import { useUser } from "../../providers/UserDataProvider";
-import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
+import { gutters, Palette, Style } from "../../styles";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 
 const PouchReady = () => {
   const { selectedProjectId, selectedProject, updateProjectData } = useUser();
@@ -101,12 +95,17 @@ const PouchReady = () => {
                 priority="high"
                 contentFit="cover"
                 transition={120}
-                style={{ width: "100%", height: 300, borderRadius: 20 }}
+                style={{
+                  width: isWeb ? 300 : "100%",
+                  height: 300,
+                  borderRadius: 20,
+                  alignSelf: "center",
+                }}
               />
             ) : (
               <View
                 style={{
-                  width: "100%",
+                  width: isWeb ? 300 : "100%",
                   height: 300,
                   borderRadius: 20,
                   backgroundColor: "#00000040",

src/screens/cover/ValidateCover.js

@@ -1,16 +1,17 @@
-import { View, Image } from "react-native";
 import React from "react";
-import MusicLandHeader from "../../components/MusicLandHeader";
+import { Image, View } from "react-native";
+import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { background, img } from "../../assets";
-import Page from "../../layouts/Page";
-import { goBack, navigate } from "../../navigation/NavigationService";
-import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
-import { gutters, Style } from "../../styles";
 import BorderGradientButton from "../../components/BorderGradientButton";
 import GradientButton from "../../components/GradientButton";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import { isWeb } from "../../hooks/useLayoutType";
+import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
+import { goBack, navigate } from "../../navigation/NavigationService";
 import { useUserData } from "../../providers/UserDataProvider";
-import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
+import { gutters, Style } from "../../styles";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 
 const ValidateCover = () => {
   const { selectedProject, updateProjectData } = useUserData();
@@ -57,10 +58,11 @@ const ValidateCover = () => {
             <Image
               source={img.placeholder}
               style={{
-                width: "100%",
+                width: isWeb ? 300 : "100%",
                 height: 300,
                 borderRadius: 20,
                 transform: [{ rotateY: "180deg" }],
+                alignSelf: "center",
               }}
             />
             <View
@@ -68,7 +70,12 @@ const ValidateCover = () => {
             >
               <Image
                 source={{ uri: selectedProject?.cover?.result }}
-                style={{ width: "100%", height: "100%", borderRadius: 20 }}
+                style={{
+                  width: isWeb ? 300 : "100%",
+                  height: "100%",
+                  borderRadius: 20,
+                  alignSelf: "center",
+                }}
               />
             </View>
             {/*<View*/}