@akemona-org/strapi-admin 3.13.2 → 3.14.0

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

@@ -8,10 +8,8 @@ import styled from 'styled-components';
 // I create it to temporary fix the baseline alignment until we have the design system.
 
 const BaselineAlignment = styled.div`
-  padding-top: ${({ size, top }) => top && size};
-  padding-right: ${({ size, right }) => right && size};
-  padding-bottom: ${({ size, bottom }) => bottom && size};
-  padding-left: ${({ size, left }) => left && size};
+  padding: ${({ size, top }) => top && size} ${({ size, right }) => right && size}
+    ${({ size, bottom }) => bottom && size} ${({ size, left }) => left && size};
 `;
 
 BaselineAlignment.defaultProps = {

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

@@ -26,47 +26,53 @@ import latoBlackWoff2 from '@buffetjs/styles/webfonts/Lato-Black.woff2';
 
 const Fonts = createGlobalStyle`
   @font-face {
-    font-family: 'FontAwesome';
+    font-family: FontAwesome;
     src: url(${faBrandsLight2}) format("woff2"), url(${faBrandsLight}) format("woff");
     font-weight: 400;
     font-style: normal;
   }
+
   @font-face {
-    font-family: 'FontAwesome';
+    font-family: FontAwesome;
     src: url(${faRegularLight2}) format("woff2"), url(${faRegularLight}) format("woff");
     font-weight: 400;
     font-style: normal;
   }
+
   @font-face {
-    font-family: 'FontAwesome';
+    font-family: FontAwesome;
     src: url(${faSolidHeavy2}) format("woff2"), url(${faSolidHeavy}) format("woff");
     font-weight: 400;
     font-style: normal;
   }
+
   /* Lato Regular - 400 */
   @font-face {
-    font-family: 'Lato';
+    font-family: Lato;
     src: url(${latoRegularWoff2}) format('woff2'), url(${latoRegularWoff}) format('woff'), url(${latoRegular}) format('truetype');
     font-weight: 400;
     font-style: normal;
   }
+
   /* Lato Semi-Bold - 500 */
   @font-face {
-    font-family: 'Lato';
+    font-family: Lato;
     src: url(${latoSemiBoldWoff2}) format('woff2'), url(${latoSemiBoldWoff}) format('woff'), url(${latoSemiBold}) format('truetype');
     font-weight: 500;
     font-style: normal;
   }
+
   /* Lato Bold - 600 */
   @font-face {
-    font-family: 'Lato';
+    font-family: Lato;
     src: url(${latoBoldWoff2}) format('woff2'), url(${latoBoldWoff}) format('woff'), url(${latoBold}) format('truetype');
     font-weight: 600;
     font-style: normal;
   }
+
   /* Lato Black - 900 */
   @font-face {
-    font-family: 'Lato';
+    font-family: Lato;
     src:  url(${latoBlackWoff2}) format('woff2'), url(${latoBlackWoff}) format('woff'), url(${latoBlack}) format('truetype');
     font-weight: 900;
     font-style: normal;

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

@@ -5,41 +5,43 @@ import PropTypes from 'prop-types';
 import Bloc from '../Bloc';
 
 function FormBloc({ children, actions, isLoading, title, subtitle }) {
-  return <Bloc>
-    <BaselineAlignment top size={title ? '18px' : '22px'} />
-    <Padded left right size="sm">
-      {isLoading ? (
-        <>
-          <LoadingIndicator />
-          <BaselineAlignment bottom size="22px" />
-        </>
-      ) : (
-        <>
-          {title && (
-            <>
-              <Padded left right size="xs">
-                <Flex justifyContent="space-between">
-                  <Padded left right size="sm">
-                    <Text fontSize="lg" fontWeight="bold">
-                      {title}
-                    </Text>
-                    {subtitle && (
-                      <Text color="grey" lineHeight="1.8rem">
-                        {subtitle}
+  return (
+    <Bloc>
+      <BaselineAlignment top size={title ? '18px' : '22px'} />
+      <Padded left right size="sm">
+        {isLoading ? (
+          <>
+            <LoadingIndicator />
+            <BaselineAlignment bottom size="22px" />
+          </>
+        ) : (
+          <>
+            {title && (
+              <>
+                <Padded left right size="xs">
+                  <Flex justifyContent="space-between">
+                    <Padded left right size="sm">
+                      <Text fontSize="lg" fontWeight="bold">
+                        {title}
                       </Text>
-                    )}
-                  </Padded>
-                  {actions}
-                </Flex>
-              </Padded>
-              <BaselineAlignment top size="18px" />
-            </>
-          )}
-          <Row>{children}</Row>
-        </>
-      )}
-    </Padded>
-  </Bloc>
+                      {subtitle && (
+                        <Text color="grey" lineHeight="1.8rem">
+                          {subtitle}
+                        </Text>
+                      )}
+                    </Padded>
+                    {actions}
+                  </Flex>
+                </Padded>
+                <BaselineAlignment top size="18px" />
+              </>
+            )}
+            <Row>{children}</Row>
+          </>
+        )}
+      </Padded>
+    </Bloc>
+  );
 }
 
 FormBloc.defaultProps = {

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

@@ -1,12 +1,13 @@
 import { createGlobalStyle } from 'styled-components';
 
+/* stylelint-disable selector-not-notation */
 const GlobalStyle = createGlobalStyle`
   html {
     font-size: 62.5%;
   }
 
   body {
-    font-family: 'Lato';
+    font-family: Lato;
     font-size: 1.4rem;
     line-height: 1.5;
     color: #292b2c;
@@ -15,7 +16,7 @@ const GlobalStyle = createGlobalStyle`
   * {
     -webkit-font-smoothing: antialiased;
     box-sizing: border-box;
-    font-family: 'Lato';
+    font-family: Lato;
   }
 
   h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
@@ -52,7 +53,7 @@ const GlobalStyle = createGlobalStyle`
 
   .modal-content {
     border-radius: .2rem;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 5%);
     border: none;
 
   }
@@ -101,7 +102,7 @@ const GlobalStyle = createGlobalStyle`
   .btn-secondary,
   .show > .btn-secondary.dropdown-toggle:focus {
     &:focus, &:active, &:hover, &.focus {
-      box-shadow: 0 0 0 0px rgba(134,142,150,0.5);
+      box-shadow: 0 0 0 0 rgba(134,142,150,50%);
       color: rgb(51, 55, 64);
       background-color: rgb(250, 250, 251) !important;
 

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

@@ -10,14 +10,11 @@ import PropTypes from 'prop-types';
 const Header = styled.div`
   width: 100%;
   height: ${(props) => props.theme.main.sizes.header.height};
-
   position: fixed;
   z-index: 1040;
   left: ${(props) => props.theme.main.sizes.leftMenu.width};
-
-  box-shadow: 0 1px 2px 0 rgba(40, 42, 49, 0.16);
+  box-shadow: 0 1px 2px 0 rgb(40 42 49 / 16%);
   background-color: ${(props) => props.theme.main.colors.white};
-
   line-height: ${(props) => props.theme.main.sizes.header.height};
 `;
 

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

@@ -13,7 +13,7 @@ const Wrapper = styled.div`
     padding-left: 15px;
     padding-right: 15px;
     line-height: 3rem;
-    background-color: rgba(255, 255, 255, 0.02);
+    background-color: rgb(255 255 255 / 2%);
     font-size: 1rem;
     font-weight: 400;
     letter-spacing: 0.05rem;

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

@@ -20,8 +20,7 @@ const Wrapper = styled.div`
     height: ${(props) => props.theme.main.sizes.leftMenu.height};
     font-size: 2rem;
     letter-spacing: 0.2rem;
-    color: $white;
-
+    color: white;
     background-image: url(${Logo});
     background-repeat: no-repeat;
     background-position: left center;

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

@@ -4,11 +4,13 @@ import { Link } from 'react-router-dom';
 import Wrapper from './Wrapper';
 
 function LeftMenuHeader() {
-  return <Wrapper>
-    <Link to="/" className="leftMenuHeaderLink">
-      <span className="projectName" />
-    </Link>
-  </Wrapper>
+  return (
+    <Wrapper>
+      <Link to="/" className="leftMenuHeaderLink">
+        <span className="projectName" />
+      </Link>
+    </Wrapper>
+  );
 }
 
 export default LeftMenuHeader;

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

@@ -12,7 +12,7 @@ const FaIcon = styled(({ small, ...props }) => <FontAwesomeIcon {...props} />)`
 `;
 
 function LeftMenuIcon({ icon }) {
-  return <FaIcon small={icon === 'circle'} icon={icon} />
+  return <FaIcon small={icon === 'circle'} icon={icon} />;
 }
 
 LeftMenuIcon.propTypes = {

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

@@ -7,18 +7,20 @@ const NotificationWrapper = styled.div`
   height: 14px;
   margin-top: 4px;
   margin-right: 20px;
-  padding: 0px 4px;
+  padding: 0 4px;
   background-color: #383d49;
   border-radius: 2px;
   font-size: 11px;
 `;
 
 function NotificationCount({ count }) {
-  return <NotificationWrapper>
-    <Text fontWeight="bold" fontSize="xs" lineHeight="14px" color="#919bae">
-      {count}
-    </Text>
-  </NotificationWrapper>
+  return (
+    <NotificationWrapper>
+      <Text fontWeight="bold" fontSize="xs" lineHeight="14px" color="#919bae">
+        {count}
+      </Text>
+    </NotificationWrapper>
+  );
 }
 
 NotificationCount.defaultProps = {

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

@@ -4,10 +4,7 @@ import PropTypes from 'prop-types';
 const LinksContainer = styled.div`
   padding-top: 0.7rem;
   position: absolute;
-  top: ${(props) => props.theme.main.sizes.leftMenu.height};
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: ${(props) => props.theme.main.sizes.leftMenu.height} 0 0 0;
   overflow-y: auto;
   height: calc(100vh - (${(props) => props.theme.main.sizes.leftMenu.height} + 3rem));
   box-sizing: border-box;

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

@@ -31,7 +31,7 @@ const GlobalNotification = createGlobalStyle`
     width: 220px;
     margin: 0;
     padding-right: 10px;
-    border-right: 1px solid rgba(255, 255, 255, 0.3);
+    border-right: 1px solid rgb(255 255 255 / 30%);
   }
 
   .notificationTitle {
@@ -118,7 +118,7 @@ const Li = styled.li`
   margin-bottom: 14px;
   background: ${(props) => props.theme.main.colors.white};
   border-radius: 2px;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 15%);
   color: #333740;
   transition: all 0.15s ease;
   overflow: hidden;
