@punch-in/strapi-admin 1.0.7 → 1.0.9

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

@@ -8,21 +8,21 @@ import faSolidHeavy from '@fortawesome/fontawesome-free/webfonts/fa-solid-900.wo
 import faSolidHeavy2 from '@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2';
 
 /* Lato Regular */
-import latoRegular from '@buffetjs/styles/webfonts/Lato-Regular.ttf';
-import latoRegularWoff from '@buffetjs/styles/webfonts/Lato-Regular.woff';
-import latoRegularWoff2 from '@buffetjs/styles/webfonts/Lato-Regular.woff2';
+import latoRegular from '@punch-in/buffet-modern-styles/webfonts/Lato-Regular.ttf';
+import latoRegularWoff from '@punch-in/buffet-modern-styles/webfonts/Lato-Regular.woff';
+import latoRegularWoff2 from '@punch-in/buffet-modern-styles/webfonts/Lato-Regular.woff2';
 /* Lato SemiBold */
-import latoSemiBold from '@buffetjs/styles/webfonts/Lato-SemiBold.ttf';
-import latoSemiBoldWoff from '@buffetjs/styles/webfonts/Lato-SemiBold.woff';
-import latoSemiBoldWoff2 from '@buffetjs/styles/webfonts/Lato-SemiBold.woff2';
+import latoSemiBold from '@punch-in/buffet-modern-styles/webfonts/Lato-SemiBold.ttf';
+import latoSemiBoldWoff from '@punch-in/buffet-modern-styles/webfonts/Lato-SemiBold.woff';
+import latoSemiBoldWoff2 from '@punch-in/buffet-modern-styles/webfonts/Lato-SemiBold.woff2';
 /* Lato Bold */
-import latoBold from '@buffetjs/styles/webfonts/Lato-Bold.ttf';
-import latoBoldWoff from '@buffetjs/styles/webfonts/Lato-Bold.woff';
-import latoBoldWoff2 from '@buffetjs/styles/webfonts/Lato-Bold.woff2';
+import latoBold from '@punch-in/buffet-modern-styles/webfonts/Lato-Bold.ttf';
+import latoBoldWoff from '@punch-in/buffet-modern-styles/webfonts/Lato-Bold.woff';
+import latoBoldWoff2 from '@punch-in/buffet-modern-styles/webfonts/Lato-Bold.woff2';
 /* Lato Black */
-import latoBlack from '@buffetjs/styles/webfonts/Lato-Black.ttf';
-import latoBlackWoff from '@buffetjs/styles/webfonts/Lato-Black.woff';
-import latoBlackWoff2 from '@buffetjs/styles/webfonts/Lato-Black.woff2';
+import latoBlack from '@punch-in/buffet-modern-styles/webfonts/Lato-Black.ttf';
+import latoBlackWoff from '@punch-in/buffet-modern-styles/webfonts/Lato-Black.woff';
+import latoBlackWoff2 from '@punch-in/buffet-modern-styles/webfonts/Lato-Black.woff2';
 
 const Fonts = createGlobalStyle`
   @font-face {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Flex, Padded, Text } from '@buffetjs/core';
+import { Flex, Padded, Text } from '@punch-in/buffet-modern-core';
 import { BaselineAlignment, LoadingIndicator, Row } from 'strapi-helper-plugin';
 import PropTypes from 'prop-types';
 import Bloc from '../Bloc';

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

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Button as Base } from '@buffetjs/core';
+import { Button as Base } from '@punch-in/buffet-modern-core';
 
 const Button = styled(Base)`
   width: 100%;

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

