From faf67da698094b0218d1e1977f912f15712d5386 Mon Sep 17 00:00:00 2001 From: adityagarg06 Date: Thu, 1 Feb 2024 14:26:49 +0530 Subject: [PATCH 1/4] Convert Loader to styled component --- client/modules/App/components/loader.jsx | 56 +++++++++++++++++++++--- client/styles/components/_loader.scss | 53 ---------------------- client/theme.js | 3 ++ 3 files changed, 53 insertions(+), 59 deletions(-) delete mode 100644 client/styles/components/_loader.scss diff --git a/client/modules/App/components/loader.jsx b/client/modules/App/components/loader.jsx index 3730642711..2d8f09f1cd 100644 --- a/client/modules/App/components/loader.jsx +++ b/client/modules/App/components/loader.jsx @@ -1,11 +1,55 @@ import React from 'react'; +import styled, { keyframes } from 'styled-components'; +import { prop, remSize } from '../../../theme'; + +const skBounce = keyframes` + 0%, 100% { + transform: scale(0.0); + } + 50% { + transform: scale(1.0); + } +`; +const Container = styled.div` + &&& { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: ${prop('backgroundColor')}; + } +`; +const LoaderWrapper = styled.div` + &&& { + width: ${remSize(80)}; + height: ${remSize(80)}; + position: relative; + } +`; +const LoaderCircle = styled.div` + &&& { + width: 100%; + height: 100%; + border-radius: 80%; + background-color: ${prop('logoColor')}; + opacity: 0.6; + position: absolute; + top: 0; + left: 0; + animation: ${skBounce} 2s infinite ease-in-out; + &:nth-child(2) { + animation-delay: -1s; + } + } +`; const Loader = () => ( -
-
-
-
-
-
+ + + + + + ); export default Loader; diff --git a/client/styles/components/_loader.scss b/client/styles/components/_loader.scss deleted file mode 100644 index b49160ec63..0000000000 --- a/client/styles/components/_loader.scss +++ /dev/null @@ -1,53 +0,0 @@ -@use "sass:math"; - -.loader-container { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - @include themify() { - background-color: getThemifyVariable('background-color'); - } -} - - -.loader { - width: #{math.div(80, $base-font-size) }rem; - height: #{math.div(80, $base-font-size)}rem; - - position: relative; -} - -.loader__circle1, -.loader__circle2 { - width: 100%; - height: 100%; - border-radius: 80%; - - @include themify() { - background-color: getThemifyVariable('logo-color'); - } - - opacity: 0.6; - position: absolute; - top: 0; - left: 0; - animation: sk-bounce 2.0s infinite ease-in-out; -} - -.loader__circle2 { - animation-delay: -1.0s; -} - -@keyframes sk-bounce { - - 0%, - 100% { - transform: scale(0.0); - } - - 50% { - transform: scale(1.0); - } -} \ No newline at end of file diff --git a/client/theme.js b/client/theme.js index f60ef0735a..a0145aa8f9 100644 --- a/client/theme.js +++ b/client/theme.js @@ -75,6 +75,7 @@ const baseThemes = { inactiveTextColor: grays.middleDark, backgroundColor: grays.lighter, accentColor: colors.p5jsPink, + logoColor: colors.p5jsPink, Button: { primary: { @@ -162,6 +163,7 @@ const baseThemes = { inactiveTextColor: grays.middleLight, backgroundColor: grays.darker, accentColor: colors.p5jsPink, + logoColor: colors.p5jsPink, Button: { primary: { @@ -248,6 +250,7 @@ export default { ...baseThemes, [Theme.contrast]: extend(baseThemes[Theme.dark], { inactiveTextColor: grays.light, + logoColor: colors.yellow, Button: { primary: { From b33c529ca5f72e863b9ed5381a9a7a9035f5bca9 Mon Sep 17 00:00:00 2001 From: raclim Date: Fri, 2 Aug 2024 12:15:51 -0400 Subject: [PATCH 2/4] remove loader import --- client/styles/main.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/client/styles/main.scss b/client/styles/main.scss index 53208a6b4f..75cc236904 100644 --- a/client/styles/main.scss +++ b/client/styles/main.scss @@ -46,7 +46,6 @@ @import 'components/copyable-input'; @import 'components/feedback'; @import 'components/console-input'; -@import 'components/loader'; @import 'components/uploader'; @import 'components/tabs'; @import 'components/dashboard-header'; From 68337c0497c557c423a652d8069e6d70a8abddc0 Mon Sep 17 00:00:00 2001 From: raclim Date: Fri, 2 Aug 2024 12:16:10 -0400 Subject: [PATCH 3/4] update eslint rule --- .eslintrc | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.eslintrc b/.eslintrc index 06ed7ddb93..6260aa925a 100644 --- a/.eslintrc +++ b/.eslintrc @@ -14,7 +14,8 @@ "import/named": 0, "import/namespace": 0, "import/no-unresolved": 0, - "import/no-named-as-default": 2, + "import/no-named-as-default": 0, + "import/no-named-as-default-member": 0, "comma-dangle": 0, // not sure why airbnb turned this on. gross! "indent": 0, "no-console": 0, From 893df26c08d09f2171996f9e9eb6b11cfb0a4226 Mon Sep 17 00:00:00 2001 From: raclim Date: Fri, 2 Aug 2024 12:16:28 -0400 Subject: [PATCH 4/4] wrap loader with themeprovider in app --- client/index.jsx | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/client/index.jsx b/client/index.jsx index 6c2e2e40b7..6c12fa511b 100644 --- a/client/index.jsx +++ b/client/index.jsx @@ -21,19 +21,21 @@ const initialState = window.__INITIAL_STATE__; const store = configureStore(initialState); const App = () => ( - - - - - - - - + <> + + + + + ); render( - }> - - , + + + }> + + + + , document.getElementById('root') );