main tts page styling fixes

packages/fakeyou/.env

@@ -0,0 +1,2 @@
+BROWSER=none
+HTTPS=true

packages/fakeyou/src/AppNew.scss

@@ -147,10 +147,10 @@ $headings-font-family: "Merriweather", serif;
       font-size: 15px;
       font-weight: 600;
       padding: 0.5rem 1rem;
-      color: #212529;
+      color: $secondary;
 
       &:hover {
-        color: #212529;
+        color: $secondary;
       }
       &:focus {
         background-color: $white;

packages/fakeyou/src/scss/colours.scss

@@ -1,4 +1,5 @@
 $primary: #fc6b68;
+$secondary: #212529;
 $info: #252d43;
 $success: #40ad48;
 $danger: #e51c23;
@@ -47,4 +48,4 @@ $danger-light: desaturate(lighten($danger, 15%), 15%);
 $danger-dark: darken($danger, 10%);
 
 $accent-light: desaturate(lighten($accent, 20%), 15%);
-$accent-dark: saturate(darken($accent, 15%), 10%);
+$accent-dark: saturate(darken($accent, 15%), 10%);

packages/fakeyou/src/scss/site-refresh.scss

@@ -148,14 +148,14 @@ styles with important tags:
   .btn-secondary:focus,
   .btn-secondary:active {
     background-color: $white;
-    color: #212529;
+    color: $secondary;
     border: 2.5px solid;
     border-color: $white;
     transition: 0.2s;
   }
   .btn-secondary:hover {
     background-color: #ccc;
-    color: #212529;
+    color: $secondary;
     border: 2.5px solid;
     border-color: #ccc;
   }
@@ -177,6 +177,14 @@ styles with important tags:
     border-color: #fdcfce;
   }
 
+  .btn-inform {
+    height: 42px;
+    align-items: center;
+    padding: 0 0.75rem;
+    padding-top: 1px;
+    font-size: 22px;
+  }
+
   .panel {
     position: relative;
     width: 100%;
@@ -214,6 +222,26 @@ styles with important tags:
     }
   }
 
+  .menu {
+    border-radius: 8px !important;
+    color: #000;
+    font-weight: 400;
+    position: absolute;
+    border-color: rgba($white, 0.12) !important;
+    border: 1px solid;
+    border-radius: 8px;
+    box-shadow: 0px 5px 20px rgba($black, 0.3);
+    z-index: 3;
+    overflow: hidden;
+  }
+
+  .menu-item {
+    padding: 0.25rem;
+    padding-left: 2.375rem;
+    padding-right: 2.375rem;
+    cursor: pointer;
+  }
+
   .login-panel {
     max-width: 800px !important;
     backdrop-filter: blur(5px);
@@ -279,7 +307,7 @@ styles with important tags:
       // line-height: 2.69rem;
       text-align: center;
       pointer-events: none;
-      color: #212529;
+      color: $secondary;
       opacity: 0.9;
     }
   }
@@ -459,6 +487,20 @@ styles with important tags:
       color: #664d03;
     }
   }
