Skip to content

Commit

Permalink
wip: refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
Hemanthghs committed Oct 25, 2023
1 parent ed580e5 commit 4b09fb5
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 86 deletions.
90 changes: 42 additions & 48 deletions frontend/src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,6 @@ body {
border-width: 0;
}

body {
@apply leading-[normal] m-0;
}

*,
::before,
::after {
border-width: 0;
}

.blur-effect {
backdrop-filter: blur(2px);
}
Expand Down Expand Up @@ -294,23 +284,24 @@ body {
}

.staking-amount {
@apply text-white text-[28px] not-italic font-semibold leading-10 tracking-[1.12px] text-[#B0B0B0] text-[28px] not-italic font-semibold leading-10 tracking-[1.12px];
@apply text-[#B0B0B0] text-[28px] not-italic font-semibold leading-10 tracking-[1.12px];
}
.staking-amount-heading {
@apply text-[#B0B0B0] text-sm not-italic font-light leading-3 tracking-[0.56px];
}
.h-line {
@apply w-full h-px self-stretch bg-[#b0b0b033];
}

.input-w-full {
@apply w-full rounded h-10 px-4 py-2 bg-transparent border border-[#b0b0b033];
}

.input-bold-label {
@apply text-white text-sm not-italic font-bold leading-6;
}
@apply text-white text-sm not-italic font-bold leading-6;
}
}

@layer components {
.custom-box {
@apply w-[1102px] h-[300px] rounded-2xl;
Expand All @@ -320,35 +311,32 @@ body {
display: flex;
}

.header {
.add-wallet-header {
@apply flex justify-between items-center relative;
}

.header .dialog-close-icon {
.add-wallet-header .dialog-close-icon {
@apply absolute right-0;
}

.dialog-close-icon {
@apply cursor-pointer;
}

.header h2 {
.add-wallet-header h2 {
@apply flex-col font-bold text-white text-[20px];
margin: auto;
}

.container {
.add-wallet-dialog-content {
@apply flex w-full justify-between mt-10;
padding: 0 180px;
}

.text {
@apply font-bold text-white items-center text-center leading-3 text-[20px] h-10 flex;
}

.wallet {
@apply w-[172px] h-[140px] flex flex-col justify-center items-center cursor-pointer rounded-md hover:bg-[#3B3148];
}

.rectangle-box {
@apply w-[788px] h-[376px] rounded-2xl;
justify-content: center;
Expand All @@ -358,46 +346,57 @@ body {
padding: 40px 24px;
display: flex;
}

.heading {
@apply flex justify-between items-center relative font-bold text-white text-[20px];
margin: auto;
margin-top: 10px;
}
.deleteimage {

.delete-image {
@apply flex items-center justify-between flex-col;
margin-bottom: 40px;
}
.text {
@apply text-white font-light leading-5 text-[20px];

.wallet-name {
@apply font-bold text-white items-center text-center leading-3 text-[20px] h-10 flex;
}

.cancel-button {
@apply flex justify-center items-center gap-2.5 self-stretch border px-6 py-3.5 rounded-[100px] border-solid border-white w-[350px] h-10 text-white
font-normal leading-3;
}
.Logout-box {

.logout-box {
@apply flex w-[788px] h-[376px] flex-col justify-center items-start gap-10 relative
backdrop-blur-[2px] px-6 py-10 rounded-2xl;
background: #20172f;
}

.title {
@apply flex justify-between items-center relative font-bold text-white text-[20px] leading-3;
margin: auto;
margin-top: 10px;
}
.Logoutimage {

.logout-image {
@apply flex items-center justify-between flex-col gap-4 w-full;
}
.Logout-text {

.logout-text {
@apply text-white text-center not-italic font-light leading-5 text-[20px];
}
.cancel1-button {

.cancel-button {
@apply flex justify-center items-center gap-2.5 self-stretch border px-6 py-3.5 rounded-[100px] border-solid border-white w-[350px] h-10 text-white
font-normal leading-3;
}
.Logout-button {

.logout-button {
@apply flex justify-center items-center gap-2.5 self-stretch border px-6 py-3.5 rounded-[100px] border-solid border-white w-[350px] h-10 text-white
font-normal leading-3;
}

.Staking-box {
@apply flex w-[788px] h-[568px] flex-col justify-center items-start gap-10
backdrop-blur-[2px] px-6 py-10 rounded-2xl;
Expand Down Expand Up @@ -761,16 +760,16 @@ body {
}
.VoteforProposal-popup {
@apply flex w-[788px] h-[518px] flex-col justify-center items-start gap-10 backdrop-blur-[2px] px-6 py-10 rounded-2xl;
background: #20172f;
background: #20172f;
}
.vote-name {
@apply flex h-10 justify-center items-center w-full;
}
.vote-text {
@apply text-white text-xl not-italic font-bold leading-3;
}
.VoteProposal-buttons{
@apply flex flex-row items-center gap-10 self-stretch w-full justify-between ;
.VoteProposal-buttons {
@apply flex flex-row items-center gap-10 self-stretch w-full justify-between;
}
.Proposal {
@apply flex items-start gap-2 w-[350px] self-stretch border text-white text-sm not-italic font-light leading-6 px-4 py-2 rounded-[100px] border-solid border-white;
Expand All @@ -781,17 +780,17 @@ body {
.voteproposal-message {
@apply flex h-[86px] w-[740px] items-start gap-2 self-stretch border px-4 py-2 rounded-lg border-solid border-[rgba(176,176,176,0.20)];
}
.voteproposal-message p{
.voteproposal-message p {
@apply text-white text-sm not-italic font-light leading-6;
}
.vote-confirm {
@apply flex justify-center items-center gap-2.5 self-stretch border px-6 py-3.5 rounded-[100px] border-solid border-white;
}
.Groups-Main {
@apply flex w-[1542px] flex-col items-start gap-10 p-6 rounded-2xl ;
background: rgba(46, 32, 55, 0.75);
@apply flex w-[1542px] flex-col items-start gap-10 p-6 rounded-2xl;
background: rgba(46, 32, 55, 0.75);
}
.titlegrp-Name{
.titlegrp-Name {
@apply text-white text-base not-italic font-bold leading-3 ml-[-1270px];
}
.Group-details {
Expand All @@ -817,18 +816,17 @@ body {
/* @apply text-white flex-row text-sm not-italic font-normal leading-10 tracking-[0.56px] flex w-[183px] h-6 justify-center; */
}
.Group2-Address {
@apply flex items-center w-[183px] h-6 text-right mr-2 justify-center text-white text-sm not-italic font-normal leading-10 tracking-[0.56px];
@apply flex items-center w-[183px] h-6 text-right mr-2 justify-center text-white text-sm not-italic font-normal leading-10 tracking-[0.56px];
}
.Group2-Edit {
@apply flex w-7 h-6 flex-col justify-center text-sm not-italic font-extralight leading-10 tracking-[0.56px] underline;

}
.Group2buttons {
@apply flex items-center gap-10 self-stretch;
}
.updatebutton {
@apply flex justify-center w-[120px] items-center gap-2.5 self-stretch border px-6 py-3.5 rounded-[100px] border-solid border-white;

/* @apply flex justify-center items-center gap-2.5 self-stretch border text-white text-sm not-italic font-normal leading-3 px-6 py-3.5 rounded-[100px] border-solid border-white; */
}
.leaveButton {
Expand All @@ -844,20 +842,20 @@ body {
@apply flex w-[200px] h-10 flex-col justify-center items-center gap-2.5 leading-6 border px-4 py-1 rounded-[100px] border-solid border-white;
}
.Grouptablehead {
@apply pb-4 border-b-[0.5px] border-[#B0B0B033];
@apply pb-4 border-b-[0.5px] border-[#B0B0B033];
}
.Grouptablehead th {
@apply text-[16px] leading-3 font-normal h-10;
}
.custom-table-head td {
@apply pt-6 text-[14px] leading-3 ;
@apply pt-6 text-[14px] leading-3;
}
.customGrouptable {
@apply w-full;
@apply w-full;
}
.Groups-vote-grid {
@apply flex flex-col w-[788px] h-[316px] justify-center items-center gap-10 self-stretch backdrop-blur-[2px] px-6 py-10 rounded-2xl;
background: #20172f;
background: #20172f;
}
.vote-head {
@apply flex h-10 justify-between items-center;
Expand All @@ -874,8 +872,4 @@ body {
.vote-button {
@apply text-white text-center text-xl not-italic font-bold leading-5 underline;
}


}


29 changes: 15 additions & 14 deletions frontend/src/components/popups/DeletePopup.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
import React from 'react';
import Image from 'next/image';
import React from "react";
import Image from "next/image";

const DeletePopup = () => {
return (
<div className='rectangle-box flex-col'>
<div className="rectangle-box flex-col">
<div className="heading">
<h2>Delete</h2>
</div>
<div className="deleteimage">
<Image src="/Delete.png"width={100} height={100} alt="Delete" />
<p className='text'>Are you sure you want to delete ? you cannot undo this action.</p>
<div className="delete-image">
<Image src="/Delete.png" width={100} height={100} alt="Delete" />
<p className="text">
Are you sure you want to delete ? you cannot undo this action.
</p>
</div>
<div className=' flex w-full justify-between'>
<button className="cancel-button">Cancel</button>
<button className="cancel-button">Continue</button>
<div className=" flex w-full justify-between">
<button className="cancel-button">Cancel</button>

<button className="cancel-button">Continue</button>
</div>
</div>
)
}

export default DeletePopup
);
};

export default DeletePopup;
36 changes: 17 additions & 19 deletions frontend/src/components/popups/LogoutPopup.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,23 @@
import React from 'react'
import Image from 'next/image'
import React from "react";
import Image from "next/image";

const LogoutPopup = () => {
return (
<div className='Logout-box'>
<div className='title'>
<div className="logout-box">
<div className="title">
<h2>Logout</h2>
</div>
<div className='Logoutimage'>
<Image src="/Logout.png" width={100} height={100} alt="Logout" />

<p className='Logout-text' >Are you sure you want to Logout.</p>
</div>
<div className='flex w-full justify-betwen gap-10' >
<button className='cancel1-button'>Cancel</button>
<button className='Logout-button'>Logout</button>
</div>
</div>
</div>
<div className="logout-image">
<Image src="/Logout.png" width={100} height={100} alt="Logout" />


)
}
<p className="logout-text">Are you sure you want to Logout.</p>
</div>
<div className="flex w-full justify-betwen gap-10">
<button className="cancel-button">Cancel</button>
<button className="logout-button">Logout</button>
</div>
</div>
);
};

export default LogoutPopup
export default LogoutPopup;
10 changes: 5 additions & 5 deletions frontend/src/components/popups/WalletPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@ const Walletpage = ({
>
<DialogContent sx={{ padding: 0 }}>
<div className="custom-box flex-col">
<div className="header">
<div className="add-wallet-header">
<h2>Add Wallet</h2>
<div className="dialog-close-icon" onClick={handleClose}>
<Image src="/close.svg" width={40} height={40} alt="close" />
</div>
</div>
<div className="container">
<div className="add-wallet-dialog-content">
<div
className="wallet"
onClick={() => {
Expand All @@ -40,7 +40,7 @@ const Walletpage = ({
height={100}
alt="Keplrwallet"
/>
<p className="text">Keplr Wallet</p>
<p className="wallet-name">Keplr Wallet</p>
</div>
<div
className="wallet"
Expand All @@ -54,7 +54,7 @@ const Walletpage = ({
height={100}
alt="Leap Wallet"
/>
<p className="text">Leap Wallet</p>
<p className="wallet-name">Leap Wallet</p>
</div>
<div
className="wallet"
Expand All @@ -68,7 +68,7 @@ const Walletpage = ({
height={100}
alt="cosmostation"
/>
<p className="text">Cosmostation </p>
<p className="wallet-name">Cosmostation </p>
</div>
</div>
</div>
Expand Down

0 comments on commit 4b09fb5

Please sign in to comment.