From ddddda526c06a3e0121935a78a03cf73a9e4aafb Mon Sep 17 00:00:00 2001
From: HaoXu <87160664+AugustRushG@users.noreply.github.com>
Date: Thu, 3 Nov 2022 14:52:18 +1100
Subject: [PATCH] Complete iphone view

---
 start_page/src/dashBoard/Dashboard.js         |  22 +---
 start_page/src/dashBoard/Information.js       |  24 ++--
 .../src/dashBoard/dashboardcss/Dashboard.css  | 123 ++++++++++++------
 3 files changed, 97 insertions(+), 72 deletions(-)

diff --git a/start_page/src/dashBoard/Dashboard.js b/start_page/src/dashBoard/Dashboard.js
index 6227a95..a0387de 100644
--- a/start_page/src/dashBoard/Dashboard.js
+++ b/start_page/src/dashBoard/Dashboard.js
@@ -508,13 +508,12 @@ const Dashboard = () => {
 
       <Information search={search} setSearch={setSearch} date={date} setDate={setDate} expenditure={expenditure} income={income} setRefresh={setRefresh} setIsloading={setIsloading}/> 
       {
+        !isMobile&& 
       <section id='budgetSection'>
         <Button variant="primary" onClick={()=>setBudgetShow(true)}> Set Budget</Button>
         <h>Your monthly budget</h>
         <h2 className='BudgetMoneyDisplay'>${budget}</h2>
 
-        
-
         <h>You've used {Number(budget_percentage*100).toFixed(2)}% of your monthly budget</h>
         <h><CircularProgressbar value={budget_percentage} maxValue={1} text={`${Number(budget_percentage*100).toFixed(2) }%`} /></h>
      
@@ -564,24 +563,7 @@ const Dashboard = () => {
         </Modal.Body>
       </Modal>
       
-      <Modal show={show} onHide={()=>setShow(false)}>
-        <Modal.Header closeButton>
-          <Modal.Title>Registerion Successful</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>Start enjoying RecordIt Now!</Modal.Body>
-        <Modal.Footer>
-          <Link to='/LogIn'>
-            <Button variant="primary" onClick={()=>setShow(false)}>
-              LogIn
-            </Button>
-          </Link>
-          <Link to='/'>
-            <Button variant="secondary" onClick={()=>setShow(false)}>
-              Back to home
-            </Button>
-          </Link>
-        </Modal.Footer>
-      </Modal>
+     
      
     </>
   )
diff --git a/start_page/src/dashBoard/Information.js b/start_page/src/dashBoard/Information.js
index 00797a7..32aa8f3 100644
--- a/start_page/src/dashBoard/Information.js
+++ b/start_page/src/dashBoard/Information.js
@@ -159,19 +159,25 @@ const negativeMoney=(money)=>{
         <h2 className='ExpenditureDisplay'>
           Expenditure: {!isMobile&&<br/>}{translateMoney(expenditure)}
         </h2>
-        <div className='ExpenseAdd'>Expense</div>
-        <h2 id='addContainer'> 
-          <GrAdd onClick={()=>setExpenseShow(true)} className='addButton'/>
-        </h2> 
-        <div className='IncomeAdd'>Income</div>
-        <h2 id='incomeContainer'> 
-          <GrAdd onClick={()=>setIncomeShow(true)} className='addButton'/>
-        </h2>
+
+        
+        <div className='ExpenseAdd'>Expense
+          <h2 id='addContainer'> 
+            <GrAdd onClick={()=>setExpenseShow(true)} className='addButton'/>
+          </h2> 
+        </div>
+       
+        <div className='IncomeAdd'>Income
+          <h2 id='incomeContainer'> 
+            <GrAdd onClick={()=>setIncomeShow(true)} className='addButton'/>
+          </h2>
+        </div>
+        
          
         
       </div>
       <form className='SearchForm' onSubmit={(e)=>e.preventDefault}>
-        <label htmlFor='search'><FaSearch className='FaSearch' size={25}/></label>
+        {!isMobile&&<label htmlFor='search'><FaSearch className='FaSearch' size={25}/></label>}
         <input id='search' type='text' placeholder='Search Records' value={search} onChange={(e)=>setSearch(e.target.value)} ></input>
       </form>
 
diff --git a/start_page/src/dashBoard/dashboardcss/Dashboard.css b/start_page/src/dashBoard/dashboardcss/Dashboard.css
index 8695feb..9948ff1 100644
--- a/start_page/src/dashBoard/dashboardcss/Dashboard.css
+++ b/start_page/src/dashBoard/dashboardcss/Dashboard.css
@@ -10,7 +10,7 @@
  /* width */
  ::-webkit-scrollbar {
   
-    width: 5px;
+    width: 3px;
   }
   
   /* Track */
@@ -250,6 +250,8 @@
 
     font-size: 1.5vw;
 
+   
+
   
 }
 
@@ -451,17 +453,21 @@
 #addContainer{
     position: absolute;
    
-    left: 47vw;
-    top: 1vh;
+    bottom: 0.5vh;
+    left: 6.5vw;
+ 
     height: 3vh;
     width: 2.5vw;
+    display: inline;
+   
 }
 
 #incomeContainer{
     position: absolute;
    
-    left: 47vw;
-    top: 6vh;
+    left: 5.5vw;
+    bottom: 0.5vh;
+
     height: 3vh;
     width: 2.5vw;
 }
