modal changes

anish1617 · Mar 16, 2022 · 73c8b7f · 73c8b7f
1 parent a00178f
commit 73c8b7f
Show file tree

Hide file tree

Showing 4 changed files with 150 additions and 15 deletions.
diff --git a/src/common/header/header.css b/src/common/header/header.css
@@ -3,7 +3,7 @@
  top: 0;
  right: 0;
  left: 0;
- z-index: 100;
+ z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;

diff --git a/src/common/modal/index.js b/src/common/modal/index.js
@@ -1,14 +1,25 @@
 import ReactDOM from "react-dom";
+import { GoCheck, GoX } from "react-icons/go";
+import { IoCheckmark, IoClose } from "react-icons/io5";
 
 const Modal =({ title, show, onClose, onSubmit, children, cname })=> {
  if (!show) return null;
  return ReactDOM.createPortal(
- <div className={`modal-${cname}`}>
- <h2>{ title }</h2>
- { children }
- <button onClick={ onClose }>Close</button>
- <button onClick={ onSubmit }>OK</button>
+ <>
+ <div className="modal-overlay"></div>
+ <div className={`modal-${cname}`}>
+ <div className={`modal-${cname}-header`}>
+ <h2 className="modal-title">{ title }</h2>
+ </div>
+ <div className={`modal-${cname}-body`}>
+ { children }
+ </div>
+ <div className={`modal-${cname}-footer`}>
+ <button className="btn-default" onClick={ onClose }><GoX size="16px" /> Cancel</button>
+ <button className="btn-primary" onClick={ onSubmit }><GoCheck size="16px" /> Apply</button>
+ </div>
  </div>
+ </>
  ,document.body);
 }
 

diff --git a/src/common/search/FilterPlays.js b/src/common/search/FilterPlays.js
@@ -13,11 +13,11 @@ const FilterPlaysModalBody = ({filterQuery, setFilterQuery}) => {
  const creators = getAllCreators();
 
  return (
- <div className="search-filter-modal">
- <div className="search-filter-modal-row">
+ <>
+ <div className="form-group">
  <label>Level</label>
  <select
- className="search-filter-modal-select"
+ className="form-control"
  onChange={(event) =>
  setFilterQuery({ ...filterQuery, level: event.target.value })
  }
@@ -31,10 +31,10 @@ const FilterPlaysModalBody = ({filterQuery, setFilterQuery}) => {
  ))}
  </select>
  </div>
- <div className="search-filter-modal-row">
+ <div className="form-group">
  <label>Tags</label>
  <select
- className="search-filter-modal-select"
+ className="form-control"
  onChange={(event) =>
  setFilterQuery({ ...filterQuery, tags: [event.target.value] })
  }
@@ -48,10 +48,10 @@ const FilterPlaysModalBody = ({filterQuery, setFilterQuery}) => {
  ))}
  </select>
  </div>
- <div className="search-filter-modal-row">
+ <div className="form-group">
  <label>Creator</label>
  <select
- className="search-filter-modal-select"
+ className="form-control"
  onChange={(event) =>
  setFilterQuery({ ...filterQuery, creator: event.target.value })
  }
@@ -65,7 +65,7 @@ const FilterPlaysModalBody = ({filterQuery, setFilterQuery}) => {
  ))}
  </select>
  </div> 
- </div>
+ </>
  );
 };
 
@@ -99,7 +99,7 @@ const FilterPlays = () => {
  onClose={() => setShowModal(false)}
  onSubmit={handleFilter}
  show={showModal}
- cname="filter-plays"
+ cname="filter"
  children={
  <FilterPlaysModalBody
  filterQuery={modifiedFilterQuery}

diff --git a/src/common/search/search.css b/src/common/search/search.css
@@ -92,4 +92,128 @@
  font-size: var(--fs-xs);
  line-height: 18px;
  background-color: var(--color-brand-primary);
+}
+
+/* Filters Modal */
+.modal-filter {
+ position: fixed;
+ left: 50%;
+ top: 50%;
+ z-index: 100;
+ display: flex;
+ flex-direction: column;
+
+ /* Probably need media queries here */
+ width: 400px;
+ max-width: 90%;
+ max-height: 90%;
+ border-radius: 0.2rem;
+
+ transform: translate(-50%, -50%);
+
+ background: white;
+ box-shadow: 0px 0 26px 0px rgba(var(--color-neutral-90-rgb),0.62);
+ -webkit-box-shadow: 0px 0 26px 0px rgba(var(--color-neutral-90-rgb),0.62);
+ -moz-box-shadow: 0px 0 26px 0px rgba(var(--color-neutral-90-rgb),0.62);
+
+}
+
+.modal-overlay {
+ position: fixed;
+ background-color: rgba(0,0,0,0.72);
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 99;
+}
+
+.modal-filter .modal-filter-header {
+ padding: 1rem 1.6rem 1.6rem 1.4rem;
+}
+.modal-filter .modal-filter-header .modal-title {
+ margin: 0;
+ font-size: var(--fs-md);
+}
+
+.modal-filter .modal-filter-body {
+ padding: 0 1.6rem 1rem 1.6rem;
+ flex-grow: 1;
+}
+
+.modal-filter .modal-filter-footer {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ grid-gap: 0.6rem;
+ padding: 1rem 1.6rem 1.4rem 1.6rem;
+}
+
+.modal-filter .form-group {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ margin-bottom: 1rem;
+}
+
+
+.modal-filter .form-group:last-child {
+ margin-bottom: 0;
+
+}
+
+.modal-filter .form-group label {
+ color: var(--color-neutral-70);
+ font-size: var(--fs-sm);
+ font-weight: var(--fw-bold);
+}
+
+.modal-filter .form-group .form-control {
+ font-size: var(--fs-rg);
+ padding: 0.4rem 0.2rem;
+}
+
+.modal-filter .form-group .form-control option {
+ padding: 1.6rem;
+ font-size: var(--fs-rg);
+}
+
+.btn-default {
+ border: 0;
+ display: inline-flex;
+ align-items: center;
+ grid-gap: 0.4rem;
+ border-radius: 2rem; 
+ padding: 0.8rem 1.4rem;
+ font-size: var(--fs-rg);
+ font-weight: var(--fw-bold);
+ background-color: rgba(var(--color-neutral-90-rgb),0.1);
+ color: var(--color-neutral-80);
+ transition: all 0.16s ease-in-out;
+}
+
+.btn-default:hover,
+.btn-default:focus {
+ background-color: rgba(var(--color-neutral-90-rgb),0.2);
+ color: var(--color-neutral-90);
+}
+
+.btn-primary {
+ border: 0;
+ display: inline-flex;
+ align-items: center;
+ grid-gap: 0.4rem;
+ border-radius: 2rem; 
+ padding: 0.8rem 1.4rem;
+ font-size: var(--fs-rg);
+ font-weight: var(--fw-bold);
+ background-color: var(--color-brand-primary);
+ color: var(--color-neutral-80);
+ transition: all 0.16s ease-in-out;
+}
+
+.btn-primary:hover,
+.btn-primary:focus {
+ color: var(--color-neutral-10);
+ background-color: var(--color-neutral-90);
 }