@@ -141,7 +141,7 @@ const Li = styled.li`
 
   &:hover {
     cursor: pointer;
-    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%);
   }
 `;
 

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

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import favicon from '../../favicon.png';
 
 function PageTitle({ title }) {
-  return <Helmet title={title} link={[{ rel: 'icon', type: 'image/png', href: favicon }]} />
+  return <Helmet title={title} link={[{ rel: 'icon', type: 'image/png', href: favicon }]} />;
 }
 
 PageTitle.propTypes = {

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

@@ -10,7 +10,7 @@ const CheckboxWithCondition = styled(Checkbox)`
 
   input[type='checkbox'] {
     z-index: 10;
-    &:after {
+    &::after {
       color: ${({ theme }) => theme.main.colors.mediumBlue};
     }
   }

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

@@ -46,4 +46,5 @@ ConditionsButton.propTypes = {
 // This is a styled component advanced usage :
 // Used to make a ref to a non styled component.
 // https://styled-components.com/docs/advanced#caveat
+/* stylelint-disable no-empty-source */
 export default styled(ConditionsButton)``;

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

@@ -1,5 +1,5 @@
 function IndicatorSeparator() {
-  return null
+  return null;
 }
 
 export default IndicatorSeparator;

package/admin/src/components/Roles/ConditionsModal/ConditionsSelect/MenuList/SubUl.js

@@ -6,7 +6,7 @@ import { Collapse } from 'reactstrap';
 
 const ToggleUl = styled(Collapse)`
   font-size: 13px;
-  padding: 12px 15px 0 15px;
+  padding: 12px 15px 0;
   list-style: none;
   background-color: #fff;
   > li {

package/admin/src/components/Roles/ConditionsModal/ConditionsSelect/MenuList/Ul.js

@@ -6,7 +6,7 @@ const Ul = styled.ul`
   max-height: 150px;
   font-size: 13px;
   padding: 0 15px;
-  margin-bottom: 0px;
+  margin-bottom: 0;
   list-style: none;
   background-color: #fff;
   > li {
@@ -14,7 +14,7 @@ const Ul = styled.ul`
       flex-shrink: 1;
       width: fit-content !important;
       cursor: pointer;
-      margin-bottom: 0px;
+      margin-bottom: 0;
     }
 
     .check-wrapper {
@@ -25,7 +25,6 @@ const Ul = styled.ul`
     }
     .chevron {
       margin: auto;
-
       font-size: 11px;
       color: #919bae;
     }
@@ -53,10 +52,7 @@ const Ul = styled.ul`
         content: '';
         position: absolute;
         z-index: 1;
-        top: 0;
-        left: -30px;
-        right: -30px;
-        bottom: 0;
+        inset: 0 -30px;
         background-color: ${({ theme }) => theme.main.colors.lightBlue};
       }
     }

