From 1eb19ee81fce3f4e0fde621efb26eaf8fc69b10d Mon Sep 17 00:00:00 2001
From: Sergio Betanzos <sbetanzos@opennebula.io>
Date: Wed, 24 Feb 2021 13:59:10 +0100
Subject: [PATCH] F #3951: Fix logo opennebula (#871)

---
 .../src/client/components/Sidebar/index.js    |  3 +-
 .../src/client/components/Sidebar/styles.js   |  6 +-
 .../src/client/containers/Login/index.js      |  2 +-
 src/fireedge/src/client/icons/logo.js         | 78 ++++++++++++-------
 4 files changed, 55 insertions(+), 34 deletions(-)

diff --git a/src/fireedge/src/client/components/Sidebar/index.js b/src/fireedge/src/client/components/Sidebar/index.js
index c35c6f1257..05087a3d40 100644
--- a/src/fireedge/src/client/components/Sidebar/index.js
+++ b/src/fireedge/src/client/components/Sidebar/index.js
@@ -69,9 +69,8 @@ const Sidebar = memo(({ endpoints }) => {
       <Box className={classes.header}>
         <Logo
           width='100%'
-          height={100}
+          height={50}
           withText
-          viewBox='0 0 640 640'
           className={classes.svg}
         />
         <IconButton
diff --git a/src/fireedge/src/client/components/Sidebar/styles.js b/src/fireedge/src/client/components/Sidebar/styles.js
index 90db0dc381..c8e82ae477 100644
--- a/src/fireedge/src/client/components/Sidebar/styles.js
+++ b/src/fireedge/src/client/components/Sidebar/styles.js
@@ -27,13 +27,13 @@ export default makeStyles(theme => ({
           easing: theme.transitions.easing.sharp,
           duration: theme.transitions.duration.enteringScreen
         }),
-        '& #logo__text__top, & #logo__text__bottom': {
+        '& #logo__text': {
           visibility: 'visible'
         }
       },
       // CONTAINER ONLY WHEN MINIFIED
       '&:not(:hover)': {
-        '& #logo__text__top, & #logo__text__bottom': {
+        '& #logo__text': {
           visibility: 'hidden'
         },
         '& $menu': {
@@ -57,7 +57,7 @@ export default makeStyles(theme => ({
     },
     [theme.breakpoints.up('lg')]: {
       width: sidebar.fixed,
-      '& #logo__text__top, & #logo__text__bottom': {
+      '& #logo__text': {
         visibility: 'visible !important'
       },
       '& $expandIcon, & $subItemWrapper': {
diff --git a/src/fireedge/src/client/containers/Login/index.js b/src/fireedge/src/client/containers/Login/index.js
index 90506abce8..a6040114d3 100644
--- a/src/fireedge/src/client/containers/Login/index.js
+++ b/src/fireedge/src/client/containers/Login/index.js
@@ -68,7 +68,7 @@ function Login () {
       {isLoading && <LinearProgress color='secondary' className={classes.loading} />}
       <Paper variant="outlined" className={classes.paper}>
         {useMemo(() => (
-          <Logo width="100%" height={100} withText viewBox="140 140 380 360" data-cy="opennebula-logo" />
+          <Logo width='100%' height={100} withText data-cy='opennebula-logo' />
         ), [])}
         <Box className={classes.wrapperForm}>
           {step === STEPS.USER_FORM && <Form
diff --git a/src/fireedge/src/client/icons/logo.js b/src/fireedge/src/client/icons/logo.js
index 558e4a97bf..d10729c7cf 100644
--- a/src/fireedge/src/client/icons/logo.js
+++ b/src/fireedge/src/client/icons/logo.js
@@ -9,10 +9,12 @@ const Logo = memo(({ width, height, spinner, withText, viewBox, ...props }) => {
     child4: { from: '#80cde6', to: '#ffffff' },
     child5: { from: '#bfe6f2', to: '#ffffff' }
   }
+
   const textColor = {
     top: 'currentColor',
     bottom: '#0098c3'
   }
+
   return (
     <svg viewBox={viewBox} width={width} height={height} {...props}>
       <defs>
@@ -35,51 +37,71 @@ const Logo = memo(({ width, height, spinner, withText, viewBox, ...props }) => {
             </linearGradient>
           ))}
       </defs>
+      {/*  --------------- CLOUD ------------------ */}
       <path
         fill={spinner ? 'url(#gradient__child1)' : cloudColor.child1.from}
-        d="M207.7 233.57L196.2 245.35L184.29 256.66L171.97 267.48L159.27 277.8L146.19 287.6L132.74 296.88L118.94 305.62L104.81 313.79L90.36 321.4L75.59 328.41L60.54 334.83L45.19 340.63L29.58 345.81L13.72 350.34L12.05 350.74L12.23 350.33L13.27 348.21L14.39 346.15L15.58 344.13L16.85 342.16L18.19 340.25L19.61 338.39L21.09 336.58L22.63 334.84L24.24 333.16L25.92 331.54L27.65 329.99L29.44 328.5L31.29 327.08L33.2 325.73L35.16 324.46L37.16 323.26L39.22 322.13L41.33 321.09L42.05 320.76L41.6 319.67L40.7 317.18L39.89 314.65L39.18 312.08L38.58 309.47L38.08 306.82L37.69 304.14L37.41 301.42L37.23 298.68L37.18 295.9L37.23 293.13L37.41 290.38L37.69 287.67L38.08 284.99L38.58 282.34L39.18 279.73L39.89 277.16L40.7 274.63L41.6 272.14L42.6 269.7L43.7 267.31L44.88 264.96L46.16 262.67L47.52 260.44L48.97 258.26L50.5 256.14L52.11 254.08L53.8 252.08L55.56 250.15L57.4 248.29L59.31 246.5L61.29 244.77L63.33 243.13L65.44 241.55L67.62 240.06L69.85 238.65L72.14 237.32L74.49 236.08L76.89 234.92L79.34 233.85L81.84 232.87L84.39 231.99L86.98 231.2L89.62 230.51L92.29 229.92L95.01 229.44L97.75 229.05L100.54 228.78L103.35 228.61L106.19 228.55L109.04 228.61L111.85 228.78L114.63 229.05L117.38 229.44L120.1 229.92L122.77 230.51L125.41 231.2L128 231.99L130.55 232.87L133.05 233.85L135.5 234.92L137.9 236.08L140.25 237.32L141.66 238.14L143.92 234L146.4 229.83L149.04 225.77L151.84 221.82L154.78 217.99L157.86 214.27L161.08 210.67L164.43 207.2L167.92 203.86L171.53 200.65L175.26 197.58L179.11 194.66L183.08 191.88L187.15 189.24L191.33 186.77L195.62 184.45L200 182.29L204.47 180.3L208.36 178.75L208.36 232.84L207.7 233.57Z"
+        d="M124.9,130.9c-4.6,1.1-9.1,2.2-13.7,3.2c-28,6-56.5,9.8-85.1,11.3c-1.8-0.2,0.7,1.1,1.1,1.5c7.6,5.5,17.5,6.5,26.9,6.6c22.9,0,45.7,0,68.6,0c0.8,0,1.3-0.2,1.7-0.7c0.5-0.5,0.5-1.7,0.5-1.7V130.9z"
       />
       <path
         fill={spinner ? 'url(#gradient__child2)' : cloudColor.child2.from}
-        d="M198.85 304.87L182.93 314.47L166.61 323.51L149.89 331.98L132.78 339.85L115.31 347.11L97.49 353.75L79.33 359.76L60.86 365.12L42.08 369.8L23.02 373.81L4.8 376.94L4.78 376.15L4.83 373.65L4.98 371.17L5.23 368.71L5.57 366.29L6.01 363.9L6.16 363.22L20.47 359.78L36.34 355.25L51.95 350.08L67.29 344.28L82.35 337.86L97.12 330.84L111.57 323.24L125.7 315.06L139.5 306.33L152.94 297.05L166.03 287.25L178.73 276.92L191.05 266.1L202.96 254.79L206.62 251.05L206.62 299.77L198.85 304.87Z"
+        d="M124.9,106.1c-14.4,6.8-29.5,12.3-44.8,16.9c-20.6,5.9-41.7,10.3-63,12.7c1.2,1.8,2.1,4.5,4.2,5.3c34.8-1.7,69.7-6.4,103.6-14.9V106.1z"
       />
       <path
         fill={spinner ? 'url(#gradient__child3)' : cloudColor.child3.from}
-        d="M184.12 353.2L156.39 362.67L128.1 371.33L99.29 379.16L69.96 386.13L40.16 392.25L9.9 397.47L8.67 397.64L8.66 397.61L7.87 395.36L7.16 393.08L6.54 390.76L6.01 388.4L5.57 386.01L5.49 385.45L10.39 384.67L30.75 380.67L50.81 376L70.54 370.66L89.94 364.68L108.98 358.05L127.64 350.81L145.91 342.97L163.78 334.53L181.22 325.52L198.22 315.95L206.62 310.81L206.62 344.7L184.12 353.2Z"
+        d="M124.9,81.6c-26,17.6-55.7,29.3-85.9,37.2c-8.5,2.1-17.1,4.4-25.7,5.8c0.4,2.3,0.9,4.4,1.8,6.6c36.5-4.3,72.7-13.2,106.2-28.6c1.2-0.6,2.5-1.2,3.7-1.8V81.6z"
       />
       <path
         fill={spinner ? 'url(#gradient__child4)' : cloudColor.child4.from}
-        d="M187.35 393.66L157.55 399.77L127.29 405L96.6 409.32L65.51 412.71L34.04 415.15L19.8 415.82L19.71 415.72L18.23 413.91L16.82 412.05L15.47 410.14L14.21 408.17L13.01 406.15L12.48 405.17L22.87 404.25L43.8 401.66L64.45 398.36L84.82 394.36L104.87 389.69L124.61 384.35L144.01 378.36L163.04 371.74L181.71 364.5L199.98 356.66L206.98 353.35L206.98 388.99L187.35 393.66Z"
+        d="M124.9,47.1c-13.1,15.6-29.7,28.1-47.4,38.2c-18.8,10.6-39,18.8-59.6,24.9c-1.5,0.8-4.4,0.5-4.3,2.8c-0.5,2.3-0.7,4.6-0.7,6.9c33.6-6.4,66.7-17,96.5-34.1c5.3-3.1,10.5-6.4,15.6-9.9V47.1z"
       />
       <path
         fill={spinner ? 'url(#gradient__child5)' : cloudColor.child5.from}
-        d="M65.28 436.96L65.28 436.96L62.79 436.91L60.32 436.76L57.88 436.51L55.47 436.16L53.09 435.72L50.75 435.19L48.44 434.57L46.17 433.86L43.93 433.06L41.74 432.18L39.59 431.21L37.49 430.17L35.43 429.04L33.42 427.84L31.46 426.57L29.56 425.22L27.71 423.8L25.92 422.31L25.7 422.12L43.1 421.31L74.57 418.87L105.66 415.48L136.35 411.16L166.61 405.93L196.41 399.82L206.62 397.39L206.62 436.96L65.28 436.96Z"
+        d="M124.9,12.9c-0.4-0.9-1.8-0.4-3.3,0.3c-5.7,2.4-28.8,13.7-32.3,28.7c-1.4,1.9-3.5-0.5-5.1-1c-13.1-6.4-29.7-4.3-40.9,5.1c-11.2,9-17.3,25.1-12.2,39c0.8,1.6,1.6,3.8-0.1,5.2c-2.1,1.4-4.4,2.5-6.2,4.3c-3.7,3.1-6.9,7.1-8.9,11.3c30.7-9.3,60.8-22.5,85.9-42.8c8.4-7,16.3-14.7,22.9-23.4V12.9z"
       />
+
       {withText && (
-        <>
-          <text
-            id="logo__text__top"
-            x={230}
-            y={280}
+        <g id='logo__text'>
+          {/*  --------------- TEXT TOP ------------------ */}
+          <path
             fill={textColor.top}
-            fontSize={125}
-            fontFamily="Ubuntu"
-            fontWeight={800}
-          >
-            {'Open'}
-          </text>
-          <text
-            id="logo__text__bottom"
-            x={230}
-            y={430}
+            d="M170.9,24.6c10.7,0,19,8.6,19,19.7c0,11.2-8.1,19.5-19,19.5c-10.9,0-19.5-8.6-19.5-19.5C151.4,33,159.9,24.6,170.9,24.6z M171.1,14.3c-17.2,0-30.4,13.1-30.4,29.9c0,16.7,13.4,29.9,30.3,29.9c16.8,0,29.7-13.1,29.7-29.9C200.7,27.6,187.5,14.3,171.1,14.3z"
+          />
+          <path
+            fill={textColor.top}
+            d="M230.4,38.3c7,0,12.4,5.7,12.4,13.2c0,7.3-5.4,13-12.2,13c-7.3,0-12.8-5.6-12.8-13.2C217.8,43.9,223.2,38.3,230.4,38.3z M208,87.5h10.4V69c4,3.5,8,5.1,13.3,5.1c12.5,0,21.6-9.7,21.6-22.8c0-13-9-22.5-21.5-22.5c-5.9,0-10.8,2.1-14.2,6.1v-5.1H208V87.5z"
+          />
+          <path
+            fill={textColor.top}
+            d="M268.5,46.9c1.6-5.6,5.8-8.6,12-8.6c6.4,0,10.6,3.1,11.9,8.6H268.5z M302.3,56c0.3-1.5,0.4-2.5,0.4-4.1c0-13.4-9.4-23.2-22.3-23.2c-12.7,0-22.8,10.1-22.8,22.8c0,12.7,10.2,22.5,23.4,22.5c7.1,0,12.6-2.5,17.2-7.8c1.6-2,2.7-3.8,3.4-6h-11.3c-2.6,3.1-5.2,4.3-9.5,4.3c-6.2,0-10.7-3.3-11.9-8.5H302.3z"
+          />
+          <path
+            fill={textColor.top}
+            d="M309.5,73.1h10.4V52.7c0-5.8,0.4-8.3,1.7-10.4c1.6-2.6,4.3-4,7.6-4c2.7,0,4.8,0.9,6.2,2.7c1.4,1.9,2,5.1,2,10.9v21.2h10.4V49.9c0-7.7-0.8-11.5-3.1-14.8c-2.8-4.1-7.5-6.3-13.5-6.3c-5,0-8.3,1.4-12.2,5.1v-4.1h-9.6V73.1z"
+          />
+
+          {/*  --------------- TEXT BOTTOM ------------------ */}
+          <polygon
             fill={textColor.bottom}
-            fontSize={125}
-            fontFamily="Ubuntu"
-            fontWeight={800}
-          >
-            {'Nebula'}
-          </text>
-        </>
+            points="143.6,151.2 154.3,151.2 154.3,109.2 178.4,151.2 190.3,151.2 190.3,93.5 179.6,93.5 179.6,135.5 155.8,93.5 143.6,93.5"
+          />
+          <path
+            fill={textColor.bottom}
+            d="M209.3,125c1.6-5.6,5.8-8.6,12-8.6c6.4,0,10.6,3,11.9,8.6H209.3z M243.1,134.2c0.3-1.5,0.4-2.5,0.4-4.1c0-13.4-9.4-23.2-22.3-23.2c-12.7,0-22.8,10.1-22.8,22.8c0,12.7,10.2,22.5,23.4,22.5c7.1,0,12.6-2.5,17.2-7.8c1.6-2,2.7-3.8,3.4-6h-11.3c-2.6,3.1-5.2,4.3-9.5,4.3c-6.2,0-10.7-3.3-11.9-8.5H243.1z"
+          />
+          <path
+            fill={textColor.bottom}
+            d="M272.5,115.9c7.4,0,12.8,5.6,12.8,13.4c0,8-5.2,13.4-12.6,13.4c-7.6,0-12.8-5.5-12.8-13.4C259.9,121.4,265.2,115.9,272.5,115.9z M250.2,151.2h9.5v-5.5c4.4,4.8,8.6,6.6,15,6.6c6.7,0,12-2.5,16-7.6c3.3-4.2,5.1-9.6,5.1-15.4c0-13.1-9.3-22.9-21.7-22.9c-5.7,0-9.4,1.6-13.4,5.5V93.5h-10.4V151.2z"
+          />
+          <path
+            fill={textColor.bottom}
+            d="M340.1,107.9h-10.4v20.4c0,5.7-0.4,8.5-1.6,10.4c-1.5,2.6-4.4,4-7.9,4c-2.6,0-4.7-0.9-6.1-2.7c-1.5-1.9-2.1-5-2.1-10.9v-21.2h-10.4v23.2c0,7.3,0.8,11.2,3.3,14.7c2.9,4.1,7.5,6.4,13.2,6.4c5.2,0,8.4-1.3,12.4-5.2v4.1h9.6V107.9z"
+          />
+          <rect x="348.4" y="93.5" fill={textColor.bottom} width="10.4" height="57.8"/>
+          <path
+            fill={textColor.bottom}
+            d="M388.4,116.4c7.4,0,12.7,5.5,12.7,13.4c0,3.1-1.2,6.7-3.1,8.9c-2.1,2.6-5.5,3.9-9.4,3.9c-7.6,0-12.8-5.1-12.8-12.7C375.7,122.1,381,116.4,388.4,116.4z M410.9,107.9h-9.5v5.8c-3.6-4.8-7.9-6.8-14.1-6.8c-12.8,0-22,9.6-22,22.8c0,13,9.1,22.5,21.8,22.5c6.1,0,10.2-1.9,14.3-6.7v5.6h9.5V107.9z"
+          />
+        </g>
       )}
     </svg>
   )
@@ -96,7 +118,7 @@ Logo.propTypes = {
 Logo.defaultProps = {
   width: 360,
   height: 360,
-  viewBox: '0 0 640 640',
+  viewBox: '0 0 425 167',
   spinner: false,
   withText: false
 }