update UI

chenxilll · Apr 19, 2024 · 37b1565 · 37b1565
1 parent d38260a
commit 37b1565
Show file tree

Hide file tree

Showing 2 changed files with 119 additions and 25 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,6 +1,10 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
 .App {
   color: black;
   text-align: center;
+  max-width: 800px; 
+  margin: 0 auto; 
 }
 
 .container {
@@ -58,4 +62,78 @@
 
 .tab-item button:active {
   background-color: #004085;
-}
+}
+
+.threshold-buttons-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px; 
+  margin-bottom: 20px; 
+}
+
+.threshold-button {
+  padding: 10px 20px;
+  margin-right: 10px; 
+  margin-bottom: 10px; 
+  border: none;
+  border-radius: 20px;
+  background-color: #fff;
+  color: #333;
+  font-size: 16px;
+  cursor: pointer;
+  outline: none;
+  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.threshold-button:hover {
+  background-color: #f0f0f0; 
+}
+
+.threshold-button.selected {
+  background-color: #007bff; 
+  color: #fff; 
+}
+
+.header {
+  display: flex;
+  justify-content: center; 
+  align-items: center; 
+  padding: 1rem;
+  background-color: #eceff1; 
+}
+
+.logo-image {
+  width: 150px; 
+  height: auto;
+  margin-bottom: 1rem; 
+}
+
+.logo-text {
+  font-family: 'Roboto', sans-serif; 
+  font-size: 40px;
+  color: #333;
+  margin-right: 8px; 
+  text-shadow: 2px 2px 4px rgba(0,0,0,0.2); 
+}
+
+.logo-svg {
+  width: 50px;
+  height: auto;
+  vertical-align: middle; 
+  margin-bottom: 4px; 
+}
+
+.logo-container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  border-radius: 20px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  background: white; 
+  cursor: pointer;
+  margin-bottom: 20px; 
+  margin-top: 20px; 
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -11,6 +11,12 @@ function App() {
   const [fullTabsByCategory, setFullTabsByCategory] = useState<{ [key: string]: Tab[] }>({});
   const [selectedThresholds, setSelectedThresholds] = useState<number[]>([0,1,2,3,4]);
 
+  const [isSwitchOn, setIsSwitchOn] = useState(false);
+
+  const toggleSwitch = () => {
+    setIsSwitchOn(!isSwitchOn);
+  };
+
   // Define the list of thresholds and their corresponding category names
   const thresholds = [
     { threshold: 7, category: 'Over a week' },
@@ -117,31 +123,41 @@ const handleDeleteTab = (id: number) => {
     setSelectedThresholds(updatedThresholds);
   };
 
-  return (
-    <div className="App">
-      <h1>TabsOFF</h1>
-      <div>
-        {thresholds.map((threshold, index) => (
-          <div key={index}>
-            <input
-              type="checkbox"
-              checked={selectedThresholds.includes(index)}
-              onChange={() => handleThresholdToggle(index)}
-            />
-            <label>{threshold.category}</label>
-          </div>
-        ))}
-        {Object.keys(tabsByCategory).map(category => (
-          <TabsList
-            key={category}
-            title={category}
-            tabs={tabsByCategory[category]}
-            onDeleteTab={handleDeleteTab}
-          />
-        ))}
-      </div>
+return (
+  <div className="App">
+  <div className="logo-container" onClick={toggleSwitch}>
+    <span className="logo-text">Tabs</span>
+    <svg className="logo-svg" viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+          <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+            <feDropShadow dx="0" dy="4" stdDeviation="3" floodColor="#000000" floodOpacity="0.3"/>
+          </filter>
+        </defs>
+    <rect x="0" y="25" width="60" height="30" rx="15" fill={isSwitchOn ? "#4CAF50" : "#f44336"}/>
+    <circle cx={isSwitchOn ? "45" : "15"} cy="40" r="12" fill="#FFF"/> 
+    </svg>
+  </div>
+    <div>
+      {thresholds.map((threshold, index) => (
+        <button
+          key={index}
+          className={selectedThresholds.includes(index) ? 'threshold-button selected' : 'threshold-button'}
+          onClick={() => handleThresholdToggle(index)}
+        >
+          {threshold.category}
+        </button>
+      ))}
+      {Object.keys(tabsByCategory).map(category => (
+        <TabsList
+          key={category}
+          title={category}
+          tabs={tabsByCategory[category]}
+          onDeleteTab={handleDeleteTab}
+        />
+      ))}
     </div>
-  );
+  </div>
+);
 }
 
 export default App;