Publish revamp (Part 1) (#1593)

* Rearrange fields * Autocomplete title * Fix class position * Hide deposit behind advanced settings * Redesign additional options * Redesign price section * Update price section * Redesign tags section * Fix title edit * Make with dynamic * Redesign thumbnail section * Redesign description section * Resedign file section * Polish sections * Adjust help text * Clear title on form reset * Adjust price section * Fix help color in light theme * Polish * Mobile adjustments * More mobile adjustments * Remove border-bottom from publish rows * Redesign date section * Adjust some details * Adjust clear button * Adjust channel selector on mobile * Adjust post save button position * Adjust browse button color * Adjust channel picker on mobile * Eenable announcement page * Remove file title, remove space, redesign licence section * Fix edit form, existing claim warning, missing title warning * Adjust light theme * Adjust icon collor in button
2022-06-03 15:28:12 +02:00 · 2022-06-03 15:28:12 +02:00 · 81eddb2b5d
commit 81eddb2b5d
parent 9dc03d816a
17 changed files with 806 additions and 451 deletions
--- a/ui/component/publishAdditionalOptions/license-type.jsx
+++ b/ui/component/publishAdditionalOptions/license-type.jsx
@ -78,7 +78,7 @@ class LicenseType extends React.PureComponent<Props> {

        {licenseType === OTHER && (
          <fieldset>
-            <legend>{__('Provide a description and link to your license')}</legend>
+            <div className="form-field__help">{__('Provide a description and link to your license')}</div>
            <fieldset-group>
              <FormField
                label={__('License description')}
--- a/ui/component/publishAdditionalOptions/view.jsx
+++ b/ui/component/publishAdditionalOptions/view.jsx
@ -9,6 +9,7 @@ import LicenseType from './license-type';
 import Card from 'component/common/card';
 import SUPPORTED_LANGUAGES from 'constants/supported_languages';
 import { sortLanguageMap } from 'util/default-languages';
+import PublishBid from 'component/publishBid';

 // @if TARGET='app'
 // import ErrorText from 'component/common/error-text';
@ -39,6 +40,7 @@ function PublishAdditionalOptions(props: Props) {
    licenseUrl,
    updatePublishForm,
    showSchedulingOptions,
+    disabled,
    // user,
    // useLBRYUploader,
    // needsYTAuth,
@ -112,11 +114,17 @@ function PublishAdditionalOptions(props: Props) {
  // @endif

  return (
+    <>
+      <h2 className="card__title">{__('Additional Options')}</h2>
      <Card
-      className="card--enable-overflow"
+        className="card--enable-overflow card--publish-section card--additional-options"
        actions={
          <React.Fragment>
            {!hideSection && (
+              <>
+                <div className="publish-row">
+                  <PublishBid disabled={disabled} />
+                </div>
                <div className={classnames({ 'card--disabled': !name })}>
                  {/* @if TARGET='app' */}
                  {/* {showLbryFirstCheckbox && (
@ -154,8 +162,9 @@ function PublishAdditionalOptions(props: Props) {
              )} */}
                  {/* @endif */}
                  <div className="section">
-                {!showSchedulingOptions && <PublishReleaseDate />}
+                    <div className="publish-row">{!showSchedulingOptions && <PublishReleaseDate />}</div>

+                    <div className="publish-row">
                      <FormField
                        label={__('Language')}
                        type="select"
@ -169,7 +178,9 @@ function PublishAdditionalOptions(props: Props) {
                          </option>
                        ))}
                      </FormField>
+                    </div>

+                    <div className="publish-row">
                      <LicenseType
                        licenseType={licenseType}
                        otherLicenseDescription={otherLicenseDescription}
@ -189,18 +200,17 @@ function PublishAdditionalOptions(props: Props) {
                      />
                    </div>
                  </div>
+                </div>
+              </>
            )}

            <div className="section__actions">
-            <Button
-              label={hideSection ? __('Additional Options') : __('Hide')}
-              button="link"
-              onClick={toggleHideSection}
-            />
+              <Button label={hideSection ? __('Show') : __('Hide')} button="link" onClick={toggleHideSection} />
            </div>
          </React.Fragment>
        }
      />
+    </>
  );
 }

--- a/ui/component/publishDescription/view.jsx
+++ b/ui/component/publishDescription/view.jsx
@ -20,18 +20,21 @@ function PublishDescription(props: Props) {
  }

  return (
+    <>
+      {disabled && <h2 className="card__title card__title-disabled">{__('Description')}</h2>}
+      {!disabled && <h2 className="card__title">{__('Description')}</h2>}
      <Card
+        className="card--description"
        actions={
          <FormField
            type={!SIMPLE_SITE && advancedEditor ? 'markdown' : 'textarea'}
            name="content_description"
-          label={__('Description')}
            placeholder={__(
              'What is your content about? Use this space to include any other relevant details you may like to share about your content and channel.'
            )}
            value={description}
            disabled={disabled}
-          onChange={value =>
+            onChange={(value) =>
              updatePublishForm({ description: !SIMPLE_SITE && advancedEditor ? value : value.target.value })
            }
            quickActionLabel={!SIMPLE_SITE && (advancedEditor ? __('Simple Editor') : __('Advanced Editor'))}
@ -40,6 +43,7 @@ function PublishDescription(props: Props) {
          />
        }
      />
+    </>
  );
 }

--- a/ui/component/publishFile/view.jsx
+++ b/ui/component/publishFile/view.jsx
@ -149,6 +149,12 @@ function PublishFile(props: Props) {
    }
  }, [currentFileType, mode, isStillEditing, updatePublishForm]);

+  // Reset title when form gets cleared
+
+  useEffect(() => {
+    updatePublishForm({ title: title });
+  }, [filePath]);
+
  // Initialize default file source state for each mode.
  useEffect(() => {
    setShowSourceSelector(false);
@ -365,9 +371,7 @@ function PublishFile(props: Props) {
  }

  function handleTitleChange(event) {
-    const title = event.target.value;
-    // Update title
-    updatePublishForm({ title });
+    updatePublishForm({ title: event.target.value });
  }

  function handleFileReaderLoaded(event: ProgressEvent) {
@ -430,6 +434,10 @@ function PublishFile(props: Props) {
      updateFileInfo(0, file.size, isVideo);
    }

+    // Strip off extention and replace invalid characters
+    let fileName = name || (file.name && file.name.substr(0, file.name.lastIndexOf('.'))) || '';
+    autofillTitle(file);
+
    if (isTextPost) {
      // Create reader
      const reader = new FileReader();
@ -457,8 +465,6 @@ function PublishFile(props: Props) {
      // File.path will be undefined from web due to browser security, so it will default to the File Object.
      filePath: file.path || file,
    };
-    // Strip off extention and replace invalid characters
-    let fileName = name || (file.name && file.name.substr(0, file.name.lastIndexOf('.'))) || '';

    if (!isStillEditing) {
      publishFormParams.name = parseName(fileName);
@ -469,12 +475,19 @@ function PublishFile(props: Props) {
    updatePublishForm(publishFormParams);
  }

+  function autofillTitle(file) {
+    const newTitle = (file && file.name && file.name.substr(0, file.name.lastIndexOf('.'))) || name || '';
+    if (!title) updatePublishForm({ title: newTitle });
+  }
+
  const showFileUpload = mode === PUBLISH_MODES.FILE || PUBLISH_MODES.LIVESTREAM;
  const isPublishPost = mode === PUBLISH_MODES.POST;

  return (
    <Card
-      className={disabled || balance === 0 ? 'card--disabled' : ''}
+      className={classnames({
+        'card--disabled': disabled || balance === 0,
+      })}
      title={
        <div>
          {header} {/* display mode buttons from parent */}
@ -482,8 +495,8 @@ function PublishFile(props: Props) {
          {inProgress && (
            <div>
              <Button
-                button="close"
-                label={__('New --[clears Publish Form]--')}
+                button="alt"
+                label={__('Clear --[clears Publish Form]--')}
                icon={ICONS.REFRESH}
                onClick={doClearPublish}
              />
@ -493,17 +506,10 @@ function PublishFile(props: Props) {
      }
      subtitle={subtitle || (isStillEditing && __('You are currently editing your upload.'))}
      actions={
+        <>
+          {/* <h2 className="card__title">{__('File')}</h2> */}
+          <div className="card--file">
            <React.Fragment>
-          <PublishName uri={uri} />
-          <FormField
-            type="text"
-            name="content_title"
-            label={__('Title')}
-            placeholder={__('Descriptive titles work best')}
-            disabled={disabled}
-            value={title}
-            onChange={handleTitleChange}
-          />
              {/* Decide whether to show file upload or replay selector */}
              {/* @if TARGET='web' */}
              <>
@ -547,13 +553,14 @@ function PublishFile(props: Props) {
                {fileSource === SOURCE_UPLOAD && showFileUpload && (
                  <>
                    <FileSelector
-                  label={__('File')}
                      disabled={disabled}
                      currentPath={currentFile}
                      onFileChosen={handleFileChange}
                      // https://stackoverflow.com/questions/19107685/safari-input-type-file-accept-video-ignores-mp4-files
                      accept={SIMPLE_SITE ? 'video/mp4,video/x-m4v,video/*,audio/*' : undefined}
-                  placeholder={SIMPLE_SITE ? __('Select video or audio file to upload') : __('Select a file to upload')}
+                      placeholder={
+                        SIMPLE_SITE ? __('Select video or audio file to upload') : __('Select a file to upload')
+                      }
                    />
                    {getUploadMessage()}
                  </>
@ -565,12 +572,15 @@ function PublishFile(props: Props) {
                      <div className="table__wrapper">
                        <table className="table table--livestream-data">
                          <tbody>
-                        {livestreamData.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE).map((item, i) => (
+                            {livestreamData
+                              .slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE)
+                              .map((item, i) => (
                                <tr
                                  onClick={() => setSelectedFileIndex((currentPage - 1) * PAGE_SIZE + i)}
                                  key={item.id}
                                  className={classnames('livestream__data-row', {
-                              'livestream__data-row--selected': selectedFileIndex === (currentPage - 1) * PAGE_SIZE + i,
+                                    'livestream__data-row--selected':
+                                      selectedFileIndex === (currentPage - 1) * PAGE_SIZE + i,
                                  })}
                                >
                                  <td>
@ -645,6 +655,18 @@ function PublishFile(props: Props) {
                  </div>
                )}
              </>
+              <FormField
+                type="text"
+                name="content_title"
+                label={__('Title')}
+                placeholder={__('Descriptive titles work best')}
+                disabled={disabled}
+                value={title}
+                onChange={handleTitleChange}
+                className="fieldset-group"
+              />
+              <PublishName uri={uri} />
+
              {/* @endif */}
              {/* @if TARGET='app' */}
              {showFileUpload && (
@ -703,6 +725,8 @@ function PublishFile(props: Props) {
                />
              )}
            </React.Fragment>
+          </div>
+        </>
      }
    />
  );
--- a/ui/component/publishForm/view.jsx
+++ b/ui/component/publishForm/view.jsx
@ -20,7 +20,6 @@ import TagsSelect from 'component/tagsSelect';
 import PublishDescription from 'component/publishDescription';
 import PublishPrice from 'component/publishPrice';
 import PublishFile from 'component/publishFile';
-import PublishBid from 'component/publishBid';
 import PublishAdditionalOptions from 'component/publishAdditionalOptions';
 import PublishFormErrors from 'component/publishFormErrors';
 import SelectThumbnail from 'component/selectThumbnail';
@ -593,7 +592,7 @@ function PublishForm(props: Props) {

  // Editing claim uri
  return (
-    <div className="card-stack uploadPage-wrapper">
+    <div className="card-stack">
      <ChannelSelect hideAnon={isLivestreamMode} disabled={disabled} autoSet channelToSet={claimChannelId} />

      <PublishFile
@ -635,15 +634,17 @@ function PublishForm(props: Props) {
        }
      />

+      {mode !== PUBLISH_MODES.POST && <PublishDescription disabled={formDisabled} />}
+
      {!publishing && (
        <div className={classnames({ 'card--disabled': formDisabled })}>
          {showSchedulingOptions && <Card body={<PublishStreamReleaseDate />} />}

-          {mode !== PUBLISH_MODES.POST && <PublishDescription disabled={formDisabled} />}
-
          <Card actions={<SelectThumbnail livestreamData={livestreamData} />} />

-          <label style={{ marginTop: 'var(--spacing-l)' }}>{__('Tags')}</label>
+          <h2 className="card__title" style={{ marginTop: 'var(--spacing-l)' }}>
+            {__('Tags')}
+          </h2>
          <TagsSelect
            suggestMature={!SIMPLE_SITE}
            disableAutoFocus
@ -671,7 +672,6 @@ function PublishForm(props: Props) {
            tagsChosen={tags}
          />

-          <PublishBid disabled={isStillEditing || formDisabled} />
          {!isLivestreamMode && <PublishPrice disabled={formDisabled} />}

          <PublishAdditionalOptions disabled={formDisabled} showSchedulingOptions={showSchedulingOptions} />
@ -696,7 +696,7 @@ function PublishForm(props: Props) {
        </div>
        <p className="help">
          {!formDisabled && !formValid ? (
-            <PublishFormErrors mode={mode} waitForFile={waitingForFile} overMaxBitrate={overMaxBitrate} />
+            <PublishFormErrors title={title} mode={mode} waitForFile={waitingForFile} overMaxBitrate={overMaxBitrate} />
          ) : (
            <I18nMessage
              tokens={{
--- a/ui/component/publishName/name-help-text.jsx
+++ b/ui/component/publishName/name-help-text.jsx
@ -72,13 +72,7 @@ function NameHelpText(props: Props) {
    nameHelpText = <div className="error__text">{__('You already have a claim with this name.')}</div>;
  }

-  return (
-    <React.Fragment>
-      {nameHelpText || (
-        <span>{__('Create a URL for this content. Simpler names are easier to find and remember.')}</span>
-      )}
-    </React.Fragment>
-  );
+  return <React.Fragment>{nameHelpText && nameHelpText}</React.Fragment>;
 }

 export default NameHelpText;
--- a/ui/component/publishName/view.jsx
+++ b/ui/component/publishName/view.jsx
@ -70,7 +70,7 @@ function PublishName(props: Props) {
    <>
      <fieldset-group class="fieldset-group--smushed fieldset-group--disabled-prefix">
        <fieldset-section>
-          <label>{__('Name')}</label>
+          <label>{__('URL')}</label>
          <div className="form-field__prefix">{prefix}</div>
        </fieldset-section>
        <FormField
@ -83,6 +83,7 @@ function PublishName(props: Props) {
          onBlur={() => setBlurred(true)}
        />
      </fieldset-group>
+
      <div className="form-field__help">
        <NameHelpText
          uri={uri}
--- a/ui/component/publishPrice/view.jsx
+++ b/ui/component/publishPrice/view.jsx
@ -15,8 +15,9 @@ function PublishPrice(props: Props) {

  return (
    <>
-      <label>{__('Price')}</label>
+      <h2 className="card__title">{__('Price')}</h2>
      <Card
+        className="card--publish-section card--price"
        actions={
          <React.Fragment>
            <FormField
--- a/ui/component/publishReleaseDate/view.jsx
+++ b/ui/component/publishReleaseDate/view.jsx
@ -39,9 +39,11 @@ const PublishReleaseDate = (props: Props) => {
  const isNew = releaseTime === undefined;
  const isEdit = !isNew || allowDefault === false;

-  const showEditBtn = isNew && releaseTimeEdited === undefined && allowDefault !== false;
+  // const showEditBtn = isNew && releaseTimeEdited === undefined && allowDefault !== false;
+  const showEditBtn = false;
  const showDefaultBtn = isNew && releaseTimeEdited !== undefined && allowDefault !== false;
-  const showDatePicker = isEdit || releaseTimeEdited !== undefined;
+  // const showDatePicker = isEdit || releaseTimeEdited !== undefined;
+  const showDatePicker = true;

  const onDateTimePickerChanged = (value) => {
    if (value) {
--- a/ui/component/publishStreamReleaseDate/view.jsx
+++ b/ui/component/publishStreamReleaseDate/view.jsx
@ -55,7 +55,9 @@ const PublishStreamReleaseDate = (props: Props) => {
      );

  return (
-    <div className="">
+    <>
+      <h2 className="card__title">{__('Date')}</h2>
+      <div className="card--date">
        <label htmlFor="date-picker-input">{__('When do you want to go live?')}</label>

        <div className={'w-full flex flex-col mt-s md:mt-0 md:h-12 md:items-center md:flex-row'}>
@ -96,6 +98,7 @@ const PublishStreamReleaseDate = (props: Props) => {

        <p className={'form-field__hint mt-m'}>{helpText}</p>
      </div>
+    </>
  );
 };

--- a/ui/component/selectThumbnail/view.jsx
+++ b/ui/component/selectThumbnail/view.jsx
@ -122,10 +122,9 @@ function SelectThumbnail(props: Props) {

  return (
    <>
+      <h2 className="card__title">{__('Thumbnail')}</h2>
      {status !== THUMBNAIL_STATUSES.IN_PROGRESS && (
-        <>
-          <label>{__('Thumbnail')}</label>
-          <div className="column">
+        <div className="column card--thumbnail">
          {thumbPreview}
          {publishForm && thumbUploaded ? (
            <div className="column__item">
@ -137,19 +136,21 @@ function SelectThumbnail(props: Props) {
          ) : (
            <div className="column__item">
              {manualInput ? (
+                <>
                  <FormField
                    type="text"
                    name="content_thumbnail"
-                    label="URL"
                    placeholder="https://images.fbi.gov/alien"
                    value={thumbnail}
                    disabled={formDisabled}
                    onChange={handleThumbnailChange}
                  />
+                  {!thumbUploaded && <p className="help">{__('Enter a URL for your thumbnail.')}</p>}
+                </>
              ) : (
+                <>
                  <FileSelector
                    currentPath={thumbnailPath}
-                    label={__('Thumbnail')}
                    placeholder={__('Choose an enticing thumbnail')}
                    accept={accept}
                    onFileChosen={(file) =>
@ -159,6 +160,15 @@ function SelectThumbnail(props: Props) {
                      })
                    }
                  />
+                  {!thumbUploaded && (
+                    <p className="help">
+                      {__('Upload your thumbnail to %domain%. Recommended ratio is 16:9, %max_size%MB max.', {
+                        domain: DOMAIN,
+                        max_size: THUMBNAIL_CDN_SIZE_LIMIT_BYTES / (1024 * 1024),
+                      })}
+                    </p>
+                  )}
+                </>
              )}
              <div className="card__actions">
                <Button
@ -183,20 +193,9 @@ function SelectThumbnail(props: Props) {
            </div>
          )}
        </div>
-        </>
      )}

      {status === THUMBNAIL_STATUSES.IN_PROGRESS && <p>{__('Uploading thumbnail')}...</p>}
-      {!thumbUploaded && (
-        <p className="help">
-          {manualInput
-            ? __('Enter a URL for your thumbnail.')
-            : __('Upload your thumbnail to %domain%. Recommended ratio is 16:9, %max_size%MB max.', {
-                domain: DOMAIN,
-                max_size: THUMBNAIL_CDN_SIZE_LIMIT_BYTES / (1024 * 1024),
-              })}
-        </p>
-      )}
    </>
  );
 }
--- a/ui/component/tagsSelect/view.jsx
+++ b/ui/component/tagsSelect/view.jsx
@ -79,6 +79,7 @@ export default function TagsSelect(props: Props) {
  return (
    ((showClose && !hasClosed) || !showClose) && (
      <Card
+        className="card--tags"
        icon={ICONS.TAG}
        title={
          hideHeader ? null : (
--- a/ui/page/publish/view.jsx
+++ b/ui/page/publish/view.jsx
@ -25,14 +25,7 @@ function PublishPage(props: Props) {
  }

  return (
-    <Page
-      noFooter
-      noSideNavigation
-      backout={{
-        title: __('Upload'),
-        backLabel: __('Back'),
-      }}
-    >
+    <Page className="uploadPage-wrapper" noFooter>
      {balance === 0 && <YrblWalletEmpty />}
      {balance !== 0 && fetchingChannels ? (
        <div className="main--empty">
--- a/ui/scss/component/_spinner.scss
+++ b/ui/scss/component/_spinner.scss
@ -56,3 +56,12 @@
 .spinnerArea--centered {
  text-align: center;
 }
+
+.button--primary {
+  .spinner {
+    height: 30px;
+    .rect {
+      background-color: var(--color-primary-contrast);
+    }
+  }
+}
--- a/ui/scss/init/_gui.scss
+++ b/ui/scss/init/_gui.scss
@ -425,6 +425,7 @@ img {

 .error__text {
  color: var(--color-text-error);
+  margin-left: 2px;
 }

 .help--error {
@ -480,8 +481,7 @@ img {
  background-color: #fef1f6;
  color: var(--color-black);
  font-weight: bold;
-
-  .button {
+  help .button {
    color: #fa6165;
  }
 }
@ -727,93 +727,398 @@ img {
 }

 .uploadPage-wrapper {
-  &.card-stack {
-    .card:not(:last-of-type) {
-      margin-bottom: var(--spacing-l) !important;
+  transition: width 0.4s;
+  @media (min-width: $breakpoint-small) {
+    width: 80% !important;
+  }
+  @media (min-width: $breakpoint-medium) {
+    width: 70% !important;
+  }
+  @media (min-width: $breakpoint-large) {
+    width: 60% !important;
+  }
+
+  @media (max-width: $breakpoint-small) {
+    .channel__selector {
+      margin-top: var(--spacing-m);
+      margin-bottom: var(--spacing-l);
+      button {
+        width: 100%;
+        .claim-preview__title {
+          // flex: 1;
+          text-align: left;
+        }
+        .comment__badge {
+          flex: 1;
+          text-align: left;
+        }
+        .icon--ChevronDown {
+          margin-left: auto;
+        }
+      }
    }
  }

-  .card__main-actions {
-    padding-top: var(--spacing-l);
+  .card__title-section {
+    width: 100%;
+    div:first-of-type:not(.card__subtitle) {
+      width: 100%;
+    }
+    h2 {
+      width: 100%;
+      div:first-of-type {
+        div {
+          width: unset !important;
+          float: right;
        }
-
-  label {
-    font-size: var(--font-medium);
      }
-
-  .button--close {
-    &:hover {
-      color: var(--color-primary);
-      background-color: unset;
    }
  }

-  .icon__wrapper--Tag {
-    margin-right: var(--spacing-s) !important;
-    width: 1rem !important;
-    height: 1rem !important;
-  }
-
-  .card:not(:first-of-type) {
-    .card__main-actions:not(:first-of-type) {
-      border-top: unset;
-    }
-    .card__subtitle {
-      margin-top: 0 !important;
+  .card__header--between {
+    // margin-bottom: var(--spacing-xl);
+    margin-bottom: 0;
+    border-bottom: 1px solid var(--color-border);
+    @media (max-width: $breakpoint-small) {
+      margin-bottom: var(--spacing-l);
    }
  }

-  .card:nth-last-child(2) {
-    .card__main-actions {
-      padding-top: var(--spacing-xxxs);
-      fieldset-section:not(:first-child) {
-        margin-top: var(--spacing-s);
+  .card__title {
+    div {
+      display: inline-block;
+      margin-top: 0px;
+      right: 0;
    }
-      .fieldset-group--smushed {
-        fieldset-section {
+    .button {
      margin-top: 0;
+    }
+    .button--alt:not(.button-toggle) {
+      font-size: var(--font-base);
+    }
+  }
+
+  .card__main-actions {
+    border: unset;
+  }
+
  label {
-            margin-left: 0;
+    font-size: var(--font-body);
+  }
+
+  .form-field__prefix {
+    box-shadow: unset !important;
+    border-width: 2px 2px 2px 0 !important;
+    border-color: var(--color-border) !important;
+    background-color: var(--color-border) !important;
+  }
+
+  .card--publish-section {
+    background: rgba(var(--color-header-background-base), 0.4);
+    border-radius: var(--border-radius);
+
+    .card__main-actions {
+      padding: 0;
+    }
+
+    fieldset-section {
+      padding: var(--spacing-s);
+    }
+
+    fieldset-section.radio {
+      margin-top: 0;
+      padding-bottom: 0;
+    }
+    fieldset-section.radio:last-of-type {
+      padding-bottom: var(--spacing-s);
+    }
+
+    fieldset-group {
+      margin-top: 0;
+      fieldset-section {
+        padding-right: 0;
      }
      .input--currency-select {
-            margin-left: 2px !important;
+        padding-left: 2px;
      }
    }
-      }
-      @media (max-width: $breakpoint-small) {
-        margin-top: var(--spacing-xxxs);
+
+    .publish-row {
+      // border-bottom: 1px solid var(--color-border);
+      .form-field__help {
+        padding: var(--spacing-s);
+        padding-top: 0;
      }
    }
+
+    .form-field-date-picker {
+      padding: var(--spacing-s);
+      margin-bottom: 0;
+    }
+  }
+
+  .tags__input-wrapper {
+    background: rgba(var(--color-header-background-base), 0.4);
+    border-radius: var(--border-radius);
+    padding: var(--spacing-s);
  }

  .help {
+    opacity: 0.8;
+    margin-bottom: var(--spacing-l);
    color: var(--color-text);
  }

-  .form-field__two-column {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .comment__char-count-mde {
-    min-width: 40px;
-    text-align: center;
-    margin-bottom: var(--spacing-xxxs);
-    padding-left: 4px;
-    padding-right: 4px;
-    padding-top: 5px;
+  .card--file {
+    background: rgba(var(--color-header-background-base), 0.4);
    border-radius: var(--border-radius);
-    height: var(--height-input-slim);
+    padding: var(--spacing-s);
+
+    input {
+      box-shadow: 0 0 0 2px var(--color-border) inset;
+      &:focus-visible {
+        box-shadow: 0 0 0 2px var(--color-primary) inset;
+      }
+    }
+    .button--secondary {
+      border-width: 2px 2px 2px 0;
+      border-color: var(--color-primary);
+      background-color: var(--color-primary) !important;
+      .icon {
+        stroke: var(--color-primary-contrast) !important;
+      }
+      .button__label {
+        color: var(--color-primary-contrast) !important;
+      }
+    }
+    label {
+      margin-left: 0 !important;
+    }
  }

-  .section__actions {
-    .button {
-      .button__content {
+  .card__title-disabled {
+    opacity: 0.3;
+  }
+
+  .card--description {
+    label {
+      font-size: var(--font-large);
+      font-weight: var(--font-weight-bold);
+    }
+    .card__main-actions {
+      padding-top: 0;
+      margin-top: 0;
+    }
+
+    .MuiAutocomplete-root {
+      background: rgba(var(--color-header-background-base), 0.4);
+      border-radius: var(--border-radius);
+      padding: var(--spacing-s);
+
+      textarea {
+        box-shadow: 0 0 0 2px var(--color-border) inset;
+        &:focus-visible {
+          box-shadow: 0 0 0 2px var(--color-primary) inset;
+        }
+      }
+
+      @media (max-width: $breakpoint-small) {
+        .MuiFormControl-root {
+          border-radius: var(--border-radius);
+          box-shadow: 0 0 0 2px var(--color-border) inset;
+        }
+        textarea {
+          box-shadow: unset;
+        }
+      }
+    }
+  }
+
+  .card--thumbnail {
+    background: rgba(var(--color-header-background-base), 0.4);
+    border-radius: var(--border-radius);
+    padding: var(--spacing-s);
+    input {
+      box-shadow: 0 0 0 2px var(--color-border) inset;
+    }
+    .button--secondary {
+      border-width: 2px 2px 2px 0;
+      border-color: var(--color-primary);
+      background-color: var(--color-primary) !important;
+      .icon {
+        stroke: var(--color-primary-contrast) !important;
+      }
      .button__label {
+        color: var(--color-primary-contrast) !important;
+      }
+    }
+
+    @media (max-width: $breakpoint-small) {
+      .thumbnail-picker__preview {
+        width: 100%;
+        height: unset;
+        aspect-ratio: 16 / 9;
+      }
+      .column__item:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .card--tags {
+    input {
+      box-shadow: 0 0 0 2px var(--color-border) inset;
+    }
+
+    .icon__wrapper {
+      margin-right: var(--spacing-s) !important;
+    }
+    .card__subtitle {
+      margin-top: 5px;
+    }
+    .card__main-actions {
+      padding-top: 0;
+      border-top: unset;
+    }
+
+    .card__header--between {
+      margin-bottom: unset;
+      border: unset;
+    }
+
+    .tag {
+      background-color: var(--color-header-button);
+    }
+
+    @media (max-width: $breakpoint-small) {
+      .card__subtitle {
+        font-size: var(--font-small);
+      }
+    }
+  }
+
+  .card--price {
+    .input--currency-select {
+      label {
+        margin-left: 0 !important;
+      }
+    }
+    .form-field--price-amount,
+    select {
+      box-shadow: 0 0 0 2px var(--color-border) inset;
+    }
+
+    @media (max-width: $breakpoint-small) {
+      .card__main-actions {
        margin-top: 0;
      }
    }
  }
+
+  .card--additional-options {
+    margin-bottom: var(--spacing-l) !important;
+    .card {
+      fieldset-section {
+        padding-bottom: 0;
+      }
+    }
+    .card__main-actions {
+      //padding-top:var(--spacing-s);
+      padding-top: 0;
+    }
+    .section__actions {
+      padding: var(--spacing-s);
+      margin-top: 0;
+    }
+    input,
+    select {
+      box-shadow: 0 0 0 2px var(--color-border) inset;
+      &:focus-visible {
+        box-shadow: 0 0 0 2px var(--color-primary) inset;
+      }
+    }
+    .react-datetime-picker {
+      box-shadow: 0 0 0 2px var(--color-border) inset;
+      input {
+        box-shadow: unset;
+      }
+      .react-datetime-picker__inputGroup__amPm {
+        margin-top: 4px;
+        height: calc(100% - 8px);
+        box-shadow: unset;
+        &:focus-visible {
+          box-shadow: 0 0 0 2px var(--color-primary) inset;
+        }
+      }
+    }
+
+    .form-field__help {
+      margin-bottom: 0;
+    }
+    fieldset {
+      .form-field__help {
+        margin-top: 0;
+      }
+    }
+
+    fieldset-section {
+      margin-top: 0;
+    }
+
+    fieldset-group {
+      fieldset-section {
+        width: 50%;
+        &:last-of-type {
+          padding-right: var(--spacing-s);
+        }
+      }
+    }
+
+    @media (max-width: $breakpoint-small) {
+      button {
+        margin-bottom: 0;
+      }
+      border-top: unset;
+    }
+  }
+
+  .card--date {
+    background: rgba(var(--color-header-background-base), 0.4);
+    border-radius: var(--border-radius);
+    padding: var(--spacing-s);
+
+    .form-field__hint {
+      opacity: 0.8;
+      // margin-bottom: var(--spacing-l);
+      color: var(--color-text);
+    }
+
+    .react-datetime-picker {
+      box-shadow: 0 0 0 2px var(--color-border) inset;
+      input {
+        box-shadow: unset;
+      }
+      .react-datetime-picker__inputGroup__amPm {
+        margin-top: 4px;
+        height: calc(100% - 8px);
+        box-shadow: unset;
+        &:focus-visible {
+          box-shadow: 0 0 0 2px var(--color-primary) inset;
+        }
+      }
+    }
+  }
+
+  .EasyMDEContainer {
+    .editor-toolbar,
+    .CodeMirror-wrap {
+      border-width: 2px !important;
+    }
+
+    .editor-statusbar {
+      padding: 0;
+      padding-top: var(--spacing-s);
+    }
  }

  @media (max-width: $breakpoint-small) {
@ -842,6 +1147,13 @@ img {
  }
 }

+[data-reach-menu-popover] {
+  @media (max-width: $breakpoint-small) {
+    width: calc(100% - var(--spacing-xs) * 2);
+    max-width: calc(100% - var(--spacing-xs) * 2);
+  }
+}
+
 .transactionsPage-wrapper {
  .card__header--between {
    align-items: unset;
--- a/ui/scss/themes/dark.scss
+++ b/ui/scss/themes/dark.scss
@ -80,6 +80,7 @@
  --color-input-label: var(--color-text);
  --color-input-placeholder: #f4f4f5;
  --color-input-bg: var(--color-header-background);
+  --color-input-bg-secondary: #333333;
  --color-input-bg-selected: var(--color-primary);
  --color-input-border: var(--color-border);
  --color-input-toggle: var(--color-primary-alt-3);
--- a/ui/scss/themes/light.scss
+++ b/ui/scss/themes/light.scss
@ -88,6 +88,7 @@
  --color-input-label: var(--color-text);
  --color-input-placeholder: #212529;
  --color-input-bg: var(--color-header-background);
+  --color-input-bg-secondary: #ffffff;
  --color-input-bg-selected: var(--color-primary);
  --color-input-border: var(--color-border);
  --color-input-toggle: var(--color-secondary);