Brush layout of calendar and datepicker

SamIvan-ark · Feb 26, 2024 · 768949c · 768949c
1 parent 7183ac1
commit 768949c
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 36 deletions.
diff --git a/src/components/Calendar/Calendar.jsx b/src/components/Calendar/Calendar.jsx
@@ -35,6 +35,7 @@ const Calendar = ({
   };
   return (
     <div className="calendar-wrapper">
+      <hr className="calendar-divider" />
       <p className="calendar-header">Календарь</p>
       <div className="calendar-control">
         <button

diff --git a/src/components/Calendar/DayUnit/style.css b/src/components/Calendar/DayUnit/style.css
@@ -4,8 +4,6 @@
   color: #363a47;
   border: 1px solid transparent;
   transition: border 500ms;
-  -webkit-user-select: none;
-  user-select: none;
   width: 50px;
   height: 33px;
 }

diff --git a/src/components/Calendar/style.css b/src/components/Calendar/style.css
@@ -1,7 +1,7 @@
 .calendar-wrapper {
   position: absolute;
   width: 100%;
-  padding: 20px 15px 0;
+  padding: 10px 15px 0;
   bottom: 0;
   left: 0;
   right: 0;
@@ -27,6 +27,19 @@
   font-size: 1.4em;
 }
 
+.calendar-divider {
+  width: 15%;
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 2px;
+  height: 5px;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  background-color: #d7d7df;
+  border: none;
+  margin-bottom: 15px;
+}
+
 .calendar-control {
   position: relative;
   display: flex;
@@ -88,4 +101,5 @@ li {
   width: 100%;
   border-radius: 12px;
   font-weight: bold;
+  margin-bottom: 15px;
 }
diff --git a/src/components/DatePicker/DatePicker.jsx b/src/components/DatePicker/DatePicker.jsx
@@ -16,36 +16,38 @@ const DatePicker = ({ date, updateDate, setIsCalendarOpen }) => {
 
   return (
     <div className="datepicker-wrapper">
-      <button
-        aria-label="Предыдущий день"
-        className="date-control"
-        onClick={() => updateDate(minusDay(date))}
-        type="button"
-      >
-        <ArrowLeft className="arrow-icon" />
-      </button>
-      <div className="date-container">
-        <CalendarIcon />
+      <nav className="datepicker">
         <button
-          className="date-picker"
-          onClick={() => setIsCalendarOpen(true)}
+          aria-label="Предыдущий день"
+          className="date-control"
+          onClick={() => updateDate(minusDay(date))}
           type="button"
         >
-          {dateFormatter.format(date)}
+          <ArrowLeft className="arrow-icon" />
         </button>
-      </div>
-      <button
-        aria-label="Следующий день"
-        className={cn(
-          'date-control',
-          { 'button-disabled': pickedCurrentDay },
-        )}
-        disabled={pickedCurrentDay}
-        onClick={() => updateDate(plusDay(date))}
-        type="button"
-      >
-        <ArrowRight className="arrow-icon" />
-      </button>
+        <div className="date-container">
+          <CalendarIcon />
+          <button
+            className="date-picker"
+            onClick={() => setIsCalendarOpen(true)}
+            type="button"
+          >
+            {dateFormatter.format(date)}
+          </button>
+        </div>
+        <button
+          aria-label="Следующий день"
+          className={cn(
+            'date-control',
+            { 'button-disabled': pickedCurrentDay },
+          )}
+          disabled={pickedCurrentDay}
+          onClick={() => updateDate(plusDay(date))}
+          type="button"
+        >
+          <ArrowRight className="arrow-icon" />
+        </button>
+      </nav>
     </div>
   );
 };

diff --git a/src/components/DatePicker/style.css b/src/components/DatePicker/style.css
@@ -1,9 +1,14 @@
 .datepicker-wrapper {
+  background-color: #eff3f6;
+}
+
+.datepicker {
   display: flex;
   justify-content: space-between;
-  background-color: #eff3f6;
   padding: 12px;
   box-sizing: border-box;
+  max-width: 650px;
+  margin: 0 auto;
 }
 
 .date-control {
@@ -13,12 +18,6 @@
   padding: 0;
   width: 34px;
   height: 34px;
-  cursor: pointer;
-}
-
-.button-disabled {
-  background-color: transparent;
-  cursor: not-allowed;
 }
 
 .arrow-icon {
@@ -42,6 +41,8 @@
   font-weight: 600;
   font-size: 14px;
   display: inline-block;
+  width: 100%;
+  height: 100%;
 }
 
 .calendar-icon {

diff --git a/src/styles/App.css b/src/styles/App.css
@@ -1,3 +1,14 @@
 body {
   font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
+}
+
+button {
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: pointer;
+}
+
+.button-disabled {
+  background-color: transparent;
+  cursor: not-allowed;
 }