From 6824830cef5a66575d4a39568c36922f6475a2d7 Mon Sep 17 00:00:00 2001
From: BrianW25 <brian.whitney@alleninstitute.org>
Date: Wed, 15 May 2024 13:06:04 -0700
Subject: [PATCH 1/2] feature/style-adjustments

---
 .../core/components/FileDetails/FileDetails.module.css |  8 +++++---
 .../GlobalActionButtonRow.module.css                   |  9 ++++++++-
 .../core/components/GlobalActionButtonRow/index.tsx    |  3 ++-
 .../components/QuerySidebar/QuerySidebar.module.css    | 10 +++++-----
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/core/components/FileDetails/FileDetails.module.css b/packages/core/components/FileDetails/FileDetails.module.css
index 9a06c4875..94bb64778 100644
--- a/packages/core/components/FileDetails/FileDetails.module.css
+++ b/packages/core/components/FileDetails/FileDetails.module.css
@@ -2,8 +2,9 @@
     --window-buttons-height: var(--url-bar-height); /* defined in App.module.css under .root{} */
     --pagination-height: var(--url-bar-height); /* defined in App.module.css under .root{} */
     --padding: 10px;
-    --resize-handle-width: 5px;
-}
+    --resize-handle-width: 10px;
+    --max-detail-button-width: 250px;
+} 
 
 .expandable {
     position: absolute;
@@ -158,8 +159,9 @@
     border: none;
     color: var(--primary-text-color);
     height: 30px;
-    max-width: 50%;
+    max-width: var(--max-detail-button-width);
     width: 100%;
+    border-radius: 4px;
 }
 
 .file-name {
diff --git a/packages/core/components/GlobalActionButtonRow/GlobalActionButtonRow.module.css b/packages/core/components/GlobalActionButtonRow/GlobalActionButtonRow.module.css
index 69b69f075..f9a4d60e0 100644
--- a/packages/core/components/GlobalActionButtonRow/GlobalActionButtonRow.module.css
+++ b/packages/core/components/GlobalActionButtonRow/GlobalActionButtonRow.module.css
@@ -12,6 +12,8 @@
     background-color: var(--primary-background-color);
     color: var(--primary-text-color);
     height: 32px;
+    margin: 0 1px;
+    border-radius: 4px;
 }
 
 .icon-button:hover:not(.disabled), .icon-button:hover:not(.disabled) i {
@@ -21,5 +23,10 @@
 
 .disabled {
     cursor: default;
-    opacity: 0.3
+    background-color: var(--highlight-background-color);
+    color: var(--highlight-text-color);
 }
+
+.smallFont {
+    font-size: x-small;
+}
\ No newline at end of file
diff --git a/packages/core/components/GlobalActionButtonRow/index.tsx b/packages/core/components/GlobalActionButtonRow/index.tsx
index 3a43d685b..8e9cb60e5 100644
--- a/packages/core/components/GlobalActionButtonRow/index.tsx
+++ b/packages/core/components/GlobalActionButtonRow/index.tsx
@@ -86,12 +86,13 @@ export default function GlobalActionButtonRow(props: Props) {
                 <ActionButton
                     className={classNames(styles.iconButton, {
                         [styles.disabled]: shouldDisplaySmallFont,
+                        [styles.smallFont]: true,
                     })}
                     disabled={shouldDisplaySmallFont}
                     onClick={() =>
                         dispatch(selection.actions.adjustGlobalFontSize(!shouldDisplaySmallFont))
                     }
-                    text="a"
+                    text="A"
                 />
                 <ActionButton
                     className={classNames(styles.iconButton, {
diff --git a/packages/core/components/QuerySidebar/QuerySidebar.module.css b/packages/core/components/QuerySidebar/QuerySidebar.module.css
index 4bdfd88a4..df4b2ec73 100644
--- a/packages/core/components/QuerySidebar/QuerySidebar.module.css
+++ b/packages/core/components/QuerySidebar/QuerySidebar.module.css
@@ -52,7 +52,7 @@
 
     background-color: var(--secondary-sidebar-color);
     color: var(--primary-sidebar-text-color);
-    padding: 0.5em;
+    padding: 1em;
 }
 
 .minimized-container {
@@ -64,7 +64,7 @@
 }
 
 .minimized-container:hover {
-    box-shadow: 5px 0 5px -2px var(--secondary-sidebar-color)
+    box-shadow: 5px 0 5px -2px var(--highlight-background-color)
 }
 
 .minimized-container > p {
@@ -101,15 +101,15 @@
     align-items: center;
     background-color: var(--secondary-sidebar-color);
     bottom: -5px;
-    color: var(--primary-sidebar-color);
+    color: var(--highlight-background-color);
     cursor: pointer;
     display: flex;
     flex-direction: column;
     height: 100%;
     justify-content: space-around;
-    left: min(calc(0.3 * 80% - 6px), var(--query-sidebar-max-width));
+    left: min(calc(0.3 * 80% - 1em), calc(var(--query-sidebar-max-width ) - 1em));
     position: absolute;
-    width: 9px;
+    width: 1em;
 }
 
 .minimize-bar:hover {

From 43cb537ff521b7f5d90dbb268ae3525878022f9e Mon Sep 17 00:00:00 2001
From: BrianW25 <brian.whitney@alleninstitute.org>
Date: Tue, 21 May 2024 12:30:24 -0700
Subject: [PATCH 2/2] resolve comments

---
 packages/core/App.module.css                                  | 1 +
 packages/core/components/FileDetails/FileDetails.module.css   | 1 +
 packages/core/components/QuerySidebar/QuerySidebar.module.css | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/core/App.module.css b/packages/core/App.module.css
index bb6faaefe..ce4150da1 100644
--- a/packages/core/App.module.css
+++ b/packages/core/App.module.css
@@ -62,6 +62,7 @@
     height: 100%;
     width: 30%;
     max-width: var(--query-sidebar-max-width);
+    position: relative;
 }
 
 .center {
diff --git a/packages/core/components/FileDetails/FileDetails.module.css b/packages/core/components/FileDetails/FileDetails.module.css
index 94bb64778..6457da7dd 100644
--- a/packages/core/components/FileDetails/FileDetails.module.css
+++ b/packages/core/components/FileDetails/FileDetails.module.css
@@ -162,6 +162,7 @@
     max-width: var(--max-detail-button-width);
     width: 100%;
     border-radius: 4px;
+    justify-content: center;
 }
 
 .file-name {
diff --git a/packages/core/components/QuerySidebar/QuerySidebar.module.css b/packages/core/components/QuerySidebar/QuerySidebar.module.css
index df4b2ec73..a3eaf6613 100644
--- a/packages/core/components/QuerySidebar/QuerySidebar.module.css
+++ b/packages/core/components/QuerySidebar/QuerySidebar.module.css
@@ -107,7 +107,7 @@
     flex-direction: column;
     height: 100%;
     justify-content: space-around;
-    left: min(calc(0.3 * 80% - 1em), calc(var(--query-sidebar-max-width ) - 1em));
+    right: 0;
     position: absolute;
     width: 1em;
 }