diff --git a/public/index.html b/public/index.html index 25b753b..274bb39 100644 --- a/public/index.html +++ b/public/index.html @@ -1,16 +1,14 @@ - + + Ionic App - + @@ -22,10 +20,15 @@ - - + + + + + +
- + - + \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 4a9d096..d5713d7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -20,7 +20,7 @@ import '@ionic/react/css/display.css'; /* Theme variables */ import './theme/variables.css'; -import Accounts from './pages/accounts/Accounts'; +import Accounts from './pages/accounts/accounts'; const App: React.FC = () => ( diff --git a/src/assets/svg/cash-outline.svg b/src/assets/svg/cash-outline.svg new file mode 100644 index 0000000..4796c38 --- /dev/null +++ b/src/assets/svg/cash-outline.svg @@ -0,0 +1 @@ +ionicons-v5-l \ No newline at end of file diff --git a/src/assets/svg/cog-outline.svg b/src/assets/svg/cog-outline.svg new file mode 100644 index 0000000..69493f0 --- /dev/null +++ b/src/assets/svg/cog-outline.svg @@ -0,0 +1 @@ +ionicons-v5-m \ No newline at end of file diff --git a/src/assets/svg/line-chart.svg b/src/assets/svg/line-chart.svg new file mode 100644 index 0000000..6c1af2e --- /dev/null +++ b/src/assets/svg/line-chart.svg @@ -0,0 +1 @@ +ionicons-v5-p \ No newline at end of file diff --git a/src/pages/accounts/Accounts.module.scss b/src/pages/accounts/Accounts.module.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/accounts/Accounts.tsx b/src/pages/accounts/Accounts.tsx deleted file mode 100644 index 4e25daa..0000000 --- a/src/pages/accounts/Accounts.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { IonContent, IonPage } from '@ionic/react'; -import styles from './Accounts.module.scss'; - -const Accounts: React.FC = () => { - return ( - - - - - - ); -}; - -export default Accounts; diff --git a/src/pages/accounts/accounts.module.scss b/src/pages/accounts/accounts.module.scss new file mode 100644 index 0000000..1ac3b66 --- /dev/null +++ b/src/pages/accounts/accounts.module.scss @@ -0,0 +1,125 @@ +.pageHeader { + position: relative; + padding: 25px 0; + background-color: var(--black-medium); + + h4 { + font-size: var(--page-header-size); + text-align: center; + color: white; + } + + button { + width: 40px; + height: 40px; + position: absolute; + right: 15px; + top: 15px; + + svg { + width: 100%; + height: 100%; + fill: white; + } + } +} + +.upfold { + background-color: var(--black); + border-bottom-left-radius: 30px; +} + +.segments { + text-align: center; + padding: 0 15px; + background-color: var(--black-medium); + + button { + padding: 5px 12px; + border: 1px solid var(--dark-grey); + border-radius: 20px; + font-size: 12px; + color: var(--light-grey); + margin: 0 10px; + font-weight: 500; + + &.active { + background-color: white; + color: var(--dark-grey); + } + } +} + +.statisticalDetails { + background-color: var(--black-medium); + display: flex; + align-items: stretch; + justify-content: space-between; + padding: 25px 40px; + margin: 0 auto; + border-bottom-left-radius: 30px; + + li { + padding: 10px 15px; + border-radius: 20px; + color: white; + width: calc(50% - 10px); + + &:nth-child(1) { + background-color: var(--red); + } + + &:nth-child(2) { + background-color: var(--teal); + } + + label { + font-size: 12px; + + span { + vertical-align: middle; + } + + svg { + vertical-align: middle; + width: 15px; + height: 15px; + fill: white; + margin-right: 5px; + } + } + + h3 { + font-weight: 500; + font-size: 18px; + margin-top: 10px; + } + } +} + +.actions { + white-space: nowrap; + overflow-x: auto; + padding: 20px; + + li { + display: inline-block; + margin: 0 10px; + + button { + width: 40px; + height: 40px; + border: 1px solid var(--dark-grey); + border-radius: 10px; + display: block; + margin: 0 auto 10px; + } + + label { + color: var(--light-grey); + font-weight: 500; + display: block; + font-size: 12px; + } + } +} \ No newline at end of file diff --git a/src/pages/accounts/accounts.tsx b/src/pages/accounts/accounts.tsx new file mode 100644 index 0000000..e50699f --- /dev/null +++ b/src/pages/accounts/accounts.tsx @@ -0,0 +1,65 @@ +import { IonContent, IonPage } from '@ionic/react'; +import { ReactComponent as CogIcon } from '../../assets/svg/cog-outline.svg'; +import { ReactComponent as CashIcon } from '../../assets/svg/cash-outline.svg'; +import { ReactComponent as LineChartIcon } from '../../assets/svg/line-chart.svg'; +import styles from './accounts.module.scss'; + +const Accounts: React.FC = () => { + return ( + + +
+

Accounts

+ +
+ +
+
+ + + + +
+ +
    +
  • + +

    ₹ 5,00,000

    +
    • + +
  • + +

    ₹ 20,00,000

    +
    • +
+ +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+ + + + ); +}; + +export default Accounts; diff --git a/src/theme/variables.css b/src/theme/variables.css index ce6e56e..6d77d34 100644 --- a/src/theme/variables.css +++ b/src/theme/variables.css @@ -79,10 +79,37 @@ http://ionicframework.com/docs/theming/ */ /* Custom Colors */ --red: #c35a5b; --teal: #36b583; + --black: #0d0d0d; --black-medium: #212121; - --black-dark: #0d0d0d; --dark-grey: #565656; --grey: #898989; --light-grey: #bcbcbc; - --warning: #ce7f01; + --warning: #ce7f01; + + + + + --page-header-size: 21px; +} + +* { + text-decoration: none; + outline: none; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; + font-weight: 700; +} + +button { + background-color: transparent; +} + +ul { + list-style: none; + padding: 0; + margin: 0; } \ No newline at end of file