update mockup

README.md

@@ -2,7 +2,7 @@
 
 _⚠️ the application is still a work in progress, hence, Some features are missing. Please see the [issues](https://github.com/opeolluwa/send-file/issues) page to contribute_
 
-![screenshot](./screenshots/filesync.png)
+![screenshot](./filesync.png)
 
 ## Table of Contents
 

desktop/next.config.js

@@ -7,7 +7,9 @@ const nextConfig = {
   images: {
     unoptimized: true,
   },
-
+  experimental: {
+    externalDir: true,
+  },
 };
 
 module.exports = nextConfig;

mobile/src/App.tsx

@@ -1,4 +1,3 @@
-import { Redirect, Route } from "react-router-dom";
 import {
   IonApp,
   IonIcon,
@@ -11,20 +10,11 @@ import {
 } from "@ionic/react";
 import { IonReactRouter } from "@ionic/react-router";
 import {
-  home,
-  settings,
-  time,
-  homeOutline,
-  settingsOutline,
-  timeOutline,
-  radio,
-  personCircle,
-  scan,
+  home
 } from "ionicons/icons";
+import { Redirect, Route } from "react-router-dom";
 
 import Home from "./pages/Home";
-import History from "./pages/ScanQr";
-import Settings from "./pages/Settings";
 
 /* Core CSS required for Ionic components to work properly */
 import "@ionic/react/css/core.css";
@@ -35,12 +25,12 @@ import "@ionic/react/css/structure.css";
 import "@ionic/react/css/typography.css";
 
 /* Optional CSS utils that can be commented out */
-import "@ionic/react/css/padding.css";
+import "@ionic/react/css/display.css";
+import "@ionic/react/css/flex-utils.css";
 import "@ionic/react/css/float-elements.css";
+import "@ionic/react/css/padding.css";
 import "@ionic/react/css/text-alignment.css";
 import "@ionic/react/css/text-transformation.css";
-import "@ionic/react/css/flex-utils.css";
-import "@ionic/react/css/display.css";
 
 /**
  * Ionic Dark Mode
@@ -60,7 +50,6 @@ import "./theme/variables.css";
 import "./styles/global.css";
 
 import "remixicon/fonts/remixicon.css";
-import TransferHistory from "./pages/TransferHistory";
 import Share from "./pages/Share";
 import SystemInfoStore from "./store/global";
 
@@ -75,17 +64,12 @@ const App: React.FC = () => (
             <Route exact path="/home">
               <Home />
             </Route>
-            <Route exact path="/scan-qr">
-              <History />
-            </Route>
-            <Route path="/settings">
-              <Settings />
-            </Route>
+
+
             <Route path="/share">
               <Share />
             </Route>
             <Route path="/transfer-history">
-              <TransferHistory />
             </Route>
             <Route exact path="/">
               <Redirect to="/home" />
@@ -96,15 +80,6 @@ const App: React.FC = () => (
               <IonIcon aria-hidden="true" icon={home} />
               <IonLabel>Home</IonLabel>
             </IonTabButton>
-            <IonTabButton tab="History" href="/scan-qr">
-              <IonIcon aria-hidden="true" icon={scan} />
-              <IonLabel>Scan QR</IonLabel>
-            </IonTabButton>
-
-            <IonTabButton tab="Settings" href="/transfer-history">
-              <IonIcon aria-hidden="true" icon={time} />
-              <IonLabel>History</IonLabel>
-            </IonTabButton>
           </IonTabBar>
         </IonTabs>
       </IonReactRouter>

mobile/src/pages/Share.tsx

@@ -1,13 +1,12 @@
-import { IonContent, IonPage } from "@ionic/react";
-import Thumbnail from "../components/thumbnail";
-import { File } from "@filesync/types/File";
-import { Card, Heading, View } from "@filesync/components";
+import { Heading, Text, View } from "@filesync/components";
 import { CloudArrowUpIcon } from "@heroicons/react/24/outline";
-import { useContext } from "react";
+import { IonContent, IonPage } from "@ionic/react";
 import type { UploadProps } from "antd";
 import { message, Upload } from "antd";
+import { useContext } from "react";
 import { BASE_URL, SystemInformationContext } from "../store/global";
-
+import { IonFab, IonFabButton, IonIcon } from "@ionic/react";
+import { add, paperPlane } from "ionicons/icons";
 
 export enum FileTransferStatus {
   DOWNLOADING = "downloading",
@@ -20,7 +19,7 @@ export enum FileTransferStatus {
 
 const Share: React.FC = () => {
   const { Dragger } = Upload;
-//   const { onUpdate } = useContext(FileContext);
+  //   const { onUpdate } = useContext(FileContext);
   const { serverBaseUrl } = useContext(SystemInformationContext);
   const serverAddress = BASE_URL + "/upload";
 
@@ -55,7 +54,9 @@ const Share: React.FC = () => {
         // console.log(JSON.stringify(data));
       } else if (status === FileTransferStatus.ERROR) {
         message.error(
-          `${info.file.name} file upload failed. due to ${JSON.stringify(info.file.error)}`
+          `${info.file.name} file upload failed. due to ${JSON.stringify(
+            info.file.error
+          )}`
         );
       }
     },
@@ -68,26 +69,24 @@ const Share: React.FC = () => {
     <>
       <IonPage id="main-content" className="bg-accent">
         <IonContent className="ion-padding">
-          <Dragger className="h-[300px]   block" {...props}>
-            <CloudArrowUpIcon className="text-app-300  text-center small w-20 mx-auto" />
-            <p className="text-gray-400 leading-2">
-              Drop files here to share or click to browse
-            </p>
-          </Dragger>
-
-
-
-          <Card className="flex gap-4 mt-6 hidden">
-            <Card className="w-1/2 rounded-lg bg-app h-[50px] text-white flex gap-2 items-center justify-start">
-              <i className="ri-send-plane-line text-2xl text-white bg-app p-2 rounded-full"></i>
-              <Heading context="Send" className="text-white" />
-            </Card>
+          <View className="h-full w-full flex flex-col justify-center items-center">
+            <Heading className="text-center text-2xl">Share Files</Heading>
+            <Text className="text-gray-400 leading-5">
+              Share files with other devices
+            </Text>
+            <Dragger className="h-[300px]   block mt-2" {...props}>
+              <CloudArrowUpIcon className="text-app-300  text-center small w-20 mx-auto" />
+              <p className="text-gray-400 leading-2">
+                Drop files here to share or click to browse
+              </p>
+            </Dragger>
+          </View>
 
-            <Card className="w-1/2 rounded-lg bg-app h-[50px] text-white flex gap-2 items-center justify-start">
-              <i className="ri-download-cloud-line text-2xl text-white bg-app p-2 rounded-full"></i>
-              <Heading context="Receive" className="text-white" />
-            </Card>
-          </Card>
+          <IonFab vertical="bottom" horizontal="end" className="mr-8 mb-4">
+            <IonFabButton>
+              <IonIcon icon={paperPlane}></IonIcon>
+            </IonFabButton>
+          </IonFab>
         </IonContent>
       </IonPage>
     </>