Skip to content

Commit

Permalink
refactor: style refactoring for components
Browse files Browse the repository at this point in the history
  • Loading branch information
@ozbeyahmet1
ozbeyahmet1 committed Oct 29, 2022
1 parent 5775220 commit f591ff0
Show file tree
Hide file tree
Showing 13 changed files with 133 additions and 203 deletions.
72 changes: 0 additions & 72 deletions components/cards/assetCard/assetCard.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,75 +105,3 @@
align-items: center;
}



.assetCard__icon--grey{
background-color: rgb(116, 116, 116);
font-size: 60px !important;
padding: 5px;
border-radius: 5px;
}

.assetCard__icon--blue{
background-color: rgb(19, 149, 201);
font-size: 60px !important;
padding: 5px;
border-radius: 5px;
}

.assetCard__icon--red{
background-color: rgb(230, 10, 10);
font-size: 60px !important;
padding: 5px;
border-radius: 5px;
}

.assetCard__icon--orange{
background-color: rgb(255, 208, 0);
font-size: 60px !important;
padding: 5px;
border-radius: 5px;
}

.assetCard__icon--burgundy{
background-color: rgb(80, 0, 0);
font-size: 60px !important;
padding: 5px;
border-radius: 5px;
}

.assetCard__icon--pink{
background-color: rgb(221, 45, 221);
font-size: 60px !important;
padding: 5px;
border-radius: 5px;
}

.assetCard__icon--gold{
background-color: rgb(144, 146, 0);
font-size: 60px !important;
padding: 5px;
border-radius: 5px;
}


.assetCard__icon--green{
background-color: rgb(154, 240, 57);
font-size: 60px !important;
padding: 5px;
border-radius: 5px;
}

.assetCard__icon--yellow{
background-color: rgb(234, 250, 144);
font-size: 60px !important;
padding: 5px;
border-radius: 5px;
}

.asset__nodescription{
font-size: 16px;
font-weight: 500;
color: rgb(255, 255, 255);
margin-top: 10px;
}
32 changes: 12 additions & 20 deletions components/cards/assetCard/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,25 @@
import React, { useEffect, useState } from 'react'
import styles from './assetCard.module.css'
import { AssetInterface } from '../../../interfaces/asset.interface';
import { HomeOutlined , KeyboardArrowDownOutlined ,DirectionsBusFilledOutlined,
FoodBankOutlined,HandymanOutlined,CheckroomOutlined,MedicalInformationOutlined,SpaOutlined,SchoolOutlined,
TheaterComedyOutlined,KeyboardArrowUpOutlined,Verified,HistoryToggleOff} from '@mui/icons-material/';
import HolidayVillageIcon from '@mui/icons-material/HolidayVillage';
import CurrencyBitcoinIcon from '@mui/icons-material/CurrencyBitcoin';
import { HomeOutlined,KeyboardArrowDownOutlined,KeyboardArrowUpOutlined,HolidayVillage,Verified,CurrencyBitcoin,LocalAtm,HistoryToggleOff} from '@mui/icons-material/';

export interface IAssetCardProps {
asset:AssetInterface;
location:string;
}

