Google Oauth completed(BE)

.prettierignore

@@ -1,3 +1,4 @@
 /node_modules
 /dist
 /package-lock.json
+/db-data

client/src/assets/styles/form.scss

@@ -17,7 +17,17 @@
     }
   }
 }
-
+.Icons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .icon {
+    margin: 1em;
+    :hover {
+      box-shadow: 0px 4px 0px 0px hsla(27, 46%, 70%, 0.256);
+    }
+  }
+}
 .form:hover {
   box-shadow: var(--shadow-4);
 }

client/src/assets/styles/large-sidebar.scss

@@ -56,7 +56,6 @@
     .nav-link:hover {
       background: var(--grey-50);
       padding-left: 3rem;
-      color: var(--grey-900);
       color: #ffa630;
     }
     .nav-link:hover .icon {
@@ -70,75 +69,10 @@
       transition: var(--transition);
     }
     .active {
-      color: var(--grey-900);
+      color: #ffa630;
     }
     .active .icon {
       color: var(--primary-500);
     }
   }
 }
-
-// .navbar {
-//   height: 100%;
-//   width: 0;
-//   position: fixed;
-//   top: 0;
-//   left: 1rem;
-//   padding-top: 1rem;
-// }
-
-// .navbar a {
-//   padding: 8px 8px 8px 32px;
-//   text-decoration: none;
-//   font-size: 18px;
-//   color: #0b4f6c;
-//   background-color: transparent;
-//   display: float;
-//   padding: 20px;
-// }
-
-// .navbar .title {
-//   font-size: 50px;
-//   color: #0b4f6c;
-//   font-family: 'Fredoka One', cursive;
-//   // font-family: 'Bebas Neue', cursive;
-// }
-
-// .navbar .links {
-//   margin: 1rem;
-//   padding: 0;
-//   list-style: none;
-//   position: fixed;
-// }
-
-// .navbar li {
-//   margin: 10px 0;
-//   border: 1px none #999;
-//   font-size: 40px;
-//   text-align: left;
-//   font-family: 'Fredoka One', cursive;
-//   // font-family: 'Bebas Neue', cursive;
-
-//   // border: solid #FFA630;
-//   // border-radius: 25px;
-// }
-
-// .navbar .active {
-//   background-color: #e1efe6;
-//   color: #ffa630;
-//   margin: 0;
-//   padding: 20px;
-//   border-radius: 15px;
-// }
-
-// .navbar a:hover {
-//   color: #ffa630;
-//   border-radius: 15px;
-//   padding: 20px;
-// }
-
-// .navbar .signout {
-//   bottom: 2rem;
-//   left: 2rem;
-//   position: fixed;
-// }

client/src/assets/styles/navbar.scss

@@ -4,16 +4,19 @@
   align-items: center;
   justify-content: center;
   box-shadow: 0 1px 0px 0px rgba(0, 0, 0, 0.1);
-  .logo {
-    display: flex;
-    align-items: center;
-    width: 100px;
-  }
+  // .logo {
+  //   display: flex;
+  //   align-items: center;
+  //   width: 100px;
+  // }
   .nav-center {
     display: flex;
     width: 90vw;
     align-items: center;
     justify-content: space-between;
+    .heading {
+      font-size: 1.5rem;
+    }
   }
   .toggle-btn {
     background: transparent;

client/src/assets/styles/search.scss

@@ -0,0 +1,75 @@
+.search-sort-container {
+  width: 100%;
+  display: grid;
+  grid-auto-flow: column;
+  justify-content: start;
+}
+
+.search-container {
+
+}
+
+.search-input {
+  display: block;
+  width: 400px;
+  margin-top: 10px;
+  margin-left: 10px;
+  padding: 10px 50px 10px 20px;
+  font-size: 14px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  color: gray;
+  border-radius: 50px;
+  border: 1px solid gray;
+}
+
+.sort-button {
+  display: grid;
+  padding: 12px 15px;
+  margin: 10px;
+  border-radius: 50px;
+  border: 1px solid gray;
+  color: var(--primary-600);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 12px;
+  font-weight: bolder;
+}
+
+.sort-list {
+  padding: 5px;
+  padding-right: 30px;
+  background-color: white;
+  border: 1px solid gray;
+  border-radius: 5px;
+  font-size: 12px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  :hover {
+    color: #ffa630;
+    cursor: pointer;
+  }
+}
+
+.active {
+  color: #ffa630;
+}
+
+.search {
+    position: relative;
+
+    button {
+    position: absolute;
+    top:0px;
+    right:5px;
+    width: 40px;
+    height: 100%;
+    cursor: pointer;
+    background-color: transparent;
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: center;
+    border-radius: 20px;
+    border: 0;
+    }
+}

client/src/assets/styles/small-sidebar.scss

@@ -2,4 +2,83 @@
   @media (min-width: 992px) {
     display: none;
   }
+
+  .sidebar-container {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: -1;
+    opacity: 0;
+    transition: var(--transition);
+  }
+
+  .show-sidebar {
+    z-index: 99;
+    opacity: 1;
+  }
+
+  .content {
+    background: var(--white);
+    width: var(--fluid-width);
+    height: 95vh;
+    border-radius: var(--borderRadius);
+    padding: 3rem 2rem;
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+  }
+
+  .close-btn {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background: transparent;
+    border-color: transparent;
+    font-size: 2rem;
+    color: var(--red-dark);
+    cursor: pointer;
+  }
+
+  .nav-links {
+    padding-top: 2rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .nav-link {
+    display: flex;
+    align-items: center;
+    color: var(--grey-500);
+    padding: 1rem 0;
+    text-transform: capitalize;
+    transition: var(--transition);
+  }
+
+  .nav-link:hover {
+    color: var(--grey-900);
+  }
+
+  .nav-link:hover .icon {
+    color: var(--primary-500);
+  }
+
+  .icon {
+    font-size: 1.5rem;
+    margin-right: 1rem;
+    display: grid;
+    place-items: center;
+    transition: var(--transition);
+  }
+
+  .active {
+    color: var(--grey-900);
+  }
+
+  .active .icon {
+    color: var(--primary-500);
+  }
 }

client/src/components/Logo.jsx

@@ -1,9 +1,9 @@
-import favicon from '../assets/images/logo.svg';
+import logo from '../assets/images/logo.svg';
 
 const Logo = () => {
   return (
     <div className='logo'>
-      <img src={favicon} alt='logo' />
+      <img src={logo} alt='logo' />
     </div>
   );
 };

client/src/components/Navbar.jsx

@@ -16,8 +16,7 @@ const Navbar = () => {
           <FaAlignLeft />
         </button>
         <div>
-          <Logo />
-          <h3>Subslify</h3>
+          <h3 className='heading'>Subslify</h3>
         </div>
 
         <div className='btn-container'>

client/src/components/Search.jsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import '../assets/styles/search.scss';
+import { useAppContext } from '../context/appContext';
+
+const Search = (props) => {
+  const [search, setSearch] = useState({
+    value: ''
+  });
+
+  const { getSubscriptions } = useAppContext();
+
+  const handleSubmit = () => {
+    event.preventDefault();
+    getSubscriptions({type: props.type, sort: null, search: search.value})
+  };
+  const handleChange = event => {
+    setSearch({value: event.target.value});
+  };
+
+  return (
+    <div className='search-container'>
+      <form className='search' onSubmit={handleSubmit}>
+        <input
+          className='search-input'
+          type='text'
+          value={search.value}
+          placeholder='Search...'
+          onChange={handleChange}
+        />
+        <button type='submit'>
+          <i className='fa-search'></i>
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default Search;