Teia UI update

src/atoms/button/DonateButton.jsx

@@ -0,0 +1,50 @@
+import { useUserStore } from '@context/userStore'
+import { DAO_TREASURY_CONTRACT } from '@constants'
+
+import { useState } from 'react'
+import styles from './index.module.scss' // Import the SCSS module
+
+// Donation input component with user-defined amount
+const DonateInput = () => {
+  const [amount, setAmount] = useState('')
+  const [donate] = useUserStore((st) => [st.donate])
+
+  const handleAmountChange = (event) => {
+    setAmount(event.target.value)
+  }
+
+  const handleDonateClick = () => {
+    const amountAsNumber = parseFloat(amount)
+    if (isNaN(amountAsNumber) || amountAsNumber <= 0) {
+      alert('Please enter a valid donation amount')
+      return
+    }
+    donate(amountAsNumber, DAO_TREASURY_CONTRACT)
+  }
+
+  return (
+    <div className={styles.daoDonateButton}>
+      <h4>Donate to DAO Treasury</h4>
+      <p>Address: {DAO_TREASURY_CONTRACT}</p>
+      <input
+        type="number"
+        value={amount}
+        onChange={handleAmountChange}
+        placeholder="Enter Number in XTZ"
+        inputMode="decimal" // This makes the on-screen keyboard show numbers on mobile
+        pattern="[0-9]*" // This allows only numbers to be entered
+        min="0"
+        className={styles.donateInput}
+      />
+      <br />
+      <input
+        type="button"
+        value={`Donate ${amount} XTZ`}
+        onClick={handleDonateClick}
+        className={styles.donateButton}
+      />
+    </div>
+  )
+}
+
+export default DonateInput

src/atoms/button/index.module.scss

@@ -166,3 +166,107 @@ $border: 2px;
     text-decoration: none;
   }
 }
+
+/* Styles for the DonateInput component */
+.daoDonateButton {
+  font-family: var(--text-font);
+  max-width: 300px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid var(--gray-20);
+  border-radius: 0.1em;
+  background-color: var(--gray-4);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: var(--body-transition);
+
+  h4 {
+    margin: 0 0 10px;
+    font-size: 18px;
+    color: var(--text-color);
+  }
+
+  p {
+    margin: 0 0 15px;
+    font-size: 14px;
+    color: var(--gray-60);
+  }
+
+  .donateInput {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid var(--gray-20);
+    border-radius: 0.1em;
+    font-size: 16px;
+    box-sizing: border-box;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    transition: var(--body-transition);
+
+    &:focus {
+      border-color: var(--primary-color);
+      outline: none;
+      box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+    }
+  }
+
+  .donateButton {
+    width: 100%;
+    padding: 10px;
+    background-color: black;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+      background-color: darken(grey, 10%);
+    }
+
+    &:active {
+      background-color: darken(black, 20%);
+    }
+  }
+}
+
+// Responsive adjustments
+@include respond-to('tablet') {
+  .daoDonateButton {
+    max-width: 100%;
+    padding: 15px;
+
+    h4 {
+      font-size: 16px;
+    }
+
+    p {
+      font-size: 12px;
+    }
+
+    .donateInput,
+    .donateButton {
+      font-size: 14px;
+    }
+  }
+}
+
+@include respond-to('mobile') {
+  .daoDonateButton {
+    padding: 10px;
+
+    h4 {
+      font-size: 14px;
+    }
+
+    p {
+      font-size: 12px;
+    }
+
+    .donateInput,
+    .donateButton {
+      font-size: 12px;
+    }
+  }
+}

src/components/footer/index.module.scss

@@ -41,7 +41,6 @@
   @include respond-to('tablet') {
     grid-template-rows: none;
     grid-template-areas: 'Logo Copyright Menu Tools';
-    grid-template-columns: 1fr 2fr repeat(2, 1fr);
   }
 }
 
@@ -71,7 +70,12 @@
   text-align: left;
   align-items: flex-start;
 }