@@ -9,7 +9,7 @@ const GlobalStyle = createGlobalStyle`
     font-family: 'Lato';
     font-size: 1.4rem;
     line-height: 1.5;
-    color: #292b2c;
+    color: #004a99;
   }
 
   * {
@@ -139,20 +139,20 @@ const GlobalStyle = createGlobalStyle`
   }
 
   ::-webkit-scrollbar-track {
-    background-color: #eee;
+    background-color: #ffffff;
   }
 
   ::-webkit-scrollbar-track:hover {
-    background-color: #ddd;
+    background-color: #ffffff;
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: #ccc;
+    background-color: #007eff;
     border-radius: 0.5rem;
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    background-color: #bbb;
+    background-color: #007eff;
   }
 
   ::-webkit-scrollbar-button {
@@ -162,7 +162,7 @@ const GlobalStyle = createGlobalStyle`
   /* firefox scrollbar */
   /* stylelint-disable */
   * {
-    scrollbar-color: #bbb #eee;
+    scrollbar-color: #ffffff #007eff;
     scrollbar-width: thin;
   }
   /* stylelint-enable */

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

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { translatedErrors } from 'strapi-helper-plugin';
 import { useIntl } from 'react-intl';
-import { Inputs } from '@buffetjs/custom';
+import { Inputs } from '@punch-in/buffet-modern-custom';
 import PropTypes from 'prop-types';
 
 const IntlInput = ({ label: labelId, defaultMessage, error, ...rest }) => {

package/admin/src/components/LeftMenu/LeftMenuHeader/Wrapper.js

@@ -7,6 +7,9 @@ const Wrapper = styled.div`
   background-color: ${(props) =>
     props.theme.main.colors.leftMenu['background-header-link']};
   padding-left: 2rem;
+  width: 24rem;
+  position: fixed;
+  z-index: 20;
   height: ${props => props.theme.main.sizes.leftMenu.height};
 
   .leftMenuHeaderLink {

package/admin/src/components/LeftMenu/LeftMenuHeader/index.js

@@ -5,9 +5,7 @@ import Wrapper from './Wrapper';
 
 const LeftMenuHeader = () => (
   <Wrapper>
-    <Link to="/" className="leftMenuHeaderLink">
-      <span className="projectName" />
-    </Link>
+
   </Wrapper>
 );
 

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

@@ -8,7 +8,7 @@ const A = styled.a`
   padding-left: 1.6rem;
   min-height: 3.6rem;
   line-height: 1.8rem;
-  border-left: 0.3rem solid transparent;
+  border-left: 4px solid transparent;
   cursor: pointer;
   color: ${props => props.theme.main.colors.leftMenu['link-color']};
   text-decoration: none;
@@ -17,22 +17,20 @@ const A = styled.a`
   &: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.blue};
+    border-left: 0.3rem solid ${props => props.theme.main.colors.strapi.red};
     text-decoration: none;
   }
 
   &:focus {
     color: ${props => props.theme.main.colors.white};
+    border-left: 0.3rem solid ${props => props.theme.main.colors.strapi.blue};
     text-decoration: none;
   }
 
-  &:visited {
-    color: ${props => props.theme.main.colors.leftMenu['link-color']};
-  }
-
   &.linkActive {
-    color: ${props => props.theme.main.colors.leftMenu['link-visited']}; !important;
-    border-left: 0.3rem solid ${props => props.theme.main.colors.strapi.blue};
+    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']};
   }
 `;
 

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

@@ -15,6 +15,10 @@ import LeftMenuIcon from './LeftMenuIcon';
 import A from './A';
 import NotificationCount from './NotificationCount';
 
+const Content = styled.span`
+  display:none;
+`;
+
 const LinkLabel = styled.span`
   display: inline-block;
   width: 100%;
@@ -62,7 +66,7 @@ const LeftMenuLinkContent = ({
       rel="noopener noreferrer"
     >
       <LeftMenuIcon icon={iconName} />
-      {content}
+      <Content className="hidetext">{content}</Content>
     </A>
   ) : (
     <A
@@ -74,8 +78,11 @@ const LeftMenuLinkContent = ({
       }}
     >
       <LeftMenuIcon icon={iconName} />
-      {content}
-      {notificationsCount > 0 && <NotificationCount count={notificationsCount} />}
+      <Content className="hidetext">
+        {content}
+        {notificationsCount > 0 && <NotificationCount count={notificationsCount} />}
+      </Content>
+
     </A>
   );
 };

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Text } from '@buffetjs/core';
+import { Text } from '@punch-in/buffet-modern-core';
 
 const NotificationWrapper = styled.div`
   height: 14px;

package/admin/src/components/LeftMenu/LeftMenuLinkHeader/Search.js

@@ -5,7 +5,7 @@ const Search = styled.input`
   padding: 0 15px;
   outline: 0;
   font-size: 1.1rem;
