Updated Mirrorlist UI

arch-linux-gui · Jun 16, 2024 · 9a24c35 · 9a24c35
1 parent dbab3c0
commit 9a24c35
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 34 deletions.
diff --git a/build/bin/welcome b/build/bin/welcome
diff --git a/frontend/components.json b/frontend/components.json
@@ -13,4 +13,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,13 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8"/>
-    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-    <title>myproject</title>
-</head>
-<body>
-<div id="root" style="--wails-draggable:drag"></div>
-<script src="./src/main.tsx" type="module"></script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>Welcome</title>
+  </head>
+  <body>
+    <div id="root" style="--wails-draggable: drag"></div>
+    <script src="./src/main.tsx" type="module"></script>
+  </body>
 </html>
-
diff --git a/frontend/src/components/CountrySelectionScreen.tsx b/frontend/src/components/CountrySelectionScreen.tsx
@@ -13,6 +13,7 @@ const CountrySelectionScreen: React.FC<{
   const [sortBy, setSortBy] = useState<string>("age");
   const [maxMirrors, setMaxMirrors] = useState<number>(20);
   const [timeout, setTimeout] = useState<number>(30);
+  const [isSelectOpen, setIsSelectOpen] = useState(false);
   const { addLog, clearLogs, loading, setLoading } = useLogsContext();
 
   useEffect(() => {
@@ -40,6 +41,14 @@ const CountrySelectionScreen: React.FC<{
     "United Kingdom",
   ];
 
+  const handleFocus = () => {
+    setIsSelectOpen(true);
+  };
+
+  const handleBlur = () => {
+    setIsSelectOpen(false);
+  };
+
   const handleCountryChange = (country: string) => {
     setSelectedCountries((prev) =>
       prev.includes(country)
@@ -92,55 +101,90 @@ const CountrySelectionScreen: React.FC<{
           <h2 className="text-xl mb-2">Countries</h2>
           <div className="grid grid-cols-2 gap-2">
             {countries.map((country) => (
-              <label key={country} className="block">
+              <label
+                key={country}
+                className="block flex items-center space-x-2"
+              >
                 <input
                   type="checkbox"
                   value={country}
                   checked={selectedCountries.includes(country)}
                   onChange={() => handleCountryChange(country)}
-                  className="mr-2 p-2"
+                  className={`rounded-lg h-5 w-5 border-2 ${
+                    isDarkMode
+                      ? "custom-checkbox-dark"
+                      : "custom-checkbox-light border-black"
+                  } bg-transparent appearance-none cursor-pointer`}
                 />
-                {country}
+                <span className="">{country}</span>
               </label>
             ))}
           </div>
         </div>
-        <div className="flex flex-col space-y-4">
+        <div className="flex flex-col space-y-6">
           <div className="flex space-x-4">
             <div className="flex-1">
               <h2 className="text-xl mb-2">Protocols</h2>
-              <label className="block mb-2">
+              <label className="block flex items-center space-x-2">
                 <input
                   type="checkbox"
                   checked={includeHttps}
                   onChange={() => setIncludeHttps(!includeHttps)}
-                  className="mr-2"
+                  className={`mr-2 rounded-lg h-5 w-5 border-2 ${
+                    isDarkMode
+                      ? "custom-checkbox-dark"
+                      : "custom-checkbox-light border-black"
+                  } bg-transparent appearance-none cursor-pointer`}
                 />
                 HTTPS
               </label>
-              <label className="block mb-2">
+              <label className="block flex items-center space-x-2 mt-2">
                 <input
                   type="checkbox"
                   checked={includeHttp}
                   onChange={() => setIncludeHttp(!includeHttp)}
-                  className="mr-2"
+                  className={`mr-2 rounded-lg h-5 w-5 border-2 ${
+                    isDarkMode
+                      ? "custom-checkbox-dark"
+                      : "custom-checkbox-light border-black"
+                  } bg-transparent appearance-none cursor-pointer`}
                 />
                 HTTP
               </label>
             </div>
             <div className="flex-1">
               <h2 className="text-xl mb-2">Sort By</h2>
-              <select
-                value={sortBy}
-                onChange={(e) => setSortBy(e.target.value)}
-                className="p-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white text-gray-700"
-              >
-                <option value="rate">Rate</option>
-                <option value="age">Age</option>
-                <option value="country">Country</option>
-                <option value="score">Score</option>
-                <option value="delay">Delay</option>
-              </select>
+              <div className="relative">
+                <select
+                  value={sortBy}
+                  onChange={(e) => setSortBy(e.target.value)}
+                  onFocus={() => setIsSelectOpen(true)}
+                  onBlur={() => setIsSelectOpen(false)}
+                  onMouseDown={() => setIsSelectOpen(true)}
+                  className={`block appearance-none ${
+                    isDarkMode
+                      ? "bg-gray-700 hover:bg-gray-600 text-white"
+                      : "bg-gray-300 hover:bg-gray-400 text-black"
+                  } border border-gray-300 hover:border-gray-400 px-3 py-2 rounded-lg shadow-sm cursor-pointer transition-colors duration-150 ease-in-out`}
+                >
+                  <option value="rate">Rate</option>
+                  <option value="age">Age</option>
+                  <option value="country">Country</option>
+                  <option value="score">Score</option>
+                  <option value="delay">Delay</option>
+                </select>
+                {/* <div className="pointer-events-none absolute inset-y-0 right-[12rem] flex items-center px-2">
+                  <svg
+                    className={`fill-current h-4 w-4 ${
+                      isDarkMode ? "text-white" : "text-gray-700"
+                    } ${isSelectOpen ? "rotate-180" : ""}`}
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                  >
+                    <path d="M5.29289 7.29289C4.90237 7.68342 4.90237 8.31658 5.29289 8.70711L10.2929 13.7071C10.6834 14.0976 11.3166 14.0976 11.7071 13.7071L16.7071 8.70711C17.0976 8.31658 17.0976 7.68342 16.7071 7.29289C16.3166 6.90237 15.6834 6.90237 15.2929 7.29289L11 11.5858L6.70711 7.29289C6.31658 6.90237 5.68342 6.90237 5.29289 7.29289Z" />
+                  </svg>
+                </div> */}
+              </div>
             </div>
           </div>
           <div className="flex space-x-4">
@@ -149,7 +193,9 @@ const CountrySelectionScreen: React.FC<{
               <div className="flex items-center space-x-2">
                 <button
                   onClick={() => setMaxMirrors((prev) => Math.max(prev - 1, 1))}
-                  className="px-2 py-1 border rounded-3xl"
+                  className={`px-2 py-1 border rounded-3xl ${
+                    isDarkMode ? "" : "border-black"
+                  }`}
                 >
                   -
                 </button>
@@ -166,7 +212,9 @@ const CountrySelectionScreen: React.FC<{
                 />
                 <button
                   onClick={() => setMaxMirrors((prev) => prev + 1)}
-                  className="px-2 py-1 border rounded-3xl"
+                  className={`px-2 py-1 border rounded-3xl ${
+                    isDarkMode ? "" : "border-black"
+                  }`}
                 >
                   +
                 </button>
@@ -177,7 +225,9 @@ const CountrySelectionScreen: React.FC<{
               <div className="flex items-center space-x-2">
                 <button
                   onClick={() => setTimeout((prev) => Math.max(prev - 1, 1))}
-                  className="px-2 py-1 border rounded-3xl"
+                  className={`px-2 py-1 border rounded-3xl ${
+                    isDarkMode ? "" : "border-black"
+                  }`}
                 >
                   -
                 </button>
@@ -194,7 +244,9 @@ const CountrySelectionScreen: React.FC<{
                 />
                 <button
                   onClick={() => setTimeout((prev) => prev + 1)}
-                  className="px-2 py-1 border rounded-3xl"
+                  className={`px-2 py-1 border rounded-3xl ${
+                    isDarkMode ? "" : "border-black"
+                  }`}
                 >
                   +
                 </button>

diff --git a/frontend/src/globals.css b/frontend/src/globals.css
@@ -127,3 +127,39 @@ input::-webkit-inner-spin-button {
 input[type="number"] {
   -moz-appearance: textfield;
 }
+
+.custom-checkbox-light:checked {
+  background-color: rgba(255, 255, 255, 0.2);
+  border-color: rgb(0, 0, 0);
+}
+
+.custom-checkbox-light:checked::after {
+  content: "";
+  display: block;
+  width: 0.3em;
+  height: 0.6em;
+  border: solid rgb(0, 0, 0);
+  border-width: 0 0.2em 0.2em 0;
+  transform: rotate(45deg);
+  position: relative;
+  top: 0.2em;
+  left: 0.4em;
+}
+
+.custom-checkbox-dark:checked {
+  background-color: rgba(255, 255, 255, 0.2);
+  border-color: white;
+}
+
+.custom-checkbox-dark:checked::after {
+  content: "";
+  display: block;
+  width: 0.3em;
+  height: 0.6em;
+  border: solid white;
+  border-width: 0 0.2em 0.2em 0;
+  transform: rotate(45deg);
+  position: relative;
+  top: 0.2em;
+  left: 0.4em;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,4 +13,4 @@ @@
         "components": "@/components",
         "utils": "@/lib/utils"
       }
-    }
+    }