kj
/
webtrigon-accounts
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

accounts page upfold --partial commit

master
kj1352 4 years ago
parent
92cce80e0b
commit
0a392d6da7
10 changed files with 235 additions and 26 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +12
    -9
      public/index.html
  2. +1
    -1
      src/App.tsx
  3. +1
    -0
      src/assets/svg/cash-outline.svg
  4. +1
    -0
      src/assets/svg/cog-outline.svg
  5. +1
    -0
      src/assets/svg/line-chart.svg
  6. +0
    -0
      src/pages/accounts/Accounts.module.scss
  7. +0
    -14
      src/pages/accounts/Accounts.tsx
  8. +125
    -0
      src/pages/accounts/accounts.module.scss
  9. +65
    -0
      src/pages/accounts/accounts.tsx
  10. +29
    -2
      src/theme/variables.css

+ 12
- 9
public/index.html View File

@@ -1,16 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>

<head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Ionic App</title> <title>Ionic App</title>


<base href="/" /> <base href="/" />


<meta name="color-scheme" content="light dark" /> <meta name="color-scheme" content="light dark" />
<meta
name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" /> <meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" /> <meta name="msapplication-tap-highlight" content="no" />


@@ -22,10 +20,15 @@
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Ionic App" /> <meta name="apple-mobile-web-app-title" content="Ionic App" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>


<body>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
rel="stylesheet">
</head>

<body>
<div id="root"></div> <div id="root"></div>
</body>
</body>


</html>
</html>

+ 1
- 1
src/App.tsx View File

@@ -20,7 +20,7 @@ import '@ionic/react/css/display.css';


/* Theme variables */ /* Theme variables */
import './theme/variables.css'; import './theme/variables.css';
import Accounts from './pages/accounts/Accounts';
import Accounts from './pages/accounts/accounts';


