Update search modal styles

components/common/DialogContent/index.module.scss

@@ -16,8 +16,8 @@
   .dialogContent {
     $multiplier: 4;
 
-    // animation: $duration-modal-open cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal
+    animation: $duration-modal-open cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal
-    // none running openModalDesktop;
+      none running openModalDesktop;
     background: var(--dialog-bg);
     border-radius: $card-corner;
     box-sizing: border-box;
@@ -31,7 +31,7 @@
     // min-height: $unit-12x;
     overflow-y: auto;
     // height: 80vh;
-    max-height: 80vh;
+    // max-height: 80vh; // Having a max-height interferes with SearchModal scrolling
     min-width: 580px;
     max-width: 42vw;
     // padding: $unit * $multiplier;
@@ -42,11 +42,11 @@
     }
 
     @include breakpoint(phone) {
-      // animation: slideUp;
+      animation: slideUp;
-      // animation-duration: 3s;
+      animation-duration: 1s;
-      // animation-fill-mode: forwards;
+      animation-fill-mode: forwards;
-      // animation-play-state: running;
+      animation-play-state: running;
-      // animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+      animation-timing-function: ease-out;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
       min-width: inherit;
@@ -59,6 +59,25 @@
       width: 100%;
     }
 
+    &.search {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      min-height: 430px;
+      padding: 0;
+
+      @include breakpoint(phone) {
+        // animation: none;
+        min-width: inherit;
+        height: 90vh;
+
+        .container {
+          display: flex;
+          flex-direction: column;
+        }
+      }
+    }
+
     .container {
       overflow-y: hidden;
 
@@ -187,4 +206,26 @@
       }
     }
   }
