Fix global styling and standardise colour usage in components

[Fozzyack]

Fix Goal

Fix global.css styling and refactor component colour use if effected.

• Global gray (borders and shadows for components)
• Will change / fix the confirm button. Move from light blue to primary blue

Components to Check:

• Input
• Text Area
• Select
• Radio
• Popover
• Button
• Breadcrumb
• Navbar
• Badge
• Date Picker

Caution

“If it has a border or a shadow, it’s guilty until proven innocent.”

Related issues:

• Refactor Input components #72

[github-actions]

Branch issue-66-Fix_global_styling_and_refactor_colour_usage_in_components created!

[Fozzyack]

• label text style: body-sm text-gray-500

  • placeholder text style: body-sm text-bloom-gray

  • I saw some classNames share the same repeated part. so make this part an variable to reuse

  • input field border style: rounded-md border border-b-4 border-gray-200 border-b-gray-300. NO SHADOW INVOLVED

  • use shadcn

  • file is client/src/components/ui/input.tsx

[Fozzyack]

Note: Uses border not shadow