исправления, преукрасл стили у компонентов

dan0102dan · Mar 24, 2024 · 2fc751d · 2fc751d
1 parent 6ff0e16
commit 2fc751d
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 50 deletions.
diff --git a/server/classes/User.ts b/server/classes/User.ts
@@ -49,7 +49,8 @@ export default class User {
 	async subscribe(instId, price, trend) {
 		checkParameters([instId, price, trend])
 
-		if (this.subscriptions.length >= 10) throw new Error('Subscription limit of 10 reached')
+		if (this.subscriptions.filter(e => e.instId === instId).length >= 10)
+			throw new Error('Subscription limit of 10 reached')
 
 		const exists = this.subscriptions.some(e => e.instId === instId && e.price === price && e.trend === trend)
 		if (exists) throw new Error('Subscription already exists')

diff --git a/server/tools/app/functions/checkParameters.ts b/server/tools/app/functions/checkParameters.ts
@@ -1,4 +1,4 @@
 export default (params: Array<any>) => {
     for (const param of params)
-        if (!param) throw new Error(`Missing parameter: ${param}`)
+        if (!param) throw new Error('Missing parameters')
 }
diff --git a/server/tools/dataSync/dataSync.ts b/server/tools/dataSync/dataSync.ts
@@ -31,7 +31,6 @@ const searchPair = async () => {
             ).lean()
         }
         catch (e) {
-            // console.error(item.instId, e)
             continue
         }
     }

diff --git a/web/src/Components/Button/Button.module.css b/web/src/Components/Button/Button.module.css
@@ -17,17 +17,19 @@
     transition: background-color 0.3s ease, color 0.3s ease;
 }
 
