Css tweaks and icon change for sidebar (#26450)

* Css tweaks and icon change for sidebar * Fix to the icon not showing Need to replace these icons with the correct ones, but at least it's showing it now * Add new icons for collapse/expand sidebar * Css tweaks and icon change for sidebar * Add new icons for collapse/expand sidebar * Css tweaks and icon change for sidebar * Fix to the icon not showing Need to replace these icons with the correct ones, but at least it's showing it now * Add new icons for collapse/expand sidebar * Css tweaks and icon change for sidebar * Add new icons for collapse/expand sidebar * revert change to package.json * indent suggestion
brave · Nov 13, 2024 · 2d8094b · 2d8094b
1 parent 6468d73
commit 2d8094b
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 12 deletions.
diff --git a/components/ai_chat/resources/page/components/conversations_list/style.module.scss b/components/ai_chat/resources/page/components/conversations_list/style.module.scss
@@ -16,6 +16,9 @@
     padding: 0;
     margin: 0;
   }
+  li {
+    margin-bottom: var(--leo-spacing-s);
+  }
 }
 
 .navItem {
@@ -24,14 +27,17 @@
   padding: var(--leo-spacing-l) var(--leo-spacing-xl);
   border-radius: 8px;
   position: relative;
+  transition: all 0.2s ease-out allow-discrete;
 
   &:hover {
-    background: var(--leo-color-container-background);
+    background: var(--leo-color-container-highlight);
+    box-shadow: var(--leo-effect-elevation-01);
   }
 }
 
 .navItemActive {
   background: var(--leo-color-container-background);
+  transition: all 0.2s ease-out allow-discrete;
 }
 
 .optionsMenu {
@@ -42,7 +48,7 @@
 
 .optionsButton {
   --leo-icon-size: 20px;
-  color: var(--leo-color-icon-interactive);
+  color: var(--leo-color-icon-default);
   position: absolute;
   top: 50%;
   transform: translateY(-50%);

diff --git a/components/ai_chat/resources/page/components/full_page/index.tsx b/components/ai_chat/resources/page/components/full_page/index.tsx
@@ -90,13 +90,13 @@ export default function FullScreen() {
     <div className={styles.fullscreen}>
       <div className={styles.left}>
         <div className={styles.controls}>
-          <Button
-            fab
-            kind='plain-faint'
-            onClick={toggleAside}
-          >
-            <Icon name='window-tabs-vertical-expanded' />
-          </Button>
+              <Button
+              fab
+              kind='plain-faint'
+              onClick={toggleAside}
+              >
+              <Icon name={asideAnimationRef.current?.playbackRate === 1 ? 'sidenav-expand' : 'sidenav-collapse'} />
+              </Button>
           {!isNavigationRendered && (
             <>
               <Button

diff --git a/components/ai_chat/resources/page/components/full_page/style.module.scss b/components/ai_chat/resources/page/components/full_page/style.module.scss
@@ -15,7 +15,7 @@
 }
 
 .content {
-  border-radius: var(--leo-radius-xl) 0 0 var(--leo-radius-xl);
+  border-radius: var(--leo-radius-xl) var(--leo-radius-m) var(--leo-radius-m) var(--leo-radius-xl);
   flex: 1 1 0%;
   overflow: hidden;
   display: flex;

diff --git a/components/ai_chat/resources/page/components/input_box/style.module.scss b/components/ai_chat/resources/page/components/input_box/style.module.scss
@@ -5,12 +5,12 @@
 
 .form {
   border-radius: var(--leo-radius-m);
-  border: 1px solid var(--leo-color-divider-strong);
+  border: 1px solid var(--leo-color-divider-subtle);
   width: 100%;
   font: var(--leo-font-default-regular);
   color: var(--leo-color-text-primary);
   position: relative;
-  box-shadow: var(--leo-effect-elevation-01);
+  transition: all 0.2s ease-in-out;
 
   &:has(textarea:disabled) {
     border-color: var(--leo-color-divider-subtle);
@@ -21,6 +21,9 @@
     }
   }
 }
+.form:hover, .form:focus-visible{
+  box-shadow: var(--leo-effect-elevation-01);
+}
 
 .growWrap {
   display: grid;

diff --git a/ui/webui/resources/BUILD.gn b/ui/webui/resources/BUILD.gn
@@ -361,6 +361,8 @@ leo_icons = [
   "shuffle-on.svg",
   "shuffle-toggle-on.svg",
   "sidepanel-open.svg",
+  "sidenav-collapse.svg",
+  "sidenav-expand.svg",
   "smartphone-desktop-off.svg",
   "smartphone-desktop.svg",
   "smartphone-hand.svg",