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
-    // none running openModalDesktop;
+    animation: $duration-modal-open cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal
+      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-duration: 3s;
-      // animation-fill-mode: forwards;
-      // animation-play-state: running;
-      // animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+      animation: slideUp;
+      animation-duration: 1s;
+      animation-fill-mode: forwards;
+      animation-play-state: running;
+      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,
-  })
+    },
+    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,29 +1,35 @@
-.Search.DialogContent {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  min-height: 430px;
-  padding: 0;
-
-  @include breakpoint(phone) {
-    animation: none;
-    border-radius: 0;
-    min-width: inherit;
-    min-height: 100vh;
-  }
-
-  .DialogHeader.Search {
+.header {
   align-items: inherit;
   display: flex;
   flex-direction: column;
   gap: $unit;
   padding: 0;
-    padding-bottom: $unit-2x;
+  padding-bottom: $unit;
   position: sticky;
   top: 0;
   left: 0;
 
-    #Bar {
+  .close {
+    background: transparent;
+    border: none;
+
+    &:hover {
+      cursor: pointer;
+
+      svg {
+        fill: $error;
+      }
+    }
+
+    svg {
+      fill: $grey-50;
+      float: right;
+      height: 24px;
+      width: 24px;
+    }
+  }
+
+  .searchBar {
     align-items: center;
     border-top-left-radius: $unit;
     border-top-right-radius: $unit;
@@ -58,7 +64,7 @@
   }
 }
 
-  #Results {
+.results {
   margin: 0;
   padding: 0 ($unit * 1.5);
   padding-bottom: $unit * 1.5;
@@ -68,7 +74,7 @@
   max-height: 500px;
 
   @include breakpoint(phone) {
-      max-height: inherit;
+    max-height: initial;
   }
 
   h5.total {
@@ -92,7 +98,6 @@
     margin-bottom: $unit * 1.5;
   }
 }
-}
 
 .Search.DialogContent #NoResults {
   display: flex;

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}>
-          <div id="Bar">
+        <header className={styles.header} ref={headerRef}>
+          <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' ? (
-            <CharacterSearchFilterBar sendFilters={receiveFilters} />
-          ) : (
-            ''
-          )}
-          {props.object === 'weapons' ? (
-            <WeaponSearchFilterBar sendFilters={receiveFilters} />
-          ) : (
-            ''
-          )}
-          {props.object === 'summons' ? (
-            <SummonSearchFilterBar sendFilters={receiveFilters} />
-          ) : (
-            ''
-          )}
-          {props.object === 'job_skills' ? (
-            <JobSkillSearchFilterBar sendFilters={receiveFilters} />
-          ) : (
-            ''
-          )}
-        </div>
+          {filterBar()}
+        </header>
 
-        <div id="Results" ref={scrollContainer}>
-          <h5 className="total">
+        <div className={styles.results} ref={scrollContainer}>
+          <h5 className={styles.total}>
             {t('search.result_count', { record_count: recordCount })}
           </h5>
           {open ? renderResults() : ''}