feat: style

packages/proposals/src/views/home/style.less

@@ -40,6 +40,7 @@
     user-select: none;
     pointer-events: none;
     display: flex;
+    margin: 0px !important;
     margin-left: 0px !important;
     margin-right: auto;
 
@@ -60,7 +61,7 @@
 
   .ant-list-item-meta {
     padding: 10px;
-    margin: 0px;
+    margin: 0px !important;
     margin-bottom: 0px !important;
     display: flex;
     align-items: center;

packages/proposals/src/views/proposal/index.tsx

@@ -24,6 +24,7 @@ import MintGovernanceTokens from '../../components/Proposal/MintGovernanceTokens
 import { Vote } from '../../components/Proposal/Vote';
 import { RegisterToVote } from '../../components/Proposal/RegisterToVote';
 import { WithdrawTokens } from '../../components/Proposal/WithdrawTokens';
+import './style.less';
 export const urlRegex = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
 const { useMint } = contexts.Accounts;
 const { useAccountByMint } = hooks;
@@ -127,7 +128,8 @@ function InnerProposalView({
   }, [loading]);
 
   return (
-    <>
+    <Row>
+        <Col flex="auto" xxl={15} xs={24} className="proposal-container">
       <Space
         size="large"
         split={<Divider type="horizontal" />}
@@ -135,13 +137,8 @@ function InnerProposalView({
       >
         <Row justify="center" align="middle">
           <Col span={24}>
-            <p>
-              <span style={{ fontSize: '21px', marginRight: '20px' }}>
-                {LABELS.PROPOSAL}: {proposal.info.state.name}
-              </span>
-
-              <StateBadge proposal={proposal} />
-            </p>
+            <h1 style={{ fontSize: '1.75rem' }}>{proposal.info.state.name}</h1>
+            <StateBadge proposal={proposal} />
           </Col>
         </Row>
         <Row>
@@ -264,7 +261,9 @@ function InnerProposalView({
             )}
         </Row>
       </Space>
-    </>
+
+        </Col>
+    </Row>
   );
 }
 

packages/proposals/src/views/proposal/style.less

@@ -0,0 +1,6 @@
+.proposal-container {
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  text-align: left;
+}

packages/proposals/src/views/proposals/index.tsx

@@ -43,7 +43,7 @@ export const ProposalsView = () => {
 
 
   return (
-    <Row style={{ background: `url(${tokenBackground})`, height: '100%' }}>
+    <Row style={{ background: `url(${tokenBackground})`, minHeight: '100%', backgroundRepeat: 'repeat-y', backgroundSize: 'cover' }}>
       <Col flex="auto"  xxl={15} xs={24} className="proposals-container">
         <div className="proposals-header">
           <TokenIcon mintAddress={config?.info.governanceMint} size={60} style={{ marginRight: 20 }} />
@@ -56,6 +56,7 @@ export const ProposalsView = () => {
 
           <NewProposalMenuItem className="proposals-new-btn" disabled={!connected} />
         </div>
+        <h1 className="proposals-list-title">Proposals</h1>
         <List
           itemLayout="vertical"
           size="large"

packages/proposals/src/views/proposals/style.less

@@ -6,10 +6,16 @@
   position: relative;
 }
 
+.proposals-list-title {
+  padding: 10px 0px;
+  margin-left: 10px;
+  text-align: left;
+}
+
 .proposals-header {
   display: flex;
   align-items: center;
-  padding: 0px 10px;
+  padding: 10px;
   text-align: left;
 
   h1 {