fix required/tooltip icon order

src/components/@shared/Form/Input/Label.module.css

@@ -6,11 +6,3 @@
   display: block;
   margin-bottom: calc(var(--spacer) / 4);
 }
-
-.required:after {
-  content: '*';
-  font-size: var(--font-size-base);
-  color: var(--color-secondary);
-  display: inline-block;
-  margin-left: 0.1rem;
-}

src/components/@shared/Form/Input/Label.tsx

@@ -2,19 +2,13 @@ import React, { ReactElement, ReactNode } from 'react'
 import styles from './Label.module.css'
 
 const Label = ({
-  required,
   children,
   ...props
 }: {
-  required?: boolean
   children: ReactNode
   htmlFor: string
 }): ReactElement => (
-  <label
-    className={`${styles.label} ${required && styles.required}`}
-    title={required ? 'Required' : ''}
-    {...props}
-  >
+  <label className={styles.label} {...props}>
     {children}
   </label>
 )

src/components/@shared/Form/Input/index.module.css

@@ -12,6 +12,13 @@
   margin-bottom: calc(var(--spacer) / 2);
 }
 
+.required {
+  font-size: var(--font-size-base);
+  color: var(--color-secondary);
+  display: inline-block;
+  margin-left: 0.1rem;
+}
+
 .error {
   display: inline-block;
   font-size: var(--font-size-mini);

src/components/@shared/Form/Input/index.tsx

@@ -10,13 +10,11 @@ import React, {
 import InputElement from './InputElement'
 import Label from './Label'
 import styles from './index.module.css'
-import { ErrorMessage, FieldInputProps, FieldMetaProps, useField } from 'formik'
+import { ErrorMessage, FieldInputProps } from 'formik'
 import classNames from 'classnames/bind'
 import Disclaimer from './Disclaimer'
 import Tooltip from '@shared/atoms/Tooltip'
 import Markdown from '@shared/Markdown'
-import MetadataFields from 'src/components/Publish/Metadata'
-import toPath from 'lodash/toPath'
 
 const cx = classNames.bind(styles)
 
@@ -113,8 +111,14 @@ export default function Input(props: Partial<InputProps>): ReactElement {
 
   return (
     <div className={styleClasses}>
-      <Label htmlFor={props.name} required={props.required}>
-        {label} {help && <Tooltip content={<Markdown text={help} />} />}
+      <Label htmlFor={props.name}>
+        {label}
+        {props.required && (
+          <span title="Required" className={styles.required}>
+            *
+          </span>
+        )}
+        {help && <Tooltip content={<Markdown text={help} />} />}
       </Label>
       <InputElement size={size} {...field} {...props} />
 
@@ -124,8 +128,6 @@ export default function Input(props: Partial<InputProps>): ReactElement {
         </div>
       )}
 
-      {/* {help && <Help>{help}</Help>} */}
-
       {disclaimer && (
         <Disclaimer visible={disclaimerVisible}>{disclaimer}</Disclaimer>
       )}

src/components/Publish/Pricing/Dynamic.tsx

@@ -1,9 +1,7 @@
-import PriceUnit from '@shared/Price/PriceUnit'
 import React, { ReactElement, useEffect, useState } from 'react'
 import Alert from '@shared/atoms/Alert'
 import FormHelp from '@shared/Form/Input/Help'
 import Tooltip from '@shared/atoms/Tooltip'
-import Wallet from '../../Header/Wallet'
 import Coin from './Coin'
 import styles from './Dynamic.module.css'
 import Fees from './Fees'
@@ -66,18 +64,6 @@ export default function Dynamic({ content }: { content: any }): ReactElement {
     <>
       <FormHelp>{content.info}</FormHelp>
 
-      <aside className={styles.wallet}>
-        {balance?.ocean && (
-          <PriceUnit
-            className={styles.balance}
-            price={balance.ocean}
-            symbol="OCEAN"
-            small
-          />
-        )}
-        <Wallet />
-      </aside>
-
       <h4 className={styles.title}>
         Price <Tooltip content={content.tooltips.poolInfo} />
       </h4>

src/components/Publish/Pricing/index.tsx

@@ -20,8 +20,6 @@ export default function PricingFields(): ReactElement {
   const { pricing } = values
   const { price, amountOcean, weightOnOcean, weightOnDataToken, type } = pricing
 
-  console.log(pricing)
-
   // Switch type value upon tab change
   function handleTabChange(tabName: string) {
     const type = tabName.toLowerCase()