junte/assessment-model
1
0
Fork 0
mirror of https://github.com/Hestia-Homes/assessment-model.git synced 2026-06-08 11:37:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

made portfolio form a bit nicer

Browse source
This commit is contained in:
Khalim Conn-Kowlessar 2023-05-26 13:40:39 +01:00
parent 4c8f507175
commit 807d13f81e
2 changed files with 28 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/app/components/home/NewPortfolioModal.tsx
View file

@ -17,15 +17,20 @@ interface IconProps {
className?: string;
}
const Icon: React.FC<IconProps> = ({
name,
selected,
onSelect,
className,
}: IconProps) => (
<div onClick={() => onSelect(name)} style={selected ? { color: "red" } : {}}>
{name}
</div>
const selectedIconClasses = "bg-brandblue text-white w-1/5 rounded-md";
const deSelectedIconClases = "bg-gray-200 w-1/5 rounded-md";
const Icon: React.FC<IconProps> = ({ name, selected, onSelect }: IconProps) => (
<>
<div
onClick={() => onSelect(name)}
className={selected ? selectedIconClasses : deSelectedIconClases}
>
<div>Icon</div>
{name}
</div>
<></>
</>
);
const hiddenInputArrows =
@ -91,9 +96,10 @@ export default function NewPortfolioModal({
<div className="flex flex-col">
<label
htmlFor="portfolio-name"
className="text-sm font-semibold text-gray-600 mb-1"
className="text-sm font-semibold text-gray-600 mb-1 relative"
>
Portfolio Name:
<span className="text-red-500">*</span>
</label>
<input
id="portfolio-name"
@ -102,7 +108,7 @@ export default function NewPortfolioModal({
required
value={portfolioName}
onChange={(e) => setPortfolioName(e.target.value)}
className="p-2 border border-gray-200 rounded-md focus:outline-none"
className="p-2 border border-gray-200 rounded-md focus:outline-none bg-gray-100"
/>
</div>
<div className="flex flex-col">
@ -110,10 +116,12 @@ export default function NewPortfolioModal({
htmlFor="budget"
className="text-sm font-semibold text-gray-600 mb-1"
>
Budget (£):
Budget (£){" "}
<span className="text-gray-400 text-xs">optional</span>{" "}
:
</label>
<div className="flex items-center border border-gray-200 rounded-md">
<span className="px-2 text-sm text-gray-500">£</span>
<div className="flex items-center border border-gray-200 rounded-md text-gray-900 bg-brandblue">
<span className="px-2 text-sm text-white">£</span>
<input
id="budget"
type="number"
@ -125,7 +133,7 @@ export default function NewPortfolioModal({
e.preventDefault()
}
className={[
"flex-1 p-2 bg-transparent focus:outline-none",
"flex-1 p-2 bg-gray-100 focus:outline-none",
hiddenInputArrows,
].join(" ")}
/>
@ -142,11 +150,6 @@ export default function NewPortfolioModal({
name={outcome}
selected={selectedOutcome === outcome}
onSelect={setSelectedOutcome}
className={
selectedOutcome === outcome
? "bg-red-500 text-white p-2 rounded"
: "p-2 rounded border border-gray-200"
}
/>
))}
</div>

5
tailwind.config.js
View file

@ -30,5 +30,10 @@ module.exports = {
},
},
},
variants: {
extend: {
visibility: ["group-hover"],
},
},
plugins: [],
};