Remove Styled Components (#8471)

* remove styled components * fix regression * migrate all but html and body styles * refactor and shift to css * remove styled-component * remove gobal text font for locations and admin * stats container and scrollbars * remove ref errors * scrollbars hidden for dock * for firefox and edge * final touches * comment out a and sentry error styles * element search fix * remove log and fix workflow errors * fixes for profile menu * fix regressions * improve array input group * improve numericimput group and scrubber * fix up editor nodes * add particle editor node values * stepper font * fix name font in location * fix font for instance chat * add back selection to global styles * fix avatar select menu * fix view panel logo size * fix admin panel header color * fix typo * fix admin panel buttons * fix admin avatar drawer image * remove avatar drawer button margin * fix client theme settings * fix, friends panel, world chat, instance chat * fix world chat width * fix volume slider regression * fix modal btm hover color * icon gap * fix chat padding and margin * fix project page styling * fix padding and margin * fix debug panel --------- Co-authored-by: SYBIOTE <54761979+SYBIOTE@users.noreply.github.com> Co-authored-by: sybiote <ghoshr698@gmail.com>
EtherealEngine · Oct 31, 2023 · a002407 · a002407
1 parent ed9a01d
commit a002407
Show file tree

Hide file tree

Showing 109 changed files with 724 additions and 1,174 deletions.
diff --git a/packages/client-core/i18n/en/editor.json b/packages/client-core/i18n/en/editor.json
@@ -209,6 +209,7 @@
       "lbl-exportOptions": "Export Options",
       "lbl-export": "Export Prefab",
       "lbl-load": "Load Into Scene",
+      "lbl-loadOptions": "Load Options",
       "lbl-unload": "Unload",
       "lbl-reload": "Reload"
     },
@@ -226,6 +227,8 @@
       "pausetitle": "Pause",
       "resettitle": "Reset",
       "lbl-controls": "controls",
+      "lbl-paused": "Paused",
+      "info-paused": "Toggle media playback",
       "info-controls": "Toggle the visibility of the media controls.",
       "lbl-autoplay": "Autoplay",
       "info-autoplay": "Toggle whether this video autoplays",