+
+  .alert {
+    .close {
+      position: absolute;
+      border-radius: 50px;
+      border: none;
+      background: none;
+      padding: 0;
+      margin: 0;
+      right: 12px;
+      top: 0px;
+      font-size: 30px;
+    }
+  }
 }
 
 @media (min-width: 992px) {

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

@@ -38,51 +38,59 @@ export function AutocompleteSearch(props: Props) {
     return (
       <>
         <div className="field">
-          <strong style={{ display: "block", margin: "7px 0 0 0"}}>{t('ttsListPage.search')}</strong>
+          <strong style={{ display: "block", margin: "7px 0 0 0" }}>
+            {t("ttsListPage.search")}
+          </strong>
           <div className="control has-icons-left">
-
             {/* 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')} 
-                  value={searchValue} {...props} />
+                <input
+                  className="input"
+                  type="text"
+                  placeholder={t("ttsListPage.searchTerm")}
+                  value={searchValue}
+                  {...props}
+                />
               )}
-              renderMenu={children => (
-                <div className="menu">
-                  {children.slice(0, maxMenuItems)}
-                </div>
+              renderMenu={(children) => (
+                <div className="menu">{children.slice(0, maxMenuItems)}</div>
               )}
-              renderItem={(item : TtsModelListItem, isHighlighted : boolean) =>
-                <div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
+              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([]);
 
                 // And the dropdowns themselves
                 // Shouldn't need to rebuild this...
-                let newDropdownCategories = props.dropdownCategories.slice(0, 1);
+                let newDropdownCategories = props.dropdownCategories.slice(
+                  0,
+                  1
+                );
 
                 if (newDropdownCategories.length === 0) {
                   // ...but just in case.
-                  newDropdownCategories.push(props.allTtsCategories.filter(category => {
-                    return category.maybe_super_category_token === undefined;
-                  }));
+                  newDropdownCategories.push(
+                    props.allTtsCategories.filter((category) => {
+                      return category.maybe_super_category_token === undefined;
+                    })
+                  );
                 }
 
                 props.setDropdownCategories(newDropdownCategories);
-                props.setMaybeSelectedTtsModel(item)
+                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) {
@@ -90,9 +98,13 @@ export function AutocompleteSearch(props: Props) {
                 }
                 return item.title.toLocaleLowerCase().includes(test);
               }}
-
-              inputProps={{ id: 'states-autocomplete' }}
-              wrapperStyle={{ position: 'relative', display: 'inline-block' }}
+              inputProps={{
+                id: "states-autocomplete",
+              }}
+              wrapperStyle={{
+                position: "relative",
+                display: "inline-block",
+              }}
             />
             <span className="icon is-small is-left">
               <FontAwesomeIcon icon={faSearch} />
@@ -112,6 +124,7 @@ export function AutocompleteSearch(props: Props) {
           <span className="form-control-feedback">
             <FontAwesomeIcon icon={faSearch} />
           </span>
+
           <Autocomplete
             getItemValue={(item: TtsModelListItem) => item.title}
             items={props.allTtsModels}
@@ -125,10 +138,13 @@ export function AutocompleteSearch(props: Props) {
               />
             )}
             renderMenu={(children) => (
-              <div className="menu">{children.slice(0, maxMenuItems)}</div>
+              <div className="menu w-100">
+                {children.slice(0, maxMenuItems)}
+              </div>
             )}
             renderItem={(item: TtsModelListItem, isHighlighted: boolean) => (
               <div
+                className="menu-item"
                 style={{ background: isHighlighted ? "lightgray" : "white" }}
               >
                 {item.title}
@@ -165,7 +181,11 @@ export function AutocompleteSearch(props: Props) {
               return item.title.toLocaleLowerCase().includes(test);
             }}
             inputProps={{ id: "states-autocomplete" }}
-            wrapperStyle={{ position: "relative", display: "inline-block" }}
+            wrapperStyle={{
+              position: "relative",
+              display: "inline-block",
+              width: "100%",
+            }}
           />
         </div>
       </div>

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

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
+  faCaretRight,
   faChevronRight,
   faHeadphonesAlt,
   faMicrophone,
@@ -201,14 +202,14 @@ export function MultiDropdownSearch(props: Props) {
 
     if (USE_REFRESH) {
       // Redesign and Bootstrap CSS
-      selectCssClasses = "category-dropdown form-select";  // NB: 'category-dropdown' is important for function.
+      selectCssClasses = "category-dropdown form-select"; // NB: 'category-dropdown' is important for function.
       xButtonCssClasses = "btn btn-destructive btn-inform";
     }
 
     categoryDropdowns.push(
       <React.Fragment key={`categoryDropdown-${i}`}>
-        <div className="control has-icons-left is-expanded">
-          <div className="select is-fullwidth">
+        <div className="d-flex gap-3 align-items-center mb-4 w-100">
+          <div className="form-group input-icon w-100">
             <select
               className={selectCssClasses}
               name={`categories-${i}`}
@@ -217,25 +218,29 @@ export function MultiDropdownSearch(props: Props) {
             >
               {dropdownOptions}
             </select>
-          </div>
-          <span className="icon is-small is-left">
-            <FontAwesomeIcon icon={faTags} />
-          </span>
-        </div>
-
-        <div className="control">
-          <button
-            className={xButtonCssClasses}
-            onClick={() => handleRemoveCategory(i)}
-          >
-            <span className="icon is-normal">
-              <FontAwesomeIcon icon={faTimes} title="remove" color="#f14668" />
+            <span className="form-control-feedback">
+              <FontAwesomeIcon icon={faTags} />
             </span>
-          </button>
-        </div>
+          </div>
 
-        <div className="control">
-          <FontAwesomeIcon icon={faChevronRight} size="2x" color="#999" />
+          <div>
+            <button
+              className={xButtonCssClasses}
+              onClick={() => handleRemoveCategory(i)}
+            >
+              <span className="icon is-normal">
+                <FontAwesomeIcon
+                  icon={faTimes}
+                  title="remove"
+                  color="#f14668"
+                />
+              </span>
+            </button>
+          </div>
+
+          <div className="control">
+            <FontAwesomeIcon icon={faCaretRight} size="2x" color="#999" />
+          </div>
         </div>
       </React.Fragment>
     );
@@ -251,7 +256,10 @@ export function MultiDropdownSearch(props: Props) {
 
     if (categoryFields.length >= groupSize) {
       categoryFieldGroups.push(
-        <div className="field is-grouped is-grouped" key={`fieldGroup-${i}`}>
+        <div
+          className="d-flex gap-0 flex-column flex-lg-row gap-lg-3"
+          key={`fieldGroup-${i}`}
+        >
           {categoryFields.splice(0, categoryFields.length)}
         </div>
       );
@@ -260,7 +268,7 @@ export function MultiDropdownSearch(props: Props) {
 
   if (categoryFields.length >= 0) {
     categoryFieldGroups.push(
-      <div className="field is-grouped is-grouped" key="fieldGroup-last">
+      <div className="d-flex" key="fieldGroup-last">
         {categoryFields.splice(0, categoryFields.length)}
       </div>
     );
@@ -295,32 +303,34 @@ export function MultiDropdownSearch(props: Props) {
     return (
       <div>
         {/* Category Dropdowns */}
-        <strong>{t('ttsListPage.categoryFilters')}</strong>
+        <strong>{t("ttsListPage.categoryFilters")}</strong>
         <br />
         {categoryFieldGroups}
 
         {/* 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}
-              >
-              {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>
-                );
-              })}
+            <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>
+                    );
+                  })}
             </select>
           </div>
           <span className="icon is-small is-left">
@@ -328,14 +338,13 @@ export function MultiDropdownSearch(props: Props) {
           </span>
         </div>
       </div>
-    )
+    );
   }
 
   return (
     <div>
       {/* Category Dropdowns */}
       <label className="sub-title">{t("ttsListPage.categoryFilters")}</label>
-      <br />
       {categoryFieldGroups}
 
       {/* Model Dropdown */}

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

@@ -38,7 +38,11 @@ import { TwitchTtsNotice } from "./notices/TwitchTtsNotice";
 import { PleaseFollowNotice } from "./notices/PleaseFollowNotice";
 import { distance, delay, delay2, duration } from "../../../../data/animation";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faVolumeUp } from "@fortawesome/free-solid-svg-icons";
+import {
+  faTrash,
+  faVolumeHigh,
+  faVolumeUp,
+} from "@fortawesome/free-solid-svg-icons";
 import { USE_REFRESH } from "../../../../Refresh";
 
 const Fade = require("react-reveal/Fade");
@@ -208,10 +212,11 @@ function TtsModelListFc(props: Props) {
     let modelName = props.maybeSelectedTtsModel.title;
     let userName = props.maybeSelectedTtsModel.creator_display_name;
     directViewLink = (
-      <Link to={modelLink}>
+      <Link to={modelLink} className="py-2">
         <Trans i18nKey="ttsListPage.seeModelDetails">
-          See more details about the "<strong>{{ modelName }}</strong>" model
-          by&nbsp;<strong>{{ userName }}</strong>&nbsp;
+          See more details about the "
+          <span className="fw-semibold">{{ modelName }}</span>" model by&nbsp;
+          <span className="fw-semibold">{{ userName }}</span>&nbsp;
         </Trans>
         <Gravatar
           size={15}
@@ -267,11 +272,10 @@ function TtsModelListFc(props: Props) {
 
     if (hasMessage) {
       maybeError = (
-        <div className="notification is-warning">
-          <button
-            className="delete"
-            onClick={() => setMaybeTtsError(undefined)}
-          ></button>
+        <div className="alert alert-warning m-0">
+          <button className="close" onClick={() => setMaybeTtsError(undefined)}>
+            <span aria-hidden="true">&times;</span>
+          </button>
           {message}
         </div>
       );
@@ -343,10 +347,7 @@ function TtsModelListFc(props: Props) {
             setMaybeSelectedTtsModel={props.setMaybeSelectedTtsModel}
           />
 
-          {directViewLink}
-
-          <br />
-          <br />
+          <div>{directViewLink}</div>
 
           <div className="field">
             <div className="control">
@@ -470,7 +471,7 @@ function TtsModelListFc(props: Props) {
 
       {twitchTtsNotice}
 
-      <div className="container-panel pt-4 pb-5">
+      <div className="container-panel pt-4 pb-5 mb-4">
         <Fade bottom distance={distance} delay={delay2} duration={duration}>
           <div className="panel p-3 p-lg-4 mt-5 mt-lg-0">
             <i className="fas fa-volume-high"></i>
@@ -531,12 +532,14 @@ function TtsModelListFc(props: Props) {
                       className="btn btn-primary w-100"
                       disabled={remainingCharactersButtonDisabled}
                     >
+                      <FontAwesomeIcon icon={faVolumeHigh} className="me-2" />
                       {t("pages.ttsList.buttonSpeak")}
                     </button>
                     <button
                       className="btn btn-destructive w-100"
                       onClick={handleClearClick}
                     >
+                      <FontAwesomeIcon icon={faTrash} className="me-2" />
                       {t("pages.ttsList.buttonClear")}
                     </button>
                   </div>
@@ -547,31 +550,22 @@ function TtsModelListFc(props: Props) {
         </Fade>
       </div>
 
-      <br />
-      <br />
       <SessionTtsInferenceResultListFc
         ttsInferenceJobs={props.ttsInferenceJobs}
       />
 
-      <br />
-      <br />
-
       <SessionW2lInferenceResultListFc
         w2lInferenceJobs={props.w2lInferenceJobs}
       />
-      <br />
-      <br />
 
       <SessionW2lTemplateUploadResultListFc
         w2lTemplateUploadJobs={props.w2lTemplateUploadJobs}
       />
 
-      <br />
-      <br />
-
       <SessionTtsModelUploadResultListFc
         modelUploadJobs={props.ttsModelUploadJobs}
       />
+      <br />
     </div>
   );
 }