Resolute next js

frontend/src/app/(routes)/groups/page.tsx

@@ -6,7 +6,7 @@ const page = () => {
   return (
     <div className="page space-y-10">
       <Groups />
-      <GroupsCards />
+
     </div>
   );
 };

frontend/src/app/globals.css

@@ -759,11 +759,123 @@ body {
   .leavebutton {
     @apply flex w-[127px] justify-center items-center gap-2.5 self-stretch border px-6 py-3.5 rounded-[100px] border-solid border-white;
   }
-}
-
-
-@layer components { 
+  .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;
+  }
+  .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 ;
+  }
+  .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;
+  }
+  .voteproposal-text {
+    @apply text-white space-y-2 text-sm not-italic font-bold leading-6;
+  }
+  .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{
+    @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);
+  }
+  .titlegrp-Name{
+    @apply text-white text-base not-italic font-bold leading-3 ml-[-1270px];
+  }
+  .Group-details {
+    @apply flex items-start gap-10;
+  }
+  .headGroup1 {
+    @apply flex flex-col items-start gap-2;
+  }
+  .Group-first {
+    @apply text-[#B0B0B0] text-xs not-italic font-normal leading-3 tracking-[0.48px];
+  }
+  .Group-second {
+    @apply text-white text-sm not-italic font-normal leading-10 tracking-[0.56px] flex h-6 flex-col justify-center;
+  }
+  .head-Group2 {
+    @apply flex flex-col items-start gap-2;
+  }
+  .Group2-first {
+    @apply text-[#B0B0B0] text-xs not-italic font-normal leading-3 tracking-[0.48px];
+  }
+  .Group2-second {
+    @apply flex items-start gap-2;
+    /* @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];
+  }
+  .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 {
+    @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;
+  }
+  .table-main {
+    @apply flex justify-between items-center  self-stretch;
+  }
+  .table-main-text {
+    @apply flex w-32 flex-col justify-center self-stretch text-white text-xl not-italic font-bold leading-6;
+  }
+  .updatemembers {
+    @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]; 
+  }
+  .Grouptablehead th {
+    @apply text-[16px] leading-3 font-normal h-10;
+  }
+  .customTableHead td {
+    @apply pt-6 text-[14px] leading-3 ;
+  }
+  .customGrouptable {
+    @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;
+  }
+  .vote-head {
+    @apply flex h-10 justify-between items-center;
+  }
+  .vote-head h2 {
+    @apply flex w-[225px] flex-col justify-center self-stretch text-white text-center text-xl not-italic font-bold leading-3;
+  }
+  .vote-Image {
+    @apply flex flex-col items-center gap-4;
+  }
+  .vote-Image p {
+    @apply text-white text-center text-xl not-italic font-light leading-5;
+  }
+  .vote-button {
+    @apply text-white text-center text-xl not-italic font-bold leading-5 underline;
+  }
 
 
+}
 
-}
+ 

frontend/src/app/page.tsx

@@ -8,11 +8,27 @@ import TopNav from "./../components/TopNav";
 import BalanceOverview from "./../components/BalanceOverview";
 import AssetsTable from "./../components/AssetsTable";
 
+
+
+
+
+
+
 const OverviewPage = () => {
   return (
     <div className="page space-y-10">
       <AccountDetails />
       <BalanceOverview />
+
+
+
+
+
+
+
+
+
+
 
       <div className="space-y-6">
         <div className="table-title">

frontend/src/components/GroupsCards.tsx

@@ -4,6 +4,7 @@ import Image from 'next/image'
 const  GroupsCards = () => {
   const groupData = [1, 2, 3, 4, 5, 6, 7, 8];
   return (
+
     <div className='group-grid'>
       {groupData.map((index: number, id: number) =>(
         <div className='group-grid-card ' key={id}>
@@ -26,8 +27,8 @@ const  GroupsCards = () => {
           </div>
         </div>
         <div className='Groupbuttons'>
-          <div className='viewbutton'>View</div>
-          <div className='leavebutton'>Leave</div>
+          <button className='viewbutton'>View</button>
+          <button className='leavebutton'>Leave</button>
         </div>
       </div>
         ))}

frontend/src/components/Groupspage2.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import Image from 'next/image'
+
+
+const Groupspage2 = () => {
+    return (
+        <div className='Groups-page2'>
+            <div className='Groups-Main'>
+                <div  className='space-y-6' >
+                    <div className='group-title'>
+                        <Image src="/GroupImage.png" width={32} height={32} alt="Groupimage" />
+                        <div className='titlegrp-Name'>Group Name</div>
+                        <div className='end-title'>Est. 2023-09</div>
+                    </div>
+                    <p className=''>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
+                </div>
+                <div className='Group-details w-full '>
+                    <div className='headGroup1'>
+                        <div className='Group-first'>Forum</div>
+                        <div className='Group-second'>https:/search.google.com</div>
+                    </div>
+                    <div className='head-Group2'>
+                        <div className='Group2-first'>Group’s Address</div>
+                        <div className='Group2-second'>
+                            <div className='Group2-Address'>cosmos1enruju0dnejv8v..</div>
+                            <Image src="/copy-logo.png" width={24} height={24} alt="Copy-logo" />
+                            <div className='Group2-Edit'>Edit</div>
+                        </div>
+                    </div>
+                    <div className='headGroup1'>
+                        <div className='Group-first'>Total Weight</div>
+                        <div className='Group-second'>2</div>
+                    </div>
+                    <div className='headGroup1'>
+                        <div className='Group-first'>Total Members</div>
+                        <div className='Group-second'>2</div>
+                    </div>
+                </div>
+                <div className='Group2buttons'>
+                    <div className='updatebutton'>Update</div>
+                    <div className='leaveButton'>Leave</div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Groupspage2

frontend/src/components/Groupspage2table.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import Image from 'next/image';
+
+const Groupspage2table = () => {
+    const tableData = [
+        {
+            address: "cosmos1eu0dnejv8v..",
+            weight: "01",
+            name: "Hemanth Sai Venkata Redyy Rao",
+        },
+        {
+            address: "cosmos1eu0dnejv8v..",
+            weight: "01",
+            name: "Hemanth Sai Venkata Redyy Rao",
+        },
+        {
+            address: "cosmos1eu0dnejv8v..",
+            weight: "01",
+            name: "Hemanth Sai Venkata Redyy Rao",
+        },
+        {
+            address: "cosmos1eu0dnejv8v..",
+            weight: "01",
+            name: "Hemanth Sai Venkata Redyy Rao",
+        },
+
+    ];
+
+    return (
+
+        <div className='custom-group-table'>
+            <div className='table-main'>
+                <div className='table-main-text'>Members</div>
+                <button className='updatemembers'>Update Members</button>
+            </div>
+            <div>
+                <table className='customGrouptable'>
+                    <thead className='Grouptablehead mb-9'>
+                        <tr className='text-left'>
+                            <th>Address</th>
+                            <th>Weight</th>
+                            <th>Name</th>
+                        </tr>
+                    </thead>
+
+                    <tbody>
+                        {tableData.map((row, index) => (
+
+                            <tr key={index} className="py-6">
+                                <td>
+                                    <div className="my-3 flex gap-2">
+                                        {row.address}
+                                        <Image src="/copy.svg" width={24} height={24} alt="copy" />
+                                    </div>
+                                </td>
+                                <td>{row.weight}</td>
+                                <td>{row.name}</td>
+                            </tr>
+
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    )
+}
+
+export default Groupspage2table;

frontend/src/components/popups/FeegrantCreatedPopup.tsx

@@ -12,7 +12,7 @@ const FeegrantCreatedPopup = () => {
             <p>You have successfully updated the Grant</p>
         </div>
         <div className='Feegrant-Dismiss'>
-            <h2>Dismiss</h2>
+            <button>Dismiss</button>
         </div>
     </div>
   )

frontend/src/components/popups/GroupsVotePopup.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Image from 'next/image'
+
+const GroupsVotePopup = () => {
+  return (
+    <div className='Groups-vote-grid'>
+        <div className='vote-head'>
+            <h2>You have Voted !</h2>
+        </div>
+        <div className='vote-Image'>
+            <Image src="/vote.png" width={100} height={100} alt="vote-image" />
+            <p> You have successfully casted your vote, click on dismiss to go back</p>
+        </div>
+        <button className='vote-button'>Dismiss</button>
+    </div>
+  )
+}
+
+export default GroupsVotePopup

frontend/src/components/popups/VoteforProposal.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import Image from 'next/image'
+
+const VoteforProposal = () => {
+  return (
+    <div className='VoteforProposal-popup'>
+        <div className='vote-name'>
+            <div className='vote-text'>Vote for Proposal #6 Proposal NAME</div>
+            <Image className="absolute right-0" src="/close.svg" width={40} height={40} alt="close" />
+        </div>
+        <div className='VoteProposal-buttons'>
+        <button className='Proposal'>Yes</button>
+        <button className='Proposal'>No</button>
+
+        </div>
+        <div className='VoteProposal-buttons'>
+        <button className='Proposal'>Yes</button>
+        <button className='Proposal'>No</button>
+        </div>
+        <div className='voteproposal-text'>
+            <p>Justification</p>
+            <div className='voteproposal-message'>
+            <p>Enter here</p>
+        </div>
+        </div>
+       <button className='vote-confirm'>Confirm</button>
+    </div>
+  )
+}
+
+export default VoteforProposal