oddsgate-ds 1.0.23 → 1.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/molecules/Dropdown/Dropdown.theme.ts

@@ -1,7 +1,9 @@
 import { IDropdown, IDropdownContainer, IDropdownItem, IDropdownTitle } from './Dropdown.interface';
-import { colors, responsiveMedia, shadows } from '@/styles/variables';
+import { colors, radius, responsiveMedia, shadows } from '@/styles/variables';
 import styled, { css } from 'styled-components';
 
+import { fontSize } from '@/styles/utilities';
+
 export const StyledDropdown = styled.div<IDropdown>`
   position: relative;
   display: inline-flex;
@@ -10,12 +12,26 @@ export const StyledDropdown = styled.div<IDropdown>`
 export const StyledDropdownTitle = styled.div<IDropdownTitle>`
   display: flex;
   align-items: center;
+
+  color: ${colors.primary50};
+  background-color: ${colors.secondary50};
+
+  ${fontSize('h5')};
+  padding: 10px 20px;
+  border-radius: 50px;
+  text-transform:uppercase;
+
   transition: color 0.15s ease-in-out;
   cursor: pointer;
 
+  &:hover{
+    color: ${colors.secondary50};
+    background-color: ${colors.primary50};
+  }
+
   ${({ open }) => open && `
-    color: ${colors.primary70} !important;
-    user-select: none
+    color: ${colors.secondary50};
+    background-color: ${colors.primary50};
   `}
 `;
 
@@ -26,25 +42,28 @@ export const StyledDropdownContainer = styled.ul<IDropdownContainer>`
   left: 0;
 
   margin-top: 12px;
-  padding-bottom: 12px;
-  background: ${colors.white};
+  padding: 20px;
+  background: ${colors.secondary50};
   box-shadow: ${shadows.sm};
+  border-radius: ${radius.md};
+
+  min-width: 18rem;
 
   opacity: ${props => props.open ? 1 : 0};
   pointer-events: ${props => props.open ? "auto" : "none"};
 
+  transform:  ${props => props.open ? "rotate(0deg) translateY(0)" : "rotate(8deg) translateY(30px)"}; ;
+
   z-index: 1;
-  transition: opacity 0.15s ease-in-out;
+  transition: all 0.35s ease-in-out;
 `;
 export const StyledDropdownItem = styled.li<IDropdownItem>`
   display:flex;
-  justify-content: space-between;
+  gap: 8px;
   align-items: center;
-  width: 100%;
-  padding: 8px 18px;
   cursor: pointer;
 
   &:hover {
-    color: ${colors.primary70}
+    color: ${colors.primary50}
   }
 `;

package/src/components/organisms/Cover/Cover.component.tsx

@@ -33,11 +33,11 @@ const Cover = ({
       style={{ ...style, minHeight: minHeight || undefined }}
     >
       {imageElement}
-      {overlayColor && overlayOpacity && (
+      {overlayColor && overlayOpacity ? (
         <StyledCoverOverlay
           style={{ backgroundColor: overlayColor, opacity: overlayOpacity }}
         ></StyledCoverOverlay>
-      )}
+      ) : (<></>)}
       <StyledCoverContent>{children}</StyledCoverContent>
     </StyledCover>
   )

package/src/components/organisms/Tabs/Tabs.theme.ts

@@ -32,6 +32,10 @@ export const StyledTabsLinks = styled.a<ITabsItem>`
   &:hover{
     background-color: ${colors.primary50};
   }
+
+  ${({ $active }) => $active && `
+    background-color: ${colors.primary50};
+  `}
 `
 
 
@@ -66,6 +70,7 @@ export const StyledTabs = styled.div<ITabs>`
       }
 
       ${StyledTabsMenu}{
+        flex-flow: column;
         justify-content: flex-start;
       }
     }