Move proposal up and hide by default

web/components/bio/editable-bio.tsx

@@ -12,6 +12,7 @@ import {useEffect, useState} from "react";
 import ReactMarkdown from "react-markdown";
 import Link from "next/link"
 import {MIN_BIO_LENGTH} from "common/constants";
+import {ShowMore} from 'web/components/widgets/show-more'
 
 const placeHolder = "Tell us about yourself — and what you're looking for!";
 
@@ -26,32 +27,11 @@ Write a clear and engaging bio to help others understand who you are and the con
 `
 
 export function BioTips() {
-  const [showMoreInfo, setShowMoreInfo] = useState(false)
-
   return (
-    <div className="mt-2 mb-4">
-      <button
-        type="button"
-        onClick={() => setShowMoreInfo(!showMoreInfo)}
-        className="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 flex items-center"
-      >
-        {showMoreInfo ? 'Hide info' : 'Tips'}
-        <svg
-          className={`w-4 h-4 ml-1 transition-transform ${showMoreInfo ? 'rotate-180' : ''}`}
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7"/>
-        </svg>
-      </button>
-      {showMoreInfo && (
-        <div className="mt-2 p-3 rounded-md text-sm customlink">
-          <ReactMarkdown>{tips}</ReactMarkdown>
-          <Link href="/tips-bio" target="_blank">Read full tips for writing a high-quality bio</Link>
-        </div>
-      )}
-    </div>
+    <ShowMore labelClosed="Tips" labelOpen="Hide info" className={'customlink text-sm'}>
+      <ReactMarkdown>{tips}</ReactMarkdown>
+      <Link href="/tips-bio" target="_blank">Read full tips for writing a high-quality bio</Link>
+    </ShowMore>
   )
 }
 

web/components/votes/vote-info.tsx

@@ -15,6 +15,7 @@ import toast from "react-hot-toast";
 import {Vote, VoteItem} from 'web/components/votes/vote-item'
 import Link from "next/link";
 import {formLink} from "common/constants";
+import { ShowMore } from "../widgets/show-more";
 
 export function VoteComponent() {
   const user = useUser()
@@ -37,15 +38,9 @@ export function VoteComponent() {
       <p className={'customlink'}>
         You can discuss any of those proposals through the <Link href={'/contact'}>contact form</Link>, the <Link href={formLink}>feedback form</Link>, or any of our <Link href={'/social'}>socials</Link>.
       </p>
-      {votes && votes.length > 0 && <Col className={'mt-4'}>
-        {votes.map((vote: Vote) => {
-          return (
-            <VoteItem key={vote.id} vote={vote} onVoted={refreshVotes}/>
-          )
-        })}
-      </Col>}
+
       {user && <Col>
-          <Title className="!mb-2 text-3xl">Add a new proposal</Title>
+        <ShowMore labelClosed="Add a new proposal" labelOpen="Hide">
           <Input
               value={title}
               placeholder={'Title'}
@@ -92,8 +87,18 @@ export function VoteComponent() {
             </Button>
           </Row>
         )}
+      </ShowMore>
       </Col>
       }
+
+      {votes && votes.length > 0 && <Col className={'mt-4'}>
+        {votes.map((vote: Vote) => {
+          return (
+            <VoteItem key={vote.id} vote={vote} onVoted={refreshVotes}/>
+          )
+        })}
+      </Col>}
+
     </Col>
   )
 }

web/components/widgets/show-more.tsx

@@ -0,0 +1,38 @@
+import {useState, ReactNode} from 'react'
+
+interface ShowMoreProps {
+  labelClosed?: string
+  labelOpen?: string
+  children: ReactNode
+  className?: string
+}
+
+export function ShowMore(props: ShowMoreProps) {
+  const {labelClosed = 'Show more', labelOpen = 'Hide', children, className} = props
+  const [showMoreInfo, setShowMoreInfo] = useState(false)
+
+  return (
+    <div className={`mt-2 mb-4 ${className ?? ''}`}>
+      <button
+        type="button"
+        onClick={() => setShowMoreInfo(!showMoreInfo)}
+        className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 flex items-center"
+      >
+        {showMoreInfo ? labelOpen : labelClosed}
+        <svg
+          className={`w-4 h-4 ml-1 transition-transform ${showMoreInfo ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7"/>
+        </svg>
+      </button>
+      {showMoreInfo && (
+        <div className="mt-2 p-3 rounded-md">
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}