-  color: ${({ theme }) => theme.main.colors.white};
+  color: ${({ theme }) => theme.main.colors.black};
 `;
 
 export default Search;

package/admin/src/components/LeftMenu/LeftMenuLinkHeader/Title.js

@@ -3,8 +3,8 @@ import styled from 'styled-components';
 const Title = styled.div`
   display: flex;
   justify-content: space-between;
-  padding-left: 2rem;
-  padding-right: 1.6rem;
+  padding-left: 0.1rem;
+  padding-right: 0.6rem;
   padding-top: 1rem;
   margin-bottom: 0.9rem;
   color: ${props => props.theme.main.colors.leftMenu['title-color']};
@@ -13,6 +13,7 @@ const Title = styled.div`
   letter-spacing: 0.1rem;
   font-weight: 800;
   max-height: 26px;
+  overflow: hidden;
 `;
 
 Title.defaultProps = {

package/admin/src/components/LeftMenu/LeftMenuLinkHeader/messages.json

@@ -9,7 +9,7 @@
   },
   "listPlugins": {
     "id": "app.components.LeftMenuLinkContainer.listPlugins",
-    "defaultMessage": "Plugins"
+    "defaultMessage": "Modules"
   },
   "installNewPlugin": {
     "id": "app.components.LeftMenuLinkContainer.installNewPlugin",

package/admin/src/components/LeftMenu/LeftMenuLinkSection/LeftMenuListLink.js

@@ -1,9 +1,13 @@
 import styled from 'styled-components';
 
 const LeftMenuListLink = styled.div`
-  max-height: 290px;
+  height: 300px;
   margin-bottom: 19px;
-  overflow: auto;
+  overflow-y: hidden;
+  width: 22rem;
+  &:hover {
+    overflow-y: auto;
+  }
 `;
 
 export default LeftMenuListLink;

package/admin/src/components/LeftMenu/LinksContainer/index.js

@@ -3,14 +3,33 @@ import PropTypes from 'prop-types';
 
 const LinksContainer = styled.div`
   padding-top: 0.7rem;
-  position: absolute;
+  position: fixed;
   top: ${props => props.theme.main.sizes.leftMenu.height};
+  z-index: 20;
+  overflow: hidden;
   right: 0;
   bottom: 0;
   left: 0;
-  overflow-y: auto;
-  height: calc(100vh - (${props => props.theme.main.sizes.leftMenu.height} + 3rem));
   box-sizing: border-box;
+  width: 6rem;
+  background: ${props => props.theme.main.colors.strapi['light-blue-transparent']};
+  transition: width 0.3s ease-out, visibility 0s, opacity 0.3s linear;
+  &:hover {
+    width: 22rem;
+  }
+  &:hover .hidetext {
+    display: inline;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 9px;
+    height: 100%;
+    background: linear-gradient(to right, transparent, rgb(0 0 0 / 10%));
+    pointer-events: none;
+  }
 `;
 
 LinksContainer.defaultProps = {

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

@@ -7,6 +7,10 @@ const NavTopRightWrapper = styled.div`
   display: flex;
   background-color: #007eff;
   color: #fff;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 6px 18px #002f5f52;
   z-index: 1;
 `;
 

package/admin/src/components/Notifications/Notification/index.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { isObject } from 'lodash';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Remove } from '@buffetjs/icons';
+import { Remove } from '@punch-in/buffet-modern-icons';
 import Li, { GlobalNotification } from './Li';
 
 class Notification extends React.Component {

package/admin/src/components/ProviderButton/ProviderButtonStyles.js

@@ -0,0 +1,43 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React from 'react';
+import styled from 'styled-components';
+import { Flex, Text } from '@punch-in/buffet-modern-core';
+
+export const ProviderButtonWrapper = styled(props => <Flex {...props} />)`
+  width: 11rem;
+  height: 4.5rem;
+  padding: 0.5rem;
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  border: 1px solid ${({ theme }) => theme.main.colors.border};
+  cursor: pointer;
+  &:hover {
+    ${Text} {
+      color: ${({ theme }) => theme.main.colors.mediumBlue};
+    }
+    svg > path {
+      fill: ${({ theme }) => theme.main.colors.mediumBlue};
+    }
+    border: 1px solid ${({ theme }) => theme.main.colors.darkBlue};
+    background-color: ${({ theme }) => theme.main.colors.lightestBlue};
+  }
+`;
+
+export const ProviderLink = styled.a`
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+`;
+
+
+
+
+
+
+
+
+
+
+
+

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text } from '@punch-in/buffet-modern-core';
+import { Tooltip } from '@punch-in/buffet-modern-styles';
+import { ProviderButtonWrapper, ProviderLink } from './ProviderButtonStyles';
+
+const ProviderButton = ({ provider }) => {
+  return (
+    <>
+      <ProviderLink
+        href={`${strapi.backendURL}/admin/connect/${provider.uid}`}
+        data-for={provider.uid}
+        data-tip={provider.displayName}
+      >
+        <ProviderButtonWrapper justifyContent="center" alignItems="center">
+          {provider.icon ? (
+            <img
+              src={provider.icon}
+              alt={provider.displayName}
+              style={{ maxWidth: '100%', maxHeight: 30 }}
+            />
+          ) : (
+            <Text color="black" ellipsis>
+              {provider.displayName}
+            </Text>
+          )}
+        </ProviderButtonWrapper>
+      </ProviderLink>
+      <Tooltip id={provider.uid} />
+    </>
+  );
+};
+
+ProviderButton.propTypes = {
+  provider: PropTypes.exact({
+    displayName: PropTypes.string,
+    icon: PropTypes.string,
+    uid: PropTypes.string,
+  }).isRequired,
+};
+
+export default ProviderButton;
+
+
+
+
+
+
+
+
+
+
+
+

package/admin/src/components/Roles/ButtonWithNumber/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Button, Flex, Text, Padded } from '@buffetjs/core';
+import { Button, Flex, Text, Padded } from '@punch-in/buffet-modern-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import NumberCard from './NumberCard';

