Merge pull request #1222 from paritytech/rb-styled-components-6

Update to styled components 6
polkadot-cloud · Jul 16, 2023 · 64b3eb2 · 64b3eb2
2 parents a187bde + 0297d28
commit 64b3eb2
Show file tree

Hide file tree

Showing 13 changed files with 1,132 additions and 96 deletions.
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "@polkadot/keyring": "^12.1.1",
     "@polkadot/rpc-provider": "^10.9.1",
     "@polkadot/util": "^12.1.1",
+    "@polkadot/util-crypto": "12.3.2",
     "@polkadotcloud/core-ui": "^0.3.42",
     "@polkadotcloud/react-odometer": "^0.1.17",
     "@polkadotcloud/utils": "^0.2.22",
@@ -44,28 +45,27 @@
     "i18next": "^23.2.11",
     "i18next-browser-languagedetector": "^7.1.0",
     "lodash.throttle": "^4.1.1",
+    "qrcode-generator": "1.4.4",
     "rc-slider": "^10.2.1",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.10",
     "react-helmet": "^6.1.0",
     "react-i18next": "^13.0.2",
+    "react-qr-reader": "^2.2.1",
     "react-router-dom": "^6.14.1",
     "react-scroll": "^1.8.9",
-    "styled-components": "^5.3.11",
-    "qrcode-generator": "1.4.4",
-    "react-qr-reader": "^2.2.1",
-    "@polkadot/util-crypto": "12.3.2"
+    "styled-components": "^6.0.0"
   },
   "devDependencies": {
     "@ledgerhq/logs": "^6.10.1",
     "@types/lodash.throttle": "^4.1.7",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@types/react-helmet": "^6.1.6",
+    "@types/react-qr-reader": "^2.1.4",
     "@types/react-scroll": "^1.8.6",
-    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
@@ -92,7 +92,6 @@
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-svgr": "^3.2.0",
     "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^0.33.0",
-    "@types/react-qr-reader": "^2.1.4"
+    "vitest": "^0.33.0"
   }
 }
diff --git a/src/library/SideMenu/Heading/Heading.tsx b/src/library/SideMenu/Heading/Heading.tsx
@@ -5,7 +5,7 @@ import type { HeadingProps } from '../types';
 import { Wrapper } from './Wrapper';
 
 export const Heading = ({ title, minimised }: HeadingProps) => (
-  <Wrapper minimised={minimised}>
+  <Wrapper $minimised={minimised}>
     {minimised ? <h5>&bull;</h5> : <h5>{title}</h5>}
   </Wrapper>
 );
diff --git a/src/library/SideMenu/Heading/Wrapper.tsx b/src/library/SideMenu/Heading/Wrapper.tsx
@@ -3,11 +3,11 @@
 
 import styled from 'styled-components';
 
-export const Wrapper = styled.div<{ minimised: boolean }>`
+export const Wrapper = styled.div<{ $minimised: boolean }>`
   display: flex;
   flex-flow: row wrap;
