Merge branch '534-fr-css-tweaks-to-match-new-obsidian-theme'

Author: RafaelGB

src/components/AddRow.tsx

@@ -66,9 +66,8 @@ export function AddRow(props: AddRowProps) {
       className={`${c("add-row")}`}
       size="small"
       sx={{
-        padding: 0.5,
         bordercolor: StyleVariables.TEXT_NORMAL,
-        border: 0.5,
+        border: 0,
       }}
     >
       <Button
@@ -77,7 +76,6 @@ export function AddRow(props: AddRowProps) {
           setInputNewRow("");
           setShowNewRow(!showNewRow);
         }}
-        size="small"
         sx={{
           bgcolor: StyleVariables.BACKGROUND_PRIMARY,
           color: StyleVariables.TEXT_NORMAL,
@@ -86,17 +84,17 @@ export function AddRow(props: AddRowProps) {
             color: StyleVariables.TEXT_NORMAL,
             border: 0,
           },
-          height: "30px",
-          maxHeight: "30px",
           border: 0,
         }}
+        style={{ minWidth: "30px" }}
       >
         {showNewRow ? (
           <CloseIcon />
         ) : (
           <AddIcon
             style={{
               border: 0,
+              fontSize: "1.35rem",
             }}
           />
         )}

src/components/NavBar.tsx

@@ -110,6 +110,8 @@ export function NavBar(navBarProps: NavBarProps) {
         <Toolbar
           style={{
             minHeight: "2.65rem",
+            padding: 0,
+            paddingLeft: "2px",
           }}
         >
           <IconButton
@@ -123,6 +125,7 @@ export function NavBar(navBarProps: NavBarProps) {
               mr: 2,
               maxWidth: 40,
               marginRight: 1,
+              padding: 0.5,
             }}
           >
             <MenuIcon />
@@ -136,6 +139,7 @@ export function NavBar(navBarProps: NavBarProps) {
               scale: 0.7,
               padding: 0,
               boxShadow: "none",
+              backgroundColor: "transparent",
             }}
           >
             {/** Global filter */}

src/components/reducers/DataviewFilters.tsx

@@ -44,7 +44,7 @@ export default function EditFiltersButton(props: DataviewFiltersProps) {
       size="small"
       onClick={openFiltersGroupHandler}
       key={`Button-FilterConditions-DataviewFilters`}
-      style={{ minWidth: "0px", padding: "2px" }}
+      style={{ minWidth: "0px", padding: "2px", borderRadius: "0px" }}
     >
       <span
         className="svg-icon svg-gray"

src/components/reducers/QuickFilters.tsx

@@ -34,6 +34,7 @@ const QuickFilters = (props: DataviewFiltersProps) => {
   return filters.conditions.length > 0 ? (
     <Stack direction="row" spacing={1} key="stack-quick-filters">
       {filters.conditions.map((condition, filterIndex) => {
+        const { disabled } = condition as FilterGroupCondition;
         if ((condition as FilterGroupCondition).condition) {
           const label = (condition as FilterGroupCondition).label;
           return (
@@ -45,11 +46,15 @@ const QuickFilters = (props: DataviewFiltersProps) => {
                 size="small"
                 label={label ?? `filter-${filterIndex}`}
                 sx={{
-                  backgroundColor: (condition as FilterGroupCondition).disabled
-                    ? StyleVariables.BACKGROUND_SECONDARY
-                    : StyleVariables.BACKGROUND_MODIFIER_SUCCESS,
-                  boxShadow: `1px 1px 1px 1px ${StyleVariables.TEXT_NORMAL}`,
-                  color: StyleVariables.TEXT_NORMAL,
+                  backgroundColor: disabled
+                    ? StyleVariables.INTERACTIVE_NORMAL
+                    : StyleVariables.TEXT_ACCENT,
+                  boxShadow: disabled ? StyleVariables.INPUT_SHADOW : "none",
+                  borderColor: disabled ? StyleVariables.LINK_COLOR : "none",
+                  color: disabled
+                    ? StyleVariables.LINK_COLOR
+                    : StyleVariables.TEXT_NORMAL,
+                  borderRadius: "4px",
                 }}
               />
             </div>

src/components/reducers/ToggleFiltersButton.tsx

@@ -30,7 +30,7 @@ export default function ToggleFiltersButton(props: DataviewFiltersProps) {
       size="small"
       onClick={enableFilterHandler}
       key={`Button-Enabled-DataviewFilters`}
-      style={{ minWidth: "0px", padding: "2px" }}
+      style={{ minWidth: "0px", padding: "2px", borderRadius: "0px" }}
     >
       <span className="svg-icon svg-gray">
         {filters.enabled ? <FilterOnIcon /> : <FilterOffIcon />}

src/components/styles/NavBarStyles.ts

@@ -21,7 +21,8 @@ export const SearchIconWrapper = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    textAlign: 'center'
+    textAlign: 'center',
+    color: StyleVariables.TEXT_NORMAL,
 }));
 
 export const DebouncedInputWrapper = styled('div')(({ theme }) => ({
@@ -46,6 +47,8 @@ export const PaginationButtonStyle = {
             opacity: 0.5,
             cursor: "not-allowed",
             backgroundColor: StyleVariables.BACKGROUND_SECONDARY,
+            boxShadow: StyleVariables.INPUT_SHADOW,
+            color: StyleVariables.TEXT_NORMAL,
         },
         ":hover": {
             backgroundColor: StyleVariables.TEXT_ACCENT_HOVER,

src/helpers/Constants.ts

@@ -243,6 +243,9 @@ export const StyleVariables = Object.freeze({
   TEXT_NORMAL: 'var(--text-normal)',
   TEXT_ACCENT_HOVER: 'var(--text-accent-hover)',
   TEXT_ACCENT: 'var(--text-accent)',
+  LINK_COLOR: 'var(--link-color)',
+  INTERACTIVE_NORMAL: 'var(--interactive-normal)',
+  INPUT_SHADOW: 'var(--input-shadow)',
 });
 
 export const SourceDataTypes = Object.freeze({

styles.css

@@ -85,13 +85,15 @@ div.database-plugin__td.data-input:hover {
   box-shadow: 0 0 1px 2px var(--text-accent-hover);
 }
 
+/******************************************************
+ *                  Inputs of cells
+ ******************************************************/
 .data-input {
   white-space: pre-wrap;
   border: none;
   padding: 0.5rem;
   color: var(--text-normal);
   font-size: 1rem;
-  border-radius: 4px;
   resize: none;
   box-sizing: border-box;
   flex: 1 1 auto;
@@ -393,7 +395,7 @@ div.database-plugin__checkbox {
 
 .database-plugin__table {
   position: relative;
-  border-spacing: 0;
+  border-spacing: 2px;
   border-bottom: 1px solid var(--background-modifier-border);
   display: table;
   height: 1px; /** Hack to prevent collapsing of table cells */