Styles cleanup

brave · Oct 14, 2024 · f16aad2 · f16aad2
1 parent e2fd16d
commit f16aad2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 62 deletions.
diff --git a/components/ai_chat/resources/page/components/conversation_skeleton/index.tsx b/components/ai_chat/resources/page/components/conversation_skeleton/index.tsx
@@ -6,35 +6,42 @@
 import * as React from 'react'
 import styles from './style.module.scss'
 
+const w50 = { width: 50 }
+const w80 = { width: 80 }
+const w300 = { width: 300 }
+const w400 = { width: 400 }
+const w450 = { width: 450 }
+const w500 = { width: 500 }
+
 export default function ConversationSkeleton() {
   return (
     <div className={styles.skeleton}>
       <div className={styles.turn}>
         <div
           className={styles.line}
-          style={{ width: 50 }}
+          style={w50}
         />
         <div
           className={styles.line}
-          style={{ width: 300 }}
+          style={w300}
         />
       </div>
       <div className={styles.turn}>
         <div
           className={styles.line}
-          style={{ width: 80 }}
+          style={w80}
         />
         <div
           className={styles.line}
-          style={{ width: 500 }}
+          style={w500}
         />
         <div
           className={styles.line}
-          style={{ width: 450 }}
+          style={w450}
         />
         <div
           className={styles.line}
-          style={{ width: 400 }}
+          style={w400}
         />
       </div>
     </div>

diff --git a/components/ai_chat/resources/page/components/conversation_skeleton/style.module.scss b/components/ai_chat/resources/page/components/conversation_skeleton/style.module.scss
@@ -3,62 +3,6 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this file,
 // you can obtain one at https://mozilla.org/MPL/2.0/.
 
-.fullscreen {
-  display: flex;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  position: relative;
-  background: var(--leo-color-page-background);
-}
-
-.content {
-  border-radius: var(--leo-radius-xl) 0 0 var(--leo-radius-xl);
-  flex: 1 1 0%;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  background: white;
-  margin: 6px;
-
-  @media (max-width: 650px) {
-    border-radius: 0;
-    margin: 0;
-  }
-}
-
-.aside {
-  width: 340px;
-  height: 100%;
-  overflow: hidden;
-
-  @media (max-width: 650px) {
-    display: none;
-  }
-}
-
-.asideBody {
-  position: relative;
-}
-
-.controls {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  top: 0;
-  left: 0;
-  z-index: 2;
-  height: 60px;
-  padding-left: 16px;
-
-  @media (max-width: 650px) {
-    display: none;
-  }
-}
-
 .skeleton {
   display: flex;
   flex-direction: column;