Merge pull request #103 from AllenInstitute/feature/style-adjustments

feature/style-adjustments
AllenInstitute · May 21, 2024 · 5e02088 · 5e02088
2 parents 7fcfac9 + c0ac500
commit 5e02088
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 9 deletions.
diff --git 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
@@ -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,10 @@
     border: none;
     color: var(--primary-text-color);
     height: 30px;
-    max-width: 50%;
+    max-width: var(--max-detail-button-width);
     width: 100%;
+    border-radius: 4px;
+    justify-content: center;
 }
 
 .file-name {

diff --git 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;
+}
diff --git 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
@@ -57,6 +57,7 @@
     background-color: var(--secondary-sidebar-color);
     color: var(--primary-sidebar-text-color);
     padding: 0.0.5em 0 0.5em 0.5em;
+
 }
 
 .minimized-container {
@@ -68,7 +69,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 {
@@ -105,15 +106,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));
+    right: 0;
     position: absolute;
-    width: 9px;
+    width: 1em;
 }
 
 .minimize-bar:hover {