improved appearance of the modal

src/app/components/home/NewPortfolioModal.tsx

@@ -40,7 +40,9 @@ export default function NewPortfolioModal({
 }) {
   const [portfolioName, setPortfolioName] = useState("");
   const [budget, setBudget] = useState("");
-  const [selectedOutcome, setSelectedOutcome] = useState<string | null>(null);
+  const [selectedOutcome, setSelectedOutcome] = useState<string | null>(
+    "Nothing Specific"
+  );
 
   function closeModal() {
     setIsOpen(false);
@@ -81,7 +83,7 @@ export default function NewPortfolioModal({
                 <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
                   <Dialog.Title
                     as="h3"
-                    className="text-lg font-medium leading-6 text-gray-900"
+                    className="text-lg font-medium leading-6 text-brandblue mb-3"
                   >
                     Create a new portfolio
                   </Dialog.Title>
@@ -89,23 +91,24 @@ export default function NewPortfolioModal({
                     <div className="flex flex-col">
                       <label
                         htmlFor="portfolio-name"
-                        className="text-sm font-semibold text-gray-600"
+                        className="text-sm font-semibold text-gray-600 mb-1"
                       >
                         Portfolio Name:
                       </label>
                       <input
                         id="portfolio-name"
                         type="text"
+                        placeholder="My new portfolio"
                         required
                         value={portfolioName}
                         onChange={(e) => setPortfolioName(e.target.value)}
-                        className="p-2 border border-gray-200 rounded-md"
+                        className="p-2 border border-gray-200 rounded-md focus:outline-none"
                       />
                     </div>
                     <div className="flex flex-col">
                       <label
                         htmlFor="budget"
-                        className="text-sm font-semibold text-gray-600"
+                        className="text-sm font-semibold text-gray-600 mb-1"
                       >
                         Budget (£):
                       </label>
@@ -114,6 +117,7 @@ export default function NewPortfolioModal({
                         <input
                           id="budget"
                           type="number"
+                          placeholder="1000"
                           value={budget}
                           onChange={(e) => setBudget(e.target.value)}
                           onKeyDown={(e) =>
@@ -121,7 +125,7 @@ export default function NewPortfolioModal({
                             e.preventDefault()
                           }
                           className={[
-                            "flex-1 p-2 bg-transparent",
+                            "flex-1 p-2 bg-transparent focus:outline-none",
                             hiddenInputArrows,
                           ].join(" ")}
                         />

src/app/globals.css

@@ -19,11 +19,3 @@
 body {
   color: rgb(var(--foreground-rgb));
 }
-
-@layer base {
-  input[type="number"]::-webkit-inner-spin-button,
-  input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-}

tailwind.config.js

@@ -20,6 +20,14 @@ module.exports = {
         brandbrown: "#3d1e05",
         brandmidblue: "#3943b7",
       },
+      textColor: {
+        brandblue: "#14163d",
+        hoverblue: "#3e4073",
+        brandtan: "#d3b488",
+        hovertan: "#947750",
+        brandbrown: "#3d1e05",
+        brandmidblue: "#3943b7",
+      },
     },
   },
   plugins: [],