Merge pull request #113 from OCA-UFCG/refact/input-date

Update feedback from input date dates

Author: RodrigoEC

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.

src/components/DateInput/DateInput.styles.tsx

@@ -23,7 +23,6 @@ export const InputWrapper = styled.div`
   justify-content: center;
   gap: 0rem;
   width: 100%;
-  // height: 2rem;
 `;
 
 export const InputContainer = styled.div`
@@ -86,14 +85,39 @@ export const DateContainer = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: end;
-  height: 1.5rem;
+  /* height: 1.5rem; */
 
   position: relative;
   opacity: 0.7;
 `;
 
-export const DateSpan = styled.span<{ year: string }>`
+export const Divider = styled.hr`
+  border-bottom: 1px solid #000;
+  transition: 300ms width ease-in-out;
+  opacity: 0;
+  width: 0px;
+  margin: 0;
+`;
+
+export const DateSpan = styled.p<{ isCurrent: string; active: string }>`
   font-size: 12px;
+  margin: 0;
   color: ${({ theme }) => theme.colors.black};
   cursor: pointer;
+  margin-top: 0.25rem;
+  pointer-events: ${({ active }) => (active !== "true" ? "all" : "none")};
+
+  &:hover {
+    font-weight: bold;
+  }
+
+  & + ${Divider} {
+    width: ${({ isCurrent }) => isCurrent === "true" && "100%"};
+    opacity: ${({ isCurrent }) => isCurrent === "true" && "1"};
+  }
+
+  &:hover + ${Divider} {
+    width: 100%;
+    opacity: 1;
+  }
 `;

src/components/DateInput/DateInput.tsx

@@ -8,6 +8,7 @@ import {
   InputWrapper,
   DateContainer,
   DateSpan,
+  Divider,
 } from "./DateInput.styles";
 
 const DateInput = ({
@@ -61,14 +62,19 @@ const DateInput = ({
             onChange={handleRangeChange}
           />
           <DateContainer>
-            {Object.keys(dates).map((date) => (
-              <DateSpan
-                key={date}
-                year={date}
-                onClick={() => updateFields(date)}
-              >
-                {date}
-              </DateSpan>
+            {Object.keys(dates).map((date, index) => (
+              <div key={date}>
+                <DateSpan
+                  isCurrent={(
+                    (index + 1).toString() === inputRef?.current?.value || false
+                  ).toString()}
+                  active={isLoading.toString()}
+                  onClick={() => updateFields(date)}
+                >
+                  {date}
+                </DateSpan>
+                <Divider />
+              </div>
             ))}
           </DateContainer>
         </InputWrapper>

src/components/MapsMenu/MapsMenu.styles.tsx

@@ -12,7 +12,6 @@ export const Form = styled.form`
   flex-flow: column;
   box-sizing: border-box;
   width: 20rem;
-  height: 100vh;
   padding-right: 0.3rem;
 
   max-height: 24rem;