Merge pull request #5 from CityOfDetroit/main

Consolidate DPA updates to main repo

README.md

@@ -1,2 +1,22 @@
 # dpa-survey
 Simple eligibility checker for users looking to apply for the down payment assistance program
+
+1. Download the repo.
+
+`$ git clone [email protected]:CityOfDetroit/dpa-eligibility-survey.git`
+
+2. Install node dependencies.
+
+`$ yarn install`
+
+3. Run local instance.
+
+`$ yarn start`
+
+4. Run test suite.
+
+`$ yarn test`
+
+5. Create production build for property app.
+
+`$ yarn build`

src/components/DPASurvey.css

@@ -1,41 +1,58 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;700&display=swap');
-:host{
-    --color-1: #004445;
-    --color-2: #9FD5B3;
-    --color-3: #feb70d;
-    --color-4: #b3393b;
-    --color-5: #e6e6e6;
-    --color-light: #fff;
-    --color-dark: #000;
-    --font-family: 'Montserrat', sans-serif;
-}
-#app-content{
-    font-family: var(--font-family);
-}
-.accordion-header{
-    background-color: var(--color-3);
-    color: var(--color-dark);
-}
-.pass-q{
-    color: var(--color-1);
-}
-
-.fail-q{
-    color: var(--color-4);
-}
-
-.logo img{
-    width: 12em;
-    margin: auto;
-}
-
-.alert-danger{
-    background-color: var(--color-1);
-    color: var(--color-light);
-}
-
-.success{
-    background-color: var(--color-2);
-    color: var(--color-dark);
-    padding: 1em;
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;700&display=swap');
+:host{
+    --color-1: #004445;
+    --color-2: #9FD5B3;
+    --color-3: #feb70d;
+    --color-4: #b3393b;
+    --color-5: #e6e6e6;
+    --color-light: #fff;
+    --color-dark: #000;
+    --font-family: 'Montserrat', sans-serif;
+    --bs-border-color: #dee2e6;
+    --bs-border-width: 1px;
+}
+
+.form-control:focus {
+	color: var(--bs-body-color);
+	background-color: var(--bs-body-bg);
+	border-color: #80a2a2;
+	outline: 0;
+	box-shadow: 0 0 0 0.25em rgba(0, 68, 69, 0.25);
+}
+
+.form-select:focus {
+	border-color: #80a2a2;
+	outline: 0;
+	box-shadow: 0 0 0 0.25em rgba(0, 68, 69, 0.25);
+}
+
+#app-content{
+    font-family: var(--font-family);
+}
+.accordion-header{
+    background-color: var(--color-3);
+    color: var(--color-dark);
+}
+.pass-q{
+    color: var(--color-1);
+}
+
+.fail-q{
+    color: var(--color-4);
+}
+
+.logo img{
+    width: 12em;
+    margin: auto;
+}
+
+.alert-danger{
+    background-color: var(--color-1);
+    color: var(--color-light);
+}
+
+.success{
+    background-color: var(--color-2);
+    color: var(--color-dark);
+    padding: 1em;
 }