-
-
-
-
-
-
diff --git a/src/components/atoms/Alert.stories.tsx b/src/components/atoms/Alert.stories.tsx
index a97b92228..98705b7c6 100644
--- a/src/components/atoms/Alert.stories.tsx
+++ b/src/components/atoms/Alert.stories.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import { Center } from '../../../.storybook/helpers'
-import { Alert } from './Alert'
+import Alert from './Alert'
export default {
title: 'Atoms/Alert',
diff --git a/src/components/atoms/Alert.tsx b/src/components/atoms/Alert.tsx
index 5b25e571c..c1b7b0a14 100644
--- a/src/components/atoms/Alert.tsx
+++ b/src/components/atoms/Alert.tsx
@@ -1,7 +1,7 @@
import React, { ReactElement } from 'react'
import styles from './Alert.module.css'
-export function Alert({
+export default function Alert({
title,
text,
state
diff --git a/src/components/atoms/Button.module.css b/src/components/atoms/Button.module.css
index 24c6ffff9..c84caabd6 100644
--- a/src/components/atoms/Button.module.css
+++ b/src/components/atoms/Button.module.css
@@ -46,7 +46,7 @@
.button:disabled {
cursor: not-allowed;
pointer-events: none;
- opacity: 0.5;
+ background: var(--brand-grey-lighter);
}
.primary,
diff --git a/src/components/atoms/Checkbox.module.css b/src/components/atoms/Checkbox.module.css
deleted file mode 100644
index da4962a0d..000000000
--- a/src/components/atoms/Checkbox.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.label {
- cursor: pointer;
-}
diff --git a/src/components/atoms/Checkbox.stories.tsx b/src/components/atoms/Checkbox.stories.tsx
deleted file mode 100644
index 085145444..000000000
--- a/src/components/atoms/Checkbox.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react'
-import Checkbox from './Checkbox'
-import { Center } from '../../../.storybook/helpers'
-
-export default {
- title: 'Atoms/Checkbox',
- decorators: [(storyFn: any) =>
{storyFn()}]
-}
-
-export const Checked = () => (
-
null}
- label="Example checkbox"
- />
-)
-
-export const Unchecked = () => (
- null}
- label="Example checkbox"
- />
-)
diff --git a/src/components/atoms/Checkbox.tsx b/src/components/atoms/Checkbox.tsx
deleted file mode 100644
index a5e17ce89..000000000
--- a/src/components/atoms/Checkbox.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import styles from './Checkbox.module.css'
-
-interface CheckboxProps {
- name: string
- checked: boolean
- onChange?: (evt: React.ChangeEvent) => void
- label: string
-}
-
-const Checkbox: React.FC = ({
- name,
- checked,
- onChange,
- label
-}) => {
- return (
-
- )
-}
-
-export default Checkbox
diff --git a/src/components/atoms/File.tsx b/src/components/atoms/File.tsx
index 627e98539..f4e3f1c72 100644
--- a/src/components/atoms/File.tsx
+++ b/src/components/atoms/File.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
import { File as FileMetaData } from '@oceanprotocol/squid'
import filesize from 'filesize'
import cleanupContentType from '../../utils/cleanupContentType'
import styles from './File.module.css'
-export default function File({ file }: { file: FileMetaData }) {
+export default function File({ file }: { file: FileMetaData }): ReactElement {
if (!file) return null
return (
diff --git a/src/components/atoms/FormWidgets/DateRangeWidget.module.css b/src/components/atoms/FormWidgets/DateRangeWidget.module.css
deleted file mode 100644
index 8d769504c..000000000
--- a/src/components/atoms/FormWidgets/DateRangeWidget.module.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.dateRange {
- display: flex;
-}
-
-.separator {
- margin: 0 var(--spacer);
- height: inherit;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: var(--font-size-base);
-}
-
-.checkbox {
- composes: checkbox from '../../molecules/Form/FieldTemplate.module.css';
- margin-top: calc(var(--spacer) / 8);
-}
-
-.label {
- composes: label from '../../molecules/Form/FieldTemplate.module.css';
- font-size: var(--font-size-small);
-}
diff --git a/src/components/atoms/FormWidgets/DateRangeWidget.stories.tsx b/src/components/atoms/FormWidgets/DateRangeWidget.stories.tsx
deleted file mode 100644
index c4b9d511c..000000000
--- a/src/components/atoms/FormWidgets/DateRangeWidget.stories.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react'
-import { Center } from '../../../../.storybook/helpers'
-import DateRangeWidget from './DateRangeWidget'
-import { PublishFormSchema } from '../../../models/PublishForm'
-
-export default {
- title: 'Atoms/DateRangeWidget',
- decorators: [(storyFn: () => React.FC) => {storyFn()}]
-}
-
-export const DateRange = () => (
- {
- /* */
- }}
- onFocus={() => {
- /* */
- }}
- onChange={() => {
- /* */
- }}
- options={{}}
- required={false}
- />
-)
diff --git a/src/components/atoms/FormWidgets/DateRangeWidget.tsx b/src/components/atoms/FormWidgets/DateRangeWidget.tsx
deleted file mode 100644
index 9be3234d1..000000000
--- a/src/components/atoms/FormWidgets/DateRangeWidget.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { WidgetProps } from 'react-jsonschema-form'
-import loadable from '@loadable/component'
-import styles from './DateRangeWidget.module.css'
-import { toStringNoMS } from '../../../utils'
-
-// lazy load this module, it's huge
-const LazyDatePicker = loadable(() => import('react-datepicker'))
-
-export function getWidgetValue(
- date1: Date,
- date2: Date,
- range: boolean
-): string {
- let [initial, final] = [toStringNoMS(date1), toStringNoMS(date2)]
-
- if (!range) {
- final = initial
- }
-
- return JSON.stringify([initial, final])
-}
-
-export default function DateRangeWidget(props: WidgetProps) {
- const { onChange } = props
- const [startDate, setStartDate] = useState(new Date())
- const [endDate, setEndDate] = useState(new Date())
- const [range, setRange] = useState(false)
-
- useEffect(() => {
- // If the range checkbox is clicked we update the value of the picker
- onChange(getWidgetValue(startDate, endDate, range))
- }, [range])
-
- return (
- <>
-
- {range ? (
- <>
-
{
- setStartDate(date)
- onChange(getWidgetValue(date, endDate, range))
- }}
- startDate={startDate}
- selectsStart
- endDate={endDate}
- />
- –
- {
- setEndDate(date)
- onChange(getWidgetValue(startDate, date, range))
- }}
- minDate={startDate}
- startDate={startDate}
- endDate={endDate}
- />
-
- ) : (
- {
- setStartDate(date)
- onChange(getWidgetValue(date, date, range))
- }}
- startDate={startDate}
- />
- )}
-
- setRange(ev.target.checked)}
- checked={range}
- />
-
-
-
- )
-}
diff --git a/src/components/atoms/FormWidgets/TermsWidget.module.css b/src/components/atoms/FormWidgets/TermsWidget.module.css
deleted file mode 100644
index d677df623..000000000
--- a/src/components/atoms/FormWidgets/TermsWidget.module.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.terms {
- padding: calc(var(--spacer) / 2);
- border: 1px solid var(--brand-grey-light);
- background-color: var(--brand-grey-lighter);
- border-radius: var(--border-radius);
- margin-bottom: calc(var(--spacer) / 2);
- font-size: var(--font-size-small);
-
- max-height: 250px;
- /* smooth overflow scrolling for pre-iOS 13 */
- overflow: auto;
- -webkit-overflow-scrolling: touch;
-}
-
-.terms h1 {
- font-size: var(--font-size-base);
- margin-bottom: calc(var(--spacer) / 2);
-}
-
-.terms h2 {
- font-size: var(--font-size-small);
-}
-
-.label {
- composes: label from '../../molecules/Form/FieldTemplate.module.css';
- margin-bottom: 0;
-}
-
-.req {
- composes: req from '../../molecules/Form/FieldTemplate.module.css';
-}
diff --git a/src/components/atoms/FormWidgets/TermsWidget.tsx b/src/components/atoms/FormWidgets/TermsWidget.tsx
deleted file mode 100644
index cb6383aa4..000000000
--- a/src/components/atoms/FormWidgets/TermsWidget.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react'
-import { WidgetProps } from 'react-jsonschema-form'
-import styles from './TermsWidget.module.css'
-
-export default function TermsWidget(props: WidgetProps) {
- const {
- id,
- value,
- disabled,
- readonly,
- label,
- autofocus,
- onBlur,
- onFocus,
- onChange,
- required
- // DescriptionField
- } = props
-
- return (
- <>
- {/* */}
-
-
- )
-}
diff --git a/src/components/atoms/Input/InputElement.module.css b/src/components/atoms/Input/InputElement.module.css
index 87a7cbd2f..d468b5dc9 100644
--- a/src/components/atoms/Input/InputElement.module.css
+++ b/src/components/atoms/Input/InputElement.module.css
@@ -69,34 +69,10 @@
.radioGroup {
margin-top: calc(var(--spacer) / 2);
- margin-bottom: -2%;
-}
-
-@media screen and (min-width: 40rem) {
- .radioGroup {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- }
}
.radioWrap {
position: relative;
- padding: calc(var(--spacer) / 2);
- text-align: center;
- display: flex;
- align-items: center;
- margin-bottom: 2%;
-}
-
-@media screen and (min-width: 40rem) {
- .radioWrap {
- flex: 0 0 49%;
- }
-}
-
-.radio:checked + label {
- border-color: var(--brand-pink);
}
.radioLabel {
@@ -104,19 +80,8 @@
padding: 0;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-small);
- line-height: 1.2;
- border: 1px solid var(--brand-grey-lighter);
- border-radius: 0.2rem;
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
color: var(--brand-grey);
- text-align: left;
- padding-left: 2.5rem;
- display: flex;
- align-items: center;
+ padding-left: 0.5rem;
}
/* Size modifiers */
diff --git a/src/components/atoms/Input/InputElement.tsx b/src/components/atoms/Input/InputElement.tsx
index 7ef547ef9..45981c322 100644
--- a/src/components/atoms/Input/InputElement.tsx
+++ b/src/components/atoms/Input/InputElement.tsx
@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
import slugify from '@sindresorhus/slugify'
import styles from './InputElement.module.css'
import { InputProps } from '.'
+import FilesInput from '../../molecules/FilesInput'
-export default function InputElement(props: InputProps) {
+export default function InputElement(props: InputProps): ReactElement {
const { type, options, rows, name } = props
switch (type) {
@@ -52,6 +53,8 @@ export default function InputElement(props: InputProps) {
))}