@punch-in/strapi-admin 1.2.3 → 1.2.5

package/admin/src/components/GlobalStyle/index.js

@@ -1,21 +1,24 @@
 import { createGlobalStyle } from 'styled-components';
 
 const GlobalStyle = createGlobalStyle`
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');
+
   html {
     font-size: 62.5%;
   }
 
   body {
-    font-family: 'Lato';
+    font-family: 'Inter', 'Lato', sans-serif;
     font-size: 1.4rem;
     line-height: 1.5;
     color: #004a99;
+    background-color: #f8fafc;
   }
 
   * {
     -webkit-font-smoothing: antialiased;
     box-sizing: border-box;
-    font-family: 'Lato';
+    font-family: 'Inter', 'Lato', sans-serif;
   }
 
   h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {

package/admin/src/components/LeftMenu/LeftMenuLink/A.js

@@ -8,29 +8,43 @@ const A = styled.a`
   padding-left: 1.6rem;
   min-height: 3.6rem;
   line-height: 1.8rem;
-  border-left: 4px solid transparent;
+  border-left: 3px solid transparent;
   cursor: pointer;
   color: ${props => props.theme.main.colors.leftMenu['link-color']};
+  font-size: 1.4rem;
+  font-weight: 500;
+  letter-spacing: 0.01rem;
   text-decoration: none;
   -webkit-font-smoothing: antialiased;
 
+  svg {
+    color: ${props => props.theme.main.colors.secondaryText};
+  }
+
   &:hover {
-    color: ${props => props.theme.main.colors.white};
-    background: ${props => props.theme.main.colors.leftMenu['link-hover']};
-    border-left: 0.3rem solid ${props => props.theme.main.colors.strapi.red};
+    color: ${props => props.theme.main.colors.mediumBlue};
+    background: ${props => props.theme.main.colors.activeBackground};
     text-decoration: none;
+
+    svg {
+      color: ${props => props.theme.main.colors.mediumBlue};
+    }
   }
 
   &:focus {
-    color: ${props => props.theme.main.colors.white};
-    border-left: 0.3rem solid ${props => props.theme.main.colors.strapi.blue};
+    color: ${props => props.theme.main.colors.mediumBlue};
     text-decoration: none;
   }
 
   &.linkActive {
-    color: ${props => props.theme.main.colors.white}; !important;
-    border-left: 0.4rem solid ${props => props.theme.main.colors.yellow};
-    background: ${props => props.theme.main.colors.leftMenu['link-visited']};
+    color: ${props => props.theme.main.colors.mediumBlue} !important;
+    border-left: 3px solid ${props => props.theme.main.colors.mediumBlue};
+    background: ${props => props.theme.main.colors.activeBackground};
+    font-weight: 600;
+
+    svg {
+      color: ${props => props.theme.main.colors.mediumBlue};
+    }
   }
 `;
 

package/admin/src/components/LeftMenu/LeftMenuLink/LeftMenuIcon.js

@@ -5,10 +5,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const FaIcon = styled(({ small, ...props }) => <FontAwesomeIcon {...props} />)`
   position: absolute;
-  top: ${({ small }) => (small ? 'calc(50% - 0.3rem)' : 'calc(50% - 0.9rem + 0.3rem)')};
+  top: ${({ small }) => (small ? 'calc(50% - 0.3rem)' : 'calc(50% - 0.95rem)')};
   left: ${({ small }) => (small ? '2.2rem' : '1.6rem')};
-  width: ${({ small }) => (small ? 'auto' : '1.3rem')} !important;
-  font-size: ${({ small }) => (small ? '.5rem' : '1.3rem')};
+  width: ${({ small }) => (small ? 'auto' : '1.9rem')} !important;
+  font-size: ${({ small }) => (small ? '.5rem' : '1.9rem')};
 `;
 
 const LeftMenuIcon = ({ icon }) => <FaIcon small={icon === 'circle'} icon={icon} />;

package/admin/src/components/LeftMenu/LeftMenuLink/LeftMenuLinkContent.js

@@ -23,7 +23,7 @@ const LinkLabel = styled.span`
   display: inline-block;
   width: 100%;
   padding-right: 1rem;
-  padding-left: 2.5rem;
+  padding-left: 4.1rem;
 `;
 
 // TODO: refacto this file

package/admin/src/components/NavTopRightWrapper/index.js

@@ -1,11 +1,12 @@
 import styled from 'styled-components';
+import PropTypes from 'prop-types';
 
 const NavTopRightWrapper = styled.div`
   position: fixed;
   top: 0;
   right: 0;
   display: flex;
-  background-color: #007eff;
+  background-color: ${props => props.theme.main.colors.mediumBlue};
   color: #fff;
   width: 100%;
   justify-content: space-between;
@@ -17,4 +18,18 @@ const NavTopRightWrapper = styled.div`
   z-index: 15;
 `;
 
+NavTopRightWrapper.defaultProps = {
+  theme: {
+    main: {
+      colors: {
+        mediumBlue: '#006fe6',
+      },
+    },
+  },
+};
+
+NavTopRightWrapper.propTypes = {
+  theme: PropTypes.object,
+};
+
 export default NavTopRightWrapper;

package/admin/src/themes/colors.js

@@ -26,9 +26,16 @@ const colors = {
   greyAlpha: 'rgba(227, 233, 243, 0.5)',
   lightestBlue: '#e4f0fc',
   lightBlue: '#e6f0fb',
-  mediumBlue: '#007eff',
+  mediumBlue: '#006fe6',
   darkBlue: '#aed4fb',
   pale: '#f7f8f8',
+  // Modern-SaaS-palette redesign (2026-08): secondary/active/border/page
+  // tokens the old palette didn't have named slots for - see colors below
+  // for what each replaces.
+  secondaryText: '#607d94',
+  activeBackground: '#e6f2ff',
+  borderLight: '#d9e4ee',
+  pageBackground: '#f8fafc',
   content: {
     background: '#fafafb',
     'background-alpha': 'rgba(14, 22, 34, 0.02)',
@@ -36,9 +43,9 @@ const colors = {
   leftMenu: {
     'link-hover': '#00458f',
     'link-visited': '#03a9f4',
-    'link-color': '#002b7d',
-    'title-color': '#002b7d',
-    'background-header-link': '#007eff',
+    'link-color': '#243b53', // was #002b7d
+    'title-color': '#243b53', // was #002b7d
+    'background-header-link': '#006fe6', // was #007eff
   },
   strapi: {
     'gray-light': '#eff3f6',
@@ -46,7 +53,7 @@ const colors = {
     'blue-darker': '#18202e',
     'blue-dark': '#151c2e',
     blue: '#0097f7',
-    'light-blue-transparent': '#d0edff',
+    'light-blue-transparent': '#f4f8fc', // was #d0edff
     red: '#E91E63'
   },
 };

package/package.json

@@ -139,5 +139,5 @@
     "develop:ce": "STRAPI_DISABLE_EE=true webpack-dev-server --config webpack.config.dev.js",
     "test": "echo \"no tests yet\""
   },
-  "version": "1.2.3"
+  "version": "1.2.5"
 }