Merge pull request #248 from ynput/fix/cloud-button-dark-mode

Fix/cloud button dark mode
ynput · Dec 12, 2023 · a8a427b · a8a427b
2 parents 8ba23ef + a4f4132
commit a8a427b
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 21 deletions.
diff --git a/src/components/Menu/Menus/AppMenu.jsx b/src/components/Menu/Menus/AppMenu.jsx
@@ -105,7 +105,14 @@ export const AppMenu = ({ user, ...props }) => {
   return (
     <>
       <Menu menu={items} footer={ayonClient.settings?.version} {...props} />
-      {isAdmin && <YnputConnector redirect={location.pathname + '/appMenu'} smallLogo />}
+      {isAdmin && (
+        <YnputConnector
+          redirect={location.pathname + '/appMenu'}
+          smallLogo
+          darkMode
+          showDisconnect={false}
+        />
+      )}
     </>
   )
 }

diff --git a/src/components/YnputCloud/YnputCloud.styled.js b/src/components/YnputCloud/YnputCloud.styled.js
@@ -35,10 +35,25 @@ export const HeaderButton = styled(ayonButton)`
 
   .icon {
     color: var(--md-sys-color-on-tertiary);
-    font-size: 2rem;
+    font-size: 1.5rem;
     font-variation-settings: 'FILL' 1;
   }
 
+  /* if $darkMode show inverse colors */
+  ${({ $darkMode }) =>
+    $darkMode &&
+    css`
+      background-color: var(--md-sys-color-surface-container-lowest);
+      color: var(--md-sys-color-on-surface);
+      &:hover {
+        background-color: var(--md-sys-color-surface-container-low);
+      }
+
+      .icon {
+        color: var(--md-sys-color-on-surface);
+      }
+    `}
+
   /* when loading show shimmer */
   ${({ $isLoading }) =>
     $isLoading &&
@@ -72,7 +87,10 @@ export const Container = styled.div`
   display: grid;
   flex-direction: column;
   align-items: center;
