Skip to content

Commit 0a70755

Browse files
AHyman18katesmatthews
authored andcommitted
Ah global themes (#39)
* Switches themes/active mode when chosen from select drop down menu * Switches between 6 themes * Ability to switch themes * Ability to switch between multiple application themes--comments and console.log removed
1 parent 3b70a89 commit 0a70755

21 files changed

+391
-162
lines changed

app/components/mainpanel/Tables.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,14 @@ const TableRow = styled.li<ITableRowProps>`
3535
display: flex;
3636
justify-content: space-between;
3737
list-style: none;
38-
background-color: ${({ affected }) => (affected ? '#00b5cc' : 'transparent')};
38+
background-color: ${ (props) => props.affected ? props.theme.tables.row : 'transparent'};
3939
border: none;
4040
padding: 5px;
4141
transition: 0.3s;
4242
4343
:hover {
4444
transform: scale(1.01);
45-
background-color: #e8ecf1;
45+
background-color: ${props=>props.theme.tables.highlight};
4646
cursor: ${({ inTheQuery }) =>
4747
inTheQuery
4848
? 'url(https://img.icons8.com/flat_round/20/000000/minus.png), auto'
@@ -62,6 +62,7 @@ const TableTitle = styled.p`
6262
padding: 5px;
6363
overflow-wrap: break-word;
6464
`;
65+
6566
interface IForeignKey {
6667
column_name?: string;
6768
constraint_name?: string;
@@ -133,14 +134,12 @@ const Tables: React.SFC<Props> = ({
133134
let rows = [];
134135

135136
for (let keys in columns) {
136-
const primaryKey: boolean =
137-
primarykey === columns[keys]['columnname'] ? true : false;
137+
const primaryKey: boolean = (primarykey === columns[keys]['columnname']) ? true : false;
138138
let affected = false;
139139
let foreignKey = false;
140140
let foreignkeyTable = '';
141141
let foreignkeyColumn = '';
142142
let inTheQuery = false;
143-
144143
if (Object.keys(selectedForQueryTables).includes(tableName)) {
145144
if (
146145
selectedForQueryTables[tableName].columns.includes(

app/components/omnibox/OmniBoxInput.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,10 @@ const OmniBoxInputText = styled.textarea`
2323

2424
const ExecuteQueryButton = styled.button`
2525
font-family: 'Poppins', sans-serif;
26-
border: none;
27-
background-color: #49cefe;
28-
color: white;
26+
border: ${props=>props.theme.executeButton.border};
27+
background-color: ${props=>props.theme.executeButton.baseColor};
28+
transition: 0.2s;
29+
color: ${props =>props.theme.executeButton.fontColor};
2930
text-align: center;
3031
padding: 5px;
3132
font-size: 80%;

app/components/sidepanels/FavoritesPanel.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ const PanelWrapper = styled.div`
88
height: 100vh;
99
display: flex;
1010
justify-content: center;
11-
background-color: ${props => props.theme.backgroundColor};
12-
color: ${props => props.theme.fontColor};
11+
background-color: ${props => props.theme.panel.baseColor};
12+
color: ${props => props.theme.panel.fontColor};
1313
`;
1414

1515
const FavoritesPanel = () => {

app/components/sidepanels/InfoPanel.tsx

Lines changed: 7 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@ interface ISidePanelTableWrapperProps {
77

88
const SidePanelTableListWrapper = styled.div<ISidePanelTableWrapperProps>`
99
color: black;
10-
padding: 20px;
10+
padding: 40px;
11+
width: ${({ sidePanelVisibility }) =>
12+
sidePanelVisibility ? '300px' : '0px'};
1113
height: 100vh;
12-
background-color: ${props => props.theme.backgroundColor};
14+
background-color: ${props => props.theme.panel.baseColor};
1315
color: ${props => props.theme.fontColor};
1416
transition: width 500ms ease-in-out;
1517
`;
@@ -19,34 +21,19 @@ const InfoSection = styled.div`
1921
`;
2022

2123
const Title = styled.h1`
22-
color: ${props => props.theme.fontColor};
24+
color: ${props => props.theme.panel.fontColor};
2325
`;
2426

2527
const Text = styled.p`
2628
font-size: 100%;
29+
color: ${props => props.theme.panel.fontColor};
2730
`;
2831

2932
const Label = styled.label`
3033
font-size: 80%;
34+
color: ${props => props.theme.panel.fontColor};
3135
`;
3236

33-
// interface IForeignKeys {
34-
// column_name?: string
35-
// constraint_name?: string
36-
// foreign_column_name?: string
37-
// foreign_table_name?: string
38-
// foreign_table_schema?: string
39-
// table_name?: string
40-
// table_schema?: string
41-
// }
42-
43-
// interface IColumns {
44-
// characterlength?: string
45-
// columnname?: string
46-
// datatype?: string
47-
// defaultvalue?: string
48-
// }
49-
5037
interface ISelectedTable {
5138
columns?: any[];
5239
foreignKeys?: any[];

app/components/sidepanels/SettingsPanel.tsx

Lines changed: 35 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { useReducer, useContext, useState } from 'react';
2+
import { useReducer, useContext, useState, useEffect } from 'react';
33
import { NavLink } from 'react-router-dom';
44
import styled from 'styled-components';
55
import { ipcRenderer } from 'electron';
@@ -15,8 +15,8 @@ const PanelWrapper = styled.div`
1515
padding: 20px;
1616
height: 100vh;
1717
padding: 40px;
18-
background-color: ${props => props.theme.backgroundColor};
19-
color: ${props => props.theme.fontColor};
18+
background-color: ${props => props.theme.panel.baseColor};
19+
color: ${props => props.theme.panel.fontColor};
2020
`;
2121

2222
const TopSection = styled.section`
@@ -33,18 +33,22 @@ const DivWrapper = styled.div`
3333
flex-direction: column;
3434
`;
3535
const Title = styled.h1`
36-
color: ${props => props.theme.fontColor};
36+
color: ${props => props.theme.panel.headerColor};
3737
font-size: 30px;
3838
`;
3939
const Label = styled.label`
40-
color: ${props => props.theme.fontColor};
40+
color: ${props => props.theme.panel.fontColor};
4141
padding: 10px 0;
4242
`;
43+
const SignOut = styled.span`
44+
color: ${props => props.theme.link.signOut};
45+
`;
4346

4447

4548
const SettingsPanel = ({ intervalId }) => {
4649
const [context, setContext] = useContext(Context);
4750
const [state, dispatch] = useReducer(themeReducer, context);
51+
const [activeMode, setActiveMode] = useState('default');
4852
const [toggle, setToggle] = useState(false);
4953
const contextText = context.light.toString();
5054

@@ -53,24 +57,34 @@ const SettingsPanel = ({ intervalId }) => {
5357
ipcRenderer.send('logout-to-main', 'userlogout');
5458
}
5559

60+
useEffect(() => {
61+
setContext(state);
62+
}, [state]);
63+
5664
return (
5765
<PanelWrapper>
5866
<TopSection>
5967
<Title>Settings</Title>
6068

6169
<DivWrapper>
6270
<Label>Theme</Label>
63-
<button
64-
onClick={() => {
65-
setToggle(!toggle);
66-
setContext(state);
67-
toggle
68-
? dispatch({ type: 'TOGGLE_DARK' })
69-
: dispatch({ type: 'TOGGLE_LIGHT' });
71+
<select
72+
name="modeList"
73+
onChange={e => {
74+
setActiveMode(e.target.value);
75+
dispatch({
76+
type: 'CHANGE_MODE',
77+
selected: e.target.value,
78+
payload: activeMode
79+
});
7080
}}
7181
>
72-
{contextText}
73-
</button>
82+
{context.map(modeObj => (
83+
<option key={modeObj.value} value={modeObj.value}>
84+
{modeObj.value}
85+
</option>
86+
))}
87+
</select>
7488
</DivWrapper>
7589
<DivWrapper>
7690
<Label>Font Size</Label>
@@ -82,14 +96,16 @@ const SettingsPanel = ({ intervalId }) => {
8296
</select>
8397
</DivWrapper>
8498
</TopSection>
85-
<BottomSection>
86-
<div style={state}>CHANGE ME HEY BLAHHSLAH</div>
87-
<NavLink onClick={logOut} to="/" activeStyle={{ color: 'black ' }}>
88-
Log Out
89-
</NavLink>
99+
<BottomSection>
100+
<NavLink onClick={logOut} to="/">
101+
<SignOut>
102+
SignOut
103+
</SignOut>
104+
</NavLink>
90105
</BottomSection>
91106
</PanelWrapper>
92107
);
93108
};
94109

95110
export default SettingsPanel;
111+

app/containers/HomePage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const CollapseBtn = styled.button<ICollapseBtnProps>`
4949
`;
5050

5151
const MainPanel = styled.div`
52-
background-color: #f2f1ef;
52+
background-color: ${props=>props.theme.main.baseColor};
5353
padding: 5px 20px;
5454
display: flex;
5555
flex-direction: column;

app/containers/SidePanel.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,8 @@ interface IIndTabProps {
1515
}
1616

1717
const PanelWrapper = styled.div<IPanelWrapperProps>`
18-
visibility: ${({ sidePanelVisibility }) =>
19-
sidePanelVisibility ? 'visible' : 'collapse'};
20-
width: 300px;
18+
width: ${({ sidePanelVisibility }) =>
19+
sidePanelVisibility ? '375px' : '0px'};
2120
display: flex;
2221
flex-direction: column;
2322
justify-content: flex-start;
@@ -34,9 +33,10 @@ const IndTab = styled.button<IIndTabProps>`
3433
font-family: 'Poppins', sans-serif;
3534
border: none;
3635
padding: 5px;
37-
background-color: ${props =>
38-
props.active === props.panel ? '#e8ecf1' : '#fdfdfe'}
39-
36+
37+
background-color: ${props => props.active ===props.panel? props.theme.tabs.baseColor :props.theme.panel.baseColorActive};
38+
color: ${props=>props.theme.tabs.fontColor};
39+
4040
:hover {
4141
font-weight: bold;
4242
}

app/containers/mainpanel/ResultsContainer.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,18 @@ interface IResultsNavButtonProps {
2626
border: none;
2727
border-bottom: ${({ activeDisplayInResultsTab, activetabname }) =>
2828
activeDisplayInResultsTab === activetabname
29-
? '3px solid #013243'
29+
? `3px solid ${props=>props.theme.tables.navButtonSelect}`
3030
: '3px solid transparent'};
3131
padding: 8px;
3232
transition: 0.3s;
3333
font-size: 80%;
34-
background-color: transparent;
34+
background-color: ${props=>props.theme.tables.navButtonBase};
35+
color: ${props=>props.theme.tables.navButtonFontColor}
3536
:focus {
3637
outline: none;
3738
}
3839
:hover {
39-
border-bottom: 3px solid black;
40+
border-bottom: 3px solid ${props=> props.theme.tables.navButtonHover};
4041
}
4142
`;
4243

@@ -53,7 +54,7 @@ const ResetQueryButton = styled.button`
5354
background-color: transparent;
5455
:hover{
5556
font-weight: bold;
56-
color: #ca333e;
57+
color: ${props=> props.theme.tables.resetButton};
5758
}
5859
:focus{
5960
outline: none;

app/containers/mainpanel/TablesContainer.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const ViewInfoButton = styled.button`
2626
transform: 0.3s;
2727
2828
:hover {
29-
color: #013243;
29+
color: ${props=> props.theme.tables.infoButton};
3030
font-weight: bold;
3131
}
3232
:focus {
@@ -60,14 +60,14 @@ interface IPinButtonProps {
6060

6161
const PinBtn = styled.button<IPinButtonProps>`
6262
border: none;
63-
background-color: ${props => (props.pinned ? 'rgb(93, 0, 250)' : 'white')};
64-
color: ${props => (props.pinned ? 'white' : 'black')};
63+
background-color: ${props => (props.pinned ? props.theme.tables.pinnedButton : 'white')};
64+
color: ${props => (props.pinned ? props.theme.tables.pinnedButtonFontColor : 'black')};
6565
padding: 5px;
6666
border-radius: 3px;
6767
6868
:hover {
6969
font-weight: bold;
70-
color: #00b5cc;
70+
color: ${props=>props.theme.tables.pinnedHover};
7171
}
7272
:focus {
7373
outline: none;

0 commit comments

Comments
 (0)