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

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')}

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

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) {
           />
         }
       />
+    </>
   );
 }
 

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;
+    updatePublishForm({ title: event.target.value });
-    // Update title
-    updatePublishForm({ title });
   }
 
   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"
+                button="alt"
-                label={__('New --[clears Publish Form]--')}
+                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>
+        </>
       }
     />
   );

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={{

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

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}

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

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) {

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>
+    </>
   );
 };
 

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 && (
-        <>
+        <div className="column card--thumbnail">
-          <label>{__('Thumbnail')}</label>
-          <div className="column">
           {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>
-      )}
     </>
   );
 }

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 : (

ui/page/publish/view.jsx

@@ -25,14 +25,7 @@ function PublishPage(props: Props) {
   }
 
   return (
-    <Page
+    <Page className="uploadPage-wrapper" noFooter>
-      noFooter
-      noSideNavigation
-      backout={{
-        title: __('Upload'),
-        backLabel: __('Back'),
-      }}
-    >
       {balance === 0 && <YrblWalletEmpty />}
       {balance !== 0 && fetchingChannels ? (
         <div className="main--empty">

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);
+    }
+  }
+}

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;
-
+  help .button {
-  .button {
     color: #fa6165;
   }
 }
@@ -727,93 +727,398 @@ img {
 }
 
 .uploadPage-wrapper {
-  &.card-stack {
+  transition: width 0.4s;
-    .card:not(:last-of-type) {
+  @media (min-width: $breakpoint-small) {
-      margin-bottom: var(--spacing-l) !important;
+    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 {
+  .card__title-section {
-    padding-top: var(--spacing-l);
+    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 {
+  .card__header--between {
-    margin-right: var(--spacing-s) !important;
+    // margin-bottom: var(--spacing-xl);
-    width: 1rem !important;
+    margin-bottom: 0;
-    height: 1rem !important;
+    border-bottom: 1px solid var(--color-border);
-  }
+    @media (max-width: $breakpoint-small) {
-
+      margin-bottom: var(--spacing-l);
-  .card:not(:first-of-type) {
-    .card__main-actions:not(:first-of-type) {
-      border-top: unset;
-    }
-    .card__subtitle {
-      margin-top: 0 !important;
     }
   }
 
-  .card:nth-last-child(2) {
+  .card__title {
-    .card__main-actions {
+    div {
-      padding-top: var(--spacing-xxxs);
+      display: inline-block;
-      fieldset-section:not(:first-child) {
+      margin-top: 0px;
-        margin-top: var(--spacing-s);
+      right: 0;
     }
-      .fieldset-group--smushed {
+    .button {
-        fieldset-section {
       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) {
+    .publish-row {
-        margin-top: var(--spacing-xxxs);
+      // 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 {
+  .card--file {
-    display: flex;
+    background: rgba(var(--color-header-background-base), 0.4);
-    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;
     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 {
+  .card__title-disabled {
-    .button {
+    opacity: 0.3;
-      .button__content {
+  }
+
+  .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;

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);

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);