2

Rider21 · Mar 7, 2024 · 1fa385b · 1fa385b
1 parent 589870d
commit 1fa385b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 27 deletions.
diff --git a/src/screens/WebviewScreen/WebviewScreen.tsx b/src/screens/WebviewScreen/WebviewScreen.tsx
@@ -9,6 +9,7 @@ import { getUserAgent } from '@hooks/persisted/useUserAgent';
 import { resolveUrl } from '@services/plugin/fetch';
 import { storage } from '@plugins/helpers/storage';
 import Appbar from './components/Appbar';
+import Menu from './Menu';
 
 type StorageData = {
   localStorage?: Record<string, any>;
@@ -29,6 +30,7 @@ const WebviewScreen = ({ route, navigation }: WebviewScreenProps) => {
   const [canGoBack, setCanGoBack] = useState(false);
   const [canGoForward, setCanGoForward] = useState(false);
   const [tempData, setTempData] = useState<StorageData>();
+  const [menuVisible, setMenuVisible] = useState(false);
 
   const handleNavigation = (e: WebViewNavigation) => {
     if (!e.loading) {
@@ -80,6 +82,15 @@ const WebviewScreen = ({ route, navigation }: WebviewScreenProps) => {
           navigation.goBack();
         }}
       />
+      {menuVisible ? (
+        <Menu
+          theme={theme}
+          currentUrl={currentUrl}
+          webView={webView}
+          setMenuVisible={setMenuVisible}
+          menuVisible={menuVisible}
+        />
+      ) : null}
       <ProgressBar
         color={theme.primary}
         progress={progress}

diff --git a/src/screens/WebviewScreen/components/Appbar.tsx b/src/screens/WebviewScreen/components/Appbar.tsx
@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
-import { Pressable, View, Text } from 'react-native';
-import { IconButton } from 'react-native-paper';
+import React from 'react';
+import { View, Text } from 'react-native';
+import { IconButtonV2 } from 'react-native-paper';
+import { IconButtonV2 } from '@components/index';
+
 import TextTicker from 'react-native-text-ticker';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import Menu from './Menu';
 
 import { ThemeColors } from '@theme/types';
 
@@ -16,6 +17,7 @@ interface AppbarProps {
   canGoForward: boolean;
   webView: RefObject<WebView>;
   goBack: () => void;
+  setMenuVisible: () => void;
 }
 
 const Appbar: React.FC<AppbarProps> = ({
@@ -27,9 +29,9 @@ const Appbar: React.FC<AppbarProps> = ({
   canGoForward,
   webView,
   goBack,
+  setMenuVisible,
 }) => {
   const { top } = useSafeAreaInsets();
-  const [menuVisible, setMenuVisible] = useState(false);
 
   return (
     <View
@@ -39,11 +41,11 @@ const Appbar: React.FC<AppbarProps> = ({
         flexDirection: 'row',
       }}
     >
-      <IconButton
+      <IconButtonV2
         icon="close"
-        iconColor={theme.onSurface}
+        color={theme.onSurface}
         onPress={goBack}
-        theme={{ colors: { ...theme } }}
+        theme={theme}
       />
       <View style={{ flex: 1, justifyContent: 'center' }}>
         <Text
@@ -59,7 +61,7 @@ const Appbar: React.FC<AppbarProps> = ({
         <TextTicker
           style={{ color: theme.outline, fontSize: 16 }}
           loop
-          scrollSpeed={50}
+          scrollSpeed={45}
           marqueeDelay={1000}
           isInteraction={false}
           disabled={loading}
@@ -71,38 +73,31 @@ const Appbar: React.FC<AppbarProps> = ({
         style={{
           flexDirection: 'row',
           justifyContent: 'flex-end',
+          marginHorizontal: 3,
         }}
       >
-        <IconButton
+        <IconButtonV2
           icon="arrow-left"
-          iconColor={theme.onSurface}
+          color={theme.onSurface}
           disabled={!canGoBack}
           onPress={() => webView.current?.goBack()}
-          theme={{ colors: { ...theme } }}
+          theme={theme}
         />
 
-        <IconButton
+        <IconButtonV2
           icon="arrow-right"
-          iconColor={theme.onSurface}
+          color={theme.onSurface}
           disabled={!canGoForward}
           onPress={() => webView.current?.goForward()}
-          theme={{ colors: { ...theme } }}
+          theme={theme}
         />
-        <IconButton
+
+        <IconButtonV2
           icon="dots-vertical"
-          iconColor={theme.onSurface}
+          color={theme.onSurface}
           onPress={() => setMenuVisible(true)}
-          theme={{ colors: { ...theme } }}
+          theme={theme}
         />
-        {menuVisible ? (
-          <Menu
-            theme={theme}
-            currentUrl={currentUrl}
-            webView={webView}
-            setMenuVisible={setMenuVisible}
-            menuVisible={menuVisible}
-          />
-        ) : null}
       </View>
     </View>
   );