Add new icon and styles.

cenksari · Nov 24, 2024 · 8582ab5 · 8582ab5
1 parent f825d88
commit 8582ab5
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 15 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/site.css b/public/site.css
@@ -144,6 +144,7 @@ button,
 .readonly-input {
   border: none;
   border-radius: 0;
+  appearance: none;
   vertical-align: middle;
   -webkit-appearance: none;
   transition: all 0.5s ease;
@@ -1101,8 +1102,7 @@ header .header-right .header-user .signout i {
 }
 
 .trade-history-row table td {
-  font-size: 0.9em;
-  font-weight: 500;
+  font-size: 0.8em;
   padding-bottom: 20px;
 }
 
@@ -1389,9 +1389,8 @@ header .header-right .header-user .signout i {
 }
 
 .orders-row table td {
-  font-size: 0.9em;
-  font-weight: 500;
   padding: 10px;
+  font-size: 0.8em;
 }
 
 .orders-row .white {

diff --git a/src/components/Widgets/Limits/LimitsRow.tsx b/src/components/Widgets/Limits/LimitsRow.tsx
@@ -8,7 +8,7 @@ interface IProps {
 
 const LimitsRow = ({ item }: IProps): JSX.Element => (
   <div className='limits-row flex flex-center flex-space-between no-select'>
-    <div>
+    <div className='flex flex-v-center'>
       <div className='icon cover' style={{ backgroundImage: `url('${item.icon}')` }} />
       <strong>{item.currency}</strong>
     </div>

diff --git a/src/components/Widgets/TradeHistory/TradeHistory.tsx b/src/components/Widgets/TradeHistory/TradeHistory.tsx
@@ -1,6 +1,7 @@
-import { useState, useEffect } from 'react';
+import { useRef, useState, useEffect } from 'react';
 
-import { Link } from 'react-router-dom';
+// hooks
+import useClickOutside from '../../../hooks/useClickOutside';
 
 // components
 import Box from '../../Common/Box';
@@ -93,18 +94,59 @@ const dataArray: IHistory[] = [
 ];
 
 const TradeHistory = (): JSX.Element => {
+  const ref = useRef<any>(null);
+
   const [data, setData] = useState<IHistory[]>([]);
+  const [menuOpened, setMenuOpened] = useState<boolean>(false);
+
+  useClickOutside(ref, () => setMenuOpened(false));
 
   useEffect(() => {
     setData(dataArray);
   }, []);
 
+  /**
+   * Toggles the state of the menu to open or close.
+   */
+  const handleMenuOpen = (): void => {
+    setMenuOpened(!menuOpened);
+  };
+
   return (
     <Box>
       <div className='box-title box-vertical-padding box-horizontal-padding no-select'>
-        Piyasa geçmişi
+        <div ref={ref} className='flex flex-center flex-space-between'>
+          Piyasa geçmişi
+          <button type='button' className='box-icon pointer' onClick={() => handleMenuOpen()}>
+            <i className='material-icons'>more_vert</i>
+          </button>
+          {menuOpened && (
+            <div className='box-dropdown'>
+              <ul>
+                <li>
+                  <button type='button'>
+                    <i className='material-icons'>settings</i>
+                    Button 1
+                  </button>
+                </li>
+                <li>
+                  <button type='button'>
+                    <i className='material-icons'>favorite</i>
+                    Button 2
+                  </button>
+                </li>
+                <li>
+                  <button type='button'>
+                    <i className='material-icons'>info</i>
+                    Button 3
+                  </button>
+                </li>
+              </ul>
+            </div>
+          )}
+        </div>
       </div>
-      <div className='box-content box-content-height'>
+      <div className='box-content box-content-height-nobutton'>
         <div className='trade-history-row'>
           {data && data.length > 0 && (
             <table>
@@ -125,12 +167,6 @@ const TradeHistory = (): JSX.Element => {
           )}
         </div>
       </div>
-      <div className='box-button box-vertical-padding box-horizontal-padding'>
-        <Link to='/market' className='button button-purple button-medium button-block'>
-          Daha fazla
-          <i className='material-icons button-icon-right'>chevron_right</i>
-        </Link>
-      </div>
     </Box>
   );
 };