@secondstaxorg/sscomp 1.6.51 → 1.6.52

package/dist/index.js

@@ -20425,6 +20425,7 @@ const TitleBarContainer$2 = styled.div`
   align-items: center;
   justify-content: space-between;
   height: 72px;
+  gap: 16px;
   color:${theme.colors["neutral-50"]};
   &.light{
     background:${theme.colors["neutral-100"]};
@@ -20434,6 +20435,12 @@ const TitleBarContainer$2 = styled.div`
     background:${theme.colors["neutral-900"]};
     color: ${theme.colors["neutral-50"]};
   }
+  @media (max-width: 720px) {
+    flex-direction: column;
+    height: fit-content;
+    align-items: start;
+    width: 100%;
+  }
 `;
 
 const NewsFilters = styled.div`
@@ -20442,6 +20449,12 @@ const NewsFilters = styled.div`
   .filterContainer{
     width: 200px;
   }
+  @media (max-width: 720px) {
+    width: 100%;
+    .filterContainer{
+      width: 100%;
+    }
+  }
 `;
 
 const _jsxFileName$u = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\components\\NewsFilterBar\\NewsFilterBar.tsx";
@@ -20450,23 +20463,31 @@ const _jsxFileName$u = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\compon
  */
 const NewsFilterBar = (props) => {
     const {countries,outlets,selectedCountryFxn,selectedOutletFxn,theme} = props;
+    const [windowWidth,setWindowWidth] = React$1.useState(720);
+
+    React$1.useEffect(() => {
+        setWindowWidth(window.innerWidth);
+        window.addEventListener('resize',function(){
+            setWindowWidth(window.innerWidth);
+        });
+    }, []);
 
     return (
-        React$1.createElement(TitleBarContainer$2, { className: theme, ...props, __self: undefined, __source: {fileName: _jsxFileName$u, lineNumber: 14}}
-            , React$1.createElement('h4', { className: "heading6Medium", __self: undefined, __source: {fileName: _jsxFileName$u, lineNumber: 15}}, "News")
-            , React$1.createElement(NewsFilters, {__self: undefined, __source: {fileName: _jsxFileName$u, lineNumber: 16}}
+        React$1.createElement(TitleBarContainer$2, { className: theme, ...props, __self: undefined, __source: {fileName: _jsxFileName$u, lineNumber: 22}}
+            , React$1.createElement('h4', { className: windowWidth <= 720 ? "paragraph2Medium" : "heading6Medium", __self: undefined, __source: {fileName: _jsxFileName$u, lineNumber: 23}}, "News")
+            , React$1.createElement(NewsFilters, {__self: undefined, __source: {fileName: _jsxFileName$u, lineNumber: 24}}
                 , countries && countries.length > 0 &&
-                    React$1.createElement('div', { className: "filterContainer", __self: undefined, __source: {fileName: _jsxFileName$u, lineNumber: 18}}
+                    React$1.createElement('div', { className: "filterContainer", __self: undefined, __source: {fileName: _jsxFileName$u, lineNumber: 26}}
                         , React$1.createElement(DropdownList, { options: countries, returnedSelection: (selCountry) => {
                             if (selectedCountryFxn) selectedCountryFxn(selCountry);
-                        }, placeholder: "Select Country" , __self: undefined, __source: {fileName: _jsxFileName$u, lineNumber: 19}})
+                        }, placeholder: "Select Country" , __self: undefined, __source: {fileName: _jsxFileName$u, lineNumber: 27}})
                     )
                 
                 , outlets && outlets.length > 0 &&
-                    React$1.createElement('div', { className: "filterContainer", __self: undefined, __source: {fileName: _jsxFileName$u, lineNumber: 25}}
+                    React$1.createElement('div', { className: "filterContainer", __self: undefined, __source: {fileName: _jsxFileName$u, lineNumber: 33}}
                         , React$1.createElement(DropdownList, { options: outlets, returnedSelection: (selOutlet) => {
                             if (selectedOutletFxn) selectedOutletFxn(selOutlet);
-                        }, placeholder: "Select Outlet" , __self: undefined, __source: {fileName: _jsxFileName$u, lineNumber: 26}})
+                        }, placeholder: "Select Outlet" , __self: undefined, __source: {fileName: _jsxFileName$u, lineNumber: 34}})
                     )
                 
             )
@@ -20534,6 +20555,9 @@ const TitleBarContainer$1 = styled.div`
     background:${theme.colors["neutral-900"]};
     color: ${theme.colors["neutral-50"]};
   }
+  @media (max-width: 720px) {
+    height: 48px;
+  }
 `;
 
 const _jsxFileName$s = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\components\\NewsTitleBar\\NewsTitleBar.tsx";
@@ -20542,10 +20566,18 @@ const _jsxFileName$s = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\compon
  */
 const NewsTitleBar = (props) => {
     const {title,theme} = props;
+    const [windowWidth,setWindowWidth] = React$1.useState(720);
+
+    React$1.useEffect(() => {
+        setWindowWidth(window.innerWidth);
+        window.addEventListener('resize',function(){
+            setWindowWidth(window.innerWidth);
+        });
+    }, []);
 
   return (
-      React$1.createElement(TitleBarContainer$1, { className: theme, ...props, __self: undefined, __source: {fileName: _jsxFileName$s, lineNumber: 13}}
-          , React$1.createElement('h5', { className: "heading6Medium", __self: undefined, __source: {fileName: _jsxFileName$s, lineNumber: 14}}, title)
+      React$1.createElement(TitleBarContainer$1, { className: theme, ...props, __self: undefined, __source: {fileName: _jsxFileName$s, lineNumber: 21}}
+          , React$1.createElement('h5', { className: windowWidth <= 720 ? "paragraph2Medium" : "heading6Medium", __self: undefined, __source: {fileName: _jsxFileName$s, lineNumber: 22}}, title)
       )
   )
 };