From 2d8094b9fce3f351cf3cb781ba7282b3d195f6df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Ruiz?= <aguscr182@gmail.com>
Date: Wed, 13 Nov 2024 10:44:23 -0300
Subject: [PATCH] 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
---
 .../conversations_list/style.module.scss           | 10 ++++++++--
 .../resources/page/components/full_page/index.tsx  | 14 +++++++-------
 .../page/components/full_page/style.module.scss    |  2 +-
 .../page/components/input_box/style.module.scss    |  7 +++++--
 ui/webui/resources/BUILD.gn                        |  2 ++
 5 files changed, 23 insertions(+), 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
index 25b187139bf1..b6aec0aa9d38 100644
--- 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
index 82131af52ade..08c8761917bb 100644
--- 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
index d32ef7e9c43d..552474411e1c 100644
--- 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
index d732cc98cba4..c3426bac46ab 100644
--- 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
index 44097a297152..f3a7b51bc393 100644
--- 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",