fix: UI Improvements (#22)

* fix: Add more dummy transfers

* fix(sidebar): Component height is not respected

- Add relative position to #root div.
- Adjust sidebar left position for large screens.
- Add `sidebar` token with height across the project.

* fix(header): Increase title font weight

* fix(dashboard): Improve grid

- Remove TailwindCSS support on the page.
- Setup a custom flex-box grid (row and col) with styled components.
- Set a new variation (full height) for the Box component.

* fix: Remove tailwindcss support

* fix: Migrate SCSS global styles to `styled-components`

- Migrate project tokens from SCSS to TS
- Setup `GlobalStyles` component
- Setup `Helpers` component
- Update components from using root variables to project tokens
- Remove `main` stylesheet
- Call global styles components into App
- Reorganize SCSS folder

* lint: Update quotes

* fix: Define global token to truncate text

* fix: Update global styles

* fix(input-field): Include “password” as type

* fix(profile): Set “password” type for input

* fix(header): Update initial image as unknown

* fix(input-field): Set min and max props

* fix(dashboard): Set min transfer amount

* fix(content): Ensure scrolling on main content only

* fix(dashboard): Correct statistics column size

* fix: Remove unused file(s)

* fix: Relocate user avatar to “public/uploads” folder

* fix: Remove unused file(s)

* fix(sidebar): Enable vertical overflow

* fix(transaction): Prevent text from overfloating the container

- Define a width for the “amount” cell.
- Set table layout.

* fix(user): Define empty image

- Set “image” prop as optional.
- Define a dummy (empty avatar) image when its prop is empty or not defined.
- Remove image URL from the Header.
- Set an empty avatar as default avatar on “profile settings”.

* fix(profile-settings): Bring back empty avatar

* fix: Point mock user avatar to “uploads” folder

* fix: Alias path configuration

* fix: Use alias path

* fix: Rename file

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@fontsource/lato": "^5.1.0",
+    "@types/styled-components": "^5.1.34",
     "@vercel/speed-insights": "^1.1.0",
     "chart.js": "^4.4.7",
     "react": "^18.3.1",
@@ -35,9 +36,7 @@
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
     "msw": "^2.7.0",
-    "postcss": "^8.4.49",
     "sass": "^1.83.0",
-    "tailwindcss": "^3.4.17",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
     "vite": "^6.0.5",

src/App.tsx

@@ -1,13 +1,17 @@
 import React from 'react'
 import { Route, Routes } from 'react-router-dom'
 import { SpeedInsights } from '@vercel/speed-insights/react'
-import Dashboard from './ui/pages/Dashboard'
-import Settings from './ui/pages/Settings'
-import NotFound from './ui/pages/404'
+import GlobalStyles from '@helper/GlobalStyles'
+import Helpers from '@/utils/RootStyles'
+import Dashboard from '@page/Dashboard'
+import Settings from '@page/Settings'
+import NotFound from '@page/404'
 
 const App: React.FC = () => {
 	return (
 		<>
+			<Helpers />
+			<GlobalStyles />
 			<Routes>
 				<Route path="/" element={<Dashboard />} />
 				<Route path="/settings" element={<Settings />} />

src/assets/scss/soaricons.scss

@@ -1,4 +1,4 @@
-@use "./_utils/icons" as *;
+@use "./_variables" as *;
 
 @font-face {
   font-family: '#{$icomoon-font-family}';

src/main.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-import "./assets/css/tailwind.css"
-import "./assets/scss/main.scss";
-import "./assets/scss/soaricons.scss";
+import "@styles/soaricons.scss";
 import App from './App.tsx'
 
 async function enableMocking() {

src/mocks/handlers.ts

@@ -17,7 +17,7 @@ export const handlers = [
 			city: 'San Jose',
 			zip: '45962',
 			country: 'USA',
-			avatar: 'avatar.png'
+			avatar: 'uploads/avatar.png'
 		})
 	}),
 
@@ -104,8 +104,14 @@ export const handlers = [
 			// January 2025
 			{ source: 'bank', amount: -134, date: '2025-01-01', description: 'Water Service', category: 'bill' },
 			{ source: 'bank', amount: -253, date: '2025-01-01', description: 'Light Service', category: 'bill' },
-			{ source: 'transfer', amount: -261, date: '2025-01-01', description: 'Internet Service', category: 'bill' },
+			{ source: 'bank', amount: -261, date: '2025-01-01', description: 'Internet Service', category: 'bill' },
 			{ source: 'transfer', amount: 3492, date: '2025-01-02', description: 'Salary', category: 'income' },
+			{ source: 'card', amount: -1243, date: '2025-01-02', description: 'Hotel', category: 'other' },
+			{ source: 'paypal', amount: -987, date: '2025-01-02', description: 'Amazon', category: 'other' },
+			{ source: 'bank', amount: 765, date: '2025-01-03', description: 'Investments', category: 'investment' },
+			{ source: 'card', amount: -72, date: '2025-01-03', description: 'Apple One', category: 'bill' },
+			{ source: 'transfer', amount: 2873, date: '2025-01-03', description: 'Payment from Daniel Craig', category: 'income' },
+			{ source: 'paypal', amount: -654, date: '2025-01-03', description: 'Amazon', category: 'other' },
 		])
 	}),
 

