Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updated navigation bar and tag list components to use css variables for colors #3018

Merged
merged 2 commits into from
Sep 29, 2021
Merged

Updated navigation bar and tag list components to use css variables for colors #3018

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2a6a4f6
Update navigation bar and items to use css variables for colors
sandymcfadden Sep 26, 2021
b883481
Update tag list component to use css variables for colors
sandymcfadden Sep 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 8 additions & 8 deletions lib/navigation-bar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,8 +95,8 @@ export class NavigationBar extends Component<Props> {
onDeactivate: this.handleFocusTrapDeactivate,
}}
>
<div className="navigation-bar theme-color-bg theme-color-fg theme-color-border">
<div className="navigation-bar__folders theme-color-border">
<div className="navigation-bar">
<div className="navigation-bar__folders">
<NavigationBarItem
icon={<NotesIcon />}
isSelected={this.isSelected({ selectedRow: 'all' })}
Expand All @@ -115,11 +115,11 @@ export class NavigationBar extends Component<Props> {
onClick={onSettings}
/>
</div>
<div className="navigation-bar__tags theme-color-border">
<div className="navigation-bar__tags">
{(tagCount && (
<>
<TagList />
<div className="navigation-bar__folders navigation-bar__untagged theme-color-border">
<div className="navigation-bar__folders navigation-bar__untagged">
<NavigationBarItem
icon={<UntaggedNotesIcon />}
isSelected={this.isSelected({ selectedRow: 'untagged' })}
Expand All @@ -131,15 +131,15 @@ export class NavigationBar extends Component<Props> {
)) ||
null}
</div>
<div className="navigation-bar__tools theme-color-border">
<div className="navigation-bar__tools">
<div className="navigation-bar__server-connection">
<ConnectionStatus />
</div>
</div>
<div className="navigation-bar__footer">
<button
type="button"
className="navigation-bar__footer-item theme-color-fg-dim"
className="navigation-bar__footer-item"
onClick={this.props.showKeyboardShortcuts}
>
Keyboard Shortcuts
Expand All @@ -148,14 +148,14 @@ export class NavigationBar extends Component<Props> {
<div className="navigation-bar__footer">
<button
type="button"
className="navigation-bar__footer-item theme-color-fg-dim"
className="navigation-bar__footer-item"
onClick={this.onHelpClicked}
>
Help &amp; Support
</button>
<button
type="button"
className="navigation-bar__footer-item theme-color-fg-dim"
className="navigation-bar__footer-item"
onClick={onAbout}
>
About
Expand Down
3 changes: 1 addition & 2 deletions lib/navigation-bar/item/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,10 @@ export const NavigationBarItem = ({
const classes = classNames('navigation-bar-item', {
'is-selected': isSelected,
});
const buttonClasses = classNames('button', 'theme-color-fg');

return (
<div className={classes}>
<button type="button" className={buttonClasses} onClick={onClick}>
<button type="button" className="button" onClick={onClick}>
<span className="navigation-bar-item__icon">{icon}</span>
{label}
</button>
Expand Down
15 changes: 2 additions & 13 deletions lib/navigation-bar/item/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@

.button {
border: 0;
border-top: 1px solid;
border-top: 1px solid var(--secondary-color);
border-radius: 0;
color: var(--primary-color);
font-size: 16px;
font-weight: 400;
height: 44px;
Expand Down Expand Up @@ -58,15 +59,3 @@
.navigation-bar-item.is-selected + .navigation-bar-item .button {
border-top: none;
}

body[data-theme='dark'] {
.navigation-bar-item {
&.is-selected button {
color: var(--primary-color);
}

&:hover:not(.is-selected) {
background: var(--secondary-color);
}
}
}
11 changes: 7 additions & 4 deletions lib/navigation-bar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.navigation-bar {
background-color: var(--background-color);
display: flex;
flex-direction: column;
position: absolute;
Expand All @@ -7,7 +8,7 @@
padding-top: $toolbar-height;
width: $navigation-bar-width;
height: 100%;
border-right: 1px solid;
border-right: 1px solid var(--secondary-color);
z-index: 2;
transition: transform 200ms ease-in-out;
}
Expand All @@ -16,7 +17,7 @@
display: flex;
flex: none;
flex-direction: column;
border-bottom: 1px solid;
border-bottom: 1px solid var(--secondary-color);
}

.navigation-bar__tags {
Expand All @@ -30,16 +31,17 @@
}

.navigation-bar__untagged {
border-top: 1px solid;
border-top: 1px solid var(--secondary-color);
}

.navigation-bar__tools {
flex: 1 0 auto;
padding: 10px 0;
border-top: 1px solid;
border-top: 1px solid var(--secondary-color);
}

.navigation-bar__footer {
color: var(--foreground-color);
display: flex;
flex: none;
justify-content: flex-start;
Expand All @@ -48,6 +50,7 @@
}

.navigation-bar__server-connection {
color: var(--foreground-color);
display: flex;
flex: none;
justify-content: flex-start;
Expand Down
17 changes: 6 additions & 11 deletions lib/tag-list/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,14 +58,9 @@ const SortableTag = SortableElement(
}) => (
<li
key={tagHash}
className={classNames(
`tag-list-item`,
`theme-color-border`,
`theme-color-fg`,
{
'is-selected': isSelected,
}
)}
className={classNames(`tag-list-item`, {
'is-selected': isSelected,
})}
data-tag-name={tag.name}
>
<TagListInput
Expand All @@ -80,7 +75,7 @@ const SortableTag = SortableElement(
</button>
)}
{editingActive && allowReordering && (
<button className="icon-button button-reorder theme-color-fg-dim">
<button className="icon-button button-reorder">
<TagHandle />
</button>
)}
Expand Down Expand Up @@ -163,8 +158,8 @@ export class TagList extends Component<Props> {

return (
<div className={classes}>
<div className="tag-list-title theme-color-border">
<h2 className="theme-color-fg">Tags</h2>
<div className="tag-list-title">
<h2>Tags</h2>
{sortedTags.length > 0 && (
<button
className="tag-list-edit-toggle button button-borderless"
Expand Down
2 changes: 1 addition & 1 deletion lib/tag-list/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export const TagListInput: FunctionComponent<Props> = ({
setTagName(tagName);
}
};
const classes = classNames('tag-list-input', 'theme-color-fg', {
const classes = classNames('tag-list-input', {
'is-selected': isSelected,
});

Expand Down
7 changes: 5 additions & 2 deletions lib/tag-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
}

.tag-list-item:not(:last-child) {
border-bottom: 1px solid;
border-bottom: 1px solid var(--secondary-color);
}

body .tag-list-item {
Expand All @@ -38,15 +38,17 @@ body .tag-list-item {
justify-content: space-between;
align-items: center;
padding: 0 17px 13px;
border-bottom: 1px solid;
border-bottom: 1px solid var(--secondary-color);

h2 {
color: var(--primary-color);
font-size: 16px;
font-weight: 400;
margin: 0;
}

button {
color: var(--accent-color);
font-size: 14px;
font-weight: 400;
padding: 0 2px 0;
Expand Down Expand Up @@ -80,6 +82,7 @@ body .tag-list-item {
}

.tag-list-input {
color: var(--primary-color);
flex: 1 1 auto;
display: block;
width: 50px;
Expand Down
1 change: 1 addition & 0 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ body[data-theme='dark'] {
--secondary-accent-color: #50575e; // $studio-gray-60
// highlight-color = $studio-simplenote-blue-50 with 40% opacity
--highlight-color: rgba(51, 97, 204, 0.4);
--secondary-highlight-color: #2c3338; // $studio-gray-80
--search-highlight-color: #3361cc; // $studio-simplenote-blue-50
--search-selection-color: #deb100; // $studio-yellow-30
--placeholder-color: #a7aaad; // $studio-gray-20
Expand Down