Merge pull request #4183 from tncoskun/timeframe-move-to-top-chart

timeframe section moved to top of chart for mobile
CrocSwap · Oct 1, 2024 · 4447130 · 4447130
2 parents 75e0c1a + 416f2ec
commit 4447130
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 13 deletions.
diff --git a/src/pages/Chart/ChartTooltip/ChartTooltipStyles.ts b/src/pages/Chart/ChartTooltip/ChartTooltipStyles.ts
@@ -10,7 +10,7 @@ const ChartTooltipDiv = styled.div<{
     align-items: center;
     position: fixed;
 
-    margin-top: -24px;
+    margin-top: -15px;
     margin-left: ${({ isFuta }) => (isFuta ? '7px' : '10px')};
 
     p {
@@ -27,7 +27,7 @@ const ChartTooltipDiv = styled.div<{
             isToolbarOpen ? '38px' : '12px'};
 
         p {
-            margin-left: 2px;
+            margin-left: 5px;
             max-width: 1000px;
         }
     }
@@ -50,12 +50,12 @@ const CurrentDataDiv = styled.div<{
 
     color: var(--text2);
     min-height: 30px;
-    padding-left: ${({ isFuta }) => (isFuta ? '0px' : '4px')};
-    margin-top: 5px;
+    margin-top: 0px;
 
     @media screen and (min-width: 768px) {
         font-size: var(--body-size);
         flex-direction: row;
+        margin-top: 5px;
     }
 `;
 

diff --git a/src/pages/platformAmbient/Trade/Trade.tsx b/src/pages/platformAmbient/Trade/Trade.tsx
@@ -50,6 +50,7 @@ import TableInfo from '../../../components/Trade/TableInfo/TableInfo';
 import { useModal } from '../../../components/Global/Modal/useModal';
 import { LuSettings } from 'react-icons/lu';
 import TradeCharts from './TradeCharts/TradeCharts';
+import TimeFrame from './TradeCharts/TradeChartsComponents/TimeFrame';
 
 const TRADE_CHART_MIN_HEIGHT = 175;
 
@@ -328,16 +329,28 @@ function Trade(props: { futaActiveTab?: string | undefined }) {
                         {poolPriceChangeString}
                     </p>
                 </div>
-                {(isFuta
-                    ? futaActiveTab === 'Chart'
-                    : activeTab === 'Chart') && (
+            </div>
+
+            {(isFuta ? futaActiveTab === 'Chart' : activeTab === 'Chart') && (
+                <FlexContainer
+                    style={{
+                        justifyContent: 'space-between',
+                        padding: '0px 1rem 1rem 0.5rem',
+                    }}
+                >
+                    <div className={styles.mobile_settings_row}>
+                        <TimeFrame
+                            candleTime={chartSettings.candleTime.global}
+                        />
+                    </div>
+
                     <LuSettings
                         size={20}
                         onClick={openMobileSettingsModal}
                         color='var(--text2)'
                     />
-                )}
-            </div>
+                </FlexContainer>
+            )}
             <div style={{ height: `${contentHeight}px`, overflowY: 'scroll' }}>
                 {activeTabData}
             </div>

diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.tsx
@@ -273,10 +273,12 @@ function TradeCharts(props: propsIF) {
 
     const timeFrameContentDesktop = (
         <section className={styles.time_frame_container}>
-            <div className={styles.mobile_settings_row}>
-                <p className={styles.mobile_settings_header}>Time Frame:</p>
-                <TimeFrame candleTime={chartSettings.candleTime.global} />
-            </div>
+            {!isMobileSettingsModalOpen && (
+                <div className={styles.mobile_settings_row}>
+                    <p className={styles.mobile_settings_header}>Time Frame:</p>
+                    <TimeFrame candleTime={chartSettings.candleTime.global} />
+                </div>
+            )}
             <div className={styles.mobile_settings_row}>
                 <p className={styles.mobile_settings_header}>Volume:</p>