package/admin/src/components/Roles/CheckboxWithCondition/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable indent */
 import styled from 'styled-components';
-import { Checkbox } from '@buffetjs/core';
+import { Checkbox } from '@punch-in/buffet-modern-core';
 
 const CheckboxWithCondition = styled(Checkbox)`
   min-width: 10rem;

package/admin/src/components/Roles/CollapseLabel/index.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Flex } from '@buffetjs/core';
+import { Flex } from '@punch-in/buffet-modern-core';
 
 const CollapseLabel = styled(Flex)`
   padding-right: 10px;

package/admin/src/components/Roles/ConditionsButton/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Flex, Text, Padded } from '@buffetjs/core';
+import { Flex, Text, Padded } from '@punch-in/buffet-modern-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import Wrapper from './Wrapper';

package/admin/src/components/Roles/ConditionsModal/ActionRow/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text, Padded, Flex } from '@buffetjs/core';
+import { Text, Padded, Flex } from '@punch-in/buffet-modern-core';
 import { useIntl } from 'react-intl';
 
 import ConditionsSelect from '../ConditionsSelect';

package/admin/src/components/Roles/ConditionsModal/ConditionsSelect/ClearIndicator.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Remove } from '@buffetjs/icons';
+import { Remove } from '@punch-in/buffet-modern-icons';
 import { components } from 'react-select';
 
 const ClearIndicator = props => {

package/admin/src/components/Roles/ConditionsModal/ConditionsSelect/CustomDropdownIndicator.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Flex } from '@buffetjs/core';
+import { Flex } from '@punch-in/buffet-modern-core';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';