+.button:active,
+.favoriteButton:active,
+.triggerButton:active {
+    background-color: rgba(169, 199, 255, 0.2);
+}
+
 .button:disabled,
 .favoriteButton:disabled,
 .triggerButton:disabled,
 .removeButton:disabled {
     color: var(--app-subtitle-text-color);
-}
-
-.button:active,
-.favoriteButton:active,
-.triggerButton:active {
-    background-color: rgba(169, 199, 255, 0.2);
+    background-color: var(--app-button-color);
+    cursor: not-allowed;
 }
 
 .favoriteButton {
@@ -41,6 +43,7 @@
 }
 
 .removeButton {
+    margin: 0;
     padding: 6px 12px;
     font-size: 14px;
     background-color: var(--app-destructive-text-color);

diff --git a/web/src/Components/TriggerForm/TriggerForm.jsx b/web/src/Components/TriggerForm/TriggerForm.jsx
@@ -3,12 +3,21 @@ import styles from './TriggerForm.module.css'
 import { Button } from '../index'
 import { server } from '../../API'
 
-const TriggerForm = ({ instId, loading, disabled, setSubscribing, subscriptions, setSubscriptions }) => {
+const TriggerForm = ({ instId, setGettingSubscriptions }) => {
     const [price, setPrice] = useState('')
     const [trend, setTrend] = useState('any')
 
+    const [subscribing, setSubscribing] = useState(false)
+    const [subscriptions, setSubscriptions] = useState()
+
+    const options = {
+        any: 'Any',
+        up: 'Ascending',
+        down: 'Descending'
+    }
+
     const getSubscriptions = useCallback(async () => {
-        setSubscribing(true)
+        setGettingSubscriptions(true)
         try {
             const { data } = await server.get('/subscriptions', { params: { instId } })
 
@@ -17,8 +26,8 @@ const TriggerForm = ({ instId, loading, disabled, setSubscribing, subscriptions,
         catch (e) {
             console.error(e)
         }
-        setSubscribing(false)
-    }, [instId, setSubscriptions, setSubscribing])
+        setGettingSubscriptions(false)
+    }, [instId, setSubscriptions, setGettingSubscriptions])
 
     useEffect(() => {
         if (!subscriptions)
@@ -59,12 +68,12 @@ const TriggerForm = ({ instId, loading, disabled, setSubscribing, subscriptions,
 
     return (
         <form className={styles.form}>
-            <div className={styles.labelGroup}>
-                <div className={styles.label}>Trigger price</div>
-                <div className={styles.label}>Select trend</div>
-            </div>
-            <div className={styles.inputGroup}>
+            <div className={styles.field}>
+                <div className={styles.labelContainer}>
+                    <label className={styles.label}>Trigger price</label>
+                </div>
                 <input
+                    id="price"
                     className={styles.input}
                     inputMode="decimal"
                     min="0"
@@ -73,20 +82,24 @@ const TriggerForm = ({ instId, loading, disabled, setSubscribing, subscriptions,
                     onChange={(e) => setPrice(e.target.value.replace(',', '.'))}
                     placeholder="Enter price"
                 />
+                <div className={styles.labelContainer}>
+                    <label className={styles.label}>Select trend</label>
+                </div>
                 <select
+                    id="trend"
                     value={trend}
                     onChange={(e) => setTrend(e.target.value)}
                     className={styles.select}
                 >
-                    <option value="any">Any</option>
-                    <option value="up">Ascending</option>
-                    <option value="down">Descending</option>
+                    {Object.entries(options).map(([value, label]) =>
+                        <option value={value}>{label}</option>
+                    )}
                 </select>
             </div>
             <Button
                 styleType='triggerButton'
                 onClick={subscribe}
-                loading={loading || disabled}
+                loading={subscribing}
             >
                 Subscribe
             </Button>
@@ -95,7 +108,7 @@ const TriggerForm = ({ instId, loading, disabled, setSubscribing, subscriptions,
                     <div key={i} className={styles.item}>
                         <div className={styles.details}>
                             <span>Price: {e.price}</span>
-                            <span>Trend: {e.trend}</span>
+                            <span>Trend: {options[e.trend]}</span>
                         </div>
                         <Button
                             onClick={() => unsubscribe(e.price, e.trend)}
@@ -110,4 +123,4 @@ const TriggerForm = ({ instId, loading, disabled, setSubscribing, subscriptions,
     )
 }
 
-export default TriggerForm
+export default TriggerForm
diff --git a/web/src/Components/TriggerForm/TriggerForm.module.css b/web/src/Components/TriggerForm/TriggerForm.module.css
@@ -1,45 +1,55 @@
 .form {
     display: flex;
     flex-direction: column;
-    gap: 8px;
-    padding: 20px;
+    gap: 12px;
+    padding: 12px;
 }
 
-.labelGroup, .inputGroup {
+.field {
     display: flex;
     justify-content: space-between;
 }
 
-.label {
+.labelContainer,
+.input,
+.select {
     flex: 1;
+}
+
+.labelContainer {
+    padding-right: 8px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.label {
     font-size: 14px;
     color: var(--app-hint-color);
-    text-align: center;
+    text-align: right;
 }
 
 .input,
 .select {
-    flex: 1;
+    width: 100%;
+    margin-left: 8px;
     padding: 12px;
     border-radius: 10px;
     font-size: 16px;
     color: var(--app-text-color);
-    background-color: var(--app-section-bg-color);
+    background-color: var(--app-secondary-bg-color);
+    /* background-color: var(--app-section-bg-color); */
     border: none;
-    margin-right: 8px;
     -webkit-appearance: none;
     appearance: none;
 }
 
-.select {
-    margin-right: 0;
-}
-
 .input:focus,
 .select:focus {
     outline: none;
 }
 
+
 .item {
     display: flex;
     justify-content: space-between;

diff --git a/web/src/index.css b/web/src/index.css
@@ -1,9 +1,3 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
 :root {
   --app-bg-color: var(--tg-theme-bg-color, #FFFFFF);
   --app-secondary-bg-color: var(--tg-theme-secondary-bg-color, #F5F5F5);
@@ -25,6 +19,30 @@
   --app-destructive-text-color: var(--tg-theme-destructive-text-color, #FF3B30);
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --app-bg-color: var(--tg-theme-bg-color-dark, #121212);
+    --app-secondary-bg-color: var(--tg-theme-secondary-bg-color-dark, #1E1E1E);
+    --app-text-color: var(--tg-theme-text-color-dark, #E0E0E0);
+    --app-hint-color: var(--tg-theme-hint-color-dark, #B8B8B8);
+    --app-link-color: var(--tg-theme-link-color-dark, #88AACC);
+    --app-subtitle-text-color: var(--tg-theme-subtitle-text-color-dark, #CBCBCB);
+    --app-button-color: var(--tg-theme-button-color-dark, #2A2A2A);
+    --app-button-text-color: var(--tg-theme-button-text-color-dark, #E0E0E0);
+    --app-header-bg-color: var(--tg-theme-header-bg-color-dark, #1C1C1C);
+    --app-accent-text-color: var(--tg-theme-accent-text-color-dark, #FFA040);
+    --app-section-bg-color: var(--tg-theme-section-bg-color-dark, #2D2D2D);
+    --app-section-header-text-color: var(--tg-theme-section-header-text-color-dark, #F0F0F0);
+    --app-destructive-text-color: var(--tg-theme-destructive-text-color-dark, #FF6767);
+  }
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

diff --git a/web/src/routes/Swap/Swap.jsx b/web/src/routes/Swap/Swap.jsx
@@ -12,10 +12,9 @@ const Swap = () => {
 
     const [loading, setLoading] = useState(true)
     const [toggling, setToggling] = useState(false)
-    const [subscribing, setSubscribing] = useState(false)
+    const [gettingSubscriptions, setGettingSubscriptions] = useState(true)
     const [isFavorite, setIsFavorite] = useState(false)
 
-    const [subscriptions, setSubscriptions] = useState()
     const [ccy, setCcy] = useState({ ...state })
     const [baseCcy, setBaseCcy] = useState('')
     const [quoteCcy, setQuoteCcy] = useState('')
@@ -43,7 +42,6 @@ const Swap = () => {
             getCcy()
         else
             setLoading(false)
-        window.history.replaceState({}, document.title)
     }, [ccy, getCcy])
 
     const baseSwap = (e) => {
@@ -124,13 +122,10 @@ const Swap = () => {
                         {isFavorite ? 'Remove from favorites' : 'Add to favorites'}
                     </Button>
                 </Section>
-                <Section title='Triggers' loading={loading}>
+                <Section title='Triggers' loading={gettingSubscriptions}>
                     <TriggerForm
                         instId={instId}
-                        loading={loading || subscribing}
-                        setSubscribing={setSubscribing}
-                        subscriptions={subscriptions}
-                        setSubscriptions={setSubscriptions}
+                        setGettingSubscriptions={setGettingSubscriptions}
                     />
                 </Section>
             </>