export default function AssetCard({asset,location}: IAssetCardProps) {
export default function AssetCard({asset,location}: IAssetCardProps) {
const [show,setShow]=useState(false);
const [icon,setIcon]=useState(<HomeOutlined/>)

const categories_options = [
{ value: "Cash", icon: <HomeOutlined className={styles['assetCard__icon--grey']}/>},
{ value: "Equity", icon: <DirectionsBusFilledOutlined className={styles['assetCard__icon--orange']}/> },
{ value: "Real Estate", icon:<FoodBankOutlined className={styles['assetCard__icon--red']}/> },
{ value: "Commodities", icon:<HandymanOutlined className={styles['assetCard__icon--yellow']}/>},
{ value: "Currencies", icon:<CheckroomOutlined className={styles['assetCard__icon--burgundy']}/> },
{ value: "Cash", icon: <LocalAtm className='icon--grey'/>},
{ value: "Digital Assets", icon: <img src="https://cdn-icons-png.flaticon.com/512/6699/6699362.png" className='svgIcon--purple'/> },
{ value: "Real Estate", icon:<HolidayVillage className='icon--green'/> },
{ value: "Commodities", icon:<img src="https://cdn-icons-png.flaticon.com/512/2640/2640565.png" className='svgIcon--yellow'/>},
{ value: "Currencies", icon: <CurrencyBitcoin className='icon--burgundy'/> },
]


const [icon,setIcon]=useState(<HomeOutlined/>)

useEffect(()=>{
categories_options.map((option)=>{
if(option.value==asset?.category){
Expand All @@ -45,15 +40,13 @@ export interface IAssetCardProps {
</div>
<div>
</div>
<h3 className={styles['asset__value']}>${ asset?.value}</h3>


<h3 className={styles['asset__value']}>${+asset?.value}</h3>

<div className={styles['transaction__iconWrapper']}>
{location=="blockchain" ? <Verified color="success" /> : <HistoryToggleOff/>}
</div>
</div>

<div className={styles['asset__description']}>
{(show && asset.description!=="") &&
<div onClick={()=>setShow(prevState=>!prevState)} className={styles['asset__descriptionIcon']}>
Expand All @@ -70,8 +63,7 @@ export interface IAssetCardProps {
}

{show ? <h3>{ asset?.description}</h3> : ""}

{ asset?.description=="" && <h3>No description</h3>}

</div>

</div>
Expand Down
64 changes: 0 additions & 64 deletions components/cards/homepageTxnCard/homepageTxnCard.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,67 +35,3 @@
font-size: 50px;
}


.icon--grey{
background-color: rgb(116, 116, 116);
font-size: 60px !important;
padding: 5px;
border-radius: 5px;
}

.icon--blue{
background-color: rgb(19, 149, 201);
font-size: 60px !important;
padding: 5px;
border-radius: 5px;
}

.icon--red{
background-color: rgb(230, 10, 10);
font-size: 60px !important;
padding: 5px;
border-radius: 5px;
}

.icon--orange{
background-color: rgb(255, 208, 0);
font-size: 60px !important;
padding: 5px;
border-radius: 5px;
}

.icon--burgundy{
background-color: #B8A390;
font-size: 60px !important;
padding: 5px;
border-radius: 5px;
}

.icon--pink{
background-color: #EB96AA;
font-size: 60px !important;
padding: 5px;
border-radius: 5px;
}

.icon--gold{
background-color: rgb(144, 146, 0);
font-size: 60px !important;
padding: 5px;
border-radius: 5px;
}


.icon--green{
background-color: rgb(154, 240, 57);
font-size: 60px !important;
padding: 5px;
border-radius: 5px;
}

.icon--yellow{
background-color: rgb(234, 250, 144);
font-size: 60px !important;
padding: 5px;
border-radius: 5px;
}
30 changes: 15 additions & 15 deletions components/cards/homepageTxnCard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,29 @@ import styles from './homepageTxnCard.module.css'
import { TransactionInterface } from '../../../interfaces/transaction.interface';
import { HomeOutlined,DirectionsBusFilledOutlined,FoodBankOutlined,HandymanOutlined,CheckroomOutlined,
MedicalInformationOutlined,SpaOutlined,SchoolOutlined,TheaterComedyOutlined} from '@mui/icons-material/';

import { Tooltip } from '@mui/material';
export interface IHomepageTxnCardProps {
transaction:TransactionInterface;
}

export default function HomepageTxnCard({transaction}: IHomepageTxnCardProps) {
const [icon,setIcon]=React.useState(<HomeOutlined/>)


const categories_options = [
{ value: "Housing", icon: <HomeOutlined className={styles['icon--grey']}/>},
{ value: "Transportation", icon: <DirectionsBusFilledOutlined className={styles['icon--orange']}/> },
{ value: "Food", icon:<FoodBankOutlined className={styles['icon--red']}/> },
{ value: "Utilities", icon:<HandymanOutlined className={styles['icon--yellow']}/>},
{ value: "Clothing", icon:<CheckroomOutlined className={styles['icon--burgundy']}/> },
{ value: "Medical/Healthcare", icon: <MedicalInformationOutlined className={styles['icon--blue']}/>},
{ value: "Personal", icon:<SpaOutlined className={styles['icon--green']}/> },
{ value: "Education", icon: <SchoolOutlined className={styles['icon--pink']}/> },
{ value: "Entertainment", icon:<TheaterComedyOutlined className={styles['icon--gold']}/> },
{ value: "NoData", icon:<TheaterComedyOutlined className={styles['icon--gold']}/> },
{ value: "HowItLooks", icon:<TheaterComedyOutlined className={styles['icon--gold']}/> },
{ value: "Housing", icon: <Tooltip title="Housing"><HomeOutlined className='icon--grey'/></Tooltip> },
{ value: "Transportation", icon:<Tooltip title="Transportation"><DirectionsBusFilledOutlined className='icon--orange'/></Tooltip> },
{ value: "Food", icon:<Tooltip title="Food"><FoodBankOutlined className='icon--red'/></Tooltip> },
{ value: "Utilities", icon:<Tooltip title="Utiilities"><HandymanOutlined className='icon--yellow'/></Tooltip>},
{ value: "Clothing", icon:<Tooltip title="Clothing"><CheckroomOutlined className='icon--burgundy'/></Tooltip> },
{ value: "Medical/Healthcare", icon:<Tooltip title="Medical/Healthcare"><MedicalInformationOutlined className='icon--blue'/></Tooltip> },
{ value: "Personal", icon:<Tooltip title="Personal"><SpaOutlined className='icon--green'/></Tooltip> },
{ value: "Education", icon: <Tooltip title="Education"><SchoolOutlined className='icon--pink'/></Tooltip> },
{ value: "Entertainment", icon:<Tooltip title="Entertainment"><TheaterComedyOutlined className='icon--gold'/></Tooltip> },
{ value: "NoData", icon:<Tooltip title="No Data"><TheaterComedyOutlined className='icon--gold'/></Tooltip> },
{ value: "HowItLooks", icon:<Tooltip title="How It Looks?"><TheaterComedyOutlined className='icon--gold'/></Tooltip>},
]

const [icon,setIcon]=React.useState(<HomeOutlined/>)

React.useEffect(()=>{
categories_options.map((option)=>{
if(option.value==transaction?.category){
Expand All @@ -43,7 +43,7 @@ export default function HomepageTxnCard({transaction}: IHomepageTxnCardProps) {
<h4>{transaction.date.toLocaleString()}</h4>
</div>
</div>
<h3>$ {transaction.value}</h3>
<h3>$ {+transaction.value}</h3>
</div>
);
}
30 changes: 15 additions & 15 deletions components/cards/transactionCard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { HomeOutlined , KeyboardArrowDownOutlined ,DirectionsBusFilledOutlined,
FoodBankOutlined,HandymanOutlined,CheckroomOutlined,MedicalInformationOutlined,SpaOutlined,SchoolOutlined,
TheaterComedyOutlined,KeyboardArrowUpOutlined,Verified,HistoryToggleOff} from '@mui/icons-material/';
import { TransactionInterface } from '../../../interfaces/transaction.interface';

import { Tooltip } from '@mui/material';

export interface ITransactionCardProps {
transaction:TransactionInterface;
Expand All @@ -13,21 +13,22 @@ export interface ITransactionCardProps {

export default function TransactionCard({transaction,location}: ITransactionCardProps) {
const [show,setShow]=useState(false);
const [icon,setIcon]=useState(<HomeOutlined/>)

const categories_options = [
{ value: "Housing", icon: <HomeOutlined className={styles['transactionCard__icon--grey']}/>},
{ value: "Transportation", icon: <DirectionsBusFilledOutlined className={styles['transactionCard__icon--orange']}/> },
{ value: "Food", icon:<FoodBankOutlined className={styles['transactionCard__icon--red']}/> },
{ value: "Utilities", icon:<HandymanOutlined className={styles['transactionCard__icon--yellow']}/>},
{ value: "Clothing", icon:<CheckroomOutlined className={styles['transactionCard__icon--burgundy']}/> },
{ value: "Medical/Healthcare", icon: <MedicalInformationOutlined className={styles['transactionCard__icon--blue']}/>},
{ value: "Personal", icon:<SpaOutlined className={styles['transactionCard__icon--green']}/> },
{ value: "Education", icon: <SchoolOutlined className={styles['transactionCard__icon--pink']}/> },
{ value: "Entertainment", icon:<TheaterComedyOutlined className={styles['transactionCard__icon--gold']}/> },
{ value: "Housing", icon: <Tooltip title="Housing"><HomeOutlined className='icon--grey'/></Tooltip> },
{ value: "Transportation", icon:<Tooltip title="Transportation"><DirectionsBusFilledOutlined className='icon--orange'/></Tooltip> },
{ value: "Food", icon:<Tooltip title="Food"><FoodBankOutlined className='icon--red'/></Tooltip> },
{ value: "Utilities", icon:<Tooltip title="Utiilities"><HandymanOutlined className='icon--yellow'/></Tooltip>},
{ value: "Clothing", icon:<Tooltip title="Clothing"><CheckroomOutlined className='icon--burgundy'/></Tooltip> },
{ value: "Medical/Healthcare", icon:<Tooltip title="Medical/Healthcare"><MedicalInformationOutlined className='icon--blue'/></Tooltip> },
{ value: "Personal", icon:<Tooltip title="Personal"><SpaOutlined className='icon--green'/></Tooltip> },
{ value: "Education", icon: <Tooltip title="Education"><SchoolOutlined className='icon--pink'/></Tooltip> },
{ value: "Entertainment", icon:<Tooltip title="Entertainment"><TheaterComedyOutlined className='icon--gold'/></Tooltip> },
{ value: "NoData", icon:<Tooltip title="No Data"><TheaterComedyOutlined className='icon--gold'/></Tooltip> },
{ value: "HowItLooks", icon:<Tooltip title="How It Looks?"><TheaterComedyOutlined className='icon--gold'/></Tooltip>},
]

const [icon,setIcon]=useState(<HomeOutlined/>)

useEffect(()=>{
categories_options.map((option)=>{
if(option.value==transaction?.category){
Expand All @@ -48,7 +49,7 @@ export interface ITransactionCardProps {
</div>
<div>
</div>
<h3 className={styles['transaction__value']}>${ transaction?.value}</h3>
<h3 className={styles['transaction__value']}>${ +transaction?.value}</h3>

<div className={ transaction?.type=="Outcome" ? styles['transaction__type--outcome'] : styles['transaction__type--income']}>
<h2 >{ transaction?.type}</h2>
Expand All @@ -58,7 +59,7 @@ export interface ITransactionCardProps {
{location=="blockchain" ? <Verified color="success" /> : <HistoryToggleOff/>}
</div>
</div>

<div className={styles['transaction__description']}>
{(show && transaction.description!=="") &&
<div onClick={()=>setShow(prevState=>!prevState)} className={styles['transaction__descriptionIcon']}>
Expand All @@ -76,7 +77,6 @@ export interface ITransactionCardProps {

{show ? <h3>{ transaction?.description}</h3> : ""}

{ transaction?.description=="" && <h3>No description</h3>}
</div>

</div>
Expand Down
20 changes: 10 additions & 10 deletions components/cryptoRow/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,25 @@ export interface IAppProps {
cryptos:CryptoInterface;
}

export default function App(props: IAppProps) {
export default function App({cryptos}: IAppProps) {
return (
<div className={styles["row"]}>
<div className={styles["row__index"]}>
<img src={props.cryptos.image} alt="" style={{ width: 40, height: 40 }} />
<h4>{props.cryptos.name}</h4>
<h5>{props.cryptos.symbol}</h5>
<img src={cryptos.image} alt="" style={{ width: 40, height: 40 }} />
<h4>{cryptos.name}</h4>
<h5>{cryptos.symbol}</h5>
</div>

<h4 className={styles["row__price"]}>{props.cryptos.current_price.toFixed(2)}$</h4>
<h4 className={styles["row__price"]}>{props.cryptos.high_24h.toFixed(2)}$</h4>
<h4 className={styles["row__price"]}>{props.cryptos.low_24h.toFixed(2)}$</h4>
{props.cryptos.price_change_percentage_24h > 0 ? (
<h4 className={styles["row__price"]}>{cryptos.current_price.toFixed(2)}$</h4>
<h4 className={styles["row__price"]}>{cryptos.high_24h.toFixed(2)}$</h4>
<h4 className={styles["row__price"]}>{cryptos.low_24h.toFixed(2)}$</h4>
{cryptos.price_change_percentage_24h > 0 ? (
<h4 className={styles["row__price--positive"]}>
+{props.cryptos.price_change_percentage_24h.toFixed(2)}
+{cryptos.price_change_percentage_24h.toFixed(2)}
</h4>
) : (
<h4 className={styles["row__price--negative"]}>
{props.cryptos.price_change_percentage_24h.toFixed(2)}
{cryptos.price_change_percentage_24h.toFixed(2)}
</h4>
)}

Expand Down
5 changes: 3 additions & 2 deletions components/layout/primaryLayout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,14 @@ import RightBar from '../rightBar'
import { useAccount } from "wagmi"
import { useRouter } from 'next/router'
import styles from './primaryLayout.module.css'
import { providers } from "ethers"

export interface IAppProps {
export interface IPrimaryLayoutProps {
children: React.ReactNode
selected: string
}

export default function App(props: IAppProps) {
export default function App(props: IPrimaryLayoutProps) {
const router = useRouter()
const { data: session, status } = useSession()
const loading = status === "loading"
Expand Down
2 changes: 1 addition & 1 deletion components/layout/rightBar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ function Index() {
</div>
<div>
<h3 className={styles['rightBar__headline']}>Transactions</h3>
{tasks && concatedJsonStrings.map((element:TransactionInterface,id:number)=>{
{tasks && concatedJsonStrings.slice(0,4).map((element:TransactionInterface,id:number)=>{
return <HomepageTxnCard transaction={element}/> })}

{concatedJsonStrings.length==0 &&
Expand Down
Loading

1 comment on commit f591ff0

@vercel
Copy link

@vercel vercel bot commented on f591ff0 Oct 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ledgerv4 – ./

ledgerv4-git-master-allegodev.vercel.app
ledgerv4.vercel.app
ledgerv4-allegodev.vercel.app

Please sign in to comment.