src/ui/components/BarChart.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
-import { global, color } from '../../utils/tokens'
+import { global, color } from '@helper/tokens'
 import { Chart as ChartJS, ChartOptions, Plugin, registerables } from 'chart.js'
 import { Bar } from 'react-chartjs-2'
 

src/ui/components/Box.tsx

@@ -1,10 +1,16 @@
 import React from "react"
 import styled from "styled-components"
-import { global, color, border } from "../../utils/tokens"
+import { global, color, border } from "@helper/tokens"
 import { Link as UILink } from "react-router-dom"
 
-const Container = styled.section`
+const Container = styled.section<{ $fullHeight?: boolean }>`
 	display: block;
+
+	@media screen and (min-width: ${global.breakpoint}px) {
+		${ props => props.$fullHeight && 'display: flex;' }
+		${ props => props.$fullHeight && 'flex-flow: column nowrap;' }
+		${ props => props.$fullHeight && 'height: 100%;' }
+	}
 `
 
 const Header = styled.div`
@@ -54,29 +60,34 @@ const Link = styled(UILink)`
 	}
 `
 
-const Body = styled.div<{ $boxed?: boolean }>`
+const Body = styled.div<{ $boxed?: boolean, $fullHeight?: boolean }>`
 	${props => props.$boxed && 'padding: 25px;'}
 	${props => props.$boxed && 'border-radius: ' + border.radius.lg + 'px;' }
 	${props => props.$boxed && 'background: ' + color.mono.light + ';'}
+
+	@media screen and (min-width: ${global.breakpoint}px) {
+		${ props => props.$fullHeight && 'flex: 1;' }
+	}
 `
 
 interface BoxProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
 	title: string
 	path?: string
 	boxed?: boolean
+	fullHeight?: boolean
 }
 
-const Box: React.FC<BoxProps> = ({ title, path, boxed = true, ...props }) => {
+const Box: React.FC<BoxProps> = ({ title, path, boxed = true, fullHeight = false, ...props }) => {
 	const uniqueId = `${title?.toLowerCase().replace(/\s+/g, '-')}-title`;
 
 	return (
-		<Container aria-labelledby={ uniqueId } { ...props }>
+		<Container aria-labelledby={ uniqueId } { ...props } $fullHeight={ fullHeight }>
 			<Header>
 				<Title id={ uniqueId }>{ title }</Title>
 				{ path && <Link to={ path }>See All</Link> }
 			</Header>
 
-			<Body $boxed={ boxed }>
+			<Body $boxed={ boxed } $fullHeight={ fullHeight }>
 				{ props.children }
 			</Body>
 		</Container>

src/ui/components/Button.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { global, color } from '../../utils/tokens'
+import { global, color } from '@helper/tokens'
 import { Icon } from './Icon'
 
 const UIButton = styled.button<{ $inline?: boolean }>`