package/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/row.js

@@ -21,7 +21,7 @@ const RowStyle = styled.div`
       ${activeStyle(theme)}
     }
   `}
-  ${({ isActive, theme }) => isActive && activeStyle(theme)}}
+  ${({ isActive, theme }) => isActive && activeStyle(theme)}
 `;
 
 RowStyle.propTypes = {

package/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/Wrapper.js

@@ -11,7 +11,7 @@ const Wrapper = styled.div`
 
     return `none`;
   }};
-  border-radius: 0px 0px 2px 2px;
+  border-radius: 0 0 2px 2px;
 `;
 
 Wrapper.defaultProps = {

package/admin/src/components/Roles/ContentTypeCollapse/Wrapper.js

@@ -1,4 +1,5 @@
 /* eslint-disable indent */
+/* stylelint-disable */
 import styled from 'styled-components';
 import CollapsePropertyMatrix from './CollapsePropertyMatrix/Wrapper';
 
@@ -8,7 +9,6 @@ const RowWrapper = styled.div`
     `
       margin: 9px 0;
     `}
-
   ${CollapsePropertyMatrix}:last-of-type {
     padding-bottom: 17px;
   }

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

@@ -2,27 +2,29 @@ import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 
 function Curve(props) {
-  return <svg
-    style={{
-      height: '14px',
-      transform: 'translate(-3.2px, -1px)',
-      position: 'relative',
-    }}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 21.08 21"
-    {...props}
-  >
-    <g>
-      <path
-        d="M2.58 2.5q-1.2 16 16 16"
-        fill="none"
-        stroke={props.fill}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="5"
-      />
-    </g>
-  </svg>
+  return (
+    <svg
+      style={{
+        height: '14px',
+        transform: 'translate(-3.2px, -1px)',
+        position: 'relative',
+      }}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 21.08 21"
+      {...props}
+    >
+      <g>
+        <path
+          d="M2.58 2.5q-1.2 16 16 16"
+          fill="none"
+          stroke={props.fill}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="5"
+        />
+      </g>
+    </svg>
+  );
 }
 
 Curve.defaultProps = {

package/admin/src/components/Roles/PluginsAndSettings/SubCategory/Wrapper.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   padding-bottom: 2.6rem;
   input[type='checkbox'] {
-    &:after {
+    &::after {
       color: ${({ theme }) => theme.main.colors.mediumBlue};
     }
   }

package/admin/src/components/Roles/PluginsAndSettings/SubCategory/index.js

@@ -19,7 +19,7 @@ const Border = styled.div`
   flex: 1;
   align-self: center;
   border-top: 1px solid #f6f6f6;
-  padding: 0px 10px;
+  padding: 0 10px;
 `;
 
 function SubCategory({ categoryName, isFormDisabled, subCategoryName, actions, pathToData }) {

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

@@ -7,7 +7,7 @@ const Required = styled.span`
 `;
 
 function RequiredSign() {
-  return <Required>*</Required>
+  return <Required>*</Required>;
 }
 
 export default RequiredSign;

package/admin/src/components/Roles/RoleForm/NameInput.js

@@ -2,7 +2,7 @@ import React from 'react';
 import SizedInput from '../../SizedInput';
 
 function NameInput(inputProps) {
-  return <SizedInput name="name" type="text" {...inputProps} />
+  return <SizedInput name="name" type="text" {...inputProps} />;
 }
 
 export default NameInput;

package/admin/src/components/Roles/Tabs/TabsWrapper.js

@@ -1,10 +1,12 @@
+/* stylelint-disable */
+
 import styled from 'styled-components';
 import Tab from './Tab';
 
 const TabsWrapper = styled.div`
   display: block;
   border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
-  box-shadow: ${({ theme }) => `0px 2px 4px 0px ${theme.main.colors.darkGrey}`};
+  box-shadow: ${({ theme }) => `0px 2px 4px 0 ${theme.main.colors.darkGrey}`};
 
   ${Tab}:first-of-type {
     border-top-left-radius: ${({ theme }) => theme.main.sizes.borderRadius};

package/admin/src/components/UpgradePlanModal/components/Option/Wrapper.js

@@ -4,8 +4,8 @@ const Wrapper = styled.div`
   height: 25px;
   max-width: fit-content;
   padding: 0 15px;
-  background: rgba(0, 126, 255, 0.08);
-  border: 1px solid rgba(0, 126, 255, 0.24);
+  background: rgb(0 126 255 / 8%);
+  border: 1px solid rgb(0 126 255 / 24%);
   border-radius: 2px;
 `;
 

package/admin/src/components/Users/LinkNotification/Envelope.js

@@ -2,19 +2,21 @@
 import React from 'react';
 
 function Envelope() {
-  return <svg width="24" height="17" xmlns="http://www.w3.org/2000/svg">
-    <text
-      transform="translate(-23 -9)"
-      fill="#4B515A"
-      fillRule="evenodd"
-      fontSize="24"
-      fontFamily="AppleColorEmoji, Apple Color Emoji"
-    >
-      <tspan x="23" y="28">
-        ✉️
-      </tspan>
-    </text>
-  </svg>
+  return (
+    <svg width="24" height="17" xmlns="http://www.w3.org/2000/svg">
+      <text
+        transform="translate(-23 -9)"
+        fill="#4B515A"
+        fillRule="evenodd"
+        fontSize="24"
+        fontFamily="AppleColorEmoji, Apple Color Emoji"
+      >
+        <tspan x="23" y="28">
+          ✉️
+        </tspan>
+      </text>
+    </svg>
+  );
 }
 
 export default Envelope;

package/admin/src/components/Users/LinkNotification/Wrapper.js

@@ -5,7 +5,7 @@ const Wrapper = styled.div`
   width: 100%;
   display: flex;
   margin-bottom: 4px;
-  &:before {
+  &::before {
     content: '';
     width: 5px;
     height: 100%;
@@ -14,8 +14,9 @@ const Wrapper = styled.div`
     border-top-left-radius: ${({ theme }) => theme.main.sizes.borderRadius};
     border-bottom-left-radius: ${({ theme }) => theme.main.sizes.borderRadius};
   }
+
   border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 4px rgb(0 0 0 / 5%);
 
   .icon-duplicate {
     margin-left: 10px;

package/admin/src/components/Users/List/ActiveStatus.js

@@ -5,7 +5,7 @@ const ActiveStatus = styled.div`
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  &:before {
+  &::before {
     content: '';
     display: inline-block;
     width: 6px;

package/admin/src/components/Users/SelectRoles/IndicatorSeparator.js

@@ -1,5 +1,5 @@
 function IndicatorSeparator() {
-  return null
+  return null;
 }
 
 export default IndicatorSeparator;