IR-3462: Cosmetic enhancements (#10787)

* chore: cosmetic enhancements * Updated submit to publish for clarity * Updated typo * Fixed typography * Make `Figtree` default font * Removed places where figtree was set explicitly * Reverted * Fixed alignment * Fixed radio size --------- Co-authored-by: hanzlamateen <hanzlamateen@live.com> Co-authored-by: Appaji <appaji12368@gmail.com>
EtherealEngine · Aug 1, 2024 · 04221a6 · 04221a6
1 parent 9d3ed9b
commit 04221a6
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 34 deletions.
diff --git a/packages/client-core/src/admin/components/locations/AddEditLocationModal.tsx b/packages/client-core/src/admin/components/locations/AddEditLocationModal.tsx
@@ -67,8 +67,9 @@ export default function AddEditLocationModal(props: { location?: LocationType; s
 
   const sceneModified = EditorState.useIsModified()
 
-  const submitLoading = useHookstate(false)
-  const isLoading = submitLoading.value || locationQuery.status === 'pending'
+  const publishLoading = useHookstate(false)
+  const unPublishLoading = useHookstate(false)
+  const isLoading = locationQuery.status === 'pending' || publishLoading.value || unPublishLoading.value
   const errors = useHookstate(getDefaultErrors())
 
   const name = useHookstate(location?.name || '')
@@ -100,7 +101,7 @@ export default function AddEditLocationModal(props: { location?: LocationType; s
     }
   })
 
-  const handleSubmit = async () => {
+  const handlePublish = async () => {
     errors.set(getDefaultErrors())
 
     if (!name.value) {
@@ -116,7 +117,7 @@ export default function AddEditLocationModal(props: { location?: LocationType; s
       return
     }
 
-    submitLoading.set(true)
+    publishLoading.set(true)
 
     if (sceneModified) {
       try {
@@ -127,7 +128,7 @@ export default function AddEditLocationModal(props: { location?: LocationType; s
         await saveSceneGLTF(sceneAssetID, projectName, sceneName, abortController.signal)
       } catch (e) {
         errors.serverError.set(e.message)
-        submitLoading.set(false)
+        publishLoading.set(false)
         return
       }
     }
@@ -163,20 +164,20 @@ export default function AddEditLocationModal(props: { location?: LocationType; s
     } catch (err) {
       errors.serverError.set(err.message)
     }
-    submitLoading.set(false)
+    publishLoading.set(false)
   }
 
-  const unpublishLocation = async () => {
+  const unPublishLocation = async () => {
     if (location?.id) {
-      submitLoading.set(true)
+      unPublishLoading.set(true)
       try {
         await locationMutation.remove(location.id, { query: { projectId: location.projectId } })
         locationID.set(null)
         await locationQuery.refetch()
       } catch (err) {
         errors.serverError.set(err.message)
       }
-      submitLoading.set(false)
+      unPublishLoading.set(false)
     }
   }
 
@@ -288,17 +289,17 @@ export default function AddEditLocationModal(props: { location?: LocationType; s
             {location?.id && (
               <Button
                 className="bg-[#162546]"
-                endIcon={isLoading ? <LoadingView spinnerOnly className="h-6 w-6" /> : undefined}
+                endIcon={unPublishLoading.value ? <LoadingView spinnerOnly className="h-6 w-6" /> : undefined}
                 disabled={isLoading}
-                onClick={unpublishLocation}
+                onClick={unPublishLocation}
               >
                 {t('editor:toolbar.publishLocation.unpublish')}
               </Button>
             )}
             <Button
-              endIcon={isLoading ? <LoadingView spinnerOnly className="h-6 w-6" /> : undefined}
+              endIcon={publishLoading.value ? <LoadingView spinnerOnly className="h-6 w-6" /> : undefined}
               disabled={isLoading}
-              onClick={handleSubmit}
+              onClick={handlePublish}
             >
               {location?.id
                 ? t('common:components.update')

diff --git a/packages/client/src/themes/base.css b/packages/client/src/themes/base.css
@@ -1 +1,5 @@
-@import "tailwindcss/base";
+@import 'tailwindcss/base';
+
+* {
+  font-family: Figtree, sans-serif;
+}
diff --git a/packages/editor/src/components/properties/GLTFTransformProperties.tsx b/packages/editor/src/components/properties/GLTFTransformProperties.tsx
@@ -154,11 +154,7 @@ export default function GLTFTransformProperties({
               </Text>
             </div>
             <div className="col-span-3 flex flex-col justify-around gap-y-2">
-              <Input
-                value={`${itemCount} Items`}
-                disabled={true}
-                className="px-2 py-0.5 font-['Figtree'] text-sm text-theme-input"
-              />
+              <Input value={`${itemCount} Items`} disabled={true} className="px-2 py-0.5 text-sm text-theme-input" />
             </div>
           </div>
         )}

diff --git a/packages/ui/src/components/editor/panels/Properties/elementList/index.tsx b/packages/ui/src/components/editor/panels/Properties/elementList/index.tsx
@@ -238,7 +238,7 @@ export function ElementList({ type, onSelect }: { type: ElementsType; onSelect:
   }
 
   return (
-    <div className="rounded-xl bg-theme-primary p-4 font-['Figtree']">
+    <div className="rounded-xl bg-theme-primary p-4">
       <div className="h-auto w-full overflow-x-hidden overflow-y-scroll  p-2">
         <Text className="mb-1.5 w-full text-center uppercase text-white">{t(`editor:layout.assetGrid.${type}`)}</Text>
         <StringInput

diff --git a/packages/ui/src/primitives/tailwind/Radio/index.tsx b/packages/ui/src/primitives/tailwind/Radio/index.tsx
@@ -46,24 +46,22 @@ export const RadioRoot = ({
   const twClassname = twMerge('flex flex-col gap-2', className)
   return (
     <div className={twClassname}>
-      <div className="flex items-center">
+      <label
+        onClick={() => onChange({ target: { value } } as any)}
+        htmlFor={label}
+        className="flex cursor-pointer items-center text-sm font-medium text-theme-primary"
+      >
         <input
           type="radio"
           checked={selected}
           value={value}
           name={label}
           onChange={onChange}
           disabled={disabled}
-          className="shrink-0 rounded-full border-gray-200 text-blue-primary checked:border-blue-primary focus:ring-blue-primary disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:focus:ring-offset-gray-800"
+          className="mr-2 h-4 w-4 shrink-0 appearance-none rounded-full border border-[#212226] bg-[#141619] bg-clip-content checked:border-blue-primary checked:bg-blue-500 checked:p-[2px] indeterminate:hover:border-[#9CA0AA]  focus:ring-blue-primary disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:focus:ring-offset-gray-800"
         />
-        <label
-          onClick={() => onChange({ target: { value } } as any)}
-          htmlFor={label}
-          className="ml-2 cursor-pointer align-bottom text-sm font-medium text-theme-primary"
-        >
-          {label}
-        </label>
-      </div>
+        {label}
+      </label>
       {description && <div className="ml-5 text-sm text-theme-primary">{description}</div>}
     </div>
   )

diff --git a/packages/ui/src/primitives/tailwind/Select/index.tsx b/packages/ui/src/primitives/tailwind/Select/index.tsx
@@ -147,7 +147,7 @@ const Select = <T extends OptionValueType>({
         endComponent={
           <MdOutlineKeyboardArrowDown
             size="1.5em"
-            className={`transition-transform ${showOptions.value ? 'rotate-180' : ''}`}
+            className={`mr-2 transition-transform ${showOptions.value ? 'rotate-180' : ''}`}
             onClick={toggleDropdown}
           />
         }

diff --git a/packages/ui/src/primitives/tailwind/Text/index.tsx b/packages/ui/src/primitives/tailwind/Text/index.tsx
@@ -38,7 +38,6 @@ const componentTypes = {
 }
 
 export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
-  fontFamily?: 'Figtree' | string
   fontSize?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl'
   fontWeight?: 'light' | 'normal' | 'semibold' | 'medium' | 'bold'
   component?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'
@@ -47,7 +46,6 @@ export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 
 const Text = ({
-  fontFamily = 'Figtree',
   fontSize = 'base',
   fontWeight = 'normal',
   className,
@@ -60,7 +58,7 @@ const Text = ({
 
   const twClassName = twMerge(
     'inline-block leading-normal',
-    `font-${fontWeight} font-['${fontFamily}'] text-${fontSize} text-theme-${theme}`,
+    `font-${fontWeight} text-${fontSize} text-theme-${theme}`,
     className
   )