@@ -719,7 +725,8 @@
     }
 }
 
-@media all and (max-width: 450px){
+@media all and (min-device-width: 320px) 
+and (max-device-width: 480px){
   
 
     .TimeDisplay{
@@ -731,7 +738,7 @@
         font-family: 'Allerta Stencil', sans-serif;
         z-index: 10;
     
-        font-size: 5vw;
+        font-size: 4.5vw;
        
     }
     
@@ -747,7 +754,7 @@
         top: 4vh;
         font-family: 'Allerta Stencil', sans-serif;
         
-        font-size: 5vw;
+        font-size: 4.5vw;
        
     }
     
@@ -761,8 +768,7 @@
         top: 7vh;
         font-family: 'Allerta Stencil', sans-serif;
     
-        font-size: 5vw;
-    
+        font-size: 4.5vw;
       
     }
 
@@ -770,9 +776,10 @@
         
         position: absolute;
         
-        left: 28vw;
+        left: 18vw;
        
         height: 2vh;
+        top: -0.2vh;
         
        
     }
@@ -782,42 +789,28 @@
         position: absolute;
         width: 40vw;
         left: 60vw;
-        top: 13vh;
+        top: 15vh;
         display: block;
         
     }
     
     #search{
         
-        width: 80%;
+        width: 100%;
         min-height: 30px;
         font-size: 1rem;
         padding: 0.25rem;
-        border-radius: 0.25rem;
-        top: 7px;
-        right: 0px;
-        outline: none;
-    }
-    
-    .searchForm>label {
-        position: relative;
-        left: -99999px;
-    
-    }
-
-    .FaSearch{
-        position: absolute;
-        top: 4px;
-        right: 0px; 
+        border-radius: 0.2rem;
+      
     }
 
     .PieChartContainer{
        
         position:absolute;
         top: 0vh;
-        left: 0vw;
+        left: 10vw;
         height: 100%;
-        width: 70%;
+        width: 80%;
     }
     
     .PieChartBackGround{
@@ -903,6 +896,7 @@
         width: 20%;
         left: 20%;
         height: 5vh;
+       
     }
     #MoneyContainer{
         position: absolute;
@@ -1030,7 +1024,7 @@
         top: 0vh;
         width: 3vw;
         height: 3vh;
-        left: 79vw;
+        left: 77vw;
     }
     #editContainer{
        
@@ -1038,25 +1032,68 @@
         top: 0vh;
         width: 2.8vw;
         height: 3vh;
-        left: 84vw;
+        left: 82vw;
+    }
+    #receiptContainer{
+        position: absolute;
+        top: 0vh;
+        width: 2.8vw;
+        height: 3vh;
+        left: 86vw;
     }
-
-
 
     #addContainer{
         position: absolute;
-       
-        left: 50vw;
-        top: 2.5vh;
-        height: 5vh;
-        width: 5vw;
+        
+        top: -1vh;
+        left: 15vw;
+     
+        height: 2vh;
+        width: 2.5vw;
     }
     
+    #incomeContainer{
+        position: absolute;
+       
+        left: 12vw;
+       
+        top: -1vh;
+        height: 2vh;
+        width: 2.5vw;
+       
+    }
+
+    .ExpenseAdd{
+        
+        position: absolute;
+        left: 60vw;
+        font-size: 3vw;
+       
+    }
+
+    .IncomeAdd{
+        position: absolute;
+        left: 80vw;
+        font-size: 3vw;
+        top: 1.5vh;
+        
+    }
+
+   
+
+
+
     
   
     
 }
 
+
+
+
+
+
+
 @media all and (max-height:1150px){
 
     .PieChartContainer{
@@ -1075,7 +1112,7 @@
 
 }
 
-@media all and (max-height:950px){
+@media all and (max-height:950px) and (min-width:1000px){
 
     .VerticalBarChartContainer{
         width: 90%;
@@ -1084,7 +1121,7 @@
 
 }
 
-@media all and (max-height:900px){
+@media all and (max-height:900px) and (min-width:1000px){
 
     .PieChartContainer{
         width: 60%;
@@ -1094,7 +1131,7 @@
 }
 
 
-@media all and (max-height:800px){
+@media all and (max-height:800px) and (min-width:1000px){
 
     .PieChartContainer{
         width: 55%;