Changed Theme & Need to fix multiple clicking of Update button

arch-linux-gui · Jun 8, 2024 · d3d64e3 · d3d64e3
1 parent e8505cd
commit d3d64e3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -79,7 +79,7 @@ const App: React.FC = () => {
     <div
       className={cn(
         `${
-          isDarkMode ? "bg-gray-900 text-white" : "bg-white text-black"
+          isDarkMode ? "bg-[#090E0E] text-white" : "bg-white text-black"
         } w-[600px] h-[550px]`,
         { "border border-gray-300": !isDarkMode },
         "select-none"

diff --git a/frontend/src/components/CountrySelectionScreen.tsx b/frontend/src/components/CountrySelectionScreen.tsx
@@ -74,7 +74,13 @@ const CountrySelectionScreen: React.FC<{ isDarkMode: boolean }> = ({
   };
 
   return (
-    <div className="p-4 w-[600px] h-[500px] flex flex-col">
+    <div
+      className={
+        isDarkMode
+          ? "p-4 bg-[#090E0E] w-[600px] h-[500px] flex flex-col"
+          : "p-4 w-[600px] h-[500px] flex flex-col"
+      }
+    >
       <h1 className="text-2xl mt-2 mb-4 text-center font-bold">
         Update MirrorList
       </h1>

diff --git a/frontend/src/components/WelcomeScreen.tsx b/frontend/src/components/WelcomeScreen.tsx
@@ -23,9 +23,9 @@ const WelcomeScreen: React.FC<ScreenProps> = ({ goToScreen, isDarkMode }) => {
   const [modalVisible, setModalVisible] = useState<boolean>(false);
   const [modalTitle, setModalTitle] = useState<string>("");
   const [modalMessage, setModalMessage] = useState<string>("");
-  const [loading, setLoading] = useState<boolean>(false);
   const [isInstalled, setIsInstalled] = useState<boolean>(false);
   const [isActiveScreenRes, setIsActiveScreenRes] = useState<boolean>(false);
+  const [isUpdating, setIsUpdating] = useState<boolean>(false);
   const [isActiveInstall, setIsActiveInstall] = useState<boolean>(false);
 
   useEffect(() => {
@@ -47,17 +47,14 @@ const WelcomeScreen: React.FC<ScreenProps> = ({ goToScreen, isDarkMode }) => {
   };
 
   const handleUpdateSystem = async () => {
-    setLoading(true);
+    setIsUpdating(true);
     try {
       await UpdateSystem();
-      setModalTitle("Success");
-      setModalMessage("System updated successfully.");
     } catch (error) {
       setModalTitle("Error");
       setModalMessage("Failed to update the system.");
     } finally {
-      setLoading(false);
-      setModalVisible(true);
+      setIsUpdating(false);
     }
   };
 
@@ -74,7 +71,13 @@ const WelcomeScreen: React.FC<ScreenProps> = ({ goToScreen, isDarkMode }) => {
   };
 
   return (
-    <div className="flex flex-col items-center justify-center h-full space-y-6">
+    <div
+      className={
+        isDarkMode
+          ? "flex bg-[#090E0E] flex-col items-center justify-center h-full space-y-6"
+          : "flex flex-col items-center justify-center h-full space-y-6"
+      }
+    >
       <img src={appicon} width={150} height={150} alt="App Icon" />
       <h1 className="text-4xl font-bold">Welcome to ALG</h1>
       <div className="grid grid-cols-3 gap-4">
@@ -94,11 +97,11 @@ const WelcomeScreen: React.FC<ScreenProps> = ({ goToScreen, isDarkMode }) => {
           <button
             onClick={handleUpdateSystem}
             className={
-              loading
+              isUpdating
                 ? `bg-[#6a45d1] text-white px-4 py-2 rounded opacity-50 cursor-not-allowed button`
                 : `bg-[#6a45d1] text-white px-4 py-2 rounded hover:bg-[#7c53ed] button`
             }
-            disabled={loading}
+            disabled={isUpdating}
           >
             <span>Update System</span>
           </button>