From d1791e8e873095f1b3d3a81805ecc0cf4da8108b Mon Sep 17 00:00:00 2001 From: vidhya-metacell Date: Fri, 29 Jul 2022 15:08:02 +0200 Subject: [PATCH] #16 Keep the node base styles and a default calue of color in meta theme --- src/components/assets/styles/variables.ts | 10 +++++ src/components/assets/svg/MI.png | Bin 0 -> 736 bytes src/components/assets/svg/mechanism-green.svg | 3 -- src/components/assets/svg/mechanism-icon.svg | 3 -- src/theme.ts | 37 +++++++++++++++--- 5 files changed, 42 insertions(+), 11 deletions(-) create mode 100644 src/components/assets/svg/MI.png delete mode 100644 src/components/assets/svg/mechanism-green.svg delete mode 100644 src/components/assets/svg/mechanism-icon.svg diff --git a/src/components/assets/styles/variables.ts b/src/components/assets/styles/variables.ts index b3284be..66f98f8 100644 --- a/src/components/assets/styles/variables.ts +++ b/src/components/assets/styles/variables.ts @@ -1,3 +1,11 @@ +const nodeGreen = { + nodeGreenBackgroundColor: '#D4F4D4', + nodeGreenTextColor: '#669D66', + nodeGreenBorderColor: 'rgba(102, 157, 102, 0.2)', + nodeGreenBoxShadow: '0 0.25rem 0.625rem -0.25rem rgba(102, 157, 102, 0.3)', +}; + + const vars = { fontFamily: 'Inter, sans-serif', primaryBg: '#f1f1f1', @@ -44,6 +52,8 @@ const vars = { nodePointerBg: '#fff', nodeButtonTextColor: 'rgba(255, 255, 255, 0.8)', nodeButtonLineColor: 'rgba(255, 255, 255, 0.2)', + nodeTextColor: '#3C3C43', + ...nodeGreen, }; export default vars; diff --git a/src/components/assets/svg/MI.png b/src/components/assets/svg/MI.png new file mode 100644 index 0000000000000000000000000000000000000000..1368e4fa0d90970c77f07ad665ab4d805f5ece99 GIT binary patch literal 736 zcmV<60w4W}P)2W&v2O22Y2z?PDY$THUn;rD`q@gK&Eg3YY%Hbhwl6&d-o{S|^I;y& zM}F$NreWSgZ9^IZ4^nN#woBngizwlo_pm<4x;g+xw~;TH7$cnSGka#HGz+HKPs^}I zNs#En*ZH+0cX9%&uYi0Z9nL-BGfn$xqVwDezDJ(i1UIF*GbbF1G)(=9RrX*xNJ!`+ z(qXGQRi_i}m0}Ob_qPV~3Ph+bUht9TN~jCWXSD}~Qff%jQJq{LR_qRI4WY*)+an<5 z3XrOXJ1{D1z0@Enfc*fxY+wgK8U{B4 z7}(J=Dk#wuF1$Xca7ip-eWtKcN{r3`_KE7Y%{c01Dqi$*fiM^#v-aOb7dDeU?2pg{ z6~U-(-v!d39yVXh5e$0z?{YXQ^!m&?v67~PJ_NQ${daL_4$sOge*0hePsSfwuS^-B S@EE%Q0000 - - diff --git a/src/components/assets/svg/mechanism-icon.svg b/src/components/assets/svg/mechanism-icon.svg deleted file mode 100644 index 7faf780..0000000 --- a/src/components/assets/svg/mechanism-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/theme.ts b/src/theme.ts index 7c5da22..b743c0d 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -1,4 +1,5 @@ import vars from './components/assets/styles/variables'; +import MI from "./components/assets/svg/mechanism-yellow.svg"; type ThemeVars = { [key: string]: any; @@ -23,6 +24,11 @@ const applicationTheme = (params: ThemeVars) => { nodePointerBg, nodeButtonTextColor, nodeButtonLineColor, + nodeGreenBackgroundColor, + nodeGreenTextColor, + nodeGreenBorderColor, + nodeGreenBoxShadow, + nodeTextColor, } = params; return { components: { @@ -64,24 +70,39 @@ const applicationTheme = (params: ThemeVars) => { background-color: ${canvasBg}; } - .node { - border: solid 0.0625rem; + .primary-node { + border: solid 0.0625rem ${nodeGreenBorderColor}; border-radius: 50%; + box-shadow: ${nodeGreenBoxShadow}; + background: ${nodeGreenBackgroundColor}; + position: relative; width: 10rem; height: 10rem; + } + + .primary-node .primary-node_header { display: flex; align-items: center; justify-content: center; + height: 100%; flex-direction: column; - position: relative; } - .node img { + .primary-node img { margin-bottom: 0.25rem } - .node p { + .primary-node .primary-node_header p { + color: ${nodeGreenTextColor}; + } + + .primary-node .primary-node_header img { + background: "url(data:image/svg+xml;base64,${new Buffer(MI).toString('base64')})"; + } + + .primary-node p { font-weight: 500; + color: ${nodeTextColor}; font-size: 0.8125rem; line-height: 1.25rem; letter-spacing: -0.005rem; @@ -134,6 +155,11 @@ const applicationTheme = (params: ThemeVars) => { background-color: ${nodeButtonLineColor}; } + .primary-node .node-button .icon { + background: ${nodeGreenBackgroundColor}; + border-color: ${nodeGreenBorderColor} + } + .nodes { width: 10rem; height: 10rem; @@ -150,6 +176,7 @@ const applicationTheme = (params: ThemeVars) => { border-radius: 0.125rem; position: absolute; } + `, }, MuiList: {