-  justify-content: ${(props) => (props.minimised ? 'center' : 'flex-start')};
-  opacity: ${(props) => (props.minimised ? 0.5 : 1)};
+  justify-content: ${(props) => (props.$minimised ? 'center' : 'flex-start')};
+  opacity: ${(props) => (props.$minimised ? 0.5 : 1)};
   align-items: center;
 
   h5 {

diff --git a/src/library/SideMenu/Secondary/Wrappers.tsx b/src/library/SideMenu/Secondary/Wrappers.tsx
@@ -92,9 +92,9 @@ export const MinimisedWrapper = styled(motion.button)`
   }
 `;
 
-export const IconWrapper = styled.div<{ minimised: boolean }>`
-  margin-left: ${(props) => (props.minimised ? 0 : '0.25rem')};
-  margin-right: ${(props) => (props.minimised ? 0 : '0.65rem')};
+export const IconWrapper = styled.div<{ $minimised: boolean }>`
+  margin-left: ${(props) => (props.$minimised ? 0 : '0.25rem')};
+  margin-right: ${(props) => (props.$minimised ? 0 : '0.65rem')};
 
   svg {
     .primary {

diff --git a/src/library/SideMenu/Secondary/index.tsx b/src/library/SideMenu/Secondary/index.tsx
@@ -29,7 +29,7 @@ export const Secondary = ({
       }}
     >
       <IconWrapper
-        minimised={minimised}
+        $minimised={minimised}
         className="icon"
         style={{ width: size, height: size }}
       >

diff --git a/src/library/SideMenu/types.ts b/src/library/SideMenu/types.ts
@@ -6,7 +6,7 @@ import type { FunctionComponent, SVGProps } from 'react';
 import type { AnyJson } from 'types';
 
 export interface MinimisedProps {
-  $minimised: boolean;
+  $minimised?: boolean;
 }
 
 export interface HeadingProps {

diff --git a/src/library/StatusLabel/Wrapper.ts b/src/library/StatusLabel/Wrapper.ts
@@ -6,7 +6,7 @@ import type { WrapperProps } from './types';
 
 export const Wrapper = styled.div<WrapperProps>`
   position: absolute;
-  top: ${(props) => (props.topOffset ? props.topOffset : '50%')};
+  top: ${(props) => (props.$topOffset ? props.$topOffset : '50%')};
   left: 0;
   width: 100%;
   display: flex;

diff --git a/src/library/StatusLabel/index.tsx b/src/library/StatusLabel/index.tsx
@@ -40,7 +40,7 @@ export const StatusLabel = ({
   }
 
   return (
-    <Wrapper topOffset={topOffset}>
+    <Wrapper $topOffset={topOffset}>
       <div>
         {hideIcon !== true && <FontAwesomeIcon icon={faExclamationTriangle} />}
         <h2>

diff --git a/src/library/StatusLabel/types.ts b/src/library/StatusLabel/types.ts
@@ -11,5 +11,5 @@ export interface StatusLabelProps {
 }
 
 export interface WrapperProps {
-  topOffset?: string;
+  $topOffset?: string;
 }
diff --git a/src/library/SubscanButton/index.tsx b/src/library/SubscanButton/index.tsx
@@ -6,26 +6,26 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { usePlugins } from 'contexts/Plugins';
 import styled from 'styled-components';
 
-const Wrapper = styled.div<{ active: boolean }>`
+const Wrapper = styled.div<{ $active: boolean }>`
   position: absolute;
   right: 10px;
   top: 10px;
   font-size: 0.9rem;
   border-radius: 0.3rem;
   padding: 0.25rem 0.4rem;
   color: ${(props) =>
-    props.active
+    props.$active
       ? 'var(--network-color-primary)'
       : 'var(--text-color-secondary)'};
-  opacity: ${(props) => (props.active ? 1 : 0.5)};
+  opacity: ${(props) => (props.$active ? 1 : 0.5)};
   z-index: 2;
 `;
 
 export const SubscanButton = () => {
   const { plugins } = usePlugins();
 
   return (
-    <Wrapper active={plugins.includes('subscan')}>
+    <Wrapper $active={plugins.includes('subscan')}>
       <FontAwesomeIcon
         icon={faProjectDiagram}
         transform="shrink-2"

diff --git a/src/pages/Overview/StakeStatus/Tips/Syncing.tsx b/src/pages/Overview/StakeStatus/Tips/Syncing.tsx
@@ -21,7 +21,7 @@ export const Syncing = () => {
       }}
     >
       <ItemWrapper>
-        <ItemInnerWrapper inactive>
+        <ItemInnerWrapper>
           <section
             style={{
               marginRight: '0.5rem',

diff --git a/src/pages/Overview/StakeStatus/Tips/Wrappers.tsx b/src/pages/Overview/StakeStatus/Tips/Wrappers.tsx
@@ -32,7 +32,7 @@ export const ItemWrapper = styled(motion.div)`
   }
 `;
 
-export const ItemInnerWrapper = styled.div<{ inactive?: boolean }>`
+export const ItemInnerWrapper = styled.div`
   display: flex;
   flex-flow: row wrap;
   align-items: center;