@@ -259,7 +262,10 @@
       "error-url": "Error Loading From URL"
     },
     "collider": {
+      "name": "Collider",
       "description": "An invisible box that objects will bounce off of or rest on top of.\nWithout colliders, objects will fall through floors and go through walls.",
+      "lbl-type": "Type",
+      "lbl-shape": "Shape",
       "lbl-isTrigger": "Trigger"
     },
     "camera": {
@@ -486,7 +492,14 @@
       "mesh": "Particle Mesh",
       "blending": "Blending",
       "transparent": "Transparent",
-      "world-space": "Use World Space"
+      "world-space": "Use World Space",
+      "burst": {
+        "time":"Burst Time",
+        "count":"Burst Count",
+        "cycle":"Burst Cycle",
+        "interval":"Burst Interval",
+        "probability":"Burst Probability"
+      }
     },
     "clouds": {
       "name": "Cloud",

diff --git a/packages/client-core/package.json b/packages/client-core/package.json
@@ -42,7 +42,6 @@
     "@mui/icons-material": "5.11.11",
     "@mui/lab": "5.0.0-alpha.94",
     "@mui/material": "5.11.13",
-    "@mui/styled-engine-sc": "5.11.11",
     "@mui/x-date-pickers": "6.9.2",
     "@vladmandic/face-api": "^1.7.9",
     "apexcharts": "^3.37.1",
@@ -75,7 +74,6 @@
     "react-router-dom": "6.9.0",
     "recovery": "^0.2.6",
     "save-as": "^0.1.8",
-    "styled-components": "5.3.9",
     "tick-tock": "^1.0.0",
     "typescript": "5.0.2",
     "util": "^0.12.5",
@@ -88,7 +86,6 @@
     "@types/node": "18.15.5",
     "@types/react": "18.0.28",
     "@types/react-router-dom": "5.3.3",
-    "@types/styled-components": "5.1.26",
     "@types/three": "0.157.0",
     "css-modules-require-hook": "4.2.3",
     "esbuild": "0.17.12",

diff --git a/packages/client-core/src/admin/components/Avatars/AvatarDrawer.tsx b/packages/client-core/src/admin/components/Avatars/AvatarDrawer.tsx
@@ -505,7 +505,7 @@ const AvatarDrawerContent = ({ open, mode, selectedAvatar, onClose }: Props) =>
           <Button
             className={styles.gradientButton}
             startIcon={<Icon type="Portrait" />}
-            sx={{ marginLeft: 1, width: '250px' }}
+            sx={{ width: '250px' }}
             title={t('admin:components.avatar.saveThumbnailTooltip')}
             disabled={!state.avatarFile.value || avatarLoading.value}
             onClick={handleGenerateFileThumbnail}
@@ -552,14 +552,21 @@ const AvatarDrawerContent = ({ open, mode, selectedAvatar, onClose }: Props) =>
 
       <Box
         className={styles.preview}
-        style={{ width: '100px', height: '100px', position: 'relative', marginBottom: 15 }}
+        style={{ display: 'flex', justifyContent: 'center', position: 'relative', marginBottom: 15 }}
       >
-        <img src={thumbnailSrc} crossOrigin="anonymous" />
+        <img
+          src={thumbnailSrc}
+          crossOrigin="anonymous"
+          style={{
+            height: 'auto',
+            maxWidth: '100%'
+          }}
+        />
         {((state.source.value === 'file' && !state.thumbnailFile.value) ||
           (state.source.value === 'url' && !state.thumbnailUrl.value)) && (
           <Typography
             sx={{
-              position: 'absolute',
+              position: 'relative',
               top: 0,
               display: 'flex',
               justifyContent: 'center',

diff --git a/packages/client-core/src/admin/components/Project/ProjectFields.tsx b/packages/client-core/src/admin/components/Project/ProjectFields.tsx
@@ -394,7 +394,9 @@ const ProjectFields = ({ inputProject, existingProject = false, changeDestinatio
               onBlur={handleChangeDestinationRepo}
             />
           ) : (
-            <div className={styles.textAlign}>{t('admin:components.project.needsGithubProvider')}</div>
+            <div className={classNames(styles.textAlign, styles.defaultFont)}>
+              {t('admin:components.project.needsGithubProvider')}
+            </div>
           )}
 
           {!projectUpdateStatus.value?.destinationProcessing &&
@@ -448,7 +450,9 @@ const ProjectFields = ({ inputProject, existingProject = false, changeDestinatio
                   </Tooltip>
                 </div>
               ) : (
-                <div className={styles.textAlign}>{t('admin:components.project.needsGithubProvider')}</div>
+                <div className={classNames(styles.textAlign, styles.defaultFont)}>
+                  {t('admin:components.project.needsGithubProvider')}
+                </div>
               )}
 
               {!processing &&
@@ -523,21 +527,22 @@ const ProjectFields = ({ inputProject, existingProject = false, changeDestinatio
             projectUpdateStatus.value?.selectedSHA.length > 0 &&
             projectUpdateStatus.value?.commitData.length > 0 &&
             !matchesEngineVersion && (
-              <div className={styles.projectMismatchWarning}>
+              <div className={classNames(styles.projectMismatchWarning)}>
                 <Icon type="WarningAmber" />
                 {t('admin:components.project.mismatchedProjectWarning')}
               </div>
             )}
 
           {projectUpdateStatus.value?.sourceVsDestinationError.length > 0 && (
-            <div className={styles.errorText}>{projectUpdateStatus.value?.sourceVsDestinationError}</div>
+            <div className={classNames(styles.errorText)}>{projectUpdateStatus.value?.sourceVsDestinationError}</div>
           )}
 
           <div
             className={classNames({
               [styles.validContainer]: true,
               [styles.valid]: projectUpdateStatus.value?.destinationValid,
-              [styles.invalid]: !projectUpdateStatus.value?.destinationValid
+              [styles.invalid]: !projectUpdateStatus.value?.destinationValid,
+              [styles.defaultFont]: true
             })}
           >
             {projectUpdateStatus.value?.destinationValid && <Icon type="CheckCircle" />}
@@ -550,7 +555,8 @@ const ProjectFields = ({ inputProject, existingProject = false, changeDestinatio
               className={classNames({
                 [styles.validContainer]: true,
                 [styles.valid]: projectUpdateStatus.value?.sourceValid,
-                [styles.invalid]: !projectUpdateStatus.value?.sourceValid
+                [styles.invalid]: !projectUpdateStatus.value?.sourceValid,
+                [styles.defaultFont]: true
               })}
             >
               {projectUpdateStatus.value?.sourceValid && <Icon type="CheckCircle" />}
@@ -564,7 +570,8 @@ const ProjectFields = ({ inputProject, existingProject = false, changeDestinatio
               className={classNames({
                 [styles.validContainer]: true,
                 [styles.valid]: projectUpdateStatus.value?.sourceProjectMatchesDestination,
-                [styles.invalid]: !projectUpdateStatus.value?.sourceProjectMatchesDestination
+                [styles.invalid]: !projectUpdateStatus.value?.sourceProjectMatchesDestination,
+                [styles.defaultFont]: true
               })}
             >
               {projectUpdateStatus.value?.sourceProjectMatchesDestination && <Icon type="CheckCircle" />}

diff --git a/packages/client-core/src/admin/components/Server/ServerLogs.tsx b/packages/client-core/src/admin/components/Server/ServerLogs.tsx
@@ -151,7 +151,7 @@ const ServerLogs = ({
   return (
     <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
       <Box sx={{ display: 'flex', alignItems: 'center', margin: '15px 0' }}>
-        <h5 style={{ fontSize: '18px' }}>
+        <h5 style={{ fontSize: '18px', fontWeight: 'normal' }}>
           {t('admin:components.server.logs')}: {podName.value!}
         </h5>
 
@@ -202,7 +202,7 @@ const ServerLogs = ({
         />
       </Box>
       <Box sx={{ overflow: 'auto' }}>
-        <pre style={{ fontSize: '14px' }}>{serverLogs}</pre>
+        <pre style={{ fontSize: '14px', fontFamily: 'var(--lato)' }}>{serverLogs}</pre>
         <pre ref={logsEndRef} />
       </Box>
     </Box>

diff --git a/packages/client-core/src/admin/components/Setting/ClientTheme/DemoStyle.tsx b/packages/client-core/src/admin/components/Setting/ClientTheme/DemoStyle.tsx
@@ -111,6 +111,7 @@ const DemoStyle = ({ theme }: DemoStyleProps) => {
         font-size: 16px;
         color: ${theme.textHeading};
         margin-bottom: 10px;
+        font-family: var(--lato);
       }
 
       .textSubheading {
@@ -121,11 +122,13 @@ const DemoStyle = ({ theme }: DemoStyleProps) => {
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
+        font-family: var(--lato);
       }
 
       .textDescription {
         font-size: 12px;
         color: ${theme.textDescription};
+        font-family: var(--lato);
       }
 
       .panelCardContainer {

diff --git a/packages/client-core/src/admin/styles/admin.module.scss b/packages/client-core/src/admin/styles/admin.module.scss
@@ -1,5 +1,12 @@
 @import "@etherealengine/client-core/src/styles/imports.module.scss";
 
+
+
+.defaultFont {
+  font-family: var(--lato);
+  font-size: 12px;
+}
+
 .openModalBtn {
   height: 50px;
   width: 100%;
@@ -9,6 +16,7 @@
 
   &:hover {
     opacity: 0.8;
+    background-color: var(--buttonFilled);
   }
 
   &:disabled {
@@ -69,6 +77,7 @@
 .gradientButton {
   background: linear-gradient(90deg, var(--buttonGradientStart), var(--buttonGradientEnd));
   color: var(--buttonTextColor) !important;
+  width:100%;
 
   &.forceVaporwave {
     background: linear-gradient(90deg, #5236ff, #c20560);
@@ -88,6 +97,7 @@
   background: transparent;
   border: solid 1px var(--buttonOutlined);
   color: var(--buttonTextColor) !important;
+  width:100%;
 
   &:hover {
     opacity: 0.7;
@@ -325,7 +335,9 @@
 }
 
 .textAlign {
+  display: flex;
   text-align: center;
+  justify-content: center;
 }
 
 .mb10px {
@@ -677,6 +689,8 @@
   text-align: center;
   display: flex;
   align-items: center;
+  font-family: var(--lato);
+  font-size: 12px;
 
   & > svg {
     font-size: 2.5em;
@@ -693,6 +707,8 @@
 
 .validContainer {
   display: flex;
+  text-align: center;
+  align-items: center;
 
   &.valid > svg {
     color: var(--green);
@@ -709,10 +725,14 @@
 
 .errorText {
   color: var(--red);
+  font-family: var(--lato);
+  font-size: 12px;
 }
 
 .projectVersion {
   color: var(--yellow);
+  font-family: var(--lato);
+  font-size: 12px;
 }
 
 .projectSelector {
@@ -820,11 +840,23 @@
   color: var(--textColor);
   text-align: center;
   margin-bottom: 10px;
-  font-weight: 300;
   font-size: 18px;
   display: flex;
+  font-family: var(--lato);
 
   a {
     margin-left: 2px;
   }
 }
+
+a {
+  color: var(--textColor);
+
+  &:hover{
+    color: var(--blueHover);
+  }
+
+  & :active {
+    color: var(--bluePressed);
+  }
+}
diff --git a/packages/client-core/src/admin/styles/settings.module.scss b/packages/client-core/src/admin/styles/settings.module.scss
@@ -229,11 +229,13 @@
 
   label:nth-child(1) {
     margin-right: 20px;
+    font-family: var(--lato);
   }
 
   label:nth-child(3) {
     margin-left: 10px;
     margin-right: 10px;
+    font-family: var(--lato);
   }
 }
 

diff --git a/packages/client-core/src/admin/styles/table.module.scss b/packages/client-core/src/admin/styles/table.module.scss
@@ -4,6 +4,7 @@
   flex-direction: column;
   flex-grow: 1;
   min-height: 0;
+
 }
 
 .tableCellHeader {
@@ -16,6 +17,7 @@
   }
 }
 
+
 .tableCellBody {
   border-bottom: 1px solid var(--mainBackground) !important;
   color: var(--textColor) !important;

diff --git a/packages/client-core/src/common/components/AutoComplete/index.tsx b/packages/client-core/src/common/components/AutoComplete/index.tsx
@@ -93,7 +93,7 @@ const AutoComplete = ({ data, label, disabled, onChange, value = [] }: Props) =>
             {value.map((option: AutoCompleteData, index: number) => (
               <Tag className={styles.tag} label={option.type} disabled={disabled} {...getTagProps({ index })} />
             ))}
-            <input disabled={disabled} {...getInputProps()} />
+            <input style={{ margin: 0 }} disabled={disabled} {...getInputProps()} />
           </div>
         </div>
         {groupedOptions.length > 0 && (

diff --git a/packages/client-core/src/common/components/AutoCompleteSingle/index.tsx b/packages/client-core/src/common/components/AutoCompleteSingle/index.tsx
@@ -102,6 +102,7 @@ const AutoComplete = ({ data, label, disabled, error, onChange, value = '', free
               </legend>
             </fieldset>
             <input
+              style={{ margin: 0 }}
               disabled={disabled}
               {...getInputProps()}
               onBlur={(event: any) => {

diff --git a/packages/client-core/src/common/components/Avatar/index.tsx b/packages/client-core/src/common/components/Avatar/index.tsx
@@ -107,7 +107,17 @@ const Avatar = ({
         className={`${commonStyles.preview} ${styles.avatarThumbnail} ${className}`}
         sx={{ width: `${size}px`, height: `${size}px`, ...sx }}
       >
-        <img alt={alt} src={imageSrc} crossOrigin="anonymous" width={`${size}px`} height={`${size}px`} />
+        <img
+          style={{
+            height: 'auto',
+            maxWidth: '100%'
+          }}
+          alt={alt}
+          src={imageSrc}
+          crossOrigin="anonymous"
+          width={`${size}px`}
+          height={`${size}px`}
+        />
         {!imageSrc && (
           <Text className={commonStyles.previewText} variant="body2">
             {t('admin:components.avatar.thumbnailPreview')}
@@ -123,7 +133,15 @@ const Avatar = ({
       id={id}
       sx={{ width: `${size}px`, height: `${size}px`, ...sx }}
     >
-      <img alt={alt} src={imageSrc} crossOrigin="anonymous" />
+      <img
+        style={{
+          height: '100%',
+          maxWidth: '100%'
+        }}
+        alt={alt}
+        src={imageSrc}
+        crossOrigin="anonymous"
+      />
       {showChangeButton && (
         <IconButton
           disableRipple