Improve styles

Ryczko · May 12, 2022 · c118221 · c118221
1 parent a4ae99d
commit c118221
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 7 deletions.
diff --git a/src/Components/BurgerMenu/BurgerMenu.tsx b/src/Components/BurgerMenu/BurgerMenu.tsx
@@ -16,7 +16,7 @@ const BurgerMenu = ({ isOpen, children }: BurgerMenuProps) => {
       initial="closed"
       variants={variants}
       id="burger_menu"
-      className="fixed shadow-md left-0 z-10 flex flex-col items-center justify-center w-screen top-20 bg-zinc-100 md:hidden"
+      className="fixed pb-2 shadow-md left-0 z-10 flex flex-col items-center justify-center w-screen top-20 bg-zinc-100 lg:hidden"
     >
       {children}
     </motion.div>

diff --git a/src/Components/Navigation/Navigation.tsx b/src/Components/Navigation/Navigation.tsx
@@ -28,15 +28,15 @@ function Navigation() {
         <Logo />
         {!loading && user ? (
           <div className="flex md:space-x-4">
-            <div className="hidden space-x-4 md:block">
+            <div className="hidden space-x-4 lg:block">
               <Link to={'/survey/create'}>
                 <Button variant={ButtonVariant.FLAT}>Create Survey</Button>
               </Link>
               <Link to={'/surveys'}>
                 <Button variant={ButtonVariant.FLAT}>My Surveys</Button>
               </Link>
             </div>
-            <div className="sm:flex justify-center items-center hidden">
+            <div className="lg:flex justify-center items-center hidden">
               <Menu
                 as="div"
                 className="relative inline-block text-left rounded-md"
@@ -45,7 +45,7 @@ function Navigation() {
                   title="Expand menu"
                   className="flex w-full justify-center hover:bg-zinc-200 py-1 rounded-md px-4 font-medium"
                 >
-                  <p className="truncate items-center hidden justify-left sm:flex ml-4">
+                  <p className="truncate items-center hidden justify-left sm:flex ml-2">
                     {user.displayName}
                     {user.photoURL && (
                       <img
@@ -84,7 +84,7 @@ function Navigation() {
             </div>
             <MenuIcon
               onClick={() => setIsOpen(!isOpen)}
-              className="z-50 w-8 h-8 cursor-pointer md:hidden"
+              className="z-50 w-8 h-8 cursor-pointer lg:hidden"
             />
           </div>
         ) : (

diff --git a/src/Pages/SurveyCreatePage/SurveyCreatePage.tsx b/src/Pages/SurveyCreatePage/SurveyCreatePage.tsx
@@ -102,7 +102,7 @@ function SurveyCreatePage() {
         </label>
         <div className="flex flex-col items-center justify-center space-y-4 md:space-y-0 md:flex-row">
           <DatePicker
-            className="w-full md:w-48 py-3 px-4 font-medium leading-none rounded-lg shadow-sm cursor-pointer focus:outline-none focus:shadow-outline text-zinc-600"
+            className="w-full md:w-52 block text-center mr-auto py-3 px-4 font-medium leading-none rounded-lg shadow-sm cursor-pointer focus:outline-none focus:shadow-outline text-zinc-600"
             selected={startDate}
             onChange={(date) => setStartDate(date)}
             calendarStartDay={1}
@@ -117,8 +117,9 @@ function SurveyCreatePage() {
             showPreviousMonths={false}
             filterTime={filterPassedTime}
           />
+          <p>to</p>
           <DatePicker
-            className="w-full md:w-48 py-3 px-4 font-medium leading-none rounded-lg shadow-sm cursor-pointer focus:outline-none focus:shadow-outline text-zinc-600"
+            className="w-full md:w-52 text-center block py-3 ml-auto px-4 font-medium leading-none rounded-lg shadow-sm cursor-pointer focus:outline-none focus:shadow-outline text-zinc-600"
             selected={endDate}
             onChange={(date) => setEndDate(date)}
             calendarStartDay={1}

diff --git a/src/datepicker.scss b/src/datepicker.scss
@@ -25,6 +25,39 @@
   @apply bg-white text-zinc-900;
 }
 
+.react-datepicker-time__input:focus-visible {
+  outline: none;
+}
+
+.react-datepicker__triangle {
+  display: none;
+}
+
+input[type='time']::-webkit-calendar-picker-indicator {
+  background: none;
+  display: none;
+}
+
+.react-datepicker input[type='time'] {
+  margin-right: 5px;
+}
+
+.react-datepicker__time-container
+  .react-datepicker__time
+  .react-datepicker__time-box
+  ul.react-datepicker__time-list
+  li.react-datepicker__time-list-item--selected {
+  @apply bg-indigo-200 text-indigo-900;
+}
+
+.react-datepicker__time-container
+  .react-datepicker__time
+  .react-datepicker__time-box
+  ul.react-datepicker__time-list
+  li.react-datepicker__time-list-item--selected:hover {
+  @apply bg-indigo-200 text-indigo-900;
+}
+
 .react-datepicker__day--selected {
   @apply bg-indigo-500;
 }