const App: React.FC = () => ( const App: React.FC = () => (
<IonApp> <IonApp>


+ 1
- 0
src/assets/svg/cash-outline.svg View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-l</title><rect x="32" y="80" width="448" height="256" rx="16" ry="16" transform="translate(512 416) rotate(180)" style="fill:none;stroke:#000;stroke-linejoin:round;stroke-width:32px"/><line x1="64" y1="384" x2="448" y2="384" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="96" y1="432" x2="416" y2="432" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="256" cy="208" r="80" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M480,160a80,80,0,0,1-80-80" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M32,160a80,80,0,0,0,80-80" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M480,256a80,80,0,0,0-80,80" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M32,256a80,80,0,0,1,80,80" style="stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>

+ 1
- 0
src/assets/svg/cog-outline.svg View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-m</title><path d="M456.7,242.27l-26.08-4.2a8,8,0,0,1-6.6-6.82c-.5-3.2-1-6.41-1.7-9.51a8.08,8.08,0,0,1,3.9-8.62l23.09-12.82a8.05,8.05,0,0,0,3.9-9.92l-4-11a7.94,7.94,0,0,0-9.4-5l-25.89,5a8,8,0,0,1-8.59-4.11q-2.25-4.2-4.8-8.41a8.16,8.16,0,0,1,.7-9.52l17.29-19.94a8,8,0,0,0,.3-10.62l-7.49-9a7.88,7.88,0,0,0-10.5-1.51l-22.69,13.63a8,8,0,0,1-9.39-.9c-2.4-2.11-4.9-4.21-7.4-6.22a8,8,0,0,1-2.5-9.11l9.4-24.75A8,8,0,0,0,365,78.77l-10.2-5.91a8,8,0,0,0-10.39,2.21L327.77,95.91a7.15,7.15,0,0,1-8.5,2.5s-5.6-2.3-9.8-3.71A8,8,0,0,1,304,87l.4-26.45a8.07,8.07,0,0,0-6.6-8.42l-11.59-2a8.07,8.07,0,0,0-9.1,5.61l-8.6,25.05a8,8,0,0,1-7.79,5.41h-9.8a8.07,8.07,0,0,1-7.79-5.41l-8.6-25.05a8.07,8.07,0,0,0-9.1-5.61l-11.59,2a8.07,8.07,0,0,0-6.6,8.42l.4,26.45a8,8,0,0,1-5.49,7.71c-2.3.9-7.3,2.81-9.7,3.71-2.8,1-6.1.2-8.8-2.91L167.14,75.17A8,8,0,0,0,156.75,73l-10.2,5.91A7.94,7.94,0,0,0,143.25,89l9.4,24.75a8.06,8.06,0,0,1-2.5,9.11c-2.5,2-5,4.11-7.4,6.22a8,8,0,0,1-9.39.9L111,116.14a8,8,0,0,0-10.5,1.51l-7.49,9a8,8,0,0,0,.3,10.62l17.29,19.94a8,8,0,0,1,.7,9.52q-2.55,4-4.8,8.41a8.11,8.11,0,0,1-8.59,4.11l-25.89-5a8,8,0,0,0-9.4,5l-4,11a8.05,8.05,0,0,0,3.9,9.92L85.58,213a7.94,7.94,0,0,1,3.9,8.62c-.6,3.2-1.2,6.31-1.7,9.51a8.08,8.08,0,0,1-6.6,6.82l-26.08,4.2a8.09,8.09,0,0,0-7.1,7.92v11.72a7.86,7.86,0,0,0,7.1,7.92l26.08,4.2a8,8,0,0,1,6.6,6.82c.5,3.2,1,6.41,1.7,9.51a8.08,8.08,0,0,1-3.9,8.62L62.49,311.7a8.05,8.05,0,0,0-3.9,9.92l4,11a7.94,7.94,0,0,0,9.4,5l25.89-5a8,8,0,0,1,8.59,4.11q2.25,4.2,4.8,8.41a8.16,8.16,0,0,1-.7,9.52L93.28,374.62a8,8,0,0,0-.3,10.62l7.49,9a7.88,7.88,0,0,0,10.5,1.51l22.69-13.63a8,8,0,0,1,9.39.9c2.4,2.11,4.9,4.21,7.4,6.22a8,8,0,0,1,2.5,9.11l-9.4,24.75a8,8,0,0,0,3.3,10.12l10.2,5.91a8,8,0,0,0,10.39-2.21l16.79-20.64c2.1-2.6,5.5-3.7,8.2-2.6,3.4,1.4,5.7,2.2,9.9,3.61a8,8,0,0,1,5.49,7.71l-.4,26.45a8.07,8.07,0,0,0,6.6,8.42l11.59,2a8.07,8.07,0,0,0,9.1-5.61l8.6-25a8,8,0,0,1,7.79-5.41h9.8a8.07,8.07,0,0,1,7.79,5.41l8.6,25a8.07,8.07,0,0,0,9.1,5.61l11.59-2a8.07,8.07,0,0,0,6.6-8.42l-.4-26.45a8,8,0,0,1,5.49-7.71c4.2-1.41,7-2.51,9.6-3.51s5.8-1,8.3,2.1l17,20.94A8,8,0,0,0,355,439l10.2-5.91a7.93,7.93,0,0,0,3.3-10.12l-9.4-24.75a8.08,8.08,0,0,1,2.5-9.12c2.5-2,5-4.1,7.4-6.21a8,8,0,0,1,9.39-.9L401,395.66a8,8,0,0,0,10.5-1.51l7.49-9a8,8,0,0,0-.3-10.62l-17.29-19.94a8,8,0,0,1-.7-9.52q2.55-4.05,4.8-8.41a8.11,8.11,0,0,1,8.59-4.11l25.89,5a8,8,0,0,0,9.4-5l4-11a8.05,8.05,0,0,0-3.9-9.92l-23.09-12.82a7.94,7.94,0,0,1-3.9-8.62c.6-3.2,1.2-6.31,1.7-9.51a8.08,8.08,0,0,1,6.6-6.82l26.08-4.2a8.09,8.09,0,0,0,7.1-7.92V250A8.25,8.25,0,0,0,456.7,242.27ZM256,112A143.82,143.82,0,0,1,395.38,220.12,16,16,0,0,1,379.85,240l-105.24,0a16,16,0,0,1-13.91-8.09l-52.1-91.71a16,16,0,0,1,9.85-23.39A146.94,146.94,0,0,1,256,112ZM112,256a144,144,0,0,1,43.65-103.41,16,16,0,0,1,25.17,3.47L233.06,248a16,16,0,0,1,0,15.87l-52.67,91.7a16,16,0,0,1-25.18,3.36A143.94,143.94,0,0,1,112,256ZM256,400a146.9,146.9,0,0,1-38.19-4.95,16,16,0,0,1-9.76-23.44l52.58-91.55a16,16,0,0,1,13.88-8H379.9a16,16,0,0,1,15.52,19.88A143.84,143.84,0,0,1,256,400Z"/></svg>

+ 1
- 0
src/assets/svg/line-chart.svg View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-p</title><path d="M480,496H48a32,32,0,0,1-32-32V32a16,16,0,0,1,32,0V464H480a16,16,0,0,1,0,32Z"/><path d="M156,432H116a36,36,0,0,1-36-36V244a36,36,0,0,1,36-36h40a36,36,0,0,1,36,36V396A36,36,0,0,1,156,432Z"/><path d="M300,432H260a36,36,0,0,1-36-36V196a36,36,0,0,1,36-36h40a36,36,0,0,1,36,36V396A36,36,0,0,1,300,432Z"/><path d="M443.64,432h-40a36,36,0,0,1-36-36V132a36,36,0,0,1,36-36h40a36,36,0,0,1,36,36V396A36,36,0,0,1,443.64,432Z"/></svg>

+ 0
- 0
src/pages/accounts/Accounts.module.scss View File


+ 0
- 14
src/pages/accounts/Accounts.tsx View File

@@ -1,14 +0,0 @@
import { IonContent, IonPage } from '@ionic/react';
import styles from './Accounts.module.scss';

const Accounts: React.FC = () => {
return (
<IonPage>
<IonContent>
</IonContent>
</IonPage>
);
};

export default Accounts;

+ 125
- 0
src/pages/accounts/accounts.module.scss View File

@@ -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;
}
}
}

