more cleanup

packages/fakeyou/src/App.scss

@@ -24,12 +24,10 @@ body {
 .bg-gradient {
   background: rgb(13, 16, 25) !important;
 
-  background: linear-gradient(
-    325deg,
-    rgba(13, 16, 25, 1) 0%,
-    rgba(42, 21, 34, 1) 55%,
-    rgba(16, 14, 26, 1) 100%
-  ) !important;
+  background: linear-gradient(325deg,
+      rgba(13, 16, 25, 1) 0%,
+      rgba(42, 21, 34, 1) 55%,
+      rgba(16, 14, 26, 1) 100%) !important;
   background-repeat: no-repeat;
   background-attachment: fixed;
 }
@@ -180,7 +178,7 @@ nav {
 }
 
 a.top-bar-text:hover {
-  color: $primary !important;
+  color: $primary  !important;
 }
 
 .top-bar {
@@ -394,6 +392,7 @@ a.top-bar-text:hover {
           .nav-link {
             color: $white;
           }
+
           .dropdown-menu {
             transition: 0.2s;
             opacity: 1;
@@ -402,6 +401,7 @@ a.top-bar-text:hover {
             transform: rotateX(0deg);
           }
         }
+
         .dropdown-menu {
           display: block;
           opacity: 0;
@@ -412,4 +412,4 @@ a.top-bar-text:hover {
       }
     }
   }
-}
+}

packages/fakeyou/src/_i18n/FakeYouTranslations.ts

@@ -2,7 +2,7 @@ import { COMMON_TRANSLATIONS, MergeDeepDictionary } from '@storyteller/component
 
 // Use \u{00a0} =   character literal
 
