Add gradient background

pimcore · Mar 13, 2024 · 5f0e6ff · 5f0e6ff
1 parent f0e6335
commit 5f0e6ff
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 10 deletions.
diff --git a/assets/js/src/components/background/background.styles.ts b/assets/js/src/components/background/background.styles.ts
@@ -0,0 +1,51 @@
+import { createStyles } from 'antd-style'
+
+export const useStyle = createStyles(({ token, css }) => {
+  return {
+    background: css`
+      position: absolute;
+      inset: 0;
+      background: #FFF;
+      overflow: hidden; 
+      opacity: 0.3;
+
+      .background-figure {
+        position: absolute;
+
+        &--top-left {
+          top: -80%;
+          left: -30%;
+          width: 1324px;
+          height: 1324px;
+          transform: rotate(65.637deg);
+          flex-shrink: 0;
+          border-radius: var(--Components-Input-Component-paddingBlockSM, 1324px);
+          background: rgba(55, 217, 243, 0.20);
+          filter: blur(310px);
+        }
+
+
+        &--bottom-left {
+          width: 651.152px;
+          height: 1503.398px;
+          transform: rotate(28.303deg);
+          flex-shrink: 0;
+          border-radius: var(--Components-Input-Component-paddingBlockSM, 1503.398px);
+          background: #FDFFFF;
+          filter: blur(310px);
+        }
+
+        &--bottom-right {
+          left: 11%;
+          width: 1642px;
+          height: 686px;
+          transform: rotate(65.637deg);
+          flex-shrink: 0;
+          border-radius: var(--Components-Input-Component-paddingBlockSM, 1642px);
+          background: rgba(122, 58, 212, 0.42);
+          filter: blur(310px);
+        }
+      }
+    `
+  }
+})
diff --git a/assets/js/src/components/background/background.tsx b/assets/js/src/components/background/background.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { useStyle } from './background.styles'
+
+const Background = (): React.JSX.Element => {
+  const { styles } = useStyle()
+
+  return (
+    <div className={styles.background}>
+      <div className='background-figure background-figure--bottom-left'></div>
+      <div className='background-figure background-figure--bottom-right'></div>
+      <div className='background-figure background-figure--top-left'></div>
+    </div>
+  )
+}
+
+export { Background }
diff --git a/assets/js/src/modules/app/app-view.tsx b/assets/js/src/modules/app/app-view.tsx
@@ -3,13 +3,15 @@ import { GlobalProvider } from './global-provider'
 import { BaseLayoutView } from '@Pimcore/modules/base-layout/base-layout-view'
 import { App as AntApp } from 'antd'
 import { TranslationsLoaderContainer } from '@Pimcore/modules/translations/translations-loader-container'
+import { Background } from '@Pimcore/components/background/background'
 
 export const AppView = (): React.JSX.Element => {
   return (
     <>
       <StrictMode>
         <GlobalProvider>
           <AntApp>
+            <Background />
             <TranslationsLoaderContainer>
               <BaseLayoutView />
             </TranslationsLoaderContainer>

diff --git a/assets/js/src/modules/base-layout/base-layout-view.styles.ts b/assets/js/src/modules/base-layout/base-layout-view.styles.ts
@@ -4,9 +4,8 @@ export const useStlyes = createStyles(({ token, css }) => {
   return {
     baseLayout: css`
       position: absolute;
+      overflow: hidden;
       inset: 0;
-      background: #FCFCFC;
-      font-size: ${token.fontSize}
     `
   }
 })
diff --git a/assets/js/src/modules/widget-manager/widget-manager-view.styles.ts b/assets/js/src/modules/widget-manager/widget-manager-view.styles.ts
@@ -55,7 +55,11 @@ export const useStlyes = createStyles(({ token, css }) => {
   return {
     widgetManager: css`
       position: absolute;
-      inset: 8px 6px 4px 6px;
+      inset: 8px 6px 12px 6px;
+
+      .flexlayout__layout {
+        overflow: visible;
+      }
 
       &.widget-manager--inner {
         inset: 0;
@@ -140,21 +144,22 @@ export const useStlyes = createStyles(({ token, css }) => {
       }
 
       .flexlayout__tab {
+        overflow: visible;
         background: ${token.colorBgContainer};
-        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
+        box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.07), 2px 2px 0px 0px rgba(79, 78, 183, 0.05);
         border-right: 1px solid ${token.Tabs.colorBorderContainer}66;
         border-bottom: 1px solid ${token.Tabs.colorBorderContainer}66;
         border-left: 1px solid ${token.Tabs.colorBorderContainer}66;
-        border-radius: 0 ${token.borderRadius}px ${token.borderRadius}px ${token.borderRadius}px;
+        border-radius: 0 8px 8px 8px;
       }
 
       .flexlayout__tab_border {
-        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
+        box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.07), 2px 2px 0px 0px rgba(79, 78, 183, 0.05);
         border-top: 1px solid ${token.Tabs.colorBorderContainer}66;
         border-right: 1px solid ${token.Tabs.colorBorderContainer}66;
         border-bottom: 1px solid ${token.Tabs.colorBorderContainer}66;
         border-left: 1px solid ${token.Tabs.colorBorderContainer}66;
-        border-radius: ${token.borderRadius}px;
+        border-radius: 8px;
       }
 
       .widget-manager-inner-container {

diff --git a/public/build/entrypoints.json b/public/build/entrypoints.json
@@ -3,7 +3,7 @@
     "main": {
       "js": [
         "/bundles/pimcorestudioui/build/734.766754bf.js",
-        "/bundles/pimcorestudioui/build/main.b6a652bf.js"
+        "/bundles/pimcorestudioui/build/main.549e4d34.js"
       ],
       "css": [
         "/bundles/pimcorestudioui/build/main.3691bcd8.css"

diff --git a/public/build/main.b6a652bf.js → public/build/main.549e4d34.js b/public/build/main.b6a652bf.js → public/build/main.549e4d34.js
diff --git a/public/build/manifest.json b/public/build/manifest.json
@@ -1,6 +1,6 @@
 {
   "bundles/pimcorestudioui/build/main.css": "/bundles/pimcorestudioui/build/main.3691bcd8.css",
-  "bundles/pimcorestudioui/build/main.js": "/bundles/pimcorestudioui/build/main.b6a652bf.js",
+  "bundles/pimcorestudioui/build/main.js": "/bundles/pimcorestudioui/build/main.549e4d34.js",
   "bundles/pimcorestudioui/build/58.9cf6e23a.js": "/bundles/pimcorestudioui/build/58.9cf6e23a.js",
   "bundles/pimcorestudioui/build/678.c220b736.js": "/bundles/pimcorestudioui/build/678.c220b736.js",
   "bundles/pimcorestudioui/build/625.b487b20e.js": "/bundles/pimcorestudioui/build/625.b487b20e.js",