+ 65
- 0
src/pages/accounts/accounts.tsx View File

@@ -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 (
<IonPage>
<IonContent>
<header className={styles.pageHeader}>
<h4> Accounts </h4>
<button> <CogIcon /> </button>
</header>

<section className={styles.upfold}>
<section className={styles.segments}>
<button className={styles.active}> Sep </button>
<button> 1Q </button>
<button> 6M </button>
<button> 1FY </button>
</section>

<ul className={styles.statisticalDetails}>
<li>
<label> <LineChartIcon /> <span> Expenses </span> </label>
<h3> ₹ 5,00,000 </h3>
</li>

<li>
<label> <LineChartIcon /> <span> Income </span> </label>
<h3> ₹ 20,00,000 </h3>
</li>
</ul>

<ul className={styles.actions}>
<li>
<button> </button>
<label> Add Expense </label>
</li>
<li>
<button> </button>
<label> Add Invoice </label>
</li>
<li>
<button> </button>
<label> E-Statement </label>
</li>
<li>
<button> </button>
<label> Reports </label>
</li>
<li>
<button> </button>
<label> Projection </label>
</li>
</ul>
</section>
</IonContent>
</IonPage>
);
};

export default Accounts;

+ 29
- 2
src/theme/variables.css View File

@@ -79,10 +79,37 @@ http://ionicframework.com/docs/theming/ */
/* Custom Colors */ /* Custom Colors */
--red: #c35a5b; --red: #c35a5b;
--teal: #36b583; --teal: #36b583;
--black: #0d0d0d;
--black-medium: #212121; --black-medium: #212121;
--black-dark: #0d0d0d;
--dark-grey: #565656; --dark-grey: #565656;
--grey: #898989; --grey: #898989;
--light-grey: #bcbcbc; --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;
} }

Write Preview
Loading…
Cancel
Save