minor style fixes

001elijah · Apr 28, 2023 · c41ac22 · c41ac22
1 parent 6d67947
commit c41ac22
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 39 deletions.
diff --git a/src/components/DateInput/DateInput.module.scss b/src/components/DateInput/DateInput.module.scss
@@ -35,7 +35,7 @@
   border-radius: 16px;
   border: none;
 
-  font-family: 'Lato';
+  font-family: 'Lato-Regular';
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
@@ -71,7 +71,7 @@
   margin-right: auto;
   height: 60px;
   background: none;
-  font-family: 'Lato';
+  font-family: 'Lato-Regular';
   font-style: normal;
   font-weight: 700;
   font-size: 16px;
@@ -85,6 +85,12 @@
   padding: 6px 18px;
   margin: 0;
   width: 57px;
+
+  font-family: 'Lato-Regular';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 19px;
 }
 
 :global .react-datepicker__month-container {

diff --git a/src/components/StatisticsComponents/CategoryBoard/CategoryBoard.jsx b/src/components/StatisticsComponents/CategoryBoard/CategoryBoard.jsx
@@ -4,7 +4,7 @@ import { Calendar } from '../../DateInput/DateInput';
 import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { getCashflowStat } from '../../../redux/operations/cashflowOperations';
-import shortid from 'shortid';
+// import shortid from 'shortid';
 // import {Notify} from "notiflix"
 
 export const Item = ({ id, amount, category, percentage }) => {
@@ -31,11 +31,11 @@ export const CategoriesList = () => {
       setTransactionData(data.payload);
     });
   }, [dateFilter, dispatch]);
-console.log('cat', transactionData)
+// console.log('cat', transactionData)
   if (transactionData?.length === 0) return;
 
   return (
-    <div className={s.background_img}>
+    // <div className={s.background_img}>
       <div className={s.container}>
         <div className={s.wrapper}>
           <Calendar onDate={setDateFilter} />
@@ -48,6 +48,6 @@ console.log('cat', transactionData)
           </ul>
         </div>
       </div>
-    </div>
+    // </div>
   );
 };
diff --git a/src/components/StatisticsComponents/CategoryBoard/CategoryBoard.module.scss b/src/components/StatisticsComponents/CategoryBoard/CategoryBoard.module.scss
@@ -3,17 +3,32 @@
 
 .container {
   @include container;
-}
-.background_img{
-  @include tablet{
-    background-image: url(../../../assets/img/bg-tablet.png);
-    background-size: contain
-  }
-  @include desktop{
-  background-image: url(../../../assets/img/bg-desktop.png);
-  background-size: contain
+
+  @include tablet {
+    background-image: url('../../../assets/img/bg-tablet.png');
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-position: bottom;
+    height: calc(100vh - 72px);
   }
-}
+
+  @include desktop {
+    background-image: url('../../../assets/img/bg-desktop.png');
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-position: bottom;
+  }
+}
+// .background_img{
+//   @include tablet{
+//     background-image: url(../../../assets/img/bg-tablet.png);
+//     background-size: contain
+//   }
+//   @include desktop{
+//   background-image: url(../../../assets/img/bg-desktop.png);
+//   background-size: contain
+//   }
+// }
 .wrapper{
   position: relative;
   position: relative;
@@ -197,9 +212,9 @@
     overflow-y: scroll;
   }
 }
-.expense_block::-webkit-scrollbar {
-  width: 2px;               /* ширина всей полосы прокрутки */
-}
+// .expense_block::-webkit-scrollbar {
+//   width: 2px;               /* ширина всей полосы прокрутки */
+// }
 .error_mes{
   padding-top: 30px;
   text-align: center;

diff --git a/src/components/StatisticsComponents/ExpensesBoard/ExpensesBoard.jsx b/src/components/StatisticsComponents/ExpensesBoard/ExpensesBoard.jsx
@@ -26,14 +26,14 @@ export const ExpensesList = () => {
     });
   }, [dateFilter, dispatch, popupActive]);
 
-  console.log('on board', transactionData);
+  // console.log('on board', transactionData);
 
   if (transactionData?.length === 0) return;
 
-  console.log('board');
+  // console.log('board');
 
   return (
-    <div className={s.background_img}>
+    // <div className={s.background_img}>
       <div className={s.container}>
         <div className={s.wrapper}>
           <Calendar onDate={setDateFilter} />
@@ -63,6 +63,6 @@ export const ExpensesList = () => {
           )}
         </div>
       </div>
-    </div>
+    // </div>
   );
 };
diff --git a/src/components/StatisticsComponents/ExpensesBoard/ExpensesBoard.module.scss b/src/components/StatisticsComponents/ExpensesBoard/ExpensesBoard.module.scss
@@ -1,17 +1,32 @@
 @import 'src/assets/styles/utils/mixins';
 @import 'src/assets/styles/utils/vars';
-.background_img{
-  @include tablet{
-    background-image: url(../../../assets/img/bg-tablet.png);
-    background-size: contain
-  }
-  @include desktop{
-  background-image: url(../../../assets/img/bg-desktop.png);
-  background-size: contain
-  }
-}
+// .background_img{
+//   @include tablet{
+//     background-image: url(../../../assets/img/bg-tablet.png);
+//     background-size: contain
+//   }
+//   @include desktop{
+//   background-image: url(../../../assets/img/bg-desktop.png);
+//   background-size: contain
+//   }
+// }
 .container {
   @include container;
+
+    @include tablet {
+      background-image: url('../../../assets/img/bg-tablet.png');
+      background-repeat: no-repeat;
+      background-size: 100%;
+      background-position: bottom;
+      height: calc(100vh - 72px);
+    }
+
+    @include desktop {
+      background-image: url('../../../assets/img/bg-desktop.png');
+      background-repeat: no-repeat;
+      background-size: 100%;
+      background-position: bottom;
+    }
 }
 .wrapper {
   position: relative;
@@ -192,17 +207,17 @@
 }
 .expense_block {
   @include desktop {
-    height: 420px;
+    max-height: 420px;
     overflow-y: scroll;
   }
   @include tablet {
-    height: 420px;
+    max-height: 420px;
     overflow-y: scroll;
   }
 }
-.expense_block::-webkit-scrollbar {
-  width: 2px;               /* ширина всей полосы прокрутки */
-}
+// .expense_block::-webkit-scrollbar {
+//   width: 2px;               /* ширина всей полосы прокрутки */
+// }
 .error_mes{
   padding-top: 30px;
   text-align: center;

diff --git a/src/index.js b/src/index.js
@@ -19,7 +19,7 @@ import './index.scss';
 ReactDOM.createRoot(document.getElementById('root')).render(
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
-        <BrowserRouter basename='/bc-48-react-project'>
+        <BrowserRouter>
           <App />
         </BrowserRouter>
       </PersistGate>