-
+.menu_label_row {
+  display: inline-block !important;
+  margin-right: 1em;
+  font-size: $font-small !important;
+  text-decoration: underline;
+}
 .address {
   color: var(--gray-20);
 }
@@ -91,6 +95,7 @@
 
 .copyright {
   grid-area: Copyright;
+  text-align: left;
 }
 
 .state_buttons {

src/components/footer/index.tsx

@@ -66,29 +66,56 @@ export const Footer = ({ menu, pin }: FooterProps) => {
       <motion.footer {...transition()} className={classes_content}>
         <div className={styles.logo}>
           Teia DAO LLC.
-          <a href="https://tzkt.io/">Powered by TzKT API</a>
-          {menu && (
+          {menu && (<>
             <Button
               alt="teia rotating logo"
               onClick={() => setLogoSeed(Math.random() * 100)}
             >
               <RotatingLogo theme={theme} logos={logos} seed={logoSeed} />
             </Button>
-          )}
-        </div>
-
-        <div className={styles.copyright}>{language.footer.mint}</div>
-        {menu && (
-          <>
-            <div className={styles.menus}>
-              <div className={styles.menu_left}>
+            <div className={styles.menu_left}>
                 <MenuItem className={styles.menu_label} route="about" />
                 <MenuItem
                   className={styles.menu_label}
                   label="F.A.Q"
                   route="faq"
                 />
               </div>
+            </>
+          )}
+          <a href="https://tzkt.io/">Powered by TzKT API</a>
+          </div>
+        <div className={styles.copyright}>
+          <div>
+            {language.footer.mint}
+          </div>
+          <div>
+          <MenuItem
+            className={styles.menu_label_row}
+            label="Core Values"
+            route="corevalues"
+          />
+          <MenuItem
+            className={styles.menu_label_row}
+            label="Code of Conduct"
+            route="codeofconduct"
+          />
+          <MenuItem
+            className={styles.menu_label_row}
+            label="Terms and Conditions"
+            route="terms"
+          />
+          <MenuItem
+            className={styles.menu_label_row}
+            label="Privacy Policy"
+            route="privacypolicy"
+          />
+          </div>
+        </div>
+        {menu && (
+          <>
+            <div className={styles.menus}>
+
               <Line vertical />
 
               <div className={styles.menu_right}>

src/components/form/FormFields.jsx

@@ -42,7 +42,6 @@ export const FormFields = ({ value, field, error, register, control }) => {
   const [showVisualizer, setShowVisualizer] = useState(false)
   const [audioBlob, setAudioBlob] = useState(null)
   const visualizerRef = useRef(null)
-
   const getArtistText = (userInfo, address) => {
     if (userInfo?.name) {
       return `${userInfo.name} (${address})`

src/components/header/feed_toolbar/FeedToolbar.jsx

@@ -11,6 +11,7 @@ import { useLocalSettings } from '@context/localSettingsStore'
 import { useLocation, useNavigate } from 'react-router'
 import { Line } from '@atoms/line'
 import { shallow } from 'zustand/shallow'
+import { useUserStore } from '@context/userStore'
 import { DEFAULT_START_FEED } from '@constants'
 
 // const MediaFilter = ({ label, tagline }) => {
@@ -23,12 +24,13 @@ import { DEFAULT_START_FEED } from '@constants'
 // }
 
 const locationMap = new Map([
+  ['---sort_feeds', 'Sort Feeds'],
   ['/feed/sales', 'Recent Sales'],
   ['/feed/random', 'Random'],
   ['/feed/newobjkts', 'New OBJKTs'],
   ['/feed/friends', 'Friends'],
   // separator
-  ['---fund_feeds', 'fund_feeds'],
+  ['---fund_feeds', 'Event Feeds'],
   ['/feed/art4artists', 'Art4Artists'],
   ['/feed/tez4pal', '🇵🇸 Tez4Pal'],
   ['/feed/morocco-quake-aid', '🇲🇦 Quake Aid'],
@@ -38,7 +40,7 @@ const locationMap = new Map([
   ['/feed/iran', '🇮🇷 Iran'],
   ['/feed/tezospride', '🏳️‍🌈 Tezospride'],
   // separator
-  ['---mime_feeds', 'mime_feeds'],
+  ['---mime_feeds', 'By Format'],
   ['/feed/image', 'Image'],
   ['/feed/video', 'Video'],
   ['/feed/audio', 'Audio'],
@@ -62,9 +64,11 @@ export const FeedToolbar = ({ feeds_menu = false }) => {
   )
   const location = useLocation()
   const feedLabel =
-    locationMap.get(location.pathname) || startFeed || DEFAULT_START_FEED
-
+    locationMap.get('/' + location.pathname.split('/').slice(1, 3).join('/')) ||
+    startFeed ||
+    DEFAULT_START_FEED
   const navigate = useNavigate()
+  const walletAddress = useUserStore((st) => [st.address], shallow)
 
   // TODO: finish the filtering logic
   // const filters = false
@@ -83,7 +87,14 @@ export const FeedToolbar = ({ feeds_menu = false }) => {
               <div className={styles.feeds_button}>
                 {[...locationMap.keys()].map((k) => {
                   if (k.startsWith('-')) {
-                    return <Line className={styles.separator} key={k} />
+                    return (
+                      <>
+                        <Line className={styles.separator} key={k} />
+                        <span className={styles.subtitle}>
+                          {locationMap.get(k)}
+                        </span>
+                      </>
+                    )
                   }
                   if (locationNeedSync.includes(k)) {
                     return (

src/components/header/feed_toolbar/index.module.scss

@@ -107,6 +107,10 @@
   padding-bottom: 1em;
 }
 
+.subtitle {
+  font-weight: bold;
+}
+
 .filters_container {
   display: flex;
   flex-direction: row;

src/components/header/main_menu/MainMenu.jsx

@@ -34,7 +34,11 @@ export const MainMenu = () => {
           {/* <MenuItem route="search" /> */}
           <MenuItem className={styles.menu_label} route="search" />
           <MenuItem className={styles.menu_label} route="about" />
-          <MenuItem className={styles.menu_label} label="F.A.Q" route="faq" />
+          <MenuItem
+            className={styles.menu_label}
+            label="Getting Started"
+            route="faq"
+          />
         </div>
         <Line className={styles.line} vertical />
         <div className={styles.menu_right}>
@@ -66,7 +70,7 @@ export const MainMenu = () => {
 
           <MenuItem
             className={styles.menu_label}
-            label="DAO governance"
+            label="DAO Governance"
             route="dao"
           />
 

src/components/header/main_menu/index.module.scss

@@ -24,7 +24,7 @@
   height: 100vh;
 
   .content {
-    line-height: 3em;
+    line-height: 2.75em;
     display: flex;
     justify-content: center;
     flex-direction: row;

src/constants.ts

@@ -166,6 +166,7 @@ export const MOROCCO_QUAKE_FUNDING_CONTRACT =
 
 export const POLLS_CONTRACT = 'KT1SUExZfkmxf2fafrVgYjZGEKDete2siWoU'
 export const DAO_GOVERNANCE_CONTRACT = 'KT1GHX73W5BcjbYRSZSrUJcnZE3Uw92VYF66'
+export const DAO_TREASURY_CONTRACT = 'KT1J9FYz29RBQi1oGLw8uXyACrzXzV1dHuvb'
 export const DAO_TOKEN_CONTRACT = 'KT1QrtA753MSv8VGxkDrKKyJniG5JtuHHbtV'
 export const DAO_TOKEN_CLAIM_CONTRACT = 'KT1NrfV4e2qWqFrnrKyPTJth5wq2KP9VyBei'
 export const DISTRIBUTION_MAPPING_IPFS_PATH =