-const FAKEYOU_TRANSLATIONS : any = {
+const FAKEYOU_TRANSLATIONS: any = {
   // English: 46.6% Twitch (#1), 30+% FakeYou (#1)
   en: {
     translation: {
@@ -269,6 +269,6 @@ const FAKEYOU_TRANSLATIONS : any = {
 }
 
 // TODO: Type these as i18next dictionaries
-const FAKEYOU_MERGED_TRANSLATIONS : any = MergeDeepDictionary(FAKEYOU_TRANSLATIONS, COMMON_TRANSLATIONS);
+const FAKEYOU_MERGED_TRANSLATIONS: any = MergeDeepDictionary(FAKEYOU_TRANSLATIONS, COMMON_TRANSLATIONS);
 
 export { FAKEYOU_MERGED_TRANSLATIONS }

packages/fakeyou/src/v2/view/tts/tts_model_list/AutocompleteSearch.tsx

@@ -15,7 +15,7 @@ import { t } from 'i18next';
 interface Props {
   allTtsCategories: TtsCategoryType[],
   allTtsModels: TtsModelListItem[],
-  allTtsModelsByTokenMap: Map<string,TtsModelListItem>,
+  allTtsModelsByTokenMap: Map<string, TtsModelListItem>,
 
   dropdownCategories: TtsCategoryType[][],
   setDropdownCategories: (dropdownCategories: TtsCategoryType[][]) => void,
@@ -37,18 +37,18 @@ export function AutocompleteSearch(props: Props) {
   return (
     <>
       <div className="field">
-        <strong style={{ display: "block", margin: "7px 0 0 0"}}>{t('ttsListPage.search')}</strong>
-        <div className="control has-icons-left">
+        <strong style={{ display: "block", margin: "7px 0 0 0" }}>{t('ttsListPage.search')}</strong>
+        <div className="control" style={{ width: '100%;' }}>
 
           {/* NB: See note above about this library. */}
           <Autocomplete
-            getItemValue={(item : TtsModelListItem) => item.title}
+            getItemValue={(item: TtsModelListItem) => item.title}
             items={props.allTtsModels}
             renderInput={(props) => (
-              <input 
-                className="input" 
-                type="text" 
-                placeholder={t('ttsListPage.searchTerm')} 
+              <input
+                className="input"
+                type="text"
+                placeholder={t('ttsListPage.searchTerm')}
                 value={searchValue} {...props} />
             )}
             renderMenu={children => (
@@ -56,14 +56,14 @@ export function AutocompleteSearch(props: Props) {
                 {children.slice(0, maxMenuItems)}
               </div>
             )}
-            renderItem={(item : TtsModelListItem, isHighlighted : boolean) =>
+            renderItem={(item: TtsModelListItem, isHighlighted: boolean) =>
               <div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
                 {item.title}
               </div>
             }
             value={searchValue}
-            onChange={(e : any) => setSearchValue(e.target.value) }
-            onSelect={(val : string, item: TtsModelListItem) => {
+            onChange={(e: any) => setSearchValue(e.target.value)}
+            onSelect={(val: string, item: TtsModelListItem) => {
               // Nothing selected.
               props.setSelectedCategories([]);
 
@@ -81,7 +81,7 @@ export function AutocompleteSearch(props: Props) {
               props.setDropdownCategories(newDropdownCategories);
               props.setMaybeSelectedTtsModel(item)
             }}
-            shouldItemRender={(item : TtsModelListItem, value) => {
+            shouldItemRender={(item: TtsModelListItem, value) => {
               // TODO: A trie would be so much better. Ugh, this is so bad.
               let test = value.toLocaleLowerCase().trim();
               if (test.length === 0) {
@@ -93,9 +93,9 @@ export function AutocompleteSearch(props: Props) {
             inputProps={{ id: 'states-autocomplete' }}
             wrapperStyle={{ position: 'relative', display: 'inline-block' }}
           />
-          <span className="icon is-small is-left">
+          {/* <span className="icon is-small is-left">
             <FontAwesomeIcon icon={faSearch} />
-          </span>
+          </span> */}
         </div>
       </div>
     </>

packages/fakeyou/src/v2/view/tts/tts_model_list/MultiDropdownSearch.tsx

@@ -9,9 +9,9 @@ interface Props {
   allTtsCategories: TtsCategoryType[],
   allTtsModels: TtsModelListItem[],
 
-  allTtsCategoriesByTokenMap: Map<string,TtsCategoryType>,
-  allTtsModelsByTokenMap: Map<string,TtsModelListItem>,
-  ttsModelsByCategoryToken: Map<string,Set<TtsModelListItem>>,
+  allTtsCategoriesByTokenMap: Map<string, TtsCategoryType>,
+  allTtsModelsByTokenMap: Map<string, TtsModelListItem>,
+  ttsModelsByCategoryToken: Map<string, Set<TtsModelListItem>>,
 
   dropdownCategories: TtsCategoryType[][],
   setDropdownCategories: (dropdownCategories: TtsCategoryType[][]) => void,
@@ -24,8 +24,8 @@ interface Props {
 }
 
 export function MultiDropdownSearch(props: Props) {
-  const { 
-    allTtsCategories, 
+  const {
+    allTtsCategories,
     allTtsModels,
     allTtsCategoriesByTokenMap,
     allTtsModelsByTokenMap,
@@ -81,7 +81,7 @@ export function MultiDropdownSearch(props: Props) {
   const doChangeCategory = (level: number, maybeToken: string) => {
     // Slice off all the irrelevant child category choices, then append new choice.
     let newCategorySelections = selectedCategories.slice(0, level);
-    
+
     // And the dropdowns themselves
     let newDropdownCategories = dropdownCategories.slice(0, level + 1);
 
@@ -114,7 +114,7 @@ export function MultiDropdownSearch(props: Props) {
     }
   }
 
-  const handleChangeCategory = (ev: React.FormEvent<HTMLSelectElement>, level: number) => { 
+  const handleChangeCategory = (ev: React.FormEvent<HTMLSelectElement>, level: number) => {
     const maybeToken = (ev.target as HTMLSelectElement).value;
     if (!maybeToken) {
       return true;
@@ -137,7 +137,7 @@ export function MultiDropdownSearch(props: Props) {
     }
   }
 
-  const handleChangeVoice = (ev: React.FormEvent<HTMLSelectElement>) => { 
+  const handleChangeVoice = (ev: React.FormEvent<HTMLSelectElement>) => {
     const ttsModelToken = (ev.target as HTMLSelectElement).value;
     const maybeTtsModel = allTtsModelsByTokenMap.get(ttsModelToken);
     if (maybeTtsModel) {
@@ -154,10 +154,10 @@ export function MultiDropdownSearch(props: Props) {
 
     let dropdownOptions = [];
     dropdownOptions.push(
-      <option 
-        key={`option-${i}-*`} 
+      <option
+        key={`option-${i}-*`}
         value="*">
-          {defaultName}
+        {defaultName}
       </option>
     );
 
@@ -178,7 +178,7 @@ export function MultiDropdownSearch(props: Props) {
     if (dropdownOptions.length <= 1) {
       // We've run out of subcategories. (1 == "Select...")
       // No sense trying to build more.
-      break; 
+      break;
     }
 
     categoryDropdowns.push(
@@ -190,7 +190,7 @@ export function MultiDropdownSearch(props: Props) {
               name={`categories-${i}`}
               onChange={(ev) => handleChangeCategory(ev, i)}
               defaultValue="*"
-              >
+            >
               {dropdownOptions}
             </select>
           </div>
@@ -200,7 +200,7 @@ export function MultiDropdownSearch(props: Props) {
         </div>
 
         <div className="control">
-          <button 
+          <button
             className="button is-rounded is-outlined"
             onClick={() => handleRemoveCategory(i)}
           >
@@ -245,7 +245,7 @@ export function MultiDropdownSearch(props: Props) {
 
   const leafiestCategory = selectedCategories[selectedCategories.length - 1];
 
-  let leafiestCategoryModels : Set<TtsModelListItem> = new Set();
+  let leafiestCategoryModels: Set<TtsModelListItem> = new Set();
   if (leafiestCategory !== undefined) {
     leafiestCategoryModels = ttsModelsByCategoryToken.get(leafiestCategory.category_token) || new Set();
   } else {
@@ -274,30 +274,30 @@ export function MultiDropdownSearch(props: Props) {
       {/* Model Dropdown */}
       <strong>
         <Trans i18nKey="ttsListPage.voiceCount" count={voiceCount}>
-        Voice ({voiceCount} to choose from)
+          Voice ({voiceCount} to choose from)
         </Trans>
       </strong>
       <br />
       <div className="control has-icons-left">
         <div className={selectClasses}>
-          <select 
-              name="tts-model-select"
-              onChange={handleChangeVoice}
-              disabled={isLoading}
-            >
+          <select
+            name="tts-model-select"
+            onChange={handleChangeVoice}
+            disabled={isLoading}
+          >
             {isLoading ? loadingOption : Array.from(leafiestCategoryModels).map(model => {
               return (
                 <option
                   key={model.model_token}
                   value={model.model_token}
-                  >{model.title} ({t('ttsListPage.by')} {model.creator_display_name})</option>
+                >{model.title} ({t('ttsListPage.by')} {model.creator_display_name})</option>
               );
             })}
           </select>
         </div>
-        <span className="icon is-small is-left">
+        {/* <span className="icon is-small is-left">
           <FontAwesomeIcon icon={faHeadphonesAlt} />
-        </span>
+        </span> */}
       </div>
     </div>
   )

packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListFc.tsx

@@ -332,13 +332,14 @@ function TtsModelListFc(props: Props) {
 
       {twitchTtsNotice}
 
-      <div className="container-panel pt-4 pb-5">
+      <div className="container">
         <Fade bottom distance={distance} delay={delay2} duration={duration}>
           <div className="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0">
-            <h1 className="panel-title fw-bold">Create TTS</h1>
+            <i className="fas fa-volume-high"></i>
+            <h1 className="panel-title fw-bold"> Create TTS</h1>
             <div className="py-6">
-              <div className="d-flex flex-column gap-4">
-                <form onSubmit={handleFormSubmit}>
+              <div className="d-flex  gap-4">
+                <form className="w-100" onSubmit={handleFormSubmit}>
                   <MultiDropdownSearch
                     allTtsCategories={props.allTtsCategories}
                     allTtsModels={props.ttsModels}
@@ -369,11 +370,11 @@ function TtsModelListFc(props: Props) {
 
                   {directViewLink}
 
-                  <div className="field">
-                    <div className="control">
+                  <div className="field my-4">
+                    <div className="input-group input-group-lg control">
                       <textarea
                         onChange={handleChangeText}
-                        className="textarea is-large"
+                        className="textarea w-100" style={{ minHeight: '200px' }}
                         value={props.textBuffer}
                         placeholder={t("pages.ttsList.placeholderTextGoesHere")}
                       ></textarea>
@@ -383,18 +384,18 @@ function TtsModelListFc(props: Props) {
                   {maybeError}
 
                   <div className="button-group">
-                    <div className="columns is-mobile">
-                      <div className="column has-text-centered">
+                    <div className="d-flex flex-row justify-content-around">
+                      <div className="col-5 text-center">
                         <button
-                          className="button is-danger is-large"
+                          className="btn btn-primary w-100"
                           disabled={remainingCharactersButtonDisabled}
                         >
                           {t("pages.ttsList.buttonSpeak")}
                         </button>
                       </div>
-                      <div className="column has-text-centered">
+                      <div className="col-5 text-center">
                         <button
-                          className="button is-danger is-light is-large"
+                          className="btn btn-secondary w-100"
                           onClick={handleClearClick}
                         >
                           {t("pages.ttsList.buttonClear")}
@@ -406,8 +407,8 @@ function TtsModelListFc(props: Props) {
               </div>
             </div>
           </div>
-        </Fade>
-      </div>
+        </Fade >
+      </div >
 
       <br />
       <br />
@@ -434,7 +435,7 @@ function TtsModelListFc(props: Props) {
       <SessionTtsModelUploadResultListFc
         modelUploadJobs={props.ttsModelUploadJobs}
       />
-    </div>
+    </div >
   );
 }