From 9f51f56217d34718dcffb30ef25c434ea1b9fd82 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Thu, 23 Mar 2017 08:41:29 -0400
Subject: [PATCH] Integrate styling feedback from @TheBrokenRail
---
src/components/gui/gui.css | 29 ++++++++++++++++++++++++++---
src/components/gui/gui.jsx | 6 +++---
2 files changed, 29 insertions(+), 6 deletions(-)
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index 43a0191b7..e2fe4db43 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -33,18 +33,41 @@
.tab-list {
height: $stage-menu-height;
+ width: 250px; /* Match width of the toolbox */
display: flex;
align-items: flex-end;
flex-shrink: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 0.85rem;
+ font-weight: 500;
+ font-size: 0.80rem;
/* Overrides for react-tabs styling */
- margin: 0 0 0 1rem !important;
+ margin: 0 !important;
border-bottom: 0 !important;
}
+.tab-list .tab {
+ flex-grow: 1;
+ height: 80%;
+ margin-left: 1px;
+
+ border-radius: $space $space 0 0;
+ border: none;
+
+ background-color: #F6F8FA;
+ color: #9AA1B5;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+
+.tab-list .tab[aria-selected="true"] {
+ color: #40B9F5;
+}
+
.tabs {
position: relative;
flex-grow: 1;
@@ -90,7 +113,7 @@
padding-right: $space;
/* Hides negative space between edge of rounded corners + container, when selected */
- user-select: none;
+ user-select: none;
}
.target-wrapper {
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index a131ad40a..0a7c2704d 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -50,9 +50,9 @@ const GUIComponent = props => {
onSelect={handleTabSelect}
>
<TabList className={styles.tabList}>
- <Tab>Scripts</Tab>
- <Tab>Costumes</Tab>
- <Tab>Sounds</Tab>
+ <Tab className={styles.tab}>Scripts</Tab>
+ <Tab className={styles.tab}>Costumes</Tab>
+ <Tab className={styles.tab}>Sounds</Tab>
</TabList>
<TabPanel className={styles.tabPanel}>
<Box className={styles.blocksWrapper}>
--
GitLab