-  background-color: var(--md-sys-color-tertiary-container);
+  background-color: ${({ $darkMode }) =>
+    $darkMode
+      ? 'var(--md-sys-color-surface-container-lowest)'
+      : 'var(--md-sys-color-tertiary-container)'};
   border-radius: 8px;
   gap: 0;
 `

diff --git a/src/components/YnputCloud/YnputCloudButton.jsx b/src/components/YnputCloud/YnputCloudButton.jsx
@@ -2,24 +2,24 @@ import React from 'react'
 import * as Styled from './YnputCloud.styled'
 import { Icon, Spacer } from '@ynput/ayon-react-components'
 import Type from '/src/theme/typography.module.css'
+import CloudLogo from '/src/svg/CloudLogo'
 
 const YnputCloudButton = React.forwardRef(
-  ({ isConnected, showStatus, showDropdown, isOpen, isLoading, smallLogo, ...props }, ref) => {
+  (
+    { isConnected, showStatus, showDropdown, isOpen, isLoading, smallLogo, darkMode, ...props },
+    ref,
+  ) => {
     return (
       <Styled.HeaderButton
         {...props}
         ref={ref}
         $disabled={props.disabled || isLoading}
         $isLoading={isLoading}
         $isOpen={isOpen}
+        $darkMode={darkMode}
         style={{ borderRadius: 8 }}
       >
-        <img
-          src="/ynput-cloud-logo.svg"
-          style={{
-            height: smallLogo ? 20 : 29,
-          }}
-        />
+        <CloudLogo style={{ height: smallLogo ? 20 : 29 }} darkMode={darkMode} />
         {(showStatus || showDropdown) && (
           <Styled.Status className="status">
             {showStatus && (

diff --git a/src/components/YnputCloud/YnputConnector.jsx b/src/components/YnputCloud/YnputConnector.jsx
@@ -27,6 +27,7 @@ const YnputConnector = ({
   onClick,
   styleContainer,
   user,
+  darkMode,
   ...props
 }) => {
   const location = useLocation()
@@ -101,8 +102,10 @@ const YnputConnector = ({
     }
   }
 
+  if (isLoading) return null
+
   return (
-    <Styled.Container style={styleContainer}>
+    <Styled.Container style={styleContainer} $darkMode={isConnected && darkMode}>
       <YnputCloudButton
         disabled={disabled}
         isLoading={isLoadingConnect || isLoading}
@@ -112,20 +115,21 @@ const YnputConnector = ({
         isConnected={isConnected}
         isOpen={isOpen}
         smallLogo={smallLogo}
+        darkMode={isConnected && darkMode}
         {...props}
       />
 
       <Styled.DropdownContainer $isOpen={isOpen}>
         <Styled.Dropdown className="dropdown">
           <span>Instance: {connectData?.instanceName || '???'}</span>
           <span>Organization: {connectData?.orgName || '???'}</span>
-          <Styled.Footer>
-            {showDisconnect && !connectData?.managed && (
+          {showDisconnect && (
+            <Styled.Footer>
               <Styled.Button onClick={handleDisconnect} className="disconnect">
                 Disconnect
               </Styled.Button>
-            )}
-          </Styled.Footer>
+            </Styled.Footer>
+          )}
         </Styled.Dropdown>
       </Styled.DropdownContainer>
     </Styled.Container>

diff --git a/src/containers/SettingsEditor/widgets.jsx b/src/containers/SettingsEditor/widgets.jsx
@@ -218,11 +218,11 @@ const SelectWidget = (props) => {
 
 const getDefaultValue = (props) => {
   //console.log("Creating default value for", props.id)
-  if (props.value !== undefined) return props.value
-  if (props.schema.widget === 'color') {
+  if (props.schema.widget === 'color' && !props.value) {
     if (props.schema.colorFormat === 'hex') return props.schema.colorAlpha ? '#00000000' : '#000000'
     return props.schema.colorAlpha ? [0, 0, 0, 0] : [0, 0, 0]
   }
+  if (props.value !== undefined) return props.value
   if (props.schema.type === 'string') return ''
   if (props.schema.type === 'integer') return 0
 }

diff --git a/src/pages/EditorPage/NewEntity.jsx b/src/pages/EditorPage/NewEntity.jsx
@@ -155,9 +155,10 @@ const NewEntity = ({
     if (!entityData.label || !entityData.type) return
 
     // check name is unique
-    if (folderNames.has(entityData.name) && type === 'folder')
-      return toast.warning('Folder names must be unique')
-    else if (taskNames.get(entityData.name) in currentSelection) {
+    //if (folderNames.has(entityData.name) && type === 'folder')
+    if (folderNames.get(entityData.name) in currentSelection) {
+      return toast.warning('Sibling Folder names must be unique')
+    } else if (taskNames.get(entityData.name) in currentSelection) {
       return toast.warning('Sibling Task names must be unique')
     }
 

diff --git a/src/pages/OnBoarding/Step/ConnectionDetails.jsx b/src/pages/OnBoarding/Step/ConnectionDetails.jsx
@@ -10,7 +10,6 @@ export const ConnectionDetails = ({ Header, Body, Footer, userForm }) => {
       <YnputConnector
         initIsOpen={true}
         showDropdown={false}
-        showDisconnect={false}
         styleContainer={{ width: '70%', margin: '8px 0' }}
         style={{ width: '100%' }}
         user={userForm}

diff --git a/src/svg/CloudLogo.jsx b/src/svg/CloudLogo.jsx
@@ -0,0 +1,49 @@
+const CloudLogo = ({ darkMode, ...props }) => (
+  <svg viewBox="0 0 1402 254" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <g clipPath="url(#clip0_138_97)">
+      <path
+        d="M849.75 181.5C864.5 181.5 877 176.5 886.75 166.25V180.5C877 188.25 863.5 193 849.5 193C813.5 193 784.25 163.5 784.25 127.25C784.25 90.9999 813.5 61.4999 849.5 61.4999C863.5 61.4999 877 66.2499 886.75 73.9999V88.2499C877 77.9999 864.5 72.9999 849.75 72.9999C820.25 72.9999 796.5 96.9999 796.5 127.25C796.5 157.5 820.25 181.5 849.75 181.5ZM923.192 -0.000151677H935.692V190H923.192V-0.000151677ZM1036.75 193C1001.25 193 972 163.5 972 127.25C972 90.9999 1001.25 61.4999 1036.75 61.4999C1072.25 61.4999 1101.5 90.9999 1101.5 127.25C1101.5 163.5 1072.25 193 1036.75 193ZM1036.75 72.7499C1007.75 72.7499 984.5 96.9999 984.5 127.25C984.5 157.5 1007.75 181.75 1036.75 181.75C1065.75 181.75 1089 157.5 1089 127.25C1089 96.9999 1065.75 72.7499 1036.75 72.7499ZM1223.54 140.75V64.4999H1236.04V190H1223.54V167.25C1217.29 182 1201.54 193 1182.29 193C1152.29 193 1136.79 170.25 1136.79 143.5V64.4999H1149.29V141C1149.29 163.75 1161.04 181.5 1186.04 181.5C1208.54 181.5 1223.54 163.5 1223.54 140.75ZM1336.28 61.4999C1359.53 61.4999 1381.78 76.7499 1389.28 96.9999V-0.000151677H1401.78V190H1389.28V157.5C1381.78 177.75 1359.53 193 1336.28 193C1299.78 193 1272.53 163.25 1272.53 127.25C1272.53 91.2499 1299.78 61.4999 1336.28 61.4999ZM1337.53 72.7499C1308.53 72.7499 1285.03 97.2499 1285.03 127.25C1285.03 157.25 1308.53 181.75 1337.53 181.75C1366.28 181.75 1389.78 157.25 1389.78 127.25C1389.78 97.2499 1366.28 72.7499 1337.53 72.7499Z"
+        fill={darkMode ? 'white' : 'black'}
+      />
+      <path
+        d="M199.039 190.012H166.045V61.9219H199.039V76.9329C205.789 66.6754 219.038 58.9238 235.287 58.9238C264.782 58.9238 282.031 79.1846 282.031 107.706V190.012H249.037V116.458C249.037 101.451 240.537 88.6915 224.038 88.6915C208.289 88.6915 199.039 101.451 199.039 116.712V190.012Z"
+        fill={darkMode ? 'white' : 'black'}
+      />
+      <path
+        d="M349.028 125.965C349.028 147.981 364.777 164.744 385.276 164.744C405.525 164.744 421.52 147.981 421.52 125.965C421.52 103.949 405.525 87.4409 385.276 87.4409C364.777 87.4409 349.028 103.949 349.028 125.965ZM454.018 125.965C454.018 163.993 427.024 193.01 391.775 193.01C372.776 193.01 357.027 183.253 350.028 171.999V242.547H317.029V61.9221H350.028V79.9312C357.027 68.6771 372.776 58.9199 391.775 58.9199C427.024 58.9199 454.018 88.1873 454.018 125.965Z"
+        fill={darkMode ? 'white' : 'black'}
+      />
+      <path
+        d="M562.513 61.9224H595.511V190.012H562.513V175.001C555.763 185.259 542.514 193.01 526.269 193.01C496.77 193.01 480.021 172.75 480.021 144.479V61.9224H513.015V135.973C513.015 151.234 521.015 163.743 537.514 163.743C553.263 163.743 562.513 150.984 562.513 135.973V61.9224Z"
+        fill={darkMode ? 'white' : 'black'}
+      />
+      <path
+        d="M689.751 164.489C697 164.489 703.5 162.238 709 157.738V187.006C702.504 190.759 692.755 193.01 683.251 193.01C657.256 193.01 638.007 177.753 638.007 148.477V88.1873H617.009V61.918H638.007V32.1503L671.006 21.6426V61.918H705.254V88.1873H671.006V144.975C671.006 157.738 678.005 164.489 689.751 164.489Z"
+        fill={darkMode ? 'white' : 'black'}
+      />
+      <path
+        d="M73.8961 61.9224L36.9481 125.965L0 61.9224H73.8961Z"
+        fill={darkMode ? 'white' : 'black'}
+      />
+      <path
+        d="M147.788 61.9224L110.84 125.965L73.8918 61.9224H147.788Z"
+        fill={darkMode ? 'white' : 'black'}
+      />
+      <path
+        d="M110.84 125.965L73.8917 190.008L36.9478 125.965H110.84Z"
+        fill={darkMode ? 'white' : 'black'}
+      />
+      <path
+        d="M73.8961 190.012L36.9481 254.055L0 190.012H73.8961Z"
+        fill={darkMode ? '#00D7A0' : 'black'}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_138_97">
+        <rect width="1402" height="254" fill={darkMode ? 'white' : 'black'} />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+export default CloudLogo