chore: cleanup and refactor class names

memori-ai · Nov 19, 2024 · 2c8eef1 · 2c8eef1
1 parent 3ce5ab9
commit 2c8eef1
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 34 deletions.
diff --git a/src/components/layouts/FullPage.tsx b/src/components/layouts/FullPage.tsx
@@ -21,14 +21,12 @@ const FullPageLayout: React.FC<LayoutProps> = ({
   loading = false,
   poweredBy,
 }) => {
-  const isChrome = navigator.userAgent.includes('Chrome');
-
   return (
     <>
     {integrationStyle}
     {integrationBackground}
 
-    <Spin className={`memori-full-body--container  ${isChrome ? 'memori-full-body--container--chrome' : 'memori-full-body--container--safari'}`} spinning={loading}>
+    <Spin className="memori-full-body--container" spinning={loading}>
       {showInstruct && ChangeMode && changeModeProps && (
         <ChangeMode {...changeModeProps} />
       )}
@@ -38,7 +36,7 @@ const FullPageLayout: React.FC<LayoutProps> = ({
       </div>
 
       <div className="memori--grid">
-        <div className="memori-full-body-layout--avatar-mobile memori--grid-column memori--grid-column-left">
+        <div className="memori-full-body-layout--avatar-column memori--grid-column memori--grid-column-left">
           {Avatar && avatarProps && <Avatar {...avatarProps} />}
 
           <div id="extension" />
@@ -51,7 +49,7 @@ const FullPageLayout: React.FC<LayoutProps> = ({
           ) : null}
         </div>
 
-        <div className="memori--powered-by-custom">{poweredBy}</div>
+        <div className="memori--powered-by-container">{poweredBy}</div>
       </div>
     </Spin>
   </>

diff --git a/src/components/layouts/ZoomedFullBody.tsx b/src/components/layouts/ZoomedFullBody.tsx
@@ -31,7 +31,7 @@ const ZoomedFullBodyLayout: React.FC<LayoutProps> = ({
       {integrationStyle}
       {integrationBackground}
 
-      <Spin className={`memori-full-body--container`} spinning={loading}>
+      <Spin className="memori-full-body--container" spinning={loading}>
         {showInstruct && ChangeMode && changeModeProps && (
           <ChangeMode {...changeModeProps} />
         )}
@@ -41,7 +41,7 @@ const ZoomedFullBodyLayout: React.FC<LayoutProps> = ({
         </div>
 
         <div className="memori--grid">
-          <div className="memori-full-body-layout--avatar-mobile memori--grid-column memori--grid-column-left ">
+          <div className="memori-full-body-layout--avatar-column memori--grid-column memori--grid-column-left ">
             {Avatar && avatarProps && (
               <Avatar chatProps={chatProps} isZoomed {...avatarProps} />
             )}

diff --git a/src/components/layouts/__snapshots__/FullPage.test.tsx.snap b/src/components/layouts/__snapshots__/FullPage.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`renders FullPage layout unchanged 1`] = `
       />
     </div>
     <div
-      class="memori-spin memori-full-body--container  memori-full-body--container--safari"
+      class="memori-spin memori-full-body--container"
     >
       <div
         class="memori-full-body--header"
@@ -129,7 +129,7 @@ exports[`renders FullPage layout unchanged 1`] = `
         class="memori--grid"
       >
         <div
-          class="memori-full-body-layout--avatar-mobile memori--grid-column memori--grid-column-left"
+          class="memori-full-body-layout--avatar-column memori--grid-column memori--grid-column-left"
         >
           <div
             class="memori--avatar-wrapper memori--avatar-readyplayerme"
@@ -394,7 +394,7 @@ exports[`renders FullPage layout unchanged 1`] = `
           </div>
         </div>
         <div
-          class="memori--powered-by-custom"
+          class="memori--powered-by-container"
         >
           <div
             class="memori--powered-by"

diff --git a/src/components/layouts/__snapshots__/ZoomedFullBody.test.tsx.snap b/src/components/layouts/__snapshots__/ZoomedFullBody.test.tsx.snap
@@ -129,7 +129,7 @@ exports[`renders ZOOMED_FULL_BODY layout unchanged 1`] = `
         class="memori--grid"
       >
         <div
-          class="memori-full-body-layout--avatar-mobile memori--grid-column memori--grid-column-left "
+          class="memori-full-body-layout--avatar-column memori--grid-column memori--grid-column-left "
         >
           <div
             class="memori--avatar-wrapper memori--avatar-readyplayerme"

diff --git a/src/components/layouts/layouts.css b/src/components/layouts/layouts.css
@@ -16,14 +16,14 @@
     }
 
 
-    .memori--powered-by-custom {
+    .memori--powered-by-container {
         top: 30px !important;
         bottom: auto;
         left: 30px;
     }
 
     /* Avatar */
-    .memori-full-body-layout--avatar-mobile {
+    .memori-full-body-layout--avatar-column {
         position: fixed;
         z-index: 0;
         top: 0;
@@ -35,7 +35,7 @@
         touch-action: pan-y pinch-zoom;
     }
 
-    .memori-full-body-layout--avatar-mobile .memori--avatar-wrapper > div  {
+    .memori-full-body-layout--avatar-column .memori--avatar-wrapper > div  {
         overflow: visible !important;
         width: auto !important;
         height: 80vh !important;
@@ -45,23 +45,23 @@
         will-change: transform;
     }
 
-    .memori-full-body-layout--avatar-mobile .memori--avatar-wrapper canvas {
+    .memori-full-body-layout--avatar-column .memori--avatar-wrapper canvas {
         width: auto !important;
         max-width: 100%;
         height: 100% !important;
         max-height: 100%;
         touch-action: none;
     }
 
-    .memori-full-body-layout--avatar-mobile .memori--avatar-wrapper > div canvas + div,
-    .memori-full-body-layout--avatar-mobile .memori--avatar-wrapper .avatar-loader {
+    .memori-full-body-layout--avatar-column .memori--avatar-wrapper > div canvas + div,
+    .memori-full-body-layout--avatar-column .memori--avatar-wrapper .avatar-loader {
         position: absolute !important;
         width: 100%;
         height: 100%;
         transform: none !important;
     }
 
-    .memori-full-body-layout--avatar-mobile .memori--avatar-wrapper .avatar-loader {
+    .memori-full-body-layout--avatar-column .memori--avatar-wrapper .avatar-loader {
         display: flex;
         align-items: center;
         justify-content: center;

diff --git a/src/components/layouts/zoomed-full-body.css b/src/components/layouts/zoomed-full-body.css
@@ -6,7 +6,7 @@
     touch-action: manipulation;
 }
 
-.memori--powered-by-custom {
+.memori--powered-by-container {
     position: absolute;
     z-index: 1000;
     bottom: 50px;

diff --git a/src/components/ui/Spin.css b/src/components/ui/Spin.css
@@ -33,19 +33,8 @@
 
 @media (max-width: 870px) {
 
-    .memori-spin--spinning {
-       top: 60% !important;
-       left: 110%;
-       font-size: 1rem;
-    }
-
-    .memori-spin--spinner {
-        margin: auto;
-        background: transparent ;
-    }
-
-    .memori-spin--spinner svg {
-       width: 20%;
-       height: 20%;
+   .memori-spin--spinner svg {
+       max-width: 3rem;
+       max-height: 3rem;
     }
 }
diff --git a/src/styles.css b/src/styles.css
@@ -55,8 +55,9 @@
 @import url('./components/layouts/chat.css');
 @import url('./components/layouts/zoomed-full-body.css');
 
-/* Default layout style */
+/* General layout styles */
 @import url('./components/layouts/layouts.css');
+
 @import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css');
 
 .sr-only {