From b74c8558cf4f0e51e0dbcb8deeb3d6890f1c624e Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Thu, 21 Jul 2022 12:58:05 +0200
Subject: [PATCH] UI: Style text inputs

---
 web/app/src/assets/base.css               | 21 +++++++++++++++++++--
 web/app/src/views/FirstTimeWizardView.vue |  5 -----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 188e1acf..1997237f 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -23,8 +23,9 @@
   --color-button: #bbb;
   --color-button-background: #555;
 
-  --border-width: 2px;
+  --border-color: #555;
   --border-radius: 4px;
+  --border-width: 2px;
 
   --font-family-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   --font-family-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro","Fira Mono", "Droid Sans Mono", "Courier New", monospace;
@@ -309,10 +310,26 @@ dl dd:empty {
   margin-left: var(--spacer-sm)
 }
 
+input[type="text"] {
+  appearance: none;
+  background-color: var(--color-background);
+  border-radius: var(--border-radius);
+  border: var(--border-width) solid var(--border-color);
+  box-sizing: border-box;
+  display: block;
+  padding: var(--spacer-sm);
+  width: 100%;
+  outline: none;
+  transition: border-color var(--transition-speed) ease-in-out
+}
+
+input[type="text"]:focus {
+  border-color: var(--color-accent);
+}
+
 select {
   background-color: var(--color-button-background);
   border-radius: var(--border-radius);
-  /* border: none; */
   border: calc(var(--border-width) / 2) solid var(--color-button-background);
   display: inline-flex;
   font-size: var(--font-size-sm);
diff --git a/web/app/src/views/FirstTimeWizardView.vue b/web/app/src/views/FirstTimeWizardView.vue
index 5b0b4dcb..6c9ec54a 100644
--- a/web/app/src/views/FirstTimeWizardView.vue
+++ b/web/app/src/views/FirstTimeWizardView.vue
@@ -470,11 +470,6 @@ body.is-first-time-wizard #app {
   margin-left: auto;
 }
 
-input.path-input {
-  width: 100%;
-  height: 2rem;
-}
-
 .setup-container {
   --color-check-failed: var(--color-status-failed);
   --color-check-ok: var(--color-status-completed);