+
+  @keyframes openModalDesktop {
+    0% {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+
+    100% {
+      // opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes slideUp {
+    0% {
+      transform: translate(0%, 100%);
+    }
+
+    100% {
+      transform: translate(0, 0%);
+    }
+  }
 }

components/common/DialogContent/index.tsx

@@ -23,9 +23,12 @@ const DialogContent = React.forwardRef<HTMLDivElement, Props>(function Dialog(
   forwardedRef
 ) {
   // Classes
-  const classes = classNames(props.className, {
+  const classes = classNames(
-    [styles.dialogContent]: true,
+    {
-  })
+      [styles.dialogContent]: true,
+    },
+    props.className?.split(' ').map((className) => styles[className])
+  )
 
   // Handlers
   function handleScroll(event: React.UIEvent<HTMLDivElement, UIEvent>) {

components/common/DialogFooter/index.module.scss

@@ -3,7 +3,7 @@
 
   align-items: flex-end;
   background: var(--dialog-bg);
-  bottom: 0;
+  bottom: -1px; // hack to fix content being visible 1px below
   box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.16);
   border-top: 1px solid rgba(0, 0, 0, 0.24);
   display: flex;

components/search/SearchModal/index.module.scss

@@ -1,96 +1,101 @@
-.Search.DialogContent {
+.header {
-  box-sizing: border-box;
+  align-items: inherit;
   display: flex;
   flex-direction: column;
-  min-height: 430px;
+  gap: $unit;
   padding: 0;
+  padding-bottom: $unit;
+  position: sticky;
+  top: 0;
+  left: 0;
 
-  @include breakpoint(phone) {
+  .close {
-    animation: none;
+    background: transparent;
-    border-radius: 0;
+    border: none;
-    min-width: inherit;
+
-    min-height: 100vh;
+    &:hover {
+      cursor: pointer;
+
+      svg {
+        fill: $error;
+      }
+    }
+
+    svg {
+      fill: $grey-50;
+      float: right;
+      height: 24px;
+      width: 24px;
+    }
   }
 
-  .DialogHeader.Search {
+  .searchBar {
-    align-items: inherit;
+    align-items: center;
+    border-top-left-radius: $unit;
+    border-top-right-radius: $unit;
     display: flex;
-    flex-direction: column;
+    gap: $unit * 2.5;
-    gap: $unit;
+    margin: 0;
-    padding: 0;
+    padding: ($unit * 3) ($unit * 3) 0 ($unit * 3);
-    padding-bottom: $unit-2x;
     position: sticky;
     top: 0;
-    left: 0;
 
-    #Bar {
+    button {
-      align-items: center;
+      background: transparent;
-      border-top-left-radius: $unit;
+      border: none;
-      border-top-right-radius: $unit;
+      height: 42px;
-      display: flex;
+      padding: 0;
-      gap: $unit * 2.5;
+    }
-      margin: 0;
-      padding: ($unit * 3) ($unit * 3) 0 ($unit * 3);
-      position: sticky;
-      top: 0;
 
-      button {
+    label {
-        background: transparent;
+      width: 100%;
-        border: none;
-        height: 42px;
-        padding: 0;
-      }
 
-      label {
+      // .Input {
-        width: 100%;
+      //   background: $grey-90;
-
+      //   border: none;
-        // .Input {
+      //   border-radius: calc($unit / 2);
-        //   background: $grey-90;
+      //   box-sizing: border-box;
-        //   border: none;
+      //   font-size: $font-regular;
-        //   border-radius: calc($unit / 2);
+      //   padding: $unit * 1.5;
-        //   box-sizing: border-box;
+      //   text-align: left;
-        //   font-size: $font-regular;
+      //   width: 100%;
-        //   padding: $unit * 1.5;
+      // }
-        //   text-align: left;
-        //   width: 100%;
-        // }
-      }
     }
   }
+}
 
-  #Results {
+.results {
-    margin: 0;
+  margin: 0;
-    padding: 0 ($unit * 1.5);
+  padding: 0 ($unit * 1.5);
-    padding-bottom: $unit * 1.5;
+  padding-bottom: $unit * 1.5;
 
-    // Infinite scroll
+  // Infinite scroll
-    overflow-y: auto;
+  overflow-y: auto;
-    max-height: 500px;
+  max-height: 500px;
 
-    @include breakpoint(phone) {
+  @include breakpoint(phone) {
-      max-height: inherit;
+    max-height: initial;
-    }
+  }
 
-    h5.total {
+  h5.total {
-      font-size: $font-regular;
+    font-size: $font-regular;
-      font-weight: $normal;
+    font-weight: $normal;
-      color: var(--text-tertiary);
+    color: var(--text-tertiary);
-      padding: $unit-half ($unit * 1.5);
+    padding: $unit-half ($unit * 1.5);
-    }
+  }
 
-    .footer {
+  .footer {
-      align-items: center;
+    align-items: center;
-      display: flex;
+    display: flex;
-      color: var(--text-tertiary);
+    color: var(--text-tertiary);
-      font-size: $font-regular;
+    font-size: $font-regular;
-      font-weight: $normal;
+    font-weight: $normal;
-      height: $unit-10x;
+    height: $unit-10x;
-      justify-content: center;
+    justify-content: center;
-    }
+  }
 
-    .WeaponResult:last-child {
+  .WeaponResult:last-child {
-      margin-bottom: $unit * 1.5;
+    margin-bottom: $unit * 1.5;
-    }
   }
 }
 

components/search/SearchModal/index.tsx

@@ -9,7 +9,7 @@ import api from '~utils/api'
 
 import { Dialog, DialogTrigger, DialogClose } from '~components/common/Dialog'
 import DialogContent from '~components/common/DialogContent'
-import Input from '~components/common/LabelledInput'
+import Input from '~components/common/Input'
 import CharacterSearchFilterBar from '~components/character/CharacterSearchFilterBar'
 import WeaponSearchFilterBar from '~components/weapon/WeaponSearchFilterBar'
 import SummonSearchFilterBar from '~components/summon/SummonSearchFilterBar'
@@ -395,55 +395,49 @@ const SearchModal = (props: Props) => {
     if (searchInput.current) searchInput.current.focus()
   }
 
+  const filterBar = () => {
+    if (props.object === 'characters') {
+      return <CharacterSearchFilterBar sendFilters={receiveFilters} />
+    } else if (props.object === 'weapons') {
+      return <WeaponSearchFilterBar sendFilters={receiveFilters} />
+    } else if (props.object === 'summons') {
+      return <SummonSearchFilterBar sendFilters={receiveFilters} />
+    } else if (props.object === 'job_skills') {
+      return <JobSkillSearchFilterBar sendFilters={receiveFilters} />
+    }
+  }
+
   return (
     <Dialog open={open} onOpenChange={openChange}>
       <DialogTrigger asChild>{props.children}</DialogTrigger>
       <DialogContent
-        className="Search"
+        className="search"
         headerref={headerRef}
         scrollable={false}
         onEscapeKeyDown={onEscapeKeyDown}
         onOpenAutoFocus={onOpenAutoFocus}
       >
-        <div className="Search DialogHeader" ref={headerRef}>
+        <header className={styles.header} ref={headerRef}>
-          <div id="Bar">
+          <div className={styles.searchBar}>
             <Input
+              bound={true}
+              className="full"
               autoComplete="off"
-              className="Search Bound"
               name="query"
               placeholder={props.placeholderText}
               ref={searchInput}
               value={query}
               onChange={inputChanged}
             />
-            <DialogClose className="DialogClose" onClick={openChange}>
+            <DialogClose className={styles.close} onClick={openChange}>
               <CrossIcon />
             </DialogClose>
           </div>
-          {props.object === 'characters' ? (
+          {filterBar()}
-            <CharacterSearchFilterBar sendFilters={receiveFilters} />
+        </header>
-          ) : (
-            ''
-          )}
-          {props.object === 'weapons' ? (
-            <WeaponSearchFilterBar sendFilters={receiveFilters} />
-          ) : (
-            ''
-          )}
-          {props.object === 'summons' ? (
-            <SummonSearchFilterBar sendFilters={receiveFilters} />
-          ) : (
-            ''
-          )}
-          {props.object === 'job_skills' ? (
-            <JobSkillSearchFilterBar sendFilters={receiveFilters} />
-          ) : (
-            ''
-          )}
-        </div>
 
-        <div id="Results" ref={scrollContainer}>
+        <div className={styles.results} ref={scrollContainer}>
-          <h5 className="total">
+          <h5 className={styles.total}>
             {t('search.result_count', { record_count: recordCount })}
           </h5>
           {open ? renderResults() : ''}