orcs-design-system 3.3.6 → 3.3.7

package/es/components/Header/Header.styles.js

@@ -3,6 +3,7 @@ import { space, layout } from "styled-system";
 import css from "@styled-system/css";
 import { themeGet } from "@styled-system/theme-get";
 import Box from "../Box";
+import Flex from "../Flex";
 export const Bar = styled("header").attrs(props => ({
   "data-testid": props.dataTestId
 })).withConfig({
@@ -17,23 +18,20 @@ export const Bar = styled("header").attrs(props => ({
   top: "0",
   display: "flex",
   alignItems: "center",
-  bg: "transparent",
+  bg: "white",
   gap: "r",
-  p: "r"
+  px: "r"
 }), space);
 export const AppName = styled("div").withConfig({
   displayName: "Headerstyles__AppName",
   componentId: "sc-xs8ba0-1"
 })(props => css({
-  background: themeGet("colors.white")(props),
+  background: "transparent",
   width: "fit-content",
   display: "flex",
   alignItems: "center",
-  gap: ["0", "0", "0", "s"],
-  px: "s",
+  gap: ["0", "0", "0", "r"],
   height: themeGet("appScale.sideNavSize")(props),
-  borderRadius: themeGet("radii.2")(props),
-  border: `1px solid ${themeGet("colors.greyLight")(props)}`,
   fontSize: themeGet("fontSizes.1")(props),
   fontWeight: themeGet("fontWeights.2")(props),
   color: themeGet("colors.greyDarkest")(props),
@@ -53,9 +51,17 @@ export const AppName = styled("div").withConfig({
     color: themeGet("colors.greyDarkest")(props)
   }
 }), space);
+export const Separator = styled(Box).withConfig({
+  displayName: "Headerstyles__Separator",
+  componentId: "sc-xs8ba0-2"
+})(props => css({
+  width: "1px",
+  height: "75%",
+  bg: themeGet("colors.greyLight")(props)
+}), space);
 export const SearchContainer = styled("div").withConfig({
   displayName: "Headerstyles__SearchContainer",
-  componentId: "sc-xs8ba0-2"
+  componentId: "sc-xs8ba0-3"
 })(props => css({
   maxWidth: "550px",
   marginLeft: "auto",
@@ -65,12 +71,11 @@ export const SearchContainer = styled("div").withConfig({
 }), space, layout);
 export const UserMenuToggle = styled("button").withConfig({
   displayName: "Headerstyles__UserMenuToggle",
-  componentId: "sc-xs8ba0-3"
+  componentId: "sc-xs8ba0-4"
 })(props => css({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  gap: "xs",
   padding: "0",
   cursor: "pointer",
   border: "none",
@@ -79,33 +84,36 @@ export const UserMenuToggle = styled("button").withConfig({
   color: themeGet("colors.greyDark")(props),
   fontSize: themeGet("fontSizes.1")(props),
   fontWeight: themeGet("fontWeights.2")(props),
-  "svg path": {
-    transition: "fill 300ms ease-in-out"
-  },
   "&:focus, &:hover": {
-    outline: "none",
-    "svg path": {
-      fill: themeGet("colors.primary")(props)
-    }
+    outline: "none"
   }
 }));
 export const AvatarBorder = styled(Box).withConfig({
   displayName: "Headerstyles__AvatarBorder",
-  componentId: "sc-xs8ba0-4"
+  componentId: "sc-xs8ba0-5"
 })(css({
-  background: "linear-gradient(0deg, rgba(155,81,224,1) 0%, rgba(0,145,234,1) 100%)"
+  background: "linear-gradient(135deg, rgba(0,145,234,1) 0%, rgba(155,81,224,1) 100%)"
 }));
 export const UserMenuContainer = styled(Box).withConfig({
   displayName: "Headerstyles__UserMenuContainer",
-  componentId: "sc-xs8ba0-5"
-})(props => css({
-  borderRadius: `calc(${themeGet("appScale.sideNavSize")(props)} / 2) ${themeGet("radii.2")(props)} ${themeGet("radii.2")(props)} calc(${themeGet("appScale.sideNavSize")(props)} / 2)`,
-  position: "relative",
-  height: themeGet("appScale.sideNavSize")(props)
+  componentId: "sc-xs8ba0-6"
+})(css({
+  position: "relative"
+}));
+export const IconContainer = styled(Flex).withConfig({
+  displayName: "Headerstyles__IconContainer",
+  componentId: "sc-xs8ba0-7"
+})(css({
+  position: "absolute",
+  bottom: "0",
+  right: "0",
+  height: "15px",
+  width: "15px",
+  background: "linear-gradient(135deg, rgba(0,145,234,1) 0%, rgba(155,81,224,1) 100%)"
 }));
 export const UserMenuContent = styled(Box).withConfig({
   displayName: "Headerstyles__UserMenuContent",
-  componentId: "sc-xs8ba0-6"
+  componentId: "sc-xs8ba0-8"
 })(props => css({
   position: "absolute",
   gap: "s",

package/es/components/Header/UserMenu.js

@@ -4,7 +4,7 @@ import Avatar from "../Avatar";
 import Icon from "../Icon";
 import Divider from "../Divider";
 import { Small } from "../Typography";
-import { UserMenuToggle, AvatarBorder, UserMenuContainer, UserMenuContent } from "./Header.styles";
+import { UserMenuToggle, AvatarBorder, UserMenuContainer, UserMenuContent, IconContainer } from "./Header.styles";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const UserMenu = _ref => {
   let {
@@ -32,13 +32,6 @@ const UserMenu = _ref => {
   };
   return /*#__PURE__*/_jsxs(UserMenuContainer, {
     ref: menuRef,
-    p: "2px",
-    pr: "s",
-    bg: "white",
-    width: "auto",
-    border: "solid 1px",
-    borderColor: "greyLight",
-    display: "flex",
     children: [/*#__PURE__*/_jsxs(UserMenuToggle, {
       onClick: toggleMenu,
       children: [/*#__PURE__*/_jsx(AvatarBorder, {
@@ -50,11 +43,18 @@ const UserMenu = _ref => {
           imageAlt: avatarAlt,
           initials: avatarInitials
         })
-      }), /*#__PURE__*/_jsx(Icon, {
-        icon: ["fas", "chevron-down"],
-        rotation: isOpen ? 180 : 0,
-        color: "greyDark",
-        ml: "s"
+      }), /*#__PURE__*/_jsx(IconContainer, {
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "50%",
+        p: "2px",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: ["fas", "chevron-down"],
+          rotation: isOpen ? 180 : 0,
+          color: "white",
+          size: "xs",
+          mt: isOpen ? "0" : "1px"
+        })
       })]
     }), /*#__PURE__*/_jsxs(UserMenuContent, {
       p: "s",

package/es/components/Header/index.js

@@ -2,12 +2,12 @@ import React from "react";
 import PropTypes from "prop-types";
 import Flex, { FlexItem } from "../Flex";
 import { Small } from "../Typography";
-import { Bar, AppName, SearchContainer } from "./Header.styles";
+import { Bar, AppName, SearchContainer, Separator } from "./Header.styles";
 import UserMenu from "./UserMenu";
 /**
  * Header component for top of app.
  **/
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const Header = _ref => {
   let {
     appName,
@@ -24,10 +24,14 @@ const Header = _ref => {
   return /*#__PURE__*/_jsxs(Bar, {
     dataTestId: dataTestId,
     children: [/*#__PURE__*/_jsxs(AppName, {
-      children: [logo && /*#__PURE__*/_jsx(Flex, {
-        alignItems: "center",
-        justifyContent: "center",
-        children: logo
+      children: [logo && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Flex, {
+          alignItems: "center",
+          justifyContent: "center",
+          children: logo
+        }), /*#__PURE__*/_jsx(Separator, {
+          display: ["none", "none", "none", "block"]
+        })]
       }), /*#__PURE__*/_jsxs(Flex, {
         flexDirection: "column",
         children: [appName && /*#__PURE__*/_jsx(FlexItem, {

package/es/systemThemeCollapsed.js

@@ -215,9 +215,9 @@ export const mediaQueries = {
 
 export const appScale = {
   navBarSize: "50px",
-  newNavBarSize: "70px",
-  navBarLogoSize: "30px",
-  navBarAvatarSize: "32px",
+  newNavBarSize: "64px",
+  navBarLogoSize: "42px",
+  navBarAvatarSize: "38px",
   sideNavSize: "42px",
   sidebarMaxWidth: "360px",
   sidebarMaxWidthLarge: "450px",

package/es/systemtheme.js

@@ -215,8 +215,8 @@ export const mediaQueries = {
 export const appScale = {
   navBarSize: "54px",
   newNavBarSize: "70px",
-  navBarLogoSize: "35px",
-  navBarAvatarSize: "40px",
+  navBarLogoSize: "50px",
+  navBarAvatarSize: "46px",
   sideNavSize: "50px",
   sidebarMaxWidth: "360px",
   sidebarMaxWidthLarge: "550px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.6",
+  "version": "3.3.7",
   "engines": {
     "node": "20.12.2"
   },