Fixed missing CSS vars (#949)

* Fixed missing css vars * Updated snapshots
mattermost-community · Aug 12, 2021 · 32dcc1f · 32dcc1f
1 parent c0203c0
commit 32dcc1f
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 deletions.
diff --git a/webapp/src/components/calculations/__snapshots__/options.test.tsx.snap b/webapp/src/components/calculations/__snapshots__/options.test.tsx.snap
@@ -156,7 +156,7 @@ exports[`components/calculations/Options should match snapshot menu open 1`] = `
       </div>
     </div>
     <div
-      class=" css-inewzj-menu"
+      class=" css-1kslk4z-menu"
     >
       <div
         class=" css-g29tl0-MenuList"

diff --git a/webapp/src/components/calculations/options.tsx b/webapp/src/components/calculations/options.tsx
@@ -53,7 +53,7 @@ const styles = {
         ...provided,
         minWidth: '100%',
         width: 'max-content',
-        background: 'rgb(var(--main-bg))',
+        background: 'rgb(var(--center-channel-bg-rgb))',
         right: '0',
         marginBottom: '0',
     }),

diff --git a/webapp/src/components/properties/dateRange/dateRange.scss b/webapp/src/components/properties/dateRange/dateRange.scss
@@ -92,9 +92,9 @@
 
     .DayPicker {
     }
-    
+
     .DayPickerInput-Overlay {
-        background-color: rgba(var(--main-bg));
+        background-color: rgba(var(--center-channel-bg-rgb));
         box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1),0 4px 11px hsla(0, 0%, 0%, 0.1);
         line-height: 100%;
     }
@@ -152,4 +152,4 @@
       .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
         background-color: rgba(var(--body-color), 0.2);
     }
-}
+}
diff --git a/webapp/src/components/table/calculation/calculationRow.scss b/webapp/src/components/table/calculation/calculationRow.scss
@@ -7,10 +7,10 @@
     border-top: solid 1px rgba(var(--body-color), 0.09);
     // To override table's specific border
     border-bottom: none !important;
-    background-color: rgb(var(--main-bg));
+    background-color: rgb(var(--center-channel-bg-rgb));
 
     .octo-table-cell {
-        background-color: rgb(var(--main-bg));
+        background-color: rgb(var(--center-channel-bg-rgb));
         align-items: center;
         justify-content: flex-end;
         border: none;
@@ -28,10 +28,10 @@
 .Table {
     .octo-table-cell.Calculation:focus-within {
         border: unset;
-        background-color: rgb(var(--main-bg));
+        background-color: rgb(var(--center-channel-bg-rgb));
     }
 
     .octo-table-cell.Calculation:hover {
-        background-color: rgb(var(--main-bg));
+        background-color: rgb(var(--center-channel-bg-rgb));
     }
 }
-Original file line number
+Diff line change
@@ Expand Up @@
           </div>
         </div>
         <div
-          class=" css-inewzj-menu"
+          class=" css-1kslk4z-menu"
         >
           <div
             class=" css-g29tl0-MenuList"
@@ Expand Down @@