refactor: better password edit

steveiliop56 · Apr 5, 2024 · b0ecafb · b0ecafb
1 parent a12852b
commit b0ecafb
Show file tree

Hide file tree

Showing 5 changed files with 249 additions and 119 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,16 +17,15 @@
   },
   "dependencies": {
     "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/themes": "^2.0.3",
+    "@radix-ui/themes": "^3.0.0",
     "better-sqlite3": "^9.4.3",
     "drizzle-orm": "^0.30.4",
     "next": "14.1.3",
     "postcss-import": "^16.1.0",
     "react": "^18.2.0",
     "react-dom": "^18",
     "react-toastify": "^10.0.5",
-    "tsx": "^4.7.1",
-    "zod": "^3.22.4"
+    "tsx": "^4.7.1"
   },
   "devDependencies": {
     "@types/better-sqlite3": "^7.6.9",

diff --git a/src/app/components/create-shell-form/create-shell-form.tsx b/src/app/components/create-shell-form/create-shell-form.tsx
@@ -54,18 +54,20 @@ export const CreateShellForm = () => {
           </Select.Content>
         </Select.Root>
 
-        <TextField.Root>
-          <TextField.Input name="name" required placeholder="Enter a name..." />
-        </TextField.Root>
+        <TextField.Root
+          name="name"
+          required
+          placeholder="Enter a name..."
+        ></TextField.Root>
 
-        <TextField.Root>
-          <TextField.Input
-            name="extraArguments"
-            placeholder="Enter extra arguments..."
-          />
-        </TextField.Root>
+        <TextField.Root
+          name="extraArguments"
+          placeholder="Enter extra arguments..."
+        ></TextField.Root>
 
-        <Button type="submit">Get me a shell</Button>
+        <Button type="submit" color="indigo" variant="soft">
+          Get me a shell
+        </Button>
       </Flex>
     </form>
   );

diff --git a/src/app/components/render-shell/render-shell.tsx b/src/app/components/render-shell/render-shell.tsx
@@ -37,11 +37,21 @@ export const renderShell = (shell: containerData) => {
         <Flex className="flex-row gap-1 items-center">
           <SettingsDialog shell={shell} />
           {shell.running ? (
-            <Button onClick={() => handleStopStart()} color="red">
+            <Button
+              onClick={() => handleStopStart()}
+              color="orange"
+              variant="soft"
+            >
               Stop
             </Button>
           ) : (
-            <Button onClick={() => handleStopStart()}>Start</Button>
+            <Button
+              onClick={() => handleStopStart()}
+              color="indigo"
+              variant="soft"
+            >
+              Start
+            </Button>
           )}
         </Flex>
       </Flex>