progress with styles

Author: RafaelGB

package.json

@@ -50,21 +50,21 @@
 	"dependencies": {
 		"@emotion/styled": "11.10.5",
 		"@mui/icons-material": "5.10.9",
-		"@mui/material": "5.10.11",
+		"@mui/material": "5.10.13",
 		"@popperjs/core": "2.11.6",
 		"@tanstack/match-sorter-utils": "8.5.14",
-		"@tanstack/react-table": "8.5.21",
+		"@tanstack/react-table": "8.5.22",
 		"eventemitter3": "4.0.7",
 		"fuse.js": "6.6.2",
-		"luxon": "3.0.4",
+		"luxon": "3.1.0",
 		"monkey-around": "2.3.0",
-		"obsidian-dataview": "0.5.47",
+		"obsidian-dataview": "0.5.51",
 		"react": "18.2.0",
 		"react-csv": "2.2.2",
 		"react-datepicker": "4.8.0",
 		"react-dom": "18.2.0",
 		"react-popper": "2.3.0",
-		"react-select": "5.5.8",
+		"react-select": "5.6.0",
 		"react-window": "1.8.8",
 		"zustand": "4.1.4"
 	}

src/components/cellTypes/CalendarCell.tsx

@@ -66,7 +66,7 @@ const CalendarCell = (calendarProps: CellComponentProps) => {
 
   return showDatePicker ? (
     <DatePicker
-      dateFormat="yyyy-MM-dd"
+      dateFormat={configInfo.getLocalSettings().date_format}
       selected={
         DateTime.isDateTime(calendarCell)
           ? (calendarCell as unknown as DateTime).toJSDate()

src/components/cellTypes/TagsCell.tsx

@@ -82,7 +82,7 @@ const TagsCell = (tagsProps: CellComponentProps) => {
     newValue: OnChangeValue<SelectValue, true>,
     actionMeta: ActionMeta<RowSelectOption>
   ) => {
-    const arrayTags = newValue.map((tag) => tag.value);
+    const arrayTags = newValue.map((tag) => `${tag.value}`);
     const newCell = ParseService.parseRowToLiteral(
       tagsRow,
       tableColumn,
@@ -153,7 +153,7 @@ const TagsCell = (tagsProps: CellComponentProps) => {
                 <div key={`key-${tag}`}>
                   <Relationship
                     key={`tags-${row.index}-${tableColumn.key}-${tag}`}
-                    value={tag}
+                    value={tag.toString()}
                     backgroundColor={getColor(tag)}
                   />
                 </div>

styles.css

@@ -1,5 +1,14 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
-
+/*****************
+* Plugin variables
+******************/
+body {
+  --react-datepicker-navigation-height: 24px;
+  --react-datepicker-navigation-width: 24px;
+}
+/*****************
+*      Base
+******************/
 .database-plugin__html {
   box-sizing: border-box;
 }
@@ -145,7 +154,7 @@ div.database-plugin__checkbox {
   color: currentColor;
   width: 1.15em;
   height: 1.15em;
-  border: 0.15em solid currentColor;
+  border: 0.05em solid currentColor;
   border-radius: 0.15em;
   transform: translateY(-0.075em);
 
@@ -179,6 +188,10 @@ div.database-plugin__checkbox {
   outline-offset: max(2px, 0.15em);
 }
 
+.database-plugin__checkbox input[type="checkbox"]:checked:after {
+  background-color: var(--form-background);
+}
+
 .database-plugin__md_cell {
   vertical-align: middle;
 }
@@ -671,9 +684,9 @@ div.database-plugin__checkbox {
   color: var(--text-on-accent);
 }
 
-/*
+/*************************
 *  React-datepicker styles
-*/
+**************************/
 .react-datepicker__year-read-view--down-arrow,
 .react-datepicker__month-read-view--down-arrow,
 .react-datepicker__month-year-read-view--down-arrow,
@@ -920,8 +933,8 @@ div.database-plugin__checkbox {
   padding: 0;
   border: none;
   z-index: 4;
-  height: 32px;
-  width: 32px;
+  height: var(--react-datepicker-navigation-height);
+  width: var(--react-datepicker-navigation-width);
   text-indent: -999em;
   overflow: hidden;
 }
@@ -1544,37 +1557,3 @@ div.database-plugin__checkbox {
   padding: 5px 0;
   clear: left;
 }
-
-.react-datepicker__portal {
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  background-color: var(--background-primary);
-  left: 0;
-  top: 0;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  z-index: 4;
-}
-
-.react-datepicker__portal .react-datepicker__day-name,
-.react-datepicker__portal .react-datepicker__day,
-.react-datepicker__portal .react-datepicker__time-name {
-  width: 3rem;
-  line-height: 3rem;
-}
-
-@media (max-width: 400px), (max-height: 550px) {
-  .react-datepicker__portal .react-datepicker__day-name,
-  .react-datepicker__portal .react-datepicker__day,
-  .react-datepicker__portal .react-datepicker__time-name {
-    width: 2rem;
-    line-height: 2rem;
-  }
-}
-
-.react-datepicker__portal .react-datepicker__current-month,
-.react-datepicker__portal .react-datepicker-time__header {
-  font-size: 1